Fresh Resource for Web Developers – April 2017

Since the beginning of the year 2017, a lot has changed in the world of web development, with new apps and resources coming every other day. Keeping up with the trend, I am sharing with you today a couple of new web development resources.

These resources include a web app that will help you learn the new native CSS Grid module, a course to help you learn React right from the beginning, a reference to learn some PHP design patterns to improve your PHP codes, and a few more. Let’s check them out.


A Sketch plugin that enables you to export your Artboard to HTML email template with a simple click. Slinky is currently in the active development stage, however, there are still a few things that are rough on the edges. So follow the guideline to get the best possible output.


A curated directory of boilerplates and templates to help you get started with a project quickly. It contains a list of boilerplates of numerous languages and framework including jQuery, Angular, React, WordPress, Backbone, and Electron.


CSS Grid is the next big thing that will change how we arrange layout and use grid frameworks to build website. However, given the complexity, using CSS Grid might be overwhelming for some users. In such a case, this handy web application, Griddy, can be very helpful in learning CSS Grid.

React Fundamentals

I’m learning React at the time of writing and found a great course where you can learn React as a beginner. The course consists of videos, articles, and quizzes. And did I mention that this course is absolutely free?

Chassis Desktop

Chassis is a virtual machine configuration that is designed to build around WordPress ecosystem such as the Themes and Plugins. It will enable you to visually manage Chassis installations. At the time of writing, Chassis is still in the development phase, but it will be released soon.


A collection of standard paper sizes used in different countries including those commonly used size in Japan, France and Canada. It’s a great resource that both web designers and developers should bookmark.


A nice JavaScript library to build Tooltip, TippyJS comes with an abundance of settings to configure how the tooltip should appear and behave. It’s ‘themeable’ in a way that you can customize the look easily through CSS. Developers will especially appreciate the “Callback” it provides.

Design Patterns PHP

Understanding the design pattern of a programming language can help produce codes which not only work but are also scalable and easily maintainable. If you are into PHP, this is one of the tutorials you should look into.


Guzzle is a handy PHP library to make HTTP requests with various methods like “GET”, “POST” and even Async requests similar to JavaScript. It comes with an abundance of function methods where you easily get the response from the request made, including the response Header, the Body as well as the status code.


Mini is a CSS framework with minimal footprint. And as the other frameworks, it’s shipped with a number of web components such as Grid, Navigation, Table, etc.


A collection of icons of companies and brands from popular ones like eBay, Viber, Dribble and Google+ to least popular ones such as Gitter, Kirby, Viadeo. The icons come in SVG format and can prove to be a great resource for both designers and developers.

Chrome MySQL Admin

A Chrome extension to manage your MySQL database. It’s a great alternative to apps like Sequel Pro and MySQL Workbence.


Numi is a simple, beautiful and unique calculator app for Mac. Simply type “10USD in SGD” and you get the result!


A Docker configuration to run Laravel. Laradock supports various database engines including MariaDB and MongoDB as well as Cache Engines like Redis and Memchaced. Though it’s named after Laravel, you can use it for other frameworks or platforms like WordPress and Drupal as well.


Fabrica is a collection of tools to develop WordPress from start to finish. Fabrica uses Docker for running quickly and to set development environment up and uses WordMove for the deployment.


Husky is a Node module that enables us to run githooks such as pre-commit, pre-receive, and post-receive.


EasyMap makes it absolutely easy to render and add markers in Google Maps. Simply add your Google Maps API key and provide the location address on a JSON format and you’re done.


A handy Chrome extension to see which tools, server, and the libraries that a website is using. From this tool, I’ve figured out that there are still a lot of popular websites using jQuery, even the one like Github.

Bash Guide

Bash Guide, as the name implies, is a handy guide for basic command lines. A great resource for web developers who just get started with Terminal and Command Lines.


Chroma.js is JavaScript library to manipulate colors. It supports many color formatting including HEX, RGB, and RGBA. On top of that, you can also manipulate the colors by the brightness, the contrast, and the saturation.

Fresh Resources for Web Developers – March 2017

Fresh Resources for Web Developers – March 2017

With CLI (Command Line Interface) we're able to streamline and automate web development workflows. And that's why in…Read more