Fresh Resources for Web Designers and Developers (Jan 2022)

By Thoriq Firdaus. in Web Design. Updated on January 29, 2022.

Many people typically start their new year with new goals or resolutions. But the developers start their new year by seeking new problems to solve or a new open-source or tool to develop. That’s why there are hundreds of open-source tools being actively developed, some of which you will find on the list along with other new resources.

In this round of the series, we have tools to develop CLI, learn advanced CSS, and improve productivity. Without further ado, let’s jump to the full list

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... Read more

XR

XR is a debugging tool for PHP. It provides some helper functions where you can pass variables to debug, dump the output on a localhost address in real-time and present the debugging message in a nice layout.

The tool is available as Composer package as well as Docker image which makes it easy to integrate with your existing project.

Lage

Lage is a new initiative from Microsoft to manage large repositories with multiple packages, also known as monorepo, more efficiently. It provides the configuration and commands that let you type a command once and handle the rest on the other packages on the repository.

Syncthing

Syncthing is a utility tool to synchronize files on your computer. It is quite similar to Dropbox, except that it is hosted in your own computer and can be connected to LAN or over the Internet.

Moreover, you don’t have to share your data with third-parties. It works with many platforms including macOS X, Windows, Linux, FreeBSD, and many others.

Unlighthouse

An open-source tool that allows you to test your web pages with Lighthouse for performance, SEO, and accesibility. It organises these tests in a nice modern UI where you can see, search, sort, or re-run the tests on individual pages and much more.

It’s currently in active development and looks very promising as it would make these audits easily manageable.

SmolCSS

A collection of CSS snippets to address common problems with modern CSS features such as setting aspect ratio, centering elements, creating stack layout, responsive padding, scroll snap, and a lot more. A really great source for anyone who would like to upgrade their CSS skill.

StyleStage

A tool that aims to rekindle the CSS Zen Garden, StyleStage provides the medium for developers to explore and show what modern CSS can do to styles HTML. It’s an overall great source to learn CSS whether you’re just starting out, as you will find beautiful unique layouts, styles, and inspirations.

Rich

Rich is a Python library to create a rich Terminal or Shell applications. It provides an API for easily styling output with colors, render tables, progress bars, handle markdown, and even highlight source code. It works on macOS, Windows, and Linux.

RCI

Have you seen some websites where it asks for the 2FA (Two-Factor Authentication) with multiple small inputs? It’s a common UI pattern that we can find on the Web today, and RCI aims to make it easy to create one. It’s a React component that provides the base structure for the input with improved accessibility. You can check the demo here.

VantaJS

A JavaScript library to create animated interactive backgrounds. The library is pretty easy to use. It provides configurations for adjusting colors, speed, scale, etc. It’s lightweight, fast, and an overall cool library to add to your website.

Dura

Dura is a clever tool that runs in the background to watch your Git repositories and commit the uncommitted changes without affecting the actual Git tree. It’s like an autosave feature and TimeMachine combined, so you will never accidentally lose your work.

Ffflux

Ffflux is not a typical gradient tool. Aside from generating simple gradients, it can also generate complex gradient compositions. You can adjust the colors, blend mode, angle, etc. to create a unique gradient and then export it to PNG or SVG.

Omni

Omni is a Chrome extension to improve your workflow working in the browser. It takes a similar concept as Alfred in macOS but it runs in the browser instead.

Similarly, with Omni, you can navigate tabs and history, browse and manage bookmarks, as well as do some actions like creating a new Github repo, new document, and others that boost your productivity.

Medusa

A headless open-source commerce engine that allows you to create any digital commerce whether it’s a traditional e-commerce site, marketplace, or just using it as the backend for an app.

Medusa is packed with features needed to run the e-commerce business like shopping carts, product cataglogues, order management, as well as APIs for developers to extend the features.

SQLPad

SQLPad is a SQL editor that you can host on your own server. It allows you to write and execute SQL queries and visualize the results. It supports database types including MySQL, Cassandra, SQLite, and even Google BigQuery.

Discord.js

A Discord Node.js SDK to interact with Discord platforms. It covers all Discord APIs wrapped in object-oriented code structure. It allows you to do some operations like getting a channel, getting user information, creating a DM, and ultimately enables you to create a fully integrated application for Discord.js.

GetCandy

A Laravel package that brings e-commerce functionality similar to Shopify. It provides the Admin Dashboard where you can add products, see orders, and other administrative operations. At the time of the writing, it is in active development with more features to come such as API and add-ons.

Spin

A Bash utility that aims to improve and simplify Docker to manage development and production environments regardless of the programming language. Instead of writing docker-compose with all the confusing arguments, you can just write spin up and be done. It also manages compatibility with Windows, macOS, and Linux.