Fresh Resources for Web Designers and 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.

Slinky

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.

Slinky

Boilrplate

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.

Boilrplate

Griddy

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.

Griddy

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?

React Fundamentals

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.

Chassis Desktop

Papersizes

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.

Papersizes

TippyJS

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.

TippyJS

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.

Design Patterns PHP

Guzzle

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.

Guzzle

Mini.css

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.

Mini.css

SimpleIcons

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.

SimpleIcons

Chrome MySQL Admin

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

Chrome MySQL Admin

Numi

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

Laradock

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.

Laradock

Fabrica

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.

Fabrica

Husky

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

Husky

EasyMap

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.

EasyMap

Wappalyzer

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.

Wappalyzer

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.

Bash Guide

Chroma.js

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.

Chroma.js
WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail