Fresh Resources for Web Developers – July 2017

Original Source:

Having been maintaining this series for a few years now has allowed me to witness the progress in web development. There are a number of tools that were so popular only a few years ago but not so much in the recent times mainly because they failed to gain meaningful adoption. While there are web development resources that retain their popularity even today.

Click for More Resources

.no-js #ref-block-tax-37662-1 .ref-block__thumbnail {
background-image: url( “” );

Click for More Resources

Find our entire collection of recommended resources and the best web design and development tools available.

So here we have put together a number of useful resources that are worth a try. We have a JavaScript library to create Bot chat, an open source e-commerce platform, and a couple of CSS libraries. Let’s move on to see them in details.


Created by the same developers behind CodeKit, Muzzle is a macOS app to avoid you from embarrassment. It will turn off all notification when screen sharing. Muzzle works by automatically setting macOS “Do Not Disturb” mode when screen sharing or apps such as Skype, Google Hangouts, and Slack is started.


A collection of CSS classes that allow you to quickly create a webpage prototype. Fracture is based on Atomic design where styles are split into tiny pieces – leaving small footprint. Instead of bringing full-fledge styled components, it introduces classes like radius-1 to to style an element with small corner radius.

FracturesFracturesCSS DB

This shows you the list of the progress CSS features and their current stage to be implemented as a new standard. Now you know nesting CSS selector is currently on its way to be the standard.


Apache has recently announced to disallow ReactJS and similar projects that are distributed under Facebook BSD+Patents license to be included in Apache’s product. If your product has been affected by this license, consider Preact that’s a drop-in replacement for ReactJS and is licensed under a more permissive MIT license.


Pell is a JavaScript library to build WYISWYG editor. By default, it comes with the common buttons like the Italic, Bold, Underline, and the Headings with more will be added in the future. Built with ES6, Pell requires no dependencies library like jQuery, is small in size, yet it is maintained to be compatible with IE9.


Markdown is limited to particular syntaxes. It adds the ability to include chart in your Markdown content. If you are not sure what Markdown is, check out our post on Writing Web Content with Markdown.

MarkvisMarkvisMoment PHP

Moment is a PHP library to manipulate dates similar to Moment.js for JavaScript. Using the library, it is easy to get, for example, the current time in in the other timezone and formatting date based on your locale.

Moment PHPMoment PHPTonik

A WordPress starter theme built for modern PHP. It utilizes Namespacing, custom templating, autoloader, Webpack, and a bunch of other goodness of modern web development.

TonikTonikAwesome Guidelines

This is a list of coding standards of various programming languages including C, Javascript (of course), PHP, Ruby and even Visual Basic. It can be a great resource to keep your code clean and tidy.

Awesome GuidelinesAwesome GuidelinesBotUI

This is the era of Bot. This JavaScript library allows you to create a conversational UI. I do think having Bot could be a better replacement of traditional ‘Form’ and serves a more natural experience to your users.

BotUIBotUIReaction Commerce

Open source CMS for commerce hasn’t changed much for years with most of them built on top of PHP. ReactionCommerce aims to change that with the latest web technology stacks. It is built using JavaScript and is an event-driven CMS providing real-time experience. It comes with the features like order processing, payments, shipping, analytics, etc to allow get up and run an e-commerce site quickly.

Reaction CommerceReaction CommerceTinyReset

A modern CSS resetter with minimal footprint. TinyReset is a good alternative to the legendary reset.css by Eric Meyer.


Martinet is Command Line Tool to build static website with modern tools like Webpack, TypeScript, Pug for templating, LESS, and NPM. It is designed so that we don’t have to worry on the site configuration. Simply follow the convention and run martinet, your website will be up and running.


BillboardJS is JavaScript to build interactive data visualization based on D3.js. There is an array of visualization types you can build with this library including line, bar, pie, doughnut, and see the demo page for more details.


SVGI is a Command Line Tool that allows you to lookup SVG elements or SVG files. Once installed, you will get access to the svgi command line where you retrieve list of Nodes on the SVG, the size, and the elements hierarchy.


Another interesting open-source platform on our list after ReactionCommerce, TimeStrap a time tracking an invoicing system that you can host anywhere just like WordPress. A good alternative for those who prefer to manage invoicing on their own system rather than using external services.


A tool to create static single page for APIs documentation. Slate is used in many popular projects such as WooCommerce, Travis-, CoinBase, and even NASA.


A tool to generate great font pairing. Press the “Generate” button to retrieve new font combinations infinitely. What’s interesting is that this tool generates the result with Machine or Deep Learning. I’m not sure how that exactly works but if you’re curious check out this page.


Gradient makes a comeback to the web. But this time, with CoolHue. The tool has a great collection of beautiful gradients since web colors have improved so much as compared to the last 10 years. It is now common to see websites featuring gradients on every corner of their page.


FrontPress is a front-end framework that utilize WP-API and AngularJS. It is a great starting point if you want to create a headless CMS with WordPress, something I’m very much looking forward to.

E-Commerce Design Resources: The Ultimate Round-Up

.no-js #ref-block-post-6445 .ref-block__thumbnail { background-image: url(“×160/e-commerce-design-resources-the-ultimate-round-up.jpg”); }

E-Commerce Design Resources: The Ultimate Round-Up

E-commerce design requires much of the same design knowledge and skill as any other type of web design.…Read more

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *