We’re expanding the list for the mid-year edition. This installment features a few CLIs (and here is 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.

fresh resources for designers developers

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.

CertBot Robot Mascot

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.

Mononoki Typeface

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.

Bideo.js Homepage

CSS Purge

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

CSSPurge Homepage

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.

Two example emails generated with Mailgen

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.

Deco App Interface

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.

IE8 Linter error reports

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.

Caprine Dark Interface in OS X El-Capitan

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.

Photon App UI

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.

Yeoman App UI in OS X

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.

SQLectron GUI App in OS X

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.

Family SCSS Logo and Code Snippet

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 WordPress server for speed a breeze.

EasyEngine Setup Command Lines

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.

Phinx Homepage

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.

RichCSS Homepage

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.

Frend Accordion UI

FLA

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

Fla Syntax Example

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.

PHP The Right Way Homepage

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.

Star ratings

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.

WaitAnimate Homepage

Hongkiat.com

Fresh Resources for Web Developers – June 2016