Fresh Resources for Web Designers and Developers (February 2022)

By Thoriq Firdaus. in Web Design. Updated on March 2, 2022.

One of the benefits of being a web developer is that this field is inundated with free resources, either to get our job done or to level up our skills.

Like every other month, in this round of the series, we have put together various of these free resources to keep you updated. These resources include font, icon, a free tool to monitor website uptime, some JavaScript libraries, and a lot more. Let’s jump in to see the full list.

Fresh Resources for Web Designers and Developers (Jan 2022)

Many people typically start their new year with new goals or resolutions. But the developers start their new... Read more

TLDR

TLDR is an effort to simplify the manual page (or “man” page) for command-line tools and make it more approachable. Instead of giving you a long list verbose explanation, TLDR will provide a short clear explanation along with an example of real usage of the command line. TLDR can be installed with NPM.

FlagIcons

As the name implies, it’s a collection of all country flags with some additional flags such as the United Nations and the Europan Union flag. It comes with SVG format so it keeps sharp regardless of the screen or size of the icon. FlagIcons can be installed with NPM.

Element Plus

A UI library built with Vue 3. Aside of components like the Buttons, Form, and Navigation, this library also provides the design source file for Figma and Sketch. This will allow designers and developers to collaborate with this library more efficiently.

Vue Vben Admin

A UI library that provides an end-to-end solution to build Admin interface. It’s built with a modern development stacks like Vue3, TypeScript, and some features out-of-the-box including some common components, authentication, theme config, i18n, and a lot more.

Comic Mono Font

Comic Sans is making a come back and this time it comes as a font to write codes. Personally, I think the font looks pretty great. If you like a refresh for your code editor or IDE, give this font a try.

Mermaid.js

Think of it like Markdown but for chart. It provides some special syntax that allows writing conveniently on your document without requiring a special program. Mermaid is now integrated into Github so you can add chart in your README file of the repository.

Uptime Kuma

A self-hosted application that allows you to monitor website uptime. It supports monitoring websites from various protocols; including the HTTP response, DNS, and TCP. It’s a great alternative to some paid services like Uptime Robot. You can install it with Node.js or Docker.

33 Concepts JavaScript

This is a collection of articles, videos, and references that outline 33 concepts in JavaScript. This is a great resource to sharpen your JavaScript programming skill. It helps you solve the problems better as you understand the underlying concept around the language.

Harlem.js

A simple library for global state management in Vue 3. What makes Harlem.js different from alternative library is that it’s unopinionated. It does not impose particular standards or conventions to structure your code. This makes it quite flexible to integrate with Vue 3 projects of any time and scale.

TinyFileManager

A fast and simple PHP library that allows you to spin up a web-based file manager. It allows you to store, upload, manage, and even edit the files. It contains one main PHP file written in PHP5.5 so you can run it in traditional old shared hosting.

Bottender

A JavaScript framework to build a conversational interface. It handles most of the complexity and the setup. It makes building the interface more approachable. Bottender is built on top of Messaging APIs that allow you to connect and build for multiple platforms like Line, Messanger, and Slack, using the same APIs.

Storybook Test Runner

A Storybook plugin to run tests. Built with Jest and Playwright, this plugin makes it easier to test your UI components and interaction. You can simply install and add a few lines in your Storybook configs, and it will mostly just work.

Duf

Duf is a handy CLI utility that can show advanced information on disk usage including your local disk, network, mounted disk, etc. It’s compatibility with Windows, macOS, and Linux.

TryCanvas

Canvas is an elegant blogging platform built with Laravel. It features a distraction-free experience, basic analytics to get to know your readers, and built-in SEO settings. I think it’s a great alternative to WordPress if you need a more minimal platform.

SVG Path Editor

As the name implies, You can drag the paths and save the file back. It’s a handy tool if you just need to make small edits, adjustments, or manual optimisations on an SVG file.

Hoppscotch

Hoppscotch is an API client that supports all HTTP requests, including setting a custom one. On top of that, it also supports both RESTful type of API and GraphQL. It’s a handy tool to test API endpoints during developments.

Terser

Terser is a successor of UglifyJS. This library is able to minify JavaScript codes to compress the file size delivered in your website or applications. It supports modern JavaScript syntax and also integration with some bundlers including for Webpack.