Fresh Resources for Web Designers and Developers (February 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)

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.

TLDR

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.

FlagIcons

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.

Element Plus

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.

Vue Vben Admin

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.

Comic Mono Font

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.

Mermaid.js

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.

Uptime Kuma

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.

33 Concepts JavaScript

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.

Harlem.js

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.

TinyFileManager

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.

Bottender

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.

Storybook Test Runner

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.

Duf

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.

TryCanvas

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.

SVG Path Editor

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.

Hoppscotch

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.

Terser

Snarkdown

Snarkdown is a JavaScript library that allows you to parse Markdown text and transform it to HTML. It’s only 1KB, fast, and is available in several different module formats so you can run it on Browser, Node.js, or modern ECMAScript environment.

Snarkdown

OneDev

An open-source self-hosted Git server with built-in CI/CD functionalities, and project board management. So with OneDev you can host your codes, manage PR, review issues, and a lot more in one place in your own server.

OneDev

WatchTower

Watchtower is a handy utility tool that makes maintaining Docker containers a little less daunting. The Watchtower will monitor if there’s a new update of the Docker image and will rebuild the container with the new image.

WatchTower