Fresh Resources for Web Designers and Developers (April 2020)

By Thoriq Firdaus. in Web Design. Updated on April 21, 2025.

Despite the doom and gloom due to the COVID-19 virus spread, it’s not stopping us from sharing fresh resources and tools with our fellow web developers.

In this edition, we have several resources and tools with extensive sets of features. For example, we have a library that contains a list of countries with their complete data, a collection of 500+ free icons, a collection of React Hooks, and many more. Let’s jump in immediately to see the full list.

.no-js #ref-block-tax-49849-1 .ref-block__thumbnail { background-image: url( "https://assets.hongkiat.com/uploads/thumbs/related/tag-fresh-resources-developers.jpg" ); }

Click Here for More Resources

Check out our complete collection of hand-picked tools for designers and developers.

Typecho

A simple blogging platform built with PHP. Typecho reminds me of the early days of WordPress when it was just a blogging platform. If you’d like to run a simple blog with PHP, Typecho could be the perfect platform for you.

CSSgg

A collection of 500+ icons built purely with CSS. No images or SVGs. You can use these icons by installing them with NPM, loading them through the CDN via jsDeliver or Unpkg, and it’s possible to load only specific icons with the specialized URL, like below:

https://css.gg/c?=|icon-name|icon-name|icon-name

EditorJS

A JavaScript library to build a block-based editor. Each type of content such as paragraphs, images, and headings is defined separately as a “block”. It’s extensible with plugins; you can create a plugin to create custom blocks or extend the current block. It’s an overall great JavaScript library to create an editor on the Web platform or app.

Legit

Legit adds complementary Git commands for some common workflows that are easier to type and remember. For example, you can type git switch to checkout to another branch plus automatically stash and unstash changes. Another additional command it adds is git sync which will do the following in subsequent order: stash > Fetch > Auto-Merge/Rebase > Push > Unstash.

Destiny

A linter for file and directory structure designed for JavaScript/TypeScript based projects. It works similar to a linter in which it will scan the project folder and all files, and create the suggested directory structure based on its evaluation of how the files are imported across other files. It’s also able to move files into the new structure and remove empty directories, resulting in a more organized and “prettier” layout.

Fink

A PHP library to crawl links on a website and output several pieces of information associated with the links, including the status code (whether it’s ok (200) or not found (404)), which page the URL is linked from, and how long it took to request the URL.

Github Markdown TOC

A utility command line that makes it super easy to generate a table of contents (TOC) on the README.md file. You can type ./gh-md-toc ~/code/foo/README.md. It will generate a table of contents based on the heading structure in the file in a Github-compatible Markdown format, for example:

Table of Contents
=================

* [Heading 1](#heading-1)
* [Heading 2](#heading-2)
* [Heading 3](#heading-3)
* [Heading 3.1:](#heading-3-1)
* [Heading 3.2:](#heading-3-2)

Docker Github Actions

A new official Github Action from Docker. This Action allows you to automate building a new Docker image and push it directly to Docker Hub.

VSCode Extension Samples

This is a pretty extensive example of how to build Visual Studio Code extensions. You can find everything from the most basic “Hello World” example to an example with a Testing suite, and each example of using the API.

Countries

A quite extensive dataset of countries. It provides comprehensive data about countries such as their official name, native name, translations, TLD, and much more. This data comes in JSON, XML, YAML, and PHP formats.

OpenEMR

An open-source application for Electronic Health Records (EMR) and medical practice management platform. Despite being free and open-source, it provides extensive features comparable to proprietary platforms; it comes with an advanced scheduling system, e-prescribing, medical billing, lab integration, clinical decision rules, and multilingual support.

ReactUse

An extensive collection of predefined React Hooks that you can use right away in your project. You can find Hooks to interact with the platform API such as useBattery, useGeolocation, Hooks to add animation like useInterval and useSpring, and Hooks to manage state like useStateValidator and useMediatedState.

Sylius

Sylius is an e-Commerce platform built with Symfony. Developed with high standards of coding and testing practices, it comes with many features to run an e-commerce site professionally.

React Query DevTools

A DevTools designed for the React Query module; a module to fetch and process asynchronous data in React. The DevTools allow you to view the cache in real-time, inspect core query objects and query data payloads, and manually refetch & remove queries.

HTML Sanitiser

A PHP library to sanitize HTML output. With this library, you can set which HTML elements and attributes you would allow to be rendered in the final output.

Livewire

A full-stack library to create applications with Laravel. Aside from inheriting features from Laravel, the library also integrates its own JavaScript, utilities, UIs, and components which make it easier to create interactive features in the application.