Fresh Resources for Web Designers and Developers (June 2019)

It’s time again for us to share fresh resources with our fellow web developers. Our collection in this round involves multiple types of tools from several programming languages. But primarily, 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 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 a CSS grid more intuitive. It helps you to save time when creating complex layouts such as composing overlapping grid areas. The tool will generate the code that you can copy and paste to your website.

Inside Look at Modern Browser

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

Zdog

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 the 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 inspiration from.

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.

NightwatchJS

A JavaScript library that simplifies end-to-end testing. NightwatchJS utilizes 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

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

Pylon

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

Vant

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

Robo

Many of you might be familiar with setting up a task runner with Gulp and Grunt to automate workflows during development, such as concatenating files, minifying CSS and JavaScript, etc. These tools are built 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 README.md file is an integral part of an open-source project. But if you feel like creating a proper and beautiful readme file can be a daunting task, you can try using this tool to streamline the process on creating one.

CSS Wand

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

Gitmoji

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

Gitfolio

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

PHPInsights is a tool to analyze your PHP code quality. It checks the use of Classes, Abstract, Interface, 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 platforms such as Laravel, WordPress, and Magento out of the box.

Rector

Rector stands for Reconstructor, and is a tool to automate code refactoring of your PHP codebase to 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 hard work 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 three theme designs out-of-the-box: light, dark, and corporate, but of course, you can extend the theme to your own taste. Ngx Admin is free both for personal and commercial projects.

RemixIcon

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 scales 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 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.