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.
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 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.
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
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.
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 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.
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.
</body> tag, and you will get all the warnings and errors right at the DevTools Console.
Recommended: How to Design For People With Accessibility Needs
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.
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.
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 is a set of CSS style rules that reset form elements which include
textarea with basic yet beatiful styles. This CSS library is a good use in conjunction with another “CSS resetter” like Normalize.css.
it is a framwork that is used to build 24ways.org; a great resource that you may look into to learn advanced CSS techniques.
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.
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.
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!
Read Also: 5 Tips to Simplify Your Web Design