Fresh Resources for Web Designers and Developers (August 2022)

The front-end development is fast changing, with new things to explore every month. There’s always a new methodology, approach, and framework introduced in the web development world that you need to update yourself with.

In this edition of the series, we’ll feature some frameworks and resources for web designers, testing tools, and a lot more. If you are a front-end developer or designer, I’m pretty sure you’ll love what we have on the list. Let’s take a look.

Testing Accessibility Library

Testing Accessibility Library will allow you to perform automatic accessibility tests for the keyboard. Aside from improving the Accessibility, it can help to evaluate the usability of your website with a keyboard and reduce the time that you’d typically use in manual testing.

3D Icons

Trends come and go, but it seems that the use of 3D elements in web design is here to stay. The 3D icons library is a collection of 3D icons that you can use for commercial and personal projects. It’s available in many file formats including Blender, Figma, Sketch, and Photoshop.

Iconer

Iconer.app is a collection of icons from popular sources such as Bootstrap, Remix, Material, Radix, and many more. On top of that, it allows you to customize the icons. You can change the color, size, stroke width, etc., and you can even select the format to download.

It currently supports several formatting including JPG, PNG, JSX, and SVG.

Lofi Wireframe Kit

This design kit consists of 100 components for wireframing in Figma. It includes common components to build both mobile and desktop applications, like buttons, input fields, and images.

I think it’s a gem if you’re a web or app designer, as it will help you manifest your next great idea.

Vue TermUI

Building a Terminal application can be intimidating but with Vue TermUI, it does not have to be. It is a library that allows you to develop a beautiful CLI with Vue and comes with web tools that you might have familiar functionality for developing the web like HMR, Bundling, and DevTools.

WebDev Patterns

A collection of patterns, code snippets, and cookbooks to optimize your website. It’s divided into different categories: Animation, Component, Layout, Theming, and Web Vitals. All this together will help you to build a website that’s fast and engaging using modern best practices.

RakkasJS

A full-stack framework that allows you to build a website with modern technology: React.js and Vite. With Vite, it offers a much better and faster development environment. It also supports SSR rendering with new React.js Suspense, and file-based routing.

I think this library could be a good contender for some of the alternatives like Next.js and Gatsby.

CMDK

This library brings a composable React.js component to create CMD + K shortcut interface that you can ss to your website. Mac users should already be familiar with the shortcut, which in some applications, will launch an interactive search, dialog, or command pallete.

Learn Vue 3: Step by Step

After years of work, Vue 3 is finally stable. In this course, Jeffrey Way has done a fantastic job covering improvements and new features in Vue 3 from top to bottom. And he’s been generous to provide this course for Free!

Pure CSS Scroll Shadow

CSS has become more powerful over the years. Not only that it’s now much easier to center the div or create a complex grid layout, you can also create an interactive effect such as creating shadow hints for both horizontal and vertical scroll. Check the article to learn how.

Indonesians Who Design

This is a website where you can find a list of Indonesians who work as designers in many different fields whether it’s UI/UX, Web, App, Typography, etc. If you’re a developer trying to find a designer, a design partner, or a company trying to scout great talent in design, you should definitely check the list.

MillionJS

A JavaScript library that offers faster Virtual DOM implementation. It’s faster compared to React.js by about 11X and only less than 1KB. It’s designed as a drop-in replacement for React.js so you can have the best of both sides. A familiar development is ergonomic with faster performance.

myOctocat

Octocat is a mascot of Github. Designers have been creating various themes and faces of Octocat in Octodex. Now, you can create your own easily with myOctocat which you can use as your profile or avatar. You can customize almost everything including the hair, skin, eyes, and all the accessories.

Breakdance

Breakdance is a new page builder for WordPress. It brings more than 100+ design components, full site editing, and supports some popular plugins like WooCommerce, ACF, and Toolset out of the box. If you still find it hard to navigate Gutenberg, maybe you can try to give this alternative a shot.

Redis Architechture Notes

This article explains how Redis works and how it compares with Memcached. Even though this has nothing to do with the front-end, the illustration in this article has done a great job that I think designers and people who are less technical can easily understand it.

Testing Library Recorder

A Chrome extension to boost productivity with setting up automatic E2E testing. As you’ve it installed in Chrome, you will find a new option under the Recorder tab in DevTools that allows you to download it as a script to use in Testing Library.

Front-end Checklist

This checklist covers things you need to know to be a front-end developer. It provides the fundamentals like HTML and CSS, provides recommendation, best practices, and do’s and don’ts when developing a website. Whether you’re new or seasoned developers, I’m sure there’s something to learn from the list.

MUI-X

Rendering a large dataset like a list of tables and directory structure can be challenging. It can have a bad performance impact on your website if it’s not done right. This is where the MUI-X library comes in. It has been designed specifically to handle lots of data along with filtering, sorting, and pagination.

Remult

Remult is a JavaScript library that provides abstraction in TypeScript for CRUD operation. More specifically, it provides REST API as the controller, the front-end client, and the database query builder.

It supports common databases like MySQL, MongoDB, and SQLite. If you’re coming from a traditional MVC framework, you should get familiar with it pretty quickly.

What’s new in PHP 8.2

This article features changes that will happen in PHP8.2. I’m just excited to see how PHP has been improving in the last couple of years that encouraging best practices and minimizing bad practices.