Fresh Resources for Web Designers and Developers (December 2016)

We are nearing the end of 2016, and it has been a thrilling year for many, including web developers. This year, ReactJS’s popularity has soared exponentially, with new ReactJS extensions being released and frequently appearing on GitHub’s trending repositories list.

PHP7 was also released this year, offering significant improvements in speed, along with the release of WordPress 4.7 featuring the long-awaited WP-API functionality, and Facebook introduced the Yarn Package that may challenge NPM.


LightHouse

LightHouse is a handy tool from Google to examine your websites against modern web development metrics, which include page load performance, caching with Service Workers, server time response and so forth. These tools come in two forms, the CLI (Command Line Interface) and Google Chrome extension.

LightHouse

FuseJS

Fuzzy-search is a type of search completion where it returns a number possibilities even if it does not exactly match the search arguments. For example, if you search ‘to’ the resultant may return todo, robot, and foot. This is a popular search performance in today’s web applications. FuseJS is a lightweight JavaScript library that allows you to implement it on your website easily.

FuseJS

Yarn Package

Yarn is a Node package manager built by Facebook. It basically performs similar to NPM albeit with advancements in several areas such as speeds, ‘offline mode’ which allows you to install the packages without connecting to the Internet, and security as well as reliability.

Yarn Package

Menu Cache

A handy WordPress plugin to cache WordPress Menu using Transient API to improve database query speed. The plugin comes with a number of Filters to customize the caching period and perform other stuff. It can be installed using Composer or as a regular WordPress plugin.

Menu Cache

Githunt

Githunt is a Google Chrome extension that replaces Chrome homepage with Github trending repository. You can sort the result out based on the period and the programming language. It is, I think, a must-install utility for every developer to stay updated with the shiniest tools around.

Githunt

FFocus

Can’t focus on your work and want to get your job done quickly? Try FFocus. It is a CLI that allows you to block website for a set duration through Terminal. FFocus can be installed through NPM by running the npm i ffocus -g command.

FFocus

Accesslint

AccesslintJS is a JavaScript library to validate your website for accessibility. Using this library is as easy as loading it before the </body> tag, and you will get all the warnings and errors right at the DevTools Console.

Accesslint

Colorable

Colorable is a handy web application that allows you to generate color combination that complies with WCAG Guidelines, and also makes your website accesible to users with a visual impairment like color blindness.

Colorable

Micon

Micon is a font icon of selected Microsoft Windows 10 pictographics. This can be a great replacement of FontAwesome which I think is already overused.

Micon

CSS Reference

The name says it all. It is a CSS Reference to look up CSS syntax. It is also presented in a nice pleasant way which make it a great alternative for CSS documentation at MDN, if you think it’s too boring.

CSS Reference

Local by Flywheel

This is GUI App that makes setting up a local WordPress website in your macOS so easy. The app is jam-packed with great utilities for developers, such as; “One-click” WordPress installation, SSH access, easy SSL setup, site blueprint, and XIP.io. The app was priced at around 149USD, but is now given for free ever since acquired by Flywheel.

Local by Flywheel

FreeCodeCamp

It is a free resource to learn code for the Web. The subjects include HTML, CSS, JavaScript, and a few libraries like ReactJS and D3. It provides challenges or project examples while you are taking the courses, as well as tutorials to help you comprehend the subject better.

FreeCodeCamp

OverPass Font

OverPass font is a font family consisting of eight weights (200-900), true italic, and monospace typeface. The font can be loaded as a web font from KeyCDN as well as installed for Desktop use. It is free and open source.

OverPass Font

Form Base

Form base is a set of CSS style rules that reset form elements which include input, checkbox, select, and textarea with basic yet beatiful styles. This CSS library is a good use in conjunction with another “CSS resetter” like Normalize.css.

Form Base

FrontEnd

it is a framwork that is used to build 24ways.org; a great resource that you may look into to learn advanced CSS techniques.

FrontEnd

Victory

ReactJS is on the rise, and with that comes a great number of extensions to support it. Victory is a ReactJS component to add intercative and charts or data visualization.

Victory

Inferno

Inferno is a JavaScript library to build web interface on mobile devices. It is inspired from ReactJS hence inherts similar syntax conventions. The difference, however, is that Inferno is built with performance in-mind which makes it much smaller in size and also gives it a faster rendering time.

Inferno

Premonish

Permonish is library that is able to predict users’ next interaction. This will allow you to prepare the user interface (UI) more perfectly before the actual user interacts with your website.

Premonish

SPA Starter Kit

SPA Starter Kit

Docute

Docute is JavaScript library for building a single page documentation. It is powered with VueJS and shipped with a number of Node utilities that allow you set up and run your documentation quickly.

Docute

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail