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 the web developers. This year, ReactJS’s popularity soared up exponentially, a new ReactJS extension is released and sits on the list of Github’s trending repositories (almost) every week.

PHP7 is also released this year which offers significant improvement on speed, as well as the release of WordPress 4.7 with the long awaited WP-API feature, and Facebook also introduced Yarn Package that may challenge NPM.

For further details on each of these useful releases, let’s take a look at the following list:


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 auditing report interface.


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 homepage purple-magenta gradient color

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 Mascot

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 code snippet to set cache periode


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 shows list of popular repository in the last 6 days


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.

Focus Report in macOS Terminal


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.



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.


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 homepage, blue color with and icon on the right.

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 interface; clean, minimalist, with hippy gradient colors.

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 The app was priced at around 149USD, but is now given for free ever since acquired by Flywheel.

MacBook on a Green Background


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 homepage; green navigation with big orange button at the bottom.

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 Monospace Glyphs

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.

Basic Online Form Styles


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


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.

Macbook and iPhone shows a chart.


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 flame logo, and a code snippet.


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 Github Page; plain white page with four squares.

SPA Starter Kit

This is an example of SPA (Single Page Application) built with Laravel and VueJS. It is yet another great resource to learn web development using frameworks — look at the source Luke!

Building perspective shot.


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 page; plain white with sidebar at the left.