Fresh Resources for Web Designers and Developers (March 2017)

With CLI (Command Line Interface) we’re able to streamline and automate web development workflows. And that’s why in this installment we’ve included quite a number of awesome CLIs that you can install on your local computer or to run some stuff on the server.

On top of that, we’ve also included a few PHP tools, browser add-ons, and JavaScript libraries. Let’s check them out.

Guetzli

A new encoder from Google that allows to compress image down by up to 35% from the initial size while retaining the quality. It is quite a breakthrough given that similar open source encoders, such as JPEGOptim and jpegtran, are capped to only 20% on avarage. I can see that there will be a number of apps and plugins for CMS platform integrating Guetzli to optimize JPEG files.

Developer Roadmap

As the name implies, Developer Roadmap is an infographic of journey of being a Web Developer. There are three courses Front-end, Back-end, and DevOps. These roadmaps are like, well, a map; and are a great reference to see where we’re currently at, what we might have missed, and where we’re going next.

Netlify CMS

SmashingMagazine has recently made a bold move to ditch WordPress and try something new entirely with a new CMS called Netlify CMS. It is a new CMS built on top of React.js and can be integrated with any static site generator like Jekyll, Hugo, and MiddleMan.

BadSSL

It’s a website to check your SSL configuration. BadSSL is a handy tool to perform debugging and errors over SSL installed on your site.

Alix

Alix is a Chrome extension that allows you to audit your website accesibility. Once installed and enabled, the plugin will add an overlay box over a number of elements on the page which pose warning or errors.

AR.js

AR.js is JavaScript libraries unlike the others. This library enables us to create Augmented Reality using Web technology, and surprisingly runs really fast on mobile phones.

React Trend

It’s a react component from Unsplash to create lovely Line chart typically for showing trends. The component is configurable; you can set the line thickness, color, gradients, and the curve smoothness. You can simply use the GUI to conveniently generate the component code.

Gitee

A macOS application to monitor your Github activity right from your desktop, Gitee adds a new item on the status bar showing numbers of stars, followers, and notification. In addition, you can also view charts of your push and commits on a repository as well as trending repository on the current month and week. It is Github on Desktop in a nutshell.

Goops

Goops is a handy CLI that will analyze your project directory and determine the directories and files to add in the .gitignore. The CLI can be installed via NPM. Once installed, type goops and done.

Debug CSS

DebugCSS is a CSS drop-in utility that allows you to analyze and validate your CSS output on the browser. It works quite similar to Alix, when you load the debugCSS stylesheet or use the bookmarklet, it highlights the elements on the page that pose errors or warnings.

EagleJS

EagleJS is a JavaScript library to create presentation similar to RevealJS. EagleJS is differ in some ways; it is built using Vue.js, a JavaScript MVC framework, and use Pug as the templating system to build the slide.

BootstrapTour

A JavaScript library to build pop-up guides using a Bootstrap component. The popup guides usually appear for new user to walk them through the application interface, new features, and for showing tips. It is a perfect library if your site is built with Bootstrap as well.

Brick

Brick is a JavaScript library designed to build web application UI. You’ll find some common ones like Calendar, Menu, and Form among the bundled components, It also comes with a "storage-indexeddb" component to allow you to store data on the client-side using IndexedDB.

OctoTree

OctoTree is a nice utility that allows to browse source codes and files on Github with Tree structure as in an IDEs or code editors. It comes as an add-on for Chrome, Safari, Firefox, and Opera, and available on their official add-on repository. Octotree supports Private and Enterprise Github repository.

Github Notification

Another useful Github extension for Chrome. Once installed you will be able to receive notification even if you’re currently not on Github pages. A great plugin if you want to stay in the loop with your repositories.

Deployer

Deployer is a tool to deploy your PHP sites. It works with a number of popular frameworks and platforms including WordPress, Drupal, Magento, Laravel, and CodeIgniter. With this tool, you can compose your own recipes, a piece of command to run during deployment. It comes with Rollback feature which enable you to go back to previous version in case of failures.

PHPStan

A CLI that to scan PHP files to find errors without executing the runtime. This means that you do not need a full-stack PHP environment to debug the PHP files on your project.

NGINX Boilerplate

A collection of common Nginx configurations which include Backend Caching, connection and requests rate limit, and some other best practices to boost your site for speed and tune it up for traffic rush.

Bubbly

Bubbly is a great command line that you can install on your server to generate, manage, and renew certificate with Let’s Encrypt. Doplying SSL is now getting so much easier.

Read Also:  Fresh Resources for Web Designers and Developers (February 2017)