Tag Archiv: php

15 Interesting JavaScript and CSS Libraries for February 2017

interesting-libraries-february-2017

Our mission at Tutorialzine is to keep you up to date with the latest and coolest trends in web development. That’s why every month we release a handpicked collection of some of the best resources that we’ve stumbled upon and deemed worthy of your attention.


LocalForage

LocalForage

Wrapper for indexedDB and WebSQL that improves the ability of web apps to store data locally for offline use. Writing and reading is done in a similar fashion to localStorage but many types of data can be saved instead of only strings. The library also provides a dual API, giving developers the choice to use either callbacks or promises.


MJML

MJML

Building responsive emails is still considered the most annoying of web tasks. The MJML framework is aiming to change that by providing simple markup syntax with various stylized components that can be compiled to email-friendly HTML. This way developers don’t have to deal with table layouts, legacy CSS, and in-line styling.


Nachos UI

Nachos UI

Components kit for React Native containing over 30 customizable UI elements. You can find form inputs, loading indicators, a gravatar interface, and much more. The project’s documentation makes it really easy to understand how to implement each component and all the options that come with it.


FitVids

FitVids

A jQuery solution for responsive embedded videos that stick to their original aspect ratio. The plugin is mainly targeted at Vimeo and YouTube videos but allows any custom player to be adapted as well. Really useful and easy to work with.


Bttn.css

Monaco Editor

The editor engine behind Microsoft’s Electron based Visual Studio Code. It has everything you’d expect out of a modern code editor – syntax highlighting for many languages, multiple cursors, keyboard shortcuts, code completion, etc. Just like VSCode, Monaco is open-sourced so it can be used to power any editor project you have in mind.


Rellax

Rellax

Rellax is a mobile-friendly, zero-dependencies parallax library. It is only 1kb in size (gzipped), and in those 1000 bytes contains all that is needed to set up a parallax background effect. The API is based on HTML attributes, so all you have to do is define different speeds for the various elements on the page.


Keen UI

Keen UI

A collection of Material Design inspired Vue.js components. Keen UI is lightweight, Vue 2.1.4 compatible, and has lots of customization options. There are plenty of components and all of them look great.

In last month’s list we shared a similar framework called Vuetify. If you like developing with Vue.js, make sure to check that one out as well.


Muuri

Muuri

Muuri is a JavaScript library for creating awesome interactive grid layouts. It works by grabbing any number of rectangular tiles and placing them on a responsive grid, ordering them in the most space-economic way. These tiles can then be dragged around, sorted, and filtered, every action causing beautiful animated auto-reordering.


Tilt.js

Tilt.js

Tilt.js can take any DOM element and make it “float” in 3D space, allowing it to tilt in all directions when hovered. Options like amount of glare and additional effects can be set via HTML data-attributes or using the provided JavaScript methods. There are separate jQuery and vanilla JS versions.


Accesible Offcanvas

Offcanvas

Really easy to use jQuery plugin for creating off-canvas interfaces such as hamburger navigation menus. It has everything you expect out of a drawer: can be placed on any side of the screen, has smooth built-in CSS animation effects, and can be closed by pressing the Esc key or clicking on the page.


Notyf

Notyf

Super lightweight vanilla JavaScript library for displaying in-page notifications. Although there are many similar libraries, we wanted to share this one with you because of it’s super-clean API, stylish design, and subtle animations.


React Navigation

React Navigation

React Native components library containing different navigators suitable for iOS and Android apps. Right now it includes tabs, drawers, and stack (new screen opens on top of old one), and all three interfaces have different designs depending on which OS is used.


Ungrid

Ungrid

The worlds simplest responsive grid system, Ungrid is only 97 bytes and is composed of just 4 cleverly arranged CSS rules. Although it seems like an experimental project, Ungrid is actually quite flexible and can be used in live projects.


Multi.js

Multi.js

Multi.js offers a user-friendly alternative to the default browser-specific select inputs. The widget takes a select element with the multiple attribute and transforms it into a Bootstrap-inspired interface containing a search bar and scrollable picker. The library can be used with native JavaScript selectors or with jQuery.


Sugar

Sugar

Modular library for working with native JavaScript objects, extending their prototypes, and allowing developers to apply various utility functions directly onto JS variables. Sugar’s methods serve all kinds of purposes, ranging from basic maths to date formatting and type checking.

20 Awesome PHP Libraries For Early 2017

20-php-libraries-early-2017

This week we have for you a collection of high-quality PHP libraries that have caught our eye in the last couple of months. We’ve tried our best to include projects that are active, well documented, and will have a realistic shot at finding a place in your developer’s workbelt.

If we’ve haven’t included your favorite new library, feel free to share it in the comments :)


Requests for PHP

A no-dependencies library that lets you send HTTP requests. It provides the needed methods for adding headers, accessing response data, handling forms, and everything else you may need, neatly packaged in a clean and easy to use API.

$headers = array('Accept' => 'application/json');
$options = array('auth' => array('user', 'pass'));
$request = Requests::get('https://api.github.com/gists', $headers, $options);

var_dump($request->status_code);
// int(200)

var_dump($request->headers['content-type']);
// string(31) "application/json; charset=utf-8"

var_dump($request->body);
// string(26891) "[...]"

Rinvex Country

Rinvex Country is a PHP package that lets developers retrieve detailed information about the countries of the world. Using the over 50 methods you can get the area of Angola, the currency of Cyprus, the native name of Namibia or even the FIFA name of Finland. There is a ton of info available and the data sources are pretty reliable.

$egypt = country('eg');

$egypt->getCapital();   // Cairo
$egypt->getDemonym();   // Egyptian
$egypt->getTld();       // .eg
$egypt->getContinent(); // Africa
$egypt->getSubregion(); // Northern Africa
$egypt->getBorders();   // ["ISR","LBY","SDN"]

Botman

A PHP library for developing messenger bots. Works with most of the popular messaging platforms including Facebook Messenger, Slack, Telegram, WeChat, and others. There is also a helpful boilerplate Laravel project available here.

// create an instance
$botman = BotManFactory::create($config);

// give the bot something to listen for.
$botman->hears('hello', function (BotMan $bot) {
    $bot->reply('Hello yourself.');
});

// start listening
$botman->listen();

If you are not familiar with the concept of messenger bots we suggest you check out our article Developer’s Introduction To Chatbots.


Charts

Laravel package for generating highly customizable charts out of datasets. The package works as a PHP wrapper for multiple built-in JavaScript chart libraries, allowing devs to create a wide variety of graphs, gauges and progressbars using only one tool.

$chart = Charts::create('line', 'highcharts')
    ->view('custom.line.chart.view') 
    ->title('My nice chart')
    ->labels(['First', 'Second', 'Third'])
    ->values([5,10,20])
    ->dimensions(1000,500)
    ->responsive(false);

Swap

Swap allows you to retrieve currency exchange rates from a number of services such as Fixer, Google, and Yahoo. Request responses can be easily cached and accessed later. The library is available in the form of a Laravel Package as well.

// Build Swap with Fixer.io
$swap = (new Builder())
    ->add('fixer')
    ->build();
    
// Get the latest EUR/USD rate
$rate = $swap->latest('EUR/USD');

// 1.129
$rate->getValue();

// Get the EUR/USD rate 15 days ago
$rate = $swap->historical('EUR/USD', (new \DateTime())->modify('-15 days'));

Math PHP

A collection of mathematical functions and algorithms ranging from simple algebra to finances, statistics, numerical analysis and others fields. The library is modular, has a straightforward API, and doesn’t require any external dependencies.

// Factors of an integer
$factors = Algebra::factors($n);

// Fibonacci sequence
$fib = Advanced::fibonacci($n);

// Combinations
$nCk  = Combinatorics::combinations($n, $k);

// Likelihood ratios
$LL = Experiment::likelihoodRatio($a, $b, $c, $d);

PHPUnit

PHPUnit is an advanced testing framework that enables teams to thoroughly test their code. Unit tests are written in standalone object-oriented classes with the help of many methods for handling assertions, dependencies, etc. A simple CLI is provided for running test and generating reports.

class StackTest extends TestCase
{
    public function testPushAndPop()
    {
        $stack = [];
        $this->assertEquals(0, count($stack));

        array_push($stack, 'foo');
        $this->assertEquals('foo', $stack[count($stack)-1]);
        $this->assertEquals(1, count($stack));

        $this->assertEquals('foo', array_pop($stack));
        $this->assertEquals(0, count($stack));
    }
}

Atoum

A less popular testing framework we also wanted to share. Atoum offers a one-step installation precess and a relatively simple workflow, while still maintaining a ton of great features. It has a mock engine, expressive assertions, and a CLI that can execute multiple tests in parallel.

$this->given($testedInstance = new testedClass())
    ->and($testedClass[] = $firstValue = uniqid())
    ->then
        ->sizeof($testedInstance)->isEqualTo(1)
        ->string($testedClass[0])->isEqualTo($firstValue);

Simple Regex Language

A PHP implementation of the Simple Regex Language – a verbose way of writing regular expressions. The library provides multiple methods that can be chained together, forming readable and easy to understand RegEx rules. The library has ports for JavaScript and Python as well.

$query = SRL::startsWith()
    ->anyOf(function (Builder $query) {
        $query->digit()
            ->letter()
            ->oneOf('._%+-');
    })->onceOrMore()
    ->literally('@')
    ->anyOf(function (Builder $query) {
        $query->digit()
            ->letter()
            ->oneOf('.-');
    })->onceOrMore()
    ->literally('.')
    ->letter()->atLeast(2)
    ->mustEnd()->caseInsensitive();

Stash

Stash makes it easy to speed up your code by caching the results of expensive functions or code. Certain actions, like database queries or calls to external APIs, take a lot of time to run but tend to have the same results over short periods of time. This makes it much more efficient to store the results and call them back up later.

$pool = $this->cachePool;

// Get a Stash object from the cache pool.
$item = $pool->getItem("/user/{$userId}/info");

// Get the data from it, if any happens to be there.
$userInfo = $item->get();

// Check to see if the cache missed, which could mean that it either
// didn't exist or was stale.
if($item->isMiss())
{
    // Run the relatively expensive code.
    $userInfo = loadUserInfoFromDatabase($userId);

    // Set the new value in $item.
    $item->set($userInfo);

    // Store the expensive code so the next time it doesn't miss.
    $pool->save($item)
}

PHP VCR

A port of the popular Ruby library for testing HTTP interactions. PHP VCR records HTTP requests and stores them in “cassettes” which can be replayed later on. A set of testing utilities are also provided, making it possible to inspect and compare recordings in detail.

// After turning on, the VCR will intercept all requests
\VCR\VCR::turnOn();

// Record requests and responses in cassette file 'example'
\VCR\VCR::insertCassette('example');

// Following request will be recorded once and replayed in future test runs
$result = file_get_contents('http://example.com');
$this->assertNotEmpty($result);

// To stop recording requests, eject the cassette
\VCR\VCR::eject();

// Turn off VCR to stop intercepting requests
\VCR\VCR::turnOff();

OAuth 2.0 Server

This library allows you to easily configure an OAuth 2.0 server and set up all the authentication levels needed to protect your API. It is fully standards compliant and supports all the grants defined by OAuth protocol. The Laravel Passport module is built on top of the OAuth 2.0 Server.

// Setup the authorization server
$server = new \League\OAuth2\Server\AuthorizationServer(
    $clientRepository,
    $accessTokenRepository,
    $scopeRepository,
    $privateKey,
    $publicKey
);

// Enable a grant on the server
$server->enableGrantType(
    new \League\OAuth2\Server\Grant\ClientCredentialsGrant(),
    new \DateInterval('PT1H') // access tokens will expire after 1 hour
);

Imagine

An image manipulation library that tries to bring together all low level PHP image processing libraries under the same object-oriented API. This allows Imagine to be used for a wide variety of tasks such as drawing, resizing, cropping, filters, effects, metadata editing, and others.

$palette = new Imagine\Image\Palette\RGB();

$image = $imagine->create(new Box(400, 300), $palette->color('#000'));

$image->draw()
    ->ellipse(new Point(200, 150), new Box(300, 225), $image->palette()->color('fff'));

$image->save('/path/to/ellipse.png');

MINI

Extremely simple and easy to understand skeleton PHP application, providing only the most essential features every project needs. It does not strive to be a do-it-all framework like Laravel, but due to it’s simplicity MINI can be used for getting smaller apps up and running in no time.

// Working with the model
$songs = $this->model->getAllSongs();
$amount_of_songs = $this->model->getAmountOfSongs();

// Loading views
require APP . 'views/_templates/header.php';
require APP . 'views/songs/index.php';
require APP . 'views/_templates/footer.php';

AWS SDK

The official PHP library for working with Amazon Web Services. The SDK makes it easy to connect AWS with any PHP project and access all the various available services. There is also a useful Laravel wrapper which can be found here.

// Instantiate an Amazon S3 client.
$s3 = new S3Client([
    'version' => 'latest',
    'region'  => 'us-west-2'
]);

$s3->putObject([
    'Bucket' => 'my-bucket',
    'Key'    => 'my-object',
    'Body'   => fopen('/path/to/file', 'r'),
    'ACL'    => 'public-read',
]);

Purl

Lightweight PHP library for working with URLs. With Purl you can compose complex paths attribute by attribute, extract data from URLs, manipulate queries, recognize URLs in strings, and much more.

$url = \Purl\Url::parse('http://jwage.com')
    ->set('scheme', 'https')
    ->set('port', '443')
    ->set('user', 'jwage')
    ->set('pass', 'password')
    ->set('path', 'about/me')
    ->set('query', 'param1=value1&param2=value2');

echo $url->getUrl(); // https://jwage:password@jwage.com:443/about/me?param1=value1&param2=value2
echo $url->publicSuffix; // com
echo $url->registerableDomain; // jwage.com

Daux.io

Documentation generator that uses a simple folder structure and Markdown files to create responsive documentation websites. Daux.io has automatic syntax highlighting, 4 theming options, Bootstrap HTML for easy customization, navigation with readable URLs, and many other goodies.

// Example configuration
{
    "title": "DAUX.IO",
    "tagline": "The Easiest Way To Document Your Project",
    "author": "Justin Walsh",
    "image": "app.png",
    "html": {
        "theme": "daux-blue",
        "breadcrumbs": true,
        "repo": "justinwalsh/daux.io",
        "edit_on_github": "justinwalsh/daux.io/blob/master/docs",
        "twitter": ["justin_walsh", "todaymade"],
        "google_analytics": "UA-12653604-10",
        "links": {
            "Download": "https://github.com/justinwalsh/daux.io/archive/master.zip",
            "GitHub Repo": "https://github.com/justinwalsh/daux.io",
            "Made by Todaymade": "http://todaymade.com"
        }
    }
}

Dompdf

Dompdf is a PDF generator that takes regular HTML markup and converts it to .pdf files. It understands most CSS rules, which can be fed in-line or via an external stylesheet.

// reference the Dompdf namespace
use Dompdf\Dompdf;

// instantiate and use the dompdf class
$dompdf = new Dompdf();
$dompdf->loadHtml('hello world');

// (Optional) Setup the paper size and orientation
$dompdf->setPaper('A4', 'landscape');

// Render the HTML as PDF
$dompdf->render();

// Output the generated PDF to Browser
$dompdf->stream();

Instaphp

Non-official library for accessing the Instagram API. It provides developers with an easy way to authenticate their app and get access to various Instagram data endpoints including images, users, likes, comments, and tags.

$api = new Instaphp\Instaphp([
    'client_id' => 'your client id',
    'client_secret' => 'your client secret',
    'redirect_uri' => 'http://somehost.foo/callback.php',
    'scope' => 'comments+likes'
]);

$popular = $api->Media->Popular(['count' => 10]);

if (empty($popular->error)) {
    foreach ($popular->data as $item) {
        printf('<img src="%s">', $item['images']['low_resolution']['url']);
    }
}

Latitude

Zero-dependencies library for building SQL queries using chainable methods. It supports most query types and works well with MySQL, Postgres, SQL Server, and other databases. There are also built-in escaping helpers for protecting against SQL injection.

$select = SelectQuery::make(
        'id',
        'username'
    )
    ->from('users');

echo $select->sql();
// SELECT id, username FROM users

Quick Tip: The Easiest Way To Show Browser Notifications

quick-tip-browser-notifications

The JavaScript Web Notification API allows both desktop and mobile browsers to display notifications with custom content. Although it’s support used to be quite inconsistent, the API is now compatible with most modern browsers and we are already seeing it implemented in many websites and apps.

In this article we will show you the quickest way to set up browser notifications using the open-source Push.js library.

Project Setup

We want to build a simple demo app that asks for permission and then sends notification on button click. For the sake of simplicity we will work in a single index.html file with inline scripts. The full source is available on GitHub.

The first thing we need to do is include the library. Push.js can be installed via npm or a local file, but the easiest way to implement it is via CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/push.js/0.0.11/push.min.js"></script>

The Push.js library is not necessary for working with Web Notifications, but is offers a clean API which is much easier to work with compared to the native Notification API. Push.js will handle permissions, service workers, and cross-browser inconsistencies, so we don’t have to.

Requesting Permission

Users need to give permission before we can send them notifications. This is done through a built-in browser dialog which you’ve probably seen already:

Permission Request Dialog

Permission Request Dialog

Push.js automatically asks for permission when we try to send our first notification. However, in many cases we want to manually ask the users beforehand:

Push.Permission.request();

This will open the built-in browser dialog prompting users to accept or refuse to receive notifications. If permission has already been granted or denied, the above code will be ignored.

Creating A Notification

To display a notification we simply call the Push.create method, which expects a title and an optional object holding all kinds of useful preferences and callbacks:

Push.create('Hi there!', {
    body: 'This is a notification.',
    icon: 'icon.png',
    timeout: 8000,               // Timeout before notification closes automatically.
    vibrate: [100, 100, 100],    // An array of vibration pulses for mobile devices.
    onClick: function() {
        // Callback for when the notification is clicked. 
        console.log(this);
    }  
});

You can see all the available options here.

In our demo we display a notification on button click, but user interaction isn’t required – new notifications can be created at any time, including when the tab isn’t active at the moment.

Browser Notification in Desktop Chrome

Browser Notification in Desktop Chrome

Make sure not to bother users too much. Send notification only when you want to update them on something important like a new text message or a new friend request.

Browser Compatibility

The Notification API is supported in most modern browsers. To see if your browser of choice supports it, try running our demo app. It should work without a problem in desktop Chrome, Firefox, and Safari, as well as Chrome for Android. The only popular client that’s missing from this list is iOS Safari, which doesn’t provide any form of web notifications.

Another important thing to note here is that in order for notifications to be shown in Android, the web app needs to be hosted over HTTPS.

Further Reading

Notifications are a relatively new addition to the browser world but we can expect to see more and more of them, especially as Progressive Web Apps become more popular. If you want to learn more about JavaScript notifications, here are some great resource that we recommend you check out :

  • A blog post by the creator of Push.js, discussing why he created the project and his future plans for it – here.
  • Push API – An awesome new API that allows users to receive notifications even when a web app isn’t open – here.
  • What Makes a Good Notification? – A Google Developers article on how to make notifications better – here.

15 Interesting JavaScript and CSS Libraries for January 2017

interesting-libraries-january-2017

Our mission at Tutorialzine is to keep you up to date with the latest and coolest trends in web development. That’s why every month we release a handpicked collection of some of the best resources that we’ve stumbled upon and deemed worthy of your attention.


Flexdatalist

Flexdatalist

A jQuery plugin for creating autocomplete input fields. The library utilizes HTML5’s <datalist>, allowing devs to easily organize all the possible select values and their properties. It works well with multiple selections, has a clear UI, and is really easy to implement.


Siema

Siema

Siema is a 1kb JavaScript carousel plugin with no dependencies and no styling. This makes it extremely easy to set up and customize, since there is almost nothing to get in your way. The carousel effect itself is very smooth and the widget has support for touch gestures.


LoadJS

LoadJS

LoadJS is a tiny library for loading CSS and JavaScript dependencies asynchronously. It allows you to fetch multiple resources in parallel and provides a simple callback syntax for executing code once everything has finished loading. Only 710 bytes when minified and gzipped.


Concise CSS

Concise CSS

Modern CSS framework that provides tons of features, while managing to stay lightweight thanks to it’s modular architecture. The core of Consise has only basic styles for the native HTML elements, while various utilities and components can be included in the form of add-ons.


Vluelidate

Vuelidate

Lightweight plugin for Vue.js that enables developers to easily validate all the data in the model. It provides a number of built-in validations such as required and minLength, and also supports custom validators. The library is compatible with Vue.js 2.0 and has no other external dependencies.


Inferno

Inferno

Inferno is probably the fastest JavaScript UI library right now. It borrows heavily from React’s syntax and coding style, but is packed in a much slimmer and more performant package. Even if you don’t plan on using Inferno, go and check out it’s description and source code on GitHub – lot’s of JavaScript wisdom can be found there.


AOS

AOS – Animate On Scroll

CSS driven, highly customizable JavaScript library for doing animation on scroll effects. The library is very tiny, easy to use (install via CDN), and most importantly performs well, which can be an issue with other animate on scroll libraries.


Premonish

Premonish

This cool library takes the position and direction velocity of the cursor, and tries to predict which DOM element the user is going to interact with next. Although not very precise, Premonsih is really fun to play around with, thanks to it’s straightforward API that let’s you set it up in no time.


Date-fns

Date-fns

Date-fns is the most advanced JavaScript library for working with dates and time. It provides over 140 useful functions, all accessible through a simple API, and organized in a modular fashion, allowing you to pick only what you need.


PulltoRefresh.js

PulltoRefresh

Tiny JavaScript library for adding smooth pull-to-refresh effects to your mobile web apps. It doesn’t require any external dependencies and doesn’t add any extra HTML markup, you just need to use the simple JavaScript API and set it up the way you like.


Cost of modules

Cost of modules

Node.js library that lets you monitor the size of your projects and find out exactly which modules add the most weight. The GitHub homepage of the project also has some great tips on how to minimize unnecessary bloat and bring down the size of your npm packages.


Voca

Voca

A collection of utility functions for working with strings in JavaScript. Like many of the libraries in this list, Voca follows the trend of modularity, allowing developers to pick and choose which parts they need, and what can be left out.


Vuetify

Vuetify

UI framework for Vue.js 2 that makes building applications with Vue even easier, with the help of clean, semantic and reusable components. Style-wise Vuetify follows Google’s popular Material Design language for the components, and provides a standard 12-column responsive grid for doing layouts.


Bttn.css

Bttn.css

CSS library for creating beautiful buttons with fancy on-hover animations. Right now the project offers 13 different designs (probably more in the future), all available in four sizes, six predefined color schemes, and block/inline block variants.


MenuSpy

MenuSpy

MenuSpy allows you to monitor which section of a webpage is visible and reflect that in the navigation menu. It doesn’t come with any styling options, just a JavaScript API for adding/removing classes. There are, however, a couple of cool demos you can copy.

15 Interesting JavaScript and CSS Libraries for December 2016

interesting-libraries-december-2016

Our mission at Tutorialzine is to keep you up to date with the latest and coolest trends in web development. That’s why every month we release a handpicked collection of some of the best resources that we’ve stumbled upon and deemed worthy of your attention.


Deck.gl

Deck.gl

Data visualization library that can handle large-scale 2D and 3D visualizations with ease. Deck.gl is made by Uber and powered by WebGL and React, which results in a project with great performance, as can be seen in the beautiful examples, rendering datasets with close to a million entries.


svelte

Svelte

Svelte is a brand new project that provides a fresh, more-lightweight approach to the existing solutions offered by large frameworks like React and Angular. Instead of shipping huge piles of code, Svelte compiles your app to optimized vanilla JavaScript which can be executed much faster by the browser.


Turbo.js

Turbo.js

Turbo.js allows you to access the GPU and improve the performance of your apps. By executing processes directly in the graphics processor, it is possible to run multiple complex calculations in parallel, drastically cutting down JavaScript waiting times. In works in all popular web browsers and is supported by most desktop and mobile chipsets.


csspin

CSSPIN

CSSPIN is a collection of colorful indicators and spinners, all featuring smooth pure-CSS animations and consisting of just a single div: <div class="cp-spinner cp-bubble"></div>. Each spinner in the library has it’s own CSS file, allowing you to quickly take only what you need and minimize bloat.


Blueprint

Blueprint

Blueprint is a React toolkit optimized for building complex user interfaces such as web-based desktop applications and admin panels. It offers a rich component library, lots of customization options with Sass or Less, and a detailed, easy to follow documentation.


Card

Card

Card is a tiny vanilla JS project (with a jQuery version) that will make your credit card forms much more fun and interactive. After a quick installation, the library will take your form and transform it into an animated CSS-only credit card that gets filled as users input their data.


Conversational Form

Conversational Form

Similar to Card, this library removes traditional web forms and replaces them with a more engaging alternative. Conversational Form takes all of the input fields and uses them to start a pseudo-chatbot conversation where the bot asks questions and step by step receives the needed information from the user .


TypeIs

TypeIs

Since JavaScript doesn’t have static typing, at times there can be some confusion on the specific type of variables, especially Arrays which are considered Objects in JS. This super simple library can be used to solve this problem and easily find the real type of a variable.


Milligram

Milligram

A CSS framework that strives to stay as slim as possible and provide the most minimal setup while still making your project pretty. Unlike other UI frameworks such as Bootstrap, Milligram doesn’t offer any components, only basic HTML styles, typography, and a layout grid. Just 2kb in size when gzipped.


Medium-draft

Medium-draft

A React library built on top of Facebook’s text editor framework draft-js. It allows you to create rich markup editors in the style of Medium with lots of helpful key shortcuts and a friendly user interface for writing and editing content.


Eg.js

Eg.js

A collection of handy JavaScript and jQuery components for UI interactions, effects, and various other utilities. The package includes an infinite grid builder, animations, landscape/portrait detection, device and browser info, and other great mini-libraries.


Superdom

Superdom

Superdom is a lightweight alternative to jQuery that allows you to manipulate the HTML DOM. It provides a global dom object with a simple chaining interface, which can be used to select and modify all the existing elements on the page and their attributes.


Chaos Socket

Chaos Socket

This Node.js package is capable of mocking WebSockets, making it easier to automate the testing of socket connections in your apps. The library has a simple API that allows you to register different kind of events and send them once or at a certain interval. Chaos Socket also comes with Faker.js built-in for quickly generating dummy data.


Docsify

Docsify

JavaScript library and Node.js CLI that generate modern markdown-based documentation hubs for your projects. There are two themes available as well as some customization options such as displaying a GitHub Corner widget.


Labelauty

Labelauty

A tiny jQuery plugin that automatically improves the appearance of checkboxes and radio buttons, while also adding the option to change their label text depending on whether they are truthful or not. It works in all modern browsers and is really easy to use.

Powered by Gewgley