It’s time again for us to share fresh resources for our fellow web developers. Our collection in this round involves multiple type of tools from several programming languages. But primarly, we have several tools that can help you write better codes.

For example, we have a PHP library that’s able to evaluate your code quality, a PHP library that can automatically refactor your code (how awesome is that?), and a dead-simply to use JavaScript library to perform end-to-end testing. Without further ado, let’s see the full list below.

CSS Grid Generator

This tool, created by Sarah Drasner, will make creating CSS grid more intuitive. It helps you to save time when creating complex layout such as composing overlapping grid areas. The tool will generate the code where you can copy and paste to your website.

CSS Grid GeneratorCSS Grid Generator

Inside Look at Modern Browser

A comprehensive insight from Google to explore how modern browsers work. This gives you a glimpse on the browser internals such as how it utilises CPU, GPU, and Memory. This resource may help on writing performant codes. The illustration from Mariko Kosaka makes it pleasant and easy to understand.

Inside Look at Modern BrowserInside Look at Modern Browser


Another fantastic from Metafizzy. Zdog is JavaScript library that allows you to draw 3D polymorphic shapes through HTML Canvas which then can be composed into a meaningful figures like, for example, Mario Bros. Metafizzy is also known for his other fantastic JavaScript library such as Isotope, Flickity, and Packery


UIBot App

UIBot is a tool to generate user interface of an admin dashboard. Simply click on the button, and the tool will generate a new variant of layout and colors. It might not end up being the UI in your project, but it may still be a handy tool to drive an inspiration from.

UIBot AppUIBot App

Accesibility Insights

A browser extension to evaluate your website for Accessibility issues (a11y) and provides guidelines on how to fix those issues. The extension is available as a Chrome and Microsoft Edge extension.

Accesibility InsightsAccesibility Insights


A JavaScript library that simplifies an end-to-end testing. NightwatchJS utilises the standard W3C WebDriver API to connect and interact with the browsers to perform the test. It support numerous drivers including the WebDriver services including GeckoDriver to run test on Firefox browser, ChromeDriver, and SafariDriver.



Playroom is a unique tool. In a nutshell, it’s something like the tool to layout design system or component library but it also provides a preview section that emulates the component in various viewport size. It’s a pretty handy tool to display how your component or layout change in granular level.



PylonCSS is unlike any other CSS library out there. Instead of a set of classes, it provides a set of custom component. This allows you to wrap your website in a more expressive way similar to iOS. For example, we can use to create a horizontal stack of elements, or to create vertical stack.



Vant is a collection mobile UI component built on Vue.js. Collection is pretty vast with 55+ components and growing. It support TypeScript, SSR (Server Side Rendering), and i18n, which means you can translate the component to locale languages.



Many of you might be familiar with setting up a task runner with Gulp and Grunt to automate workflows during development such as concatinating files, minifing CSS and JavaScript, etc. These tools are build with Node.js. Now, what if I told you that you can do the same with PHP. Meet Robo a task runner for PHP


Readme Generator

Having a file is an integral part of an open-source project. But if you feel like creating a proper and beutiful readme file can be a daunting task, you can try using this tool to streamline the process on creating one.

Readme GeneratorReadme Generator

CSS Wand

CSSWand is a collection of beautiful effects with built purely with HTML and CSS. It provides the code to copy and paste it on to your website.

CSS Wand<


We’re seeing an increasing trend on using emoji in a git commit message. Check this reference, Gitmoji, to see which proper emoji to use in your commit message.



Gitfolio is a tool that allows you to build a portfolio site based on your Github profiles as well as create a blog. A great to create your site quickly.



PHPInsights is a tool to analyse your PHP code quality. It checks the use of Classess, Abstract, Interface, the code complexity, and some code styling. You can run it during development or within your CI pipelines to keep your overall code quality in check. It’s also compatible with popular PHP platform such as Laravel, WordPress, and Magento out of the box.



Rector stands for Reconstructor, is a tool to automate code refactoring of your PHP codebase to a more modern PHP practices. It can be installed through Composer or use the Docker image then it’s as easy as typing the command rector and let it do the hardwork for you.


Ngx Admin

Ngx Admin is a free admin dashboard built on top of Angular, Bootstrap and Nebular, one of popular Angular UI components. It comes with 3 theme design out-of-the-box: light, dark, and corporate, but of course you can extend the theme to your own taste. Ngx Admin free both for personal and commercial projects.

Ngx AdminNgx Admin


A nice collection of icons. Each icon in the collection comes with several variants instead of just one or two, and it also comes with 2 styles: lined and filled. There are 1574 icons in total as of this writing. You can download the icons in SVG, icon fonts, as well as in PowerPoint and Keynote format.


RFS (Responsive Font Size)

RFS is a CSS library that automatically scale font size appropriately based on the viewport size. The library is meant to use with a CSS processors and so it’s available in all the popular pre-processors including Less, Sass, Stylus, as well as PostCSS.


WP Scripts

WP Scripts is a collection of reusable utility scripts to develop WordPress. It contains with a pre-defined recommended configuration out-of-the-box so you can start working on the project instead of tinkering with the configurations all-day. Once installed, you will have the access to wp-scripts command line which you can use to perform a build command to compile codes, the test command to perform end-to-end testing, and a few more commands.

WP ScriptsWP Scripts

The post Fresh Resources for Web Designers and Developers (June 2019) appeared first on Hongkiat.

WordPress Website Development

[ continue ]