Fresh Resources for Web Designers and Developers (December 2016)

By Thoriq Firdaus. in Web Design. Updated on July 25, 2018.

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.

Click for More Resources

Find our entire collection of recommended resources and the best web design and development tools available.

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.