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.
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.
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.
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.
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.
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.
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 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.
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.
CSSWand is a collection of beautiful effects built purely with HTML and CSS. It provides the code to copy and paste onto your website.
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 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 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 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 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.
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:
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 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 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.