Fresh Resources For Web Designers & Developers To Get Started V2

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. (Source: Hongkiat)

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

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.

Sol

Developed as an alternative for Alfred and Spotlight, Sol aims to improve your productivity with keyboard shortcuts. This tool is also currently in active development and I’m looking forward to how it evolves in the future.

Fastify

A Node.js framework to build web applications with a focus on developer experience. Designed to serve as many requests in low-cost infrastructure. It’s extensible through hooks and plugins with around 200 plugins in the ecosystem.

It’s part of OpenJS and backed by some big names in tech like Microsoft. Fastify is a very well-established framework.

FreeForDev

The Internet is full of free stuff like tools, articles, and other resources. This website is specifically built to organize these free stuff in well-organized sections so you can easily navigate and easily find the frees stuff you’re looking.

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.

Previous Version Is Here

Happy learning!

7 Likes