QartJS

This is a JavaScript that makes QR code less boring. With this, you can overlay the QR code over an image — such as your photo.

MonetizeJS

MonetizeJS is a JavaScript library to implement Stripe easily; as easy as using jQuery.

Card

Card is a JavaScript library that makes Credit Card input more engaging and improves your user experience while inputting their credit card numbers. It works well with jQuery, React, Angular, and Ember.

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.

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.

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.

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.

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.

Noty

A JavaScript library for displaying notifications, Noty makes it easy to show an Alart, Success, Error, Warning, Information or a dialog message. It can be used along with an animation library like mo.js and bounce.js to make the notification slides in and out gracefully.

Chrome MySQL Admin

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

T-Scroll

T-Scroll is a JavaScript library for applying animation when an element is visible in the viewport. It is equipped with a handful of options and preset animations.

FontStorage

A huge collection free fonts that can be used on the web. It provides fonts from various categories with glyphs of difference languages. A plugin for code editor is available to be inserted in the stylesheet of the selected font. Alternately, you can download the fonts and load it using @fontface within the site’s own stylesheet. This could be a great alternative to Google Fonts.

MerlinWP

This is something that I had been thinking to build, however, someone did it first and it looks great. MerlinWP is PHP class intended for theme developers to provide a nice on-boarding experience for a WordPress theme similar to how we would setup macOS or Windows on a new computer.

Headless WP Starter

This is a WordPress starter theme but unlike the others, this starter theme leverages the WP-API to get the content and then render it into a static HTML using Node and React making your website “headless”.

VueStoreFront

VueStoreFront is another “Headless CMS” framework. Built on top of Vue.js and Node, VueStoreFront and is designed for e-Commerce platforms like Magento, Prestashop, and Shopware through the APIs. It also incorporates PWA approach which allows the site to be usable offline.

TailWindCSS

TailWindCSS is another CSS frameworks. But it differs from popular CSS framework like Bootstrap and Foundation in a way that it does not provide UI components. Instead, TailWindCSS comes with small pieces of CSS classes that allows you to compose your own UI.

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.

Teletype

Teletype is a new a new initiative from the Atom Editor. This new feature allows you to collaborate with your peers on writing code. To use it, you’ll need to install the official Teletype plugin.

WP Vue

WP Vue is a template built with Vue to display WordPress posts. This template is a great starting point if you’d like to make your WordPress site headless. See how it works in the demo page. Change the URL of the endpoint of WP-API URL from any WordPress site; it will automatically repopulate the posts with the ones from the new endpoint URL.

HyperappJS

Another JavaScript library that’s worth looking into to build web application. It combines state management with a Virtual DOM engine that supports keyed updates and lifecycle events all with no dependencies.

CopyChar

A website that allows you to find and copy special characters to your clipboard. Letters, Punctuations, Math, Arrows, and Emoji are some of the characters included on the site. Simply click or tap on a character to copy the character to your clipboard.

VulcanJS

Vulcan is a stack of tools to build a modern web application. It’s bundled with React, GraphQL and Meteor pre-confifured. Since it’s a full-stack framework providing a whole range of helper components that are fine-tuned to the back-end and the front-end, everything is just work out-of-the-box. Thus you can get your app up and running quickly.

WordHat

WordHat is a tool to integrate Behat to WordPress. Behat is an open-source Behaviour-driven Development (BDD) framework for PHP where you can test your PHP application in a more expressive ways.

Matomo

Is a useful PHP-based analytics application. Similar to Google Analytics, it records visitors coming to the site such as the page they visited, their location, etc. except you can install it on your own server and have more control over the data stored.

PHP Round Table

A PHP podcast channel to keep up with the latest PHP development and the community. The podcast is hosted by Sammy Kaye Powers and you can subscribe to the channel with Youtube, RSS Feed, or iTunes.

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.

Monaco Editor

Monaco Editor is the editor that powers Visual Code Editor. It is built by Microsoft and supports several languages out of the box including HTML, CSS, LESS, CoffeeScript, and PHP along with the Intellisense that helps you write code faster.

Webpack Dashboard

Inspired by NASA OpenMCT Dashboard, this app will show you the Logs, Assets, Operations, and other analytical assessments of your Webpack bundles that will make you feel like working on a NASA project. Sounds awesome right?

Kitab

Kitab is an incredible PHP tool that will save a lot of time on documenting your API or code. Kitab, derived from the Arabic word which means Book, will parse the code comment block, test the code example snippet, and compose the Documentation based on the comment block, automatically. Neat!

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.

Sylius

An e-commerce CMS built on top of Symfony, one of the most popular PHP frameworks, Sylius is meticulously built by following the latest development best-practices. It also supports many payment gateways to meet the business need, including Paypal, Stripe, and Authorize.net

pa11y

A great collection of tools to help improve accessibility on your website and web apps. pa11y consists a CLI for testing any web pages for any accessibility issues, a Dashboard to show generated reports of errors and warnings, and a CLI that is specifically designed for a CI tool like Codeship or Travis.

ReactStrap

ReactStrap is a collection of Bootstrap 4 components transformed into reusable React components. If you’d like to modernize your old Bootstrap-based website, this library is something you might want to look into.

PicoJS

A JavaScript library that enables face detection. It works with a still photo or from the integrated camera. It’s really fascinating how the web technology evolves over the last few years.

MDX

MDX is a specification that combines Markdown and JSX. This allows you to do some crazy things that are never done before, such as importing Markdown files, use the Markdown file as a standalone component to include in the other files, and use a React component in it.

Dump

A simple React component to dump or log output right in the browser rather than in the browser console with console.log. The tool has been created by Wes Bos, one of the most popular lecturers in React.

Duotones

A simple web app that’ll turn any photo into duotones; a monochromatic photo consisting of two contrasting colors. You can upload your own photos or select the photos that the tool provides to edit and download the result. A good tool for creating a striking background image on your websites.

DOM Testing Library

A JavaScript library to test the DOM (Document Object Model). You can use this to write a test unit for your web UI components, ensuring that the UI works as the real user use it. This also helps you maintain the UI functionality of the UI during code refactoring.

Dinero.js

A JavaScript library to create, calculate and format money, Dinero.s. supports all international currency out-of-the-box. You can use the library in a Node.js environment, loading it in the browsers, with CommonJS or EcmaScript 6.

WPRIG

An all-in-one starter WordPress theme created by Morten Rand-Hendriksenand is equipped with a build process preset using modern tools like Gulp, Babel, ESLint, and Visual Studio Code integration. It will help you create a great WP theme without the hassle of configuring the surrounding development tools.

Animista

CSS Animation brings the web to life. However, it’s not always easy to compose CSS Animation considering the browser prefixes for compatibility, parameters, and the animation timeframe. Animasta makes this stuff easier by generating the code for you. You can configure animation in a user-friendly interface from where you can simply copy the code.

How to GraphQL

GraphQL is an alternative to REST data structure and How to GraphQL is a comprehensive resource to learn it. It is far more efficient than REST since it will only pull the data requested reducing the amount of load and data transfer.

Perception

A cool WordPress plugin that would improve WordPress Media Library search by classifying images using Google Cloud Vision API. For example, if you have uploaded a “bird” image, you can search the image using the keyword “bird” whether or not the keyword is included to the image name, file name, or the meta data.

Ant Design Pro

“AntDesign” is one of the popular UI frameworks based on React.js and this is its “Pro” version designed for enterprise application. It includes several additional components that are not in the AntDesign common package such as AvatarList, HeaderSearch, and TagSelect.

DevTube

A collection of videos, pulled from Youtube, of several developer conferences like JSConf, Google TechTalk, and O’Reilly. Now get your popcorn and level up your Dev skills.

Progressively

A nice JavaScript library to load the image progressively, hence the name. Small image will be served and blurred while the browser is loading the full image. This helps your website load much faster especially if it contains large images.

Awesome OSX Command Line

An enormous list of useful and handy command lines for macOS. Here you may find a lot of things that might be done through the CLI such as “clearing the print queue”, “hiding folder in Finder”, and “preventing system sleep”.

KuteJS

Kute is a JavaScript library to perform animation. It is blazing fast and super efficient in memory consumption. It has extensions and extra tools to allow apply animation in CSS, SVG, and even a jQuery plugin for more convenient syntax.

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.

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.

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.

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.

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.

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.

Husky

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

Smooth Scroll Polyfill

Smooth Scrolling has proven to serve a more pleasing user experience. It is now proposed and drafted officially in W3C. At the moment, it is only working in Chrome, Firefox, and Opera. Use this library to emulate the smooth scrolling behavior in Internet Explorer and Safari.

SugarJS

SugarJS is a JavaScript library to manipulate Objects, Arrays, and Dates with a nicer and more readable syntax. The library also comes with a handful of utility functions, for example, .escapeHTML() which will convert HTML elements into their Entity format.

Wekan

Wekan is a Trello-like application that you can run on your own server. A great alternative to Trello, especially if you haven’t subscribed to any service yet. Check out the the detailed Wiki on the installation.

Composer Cat

Composer is popular dependency management for PHP applications. If you prefer working with a GUI, ComposerCat is the one you’re looking for. It allows you to install, update, and remove Composer packages an intuitive user interface. Built on top of Electron, ComposerCat is available for Windows, macOS, and Linux.

NerdFonts

A huge collection of fonts to unleash your nerdy side. The collection includes some of the popular font families such as Hack, Fira, Ubuntu, Roboto, and Meslo.

CubeUI

Built on top of Vue.js, CubeUI is a fantastic UI component to build mobile apps. Consisting with a lot of components such as Button, Popup, TimePicker, Slide, and Checkbox. Each component is quipped with a TestUnit ensuring continous integration and also minimizing bug on each component.

EmptyStates

EmptyStates is a collection of empty state pages on the web and mobile apps for inspiration. The empty state page is the kind of page that is often overlooked.

Bolt CMS

Bolt is CMS built with PHP. It is quick to set up, uses Twig as its templating engine, fully supports PHP7, easy to customize through a simple YAML file. Overall it looks interesting to me; I’ll definitely spend some time to explore it further whenver I have a chance.

Kutt

An application that shortens URLs with your own domain name. It’s built on top modern stacks like Node.js, React, and Redux with a handful of features that are built-in including password-protect URL, RESTful API, and fancy detailed stats to monitor your URLs. The best thing is It’s free and you can host it on your own server.

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.

Stimulus

A new JavaScript framework from Basecamp. Unlike React or Vue, it does not force you to write your entire application with JavaScript or add synthetic attributes.

Node WP Internationalization

The name speaks for itself. It is a NodeJS module to automate lots of things to internationalize your themes or plugins. Install the module and type wpi18n makepot to generate the POT file out of the translateable text in your WordPress plugins or themes.

Strapi

A content agnositic CMS framework to build a content API. It allows you to design your own content structure and the API as well as provides a beautiful Admin panel to manage them. However, it does not provide templating system built-in. It offers you to choose any front-end library of your preference such as React or Vue.

GoodShare

A JavaScript library to show Social Media button with the share count for a few social media. It supports many social media including ones that you’ve never heard of like Vkontakte, Odnoklassniki, SurfingBird, also a few messenging platform like Skype, WhatsApp, and LINE. GoodShare is also available as a Vue component.

Whoops

A PHP framework that’ll make debugging your code prettier with a nice and clean interface. If an error occurs in your PHP application; the interface creates trace showing codes that were executed in consecutive order, the code with the problem as well as the application environments.

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.

Litemoji

Anthor interesting PHP framework, Litemoji makes it easy to translate the emoji keyword to the actual emoji. For example :smile: will turn to 😊. Awesome right?

PHP HHVM Benchmark

It’s a benchmark of a handful of PHP-based CMSs and frameworks against multiple PHP versions and HHVM. I suggest starting your latest PHP project with PHP7.2 in mind to take advantage of the latest features as well as the speed boost as PHP7.2 showed an outstanding performance and out-perfomed HHVM, in those applications benchmarked.

Flutter

Flutter is a new initiative from Google that will allow mobile developers to build native UI for their iOS and Android application quickly with the native-like performance. Check out the Widget Gallery for the UI provided in the framework.

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.

PWA Rocks

Progressive Web Application (PWA) is a methodology that allows a website to run fast and useable offline. This PWA Rocks list one that as been approved by Google as a PWA. To learn more about PWA from Google take a look at: Progressive Web Apps.

RollUp

This is not a PHP-based tool. Still, it could be useful if you’d like to add some special JavaScript flairs to you PHP-based application. RollupJS is a tool to compile your JavaScript modules into a package

Feather Icons

A collection of icons with modern vibe. These icons are a perfect fit for website and apps designed for any platforms (iOS, Windows, or Ubuntu). The icons come in SVG as well as in React and Angular components.

Tabler

An elegant Dashboard/ Admin Panel based on Bootstrap 4. The dashboard features pre-made components such as Charts, Forms, Galleries, a Pricing Table, and a nice collection of custom Icons. A great starting point to let developers building an Admin Panel quickly. Check out the demo!

Replace Animated GIF with Video

GIF is everywhere, after making a great come back. But the problem about GIF is that is it usually very huge. It’s a waste of bandwidth, yet the graphic quality is often terrible. This guideline from Google shows how “Video” may replace GIF to show animated graphics.

Articulate

Yet another cool JavaScript library. Articulate brings synthetical voice to your website. It is able to parse and read your website, eventually can improve your website accesibility for users with impaired visibility.

BounceJS

A library to create animations with bounce effect. The animation is powered by CSS3 and a number of preset animations. You can install the JavaScript library through npm, bower, or simply copy the CSS animation generated in the website.

Flat Picker

FlatPickr is a lightweight, easily customizable, insanely fast date-time picker that works in IE9+, iOS Safari 6+, MS Edge, Chrome 8+, Firefox 6+. FlatPickr has also been ported to popular JavaScript frameworks including React, Ember, Vue, and Angular.

Devicon

A collection of icons of programming languages, designing, and development tools. The icons are available in SVG and Font format. Some particular icons such as Firefox, AWS, and HTML5 also come with their detailed variants. Pretty cool right?

Text Mask

A JavaScript library to transform the text that requires special formatting like a phone number, currency, or a credit card number. As the user is typing in the text will automatically be transformed into its appropriate formatting improving the user experience. TextMask can be used with React, Vue, or just plain old JavaScript.

Unique

A tool to find unique fonts that might rarely be seen elsewhere, Unique is useful for creating a logo or just to find a proper unique font combination for your document easily by just a few clicks. Once you’ve picked your preferences, you can download and name it your own font. That’s really cool!

FontDrop

A handy tool to show detailed information regarding the font. Simply drop the font, it will show the name, style, version, copyright information, glyphs, supported language, etc. among other things.

Relaxed

A converter that will turn HTML or Pug into PDF. You’re able to create a complex layout using HTML, CSS, JavaScript and use Markdown to write down the main content. On top of that, you can also use a JavaScript library, like Chart.js to add diagram and MathJax to add Math formatting.

SketchPress

The folks at 10up have just released SketchPress which is a Sketch template for quickly creating WordPress admin interface mockups and designs. It is packed with common admin UI like the Primary Button, Menu Bar, Dashicons, Metabox, etc. SketchPress is a great companion tool for WordPress developers to align the plugin and theme Settings or Options page with WordPress admin UI.

BrainMonkey

A PHP unit testing utility designed with some specific tools for WordPress. It provides tools that allow to mock PHP functions. It also provides a set of tools out of the box to deal with some WordPress functions like add_action remove_action to name a few, which are generally tricky to test.

Fractal

Fractal has been designed to be a central documentation tool for developers within a team to refer when there’s a need to integrate a component into a project. It allows you to integrate code snippet, displaying previews, documentation, notes, etc. of each component.

Vee Validate

Vee Validate is a JavaScript library to add input field with the validation built-in. It supports many type of inputs such as Email, Number, Dates, URL, IP address, etc.

LuminJS

A super tiny JavaScript library to highlight text on your website. It works seamlessly with a complex DOM structure and it’s programmable in that you can set the speed, styling, and the animation.

Database Backup Manager

It is a PHP library, and as the name implies, it provides a set of functionalities to handle database back up and restoration. The library supports various services to send to or pull the backup from, including Dropbox, Amazon S3, FTP and SFTP, and Rackloud Cloud.

WordPress Component Library

10up, one of the prominent names in WordPress, released a UI library designed specifically for WordPress. Unlike other UI library which only provides CSS and HTML codes, 10Up also provides the PHP code snippet that you can just paste in your theme. The component includes Navigation, Tabs, Tooltips, Commonts, and Blogrol.

Trevor

Trevor is simply Travis CI done offline. Travis is a Continuous Integration service where developers test their software to see whether the software works properly multiple environments. Trevor is still in its early stage; it currently only supports “NodeJS”.

Graaf

Graaf provide an overlay over your page to see how the grid — column, row, gutter — is laid out. You can also generate your own grid specification using the API provided.

Rellax

Rellax is a JavaScript library to create Parallax effect on page scroll. It comes with few options and relatively easy to configure. It is lightweight, run super fast, and requires no dependency like jQuery hence it is a great alternative to other libraries on this category such as Parallax.js or Scrollax.js.

Contrast Grid

A list of table shows color contrast and their accesibility grade based on the WCAG 2.0. You can change the value on the table, and quickly figure out whether the color combination comply with the WCAG standard.

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.