Fresh Resources for Web Designers and Developers (December 2021)

We are at the end of 2021! Time really flies and the world at the moment is trying to recover from the effects of the pandemic. But we are still here to feature the best tools for our fellow web developers and designers.

In this round of the series, we are featuring various tools related to CSS, JavaScript, and some web tools that will help you be more productive as a web developer. Let’s jump in to see the full list.

Lighthouse Simulation

A web tool that allows you to test website performance with Google Lighthouse. It simulates the website on various network speeds which covers the bandwidth speed and the latency.

The result will show you the score site FCP (First Content Paint) and LCP (Largest Contentful Paint). A handy tool to lookup and get broader insight of your site performance.

Villus

A GraphQL client for Vue.js. It’s only less than 4KB and is available as a High-order component or hook, which makes it quite flexible to integrate in your Vue.js application. On top of that, it also supports TypeScript and Suspense API out of the box.

Mess with DNS

DNS is one of the subjects on the Internet that’s not easy to grasp. Editing the DNS entry can also be terrifying because it could cause your site to go down for days if it’s somehow misconfigured.

This is where the Mess with DNS tool comes in. It provides you with a playground – a dummy domain – to experiment with the DNS configuration.

Polygon Shapes

Polygon Shape is a showcase to demonstrate the capability of CSS clip-path to create irregular shapes like polygon, a star, a flower, and even a butterfly.

TinyWow

A collection of handy tools for your everyday digital needs. Here you can find a tool to convert images from HEIC to JPG and vice-versa, SVG-to-PNG, trim video, XML-to-JSON, convert an epoch time, merge PDF files, and even create a meme many more.

Omatsuri

Another collection that you should bookmark. Omatsuri contains some handy tools such as one to generate triangle with CSS, one for generating color shade, convert SVG to JSX, lorem ipsum generator, fake data generator, and many more. Both designers and developers will appreciate all these kind of tools.

ToolHunt

ToolHunt is a kind of tool curator that collects all types of design and development tools. Here you can find tools for designers, developers, for collaboration, or to improve productivity. Some of the themes are free, premium, or freemium. It’s a great source to find new tools or to gather inspiration for new digital products.

MobbinDesign

A library of design inspiration for mobile apps with more than 50.000 screenshots. They are searchable and sortable in categories so you can easily find screenshots from popular applications like Facebook, Target, Airbnb, WSJ, and many more. It’s a great source to find UI/UX inspiration for mobile apps without having to install the app.

CSSO

CSSO is a library to “optimize” CSS. It removes redundancies, compresses the code (e.g. transforming syntax or values into its shorthands), and creates restructuring such as merging declarations, rules, and so on resulting in a much smaller CSS styles output.

You can run it as a standalone CLI or integrate it with libraries and tools like Gulp, Grunt, Webpack, and PostCSS.

RegexLearn

This tool aims to make learning RegEx more enjoyable and understandable. It provides some interactive lessons to learn RegEx that start from the very basic and will pass you over to the more advanced topic as you accomplish each lesson. You’ll definitely find it to be one of the best sources to learn RegEx.

Font Knowledge

This is a Google initiative in collaboration with the Google Font team and world-class Typography experts to present the best source to learn Font. These are in-depth materials you can typically only get in colleges such as the basic typography, the glossaries used in typography, classification, and a lot more.

Modern Fluid Typography

CSS has advanced so much in the last few years, including how it handles font size on-screen with the clamp() function. This function allows you to set the minimum and maximum size of font size based on the current screen size. And this little tool allows you to generate the code for this in a more intuitive way using a nice GUI.

Gradient String

A Node.js library that makes it easier to generate a gradient in terminal/ console. You can use some preset gradients, or compose your own with multiple colors as well as adjust the position in the gradient. It’s a handy library to make a CLI application a lot more attractive.

Pollen Style

A library of CSS variables. These variables contain basic values for typography, layout, and colors. It’s a perfect foundation for a design system with consistent and maintainable styles.

Open Props Style

Another library of CSS variables that contains styles foundation such as for animation, colors, typography, gradients, dark and light theme, and many more to come. This is another great library if you are looking for a foundation to build a UI design system.

FloatingUI

A JavaScript library to create floating positional elements. Commonly you’d need it for Tooltip, Dropdown, Popovers, etc. It supports primitive positioning like “left”, “right”, “top” and “bottom” as well as dynamic positioning such as following the browser scroll position. This library handles all the heavy lifting so you can focus on being more productive.

Act

What if you can run your Github Actions config right in your computer. This is what this tool is trying to achieve, it allows you to run it locally in your computer which can be useful to test the configuration or simply when your internet is down.

Cheat Sheet

PHP has evolved a lot in the past few years. Especially now there are a lot of new syntaxes. This cheat sheet shows you some snippets and comparisons of code between different versions of PHP. It’s a good reference to keep you updated with modern PHP.

Developer Ipsum

Lorem Ipsum text does not have to be boring. Instead of some random text, you can use this little tool to generate dummy text that developers can understand and relate to.

Money

A PHP library that makes it easier to handle currency formatting. It provides an easy intuitive API to convert to different currencies, perform arithmetic and comparison, and many more.