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.
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.
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.
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.
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 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
<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. 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.
Having a README.md 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.
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.
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 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.
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 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 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.