Fresh Resources for Web Designers and Developers (June 2016)

We’re expanding the list for the mid-year edition. This installment features a few CLIs (and here are our post on why you should learn command line), a couple of desktop app for work and fun, and several CSS and JavaScript libraries. Also included are reading materials, references, and guides on best practices that you should check out, bookmark, and possibly read one day.

I’m not going to spoil the rest of the list, so off you go. For more fresh resources, click here.

CertBot

CertBot provides a more handy way to deploy certificates from Let’s Encrypt. It provides a set of command lines with support for numerous server configuration like Apache, NGINX, and Plesk. Speaking of which, Let’s Encrypt is a communal effort to make the Web more secure by providing a free SSL Certificate. It is currently used in more than 3 million websites.

Mononoki

Mononoki is a font designed specifically for displaying code. Mononoki is available as an installable desktop font (.ttf) and web font (.eot, and .woff). It is a fresh alternative to classic monotypes like Monaco, Menlo and Courier.

BideoJS

Showing a full-page autoplay video on the homepage seems to be a rising trend. BideoJS is a JavaScript library that allows you to do exactly that with fewer hurdles. It is lightweight, responsive, and can be configured to fit your needs.

CSS Purge

CSS Purge is a collection of references, articles, and statistics for CSS. A piece of resourceful information like this can help you make well-informed decisions about which CSS methodologies, tools, and frameworks you would like to adopt in your project.

Mailgen

Mailgen is a Node module to generate a nice, simple responsive HTML email. A handful of options is provided, allowing you to customize almost every area of the email. You can set the email “theme”, the email header, and the “Call-to-action” button. It can also be integrated into your Node-based desktop or web application.

Deco

Deco is an IDE to build a mobile app using the Facebook initiative React Native. Think of Deco like XCode or Visual Studio, where you can build an app with a user-friendly UI using drag-and-drop, sliders, and color pickers.

IE8 Linter

Internet Explorer 8 (IE8) is an antique browser that does not support modern Web technologies like CSS3 Animations, Transforms, Transitions, and most HTML5 elements without a polyfill. DRY principle is a tool that we can use to scan websites for IE8 compatibility. It provides the report and solutions.

Caprine

Caprine is an unofficial Facebook Messenger desktop app. It is built on top of Node.js and Electron which allows it to be a cross-platform application; it is available in OS X, Windows, and Linux. In also comes in two colors, Dark and Light.

Photon Kit

Photon Kit is a framework to start off a new app with Electron. Much like Bootstrap, Foundation and the likes, Photon comes with a number Components that allows you to build common UI elements in an app like the buttons, toolbar and sidebar.

Yeoman App

Yeoman App is a desktop application that generates project boilerplates, framework, and scaffolds from Yeoman. It is a good alternative for those who are not comfortable working through Terminal and command lines.

SQLectron

SQLectron is an SQL desktop client that lets you view and perform several SQL operations more conveniently. It supports MySQL, PostgreSQL, and Microsoft SQL Server. SQLectron is available for OS X, Windows and Linux.

Family SCSS

FamilySCSS is a collection of mixins that makes selecting elements with :nth-child more intuitive. The mixins are declarative. For instance, you can write @include first(3) to select the first three child elements and write @include between(2, 4) to select the 2nd to the 4th child elements.

EasyEngine

EasyEngine is a collection of command lines that allow you to configure your WordPress with tools and modules such as Redis, Caching plugin, and PageSpeed. It makes setting up a WordPress server for speed a breeze.

Phinx

Phinx is a PHP module for database management and migration. It comes with Classes and Command Lines that allow you to run almost any database operation such as Writing, Downloading and Uploading. Phinx Docs is a resourceful reference to help you get started.

RichCSS

RichCSS is a CSS framework that provides a sane structure. The framework neatly organizes folders, directories and classes in a pro-DRY way that allows it to be reusable. On top of buttons, lists and forms, RichCSS also comes with its own CLI that you can use to start off a new Rich project like Bower, Git, and NPM.

Frend

Frend is a collection of common web components. The collection currently consists of Accordion, Dialog Modal, Offcanvas, Tooltip, Tabs, with a few more to come in the next release. Frend could be a good alternative to jQuery UI.

FLA

This is a comprehensive framework to build a responsive grid layout with Flexbox.

PHP The Right Way

PHP is a programming language that is easy to learn, but you could also easily go wrong with the codes and this might eventually compromise your website security and performance. PHP the Right Way is an extensive reference to learn the best practices in PHP.

Starability

Starability is a CSS library to build a star rating system with fancy animated feedback. The star rating is built with accessibility in mind; you can navigate through and assign stars via keyboard.

WaitAnimate

WaitAnimate is a handy web tool to calculate a “pause” timing in a single CSS animation @keyframe. The “pause”, when done right, could turn the animation more engaging — here are some examples.