Fresh Resources for Web Designers and Developers (July 2022)

In the last few months, things have changed a lot in the front-end development fields. And this is going to be our main focus in this month’s round of the series.

If you’re a front-end developer, I’m sure you’ll appreciate what we have on the list. This post features a new JavaScript runtime contending with Node and Deno, new libraries for state management, a new build system for JavaScript, and a lot more.

Let’s jump in to see the full list.

Bun

Bun is a new JavaScript runtime similar to Node and Deno that allows you to run JavaScript applications on the server. Bun implements most Node APIs as well as Web APIs, so we get access to the filesystem, path, Fetch API, and Websocket.

Bun is currently in beta, but it promises on performance and provides better tools that would help developers be more productive.

Jotai

Jotai is a state manager for React.js applications with a focus on simplicity. It aims to solve the common re-render issues in React.js component, plus, it’s easy to implement. You can use it as a replacement of React State Hook function, and scale it up to build a more complex application.

Rematch

Rematch is a state manager adopting similar to Redux, except without the complexity. It works out of the box, without additional configuration. It also works with any framework; not just React.js but also Vue.js and Angular, and it’s only as small as 2kb.

Bao.js

Bao is a new framework to create web applications. Built on top of Bun, it’s similar to one of the popular frameworks, Express.js. In fact, it is also modeled after it which makes it familiar and easy to switch over from Express.js.

Autoregex

Regex is a special language that’s not easy to understand because of the complex syntax. And here’s where Autoregex comes in handy. It translates back the Regex into a human readable sentence which also makes it a great learning tool to understand RegEx.

Godly Website

If you feel that websites today look all the same, you need to check out Godly Website. It collects a lot of wonderful websites with unconventional designs. A great place to find design inspiration.

Moonrepo

Moonrepo makes building JavaScript applications much more manageable. It provides a set of tools that can help you maintain consistency in your project configuration, ensure the correct version of dependency is installed, and offers utilities that make your project build more efficient and productive.

Barebones

A collection of Vue.js components, and as the name implies, they are basic components. They carry functionalities but do not comes with design constraints so it’s up to you how you’d want to style it. It’s a great library as starting point for your website application UI with Vue.js.

Wails

Wails is a framework that allows you to build a Desktop application with Go. It compiles and handles native elements such as Windows, Menus, and Dialogs that it runs as good as native-built applications. Unlike Electron, Wails does not embed browsers a browser in the application, so it will run much faster.

Awesome Guidelines

Awesome Guidelines is a collection of high-quality coding standards of various languages from various sources and companies. You can find coding standards for C, Go, JavaScript, Kotlin, PHP, Python, and a lot more. If you’d like to learn what’s the coding standard of NASA and Google, check it out!

LazyGit

LazyGit is a Git application that adds UI inside the terminal. Similar to a Desktop application, it allows you to see current status, staged files, diff, stash, and many more. It’s a perfect tool for those working with Terminal who would like some convenience.

Bud

Bud is a JavaScript build framework. It combines all the good things from Symfony Encore and Laravel Mix and is pre-configured for all the common needs like Babel, React, PostCSS, Sass, and TypeScript.

It’s also a great framework for WordPress developers with @roots/bud-preset-wordpress package that you can install to build a WordPress theme or plugin.

HTMX

HTMX is a supercharged HTML. It provides convenient access to AJAX, CSS Transitions, and WebSockets just through the HTML attributes. This allows you to build a fairly dynamic UI with simple HTML such as creating infinite scroll, tabs, lazy loading, and a lot more.

Frappe Charts

A simple, lightweight, JavaScript library to create charts. It supports several different type of charts including the Pie, the Donut, and the Heatmap and renders the chart in SVG which makes it responsive and look sharp.

You can use the library as an NPM module or simply load the JavaScript file on the page. It just works.

NextUI

A collection of beautiful UI components to build modern applications with React.js. You can find common components required for an application like the inputs, buttons, pagination, table, and grid. If you want to build an application that instantly looks good, NextUI is what you might be looking for.

Elastic UI

Elastic UI is full of inspiration. It’s the design system library from Elastic. Even though, you might not be able to apply this library on to your own application, you can definitely learn how all these components are used to build a great popular application like Elastic Search, Kibana, and APM.

VueSax

A UI library built for Vue.js. It has buttons, input, table, and all base component for a website. Built from the ground up, Vuesax provides each component with customizability that allows your web application to stay unique to your style.

Create Block Theme

It’s a new official plugin from WordPress that allows you to create a block theme. You can design your own theme using full-site editing (FSE) and export it as a theme that you can install on any other WordPress site. I think this is going to change the game in the WordPress theme fields.

Colors.js

Color.js is a handy library that allows you to do all things colors with JavaScript. You can use it to read color and create color objects. You can even use it to manipulate colors such as changing the color, lightening it, and even converting color format.

VS Code Server

VS Code is a great code editor that is really popular among developers. You can run and use VS Code in Windows, macOS, and Linux… But what if we can run it in our own server.

Microsoft has recently opened up this possibility with VS Code Server allowing you to install the VS Code backend services which host extensions, the terminal, debugging, and then access it through vscode.dev. It’s more or less the DIY version of running your own Github Codespace.