Fresh Resources for Web Designers and Developers (May 2022)

Web development is an industry of multiple disciplines. You can decide to be a specialized front-end developer or backend developer. But you can also be a full-stack developer – bit of both, and this is something we are going to explore in this round of the series.

Here we have put together several resources for both front-end, backend, and some low level principal of software engineering that will strengthen your skill as a full-stack developers. Let’s jump in to see the full list.

Aleph.js

Aleph is a full-stack framework for Deno. The framework handles spinning up the server, requests, and SSR that supports both React.js and Vue.js out-of-the-box. It also has built-in tool for development to publishing to server that provides an end-to-end experience to build a web application.

Markdoc

Markdoc is a new framework used internally in Stripe as content authoring for their documentation. You can write the content with Markdown syntax and combin with some of it’s unique features such as Nodes, Tags, and Validation.

Stripe documentation sets the bar high for the quality and now that they have the tool open for anyone to use, you can create one just as good.

Jooble

An international job search platform, Jooble is the place to find your next job. You can look for any position in any industry including hundreds of jobs for web designers and developers.

The platform sources the jobs from thousands of sources including corporate websites, social networks, and classified ads, etc and from more than 70 countries.

Laravel Hyrule

A Laravel add-on that provides a nice API that makes it more intuitive to build a validation rule. For example, you can create a rule for a password such as that it has to be at specific length, contains a character, a number, etc. You can also use it as a generic validation for any input passed on your Laravel application.

Vue Component Library Starter

A starter kit to build component with Vue.js. It includes all the tools you need that makes starting and developing Vue component fast, such as Vite, UnoCSS for CSS authoring, Vitest for unit testing, and Cypress for end-to-end testing to name a few. What you need to do is just run a couple commands and you’re all set to start develop.

Knex

A framework for Node.js that makes dealing with database more intuitive. It supports various database platforms including MySQL, PostgreSQL, and SQLite3. It provides a uniform interface to connect, query, and help you create database which will boost productivity and help it to make it easier to maintain your Node.js application.

SpaceDrive

A desktop application to monitor disk space, not only your local computer disk but also the cloud disk usage. It supports several popular cloud storage providers including Apple Photo, Google Drive and Dropbox. It also provides an interface that you’re already familiar so it’s easier organize files across the local and cloud disk.

Sofware Engineering at Google

Software engineering is not only about writing codes or creating an app, but it also about how it is easily maintainable and sustainable through time. This book covers software engineering practice at Google and is now available for free as an HTML version.

FD

fd is a CLI utility to find files or directories in your computer filesystem. It’s similar to the linux find command, only it provides a more intuitive interface. Plus it’s faster, supports glob pattern aside of RegEx, and highlights output with nice colors.

Click to Component

This JavaScript library can help to streamline your debugging workflow for React.js application. It allows you to click on the element on the browser and it will direct it immediately in the VSCode editor. You can integrate this library with several different React.js stack that includes Create React App, Next.js,

HyperUI

A collection of Tailwind CSS components consisting of more around 100 components and their variations. You can find common components like buttons, inputs, navigations, etc. to more advanced ones such as prouduct cards. With all these components, you can create a simple site, a simple webapp, or an e-Commerce site.

Chalkist

A simple web application that allows you to generate screenshot for code snippet. You can change the theme, color, customize the editor, and generate the image which you can share on your social media or post on your blog.

Stripe.sh

Stripe.sh is a special endpoint that loads in-browser Terminal that allows you to run or test Stripe CLI as you walk through the doc right within the browser. Another great initiative from Stripe that further improves experience on their documentation and set the bar even higher for other tech companies to follow.

WebExtension

A framework that provides a standard way to build, test, and publish a cross-platform extension for browser; allowing you to develop fast, write the code once and publish it on both Firefox and Chrome.

HopeUI

A UI component library built with SolidJS with focus on reusability and accessibility. It contains around 40 components including Buttons, Navigations, Inputs, and Form. Each component is highly customizable and support dark-mode out of the box.

AutoAnimate

A library to instantly and easily add smooth animation or transition on web UI application. The library will work mostly out of the box. But if you need a more advanced animation, it provides a plugin API where you can add your own specification. You can use it with React.js, Vue.js, or just plain JavaScript.

ZagJS

A JavaScript library to build a common interactive UI patterns on a design system such as the Accordion, Dialog, and Popover. It’s a framework-agnostic library which means you can use it with any framework of your choice whether it’s React, Vue or Solid.js.

tsup

TypeScript is a popular tool that brings type-safety to JavaScript. However we sould still require to compile TypeScript to plain JavaScript and that sometimes can be run slow on a large project.

This is where tsup comes in. Built-on top of esbuild, tsup is blazing fast. It also supports compiling various file formats including .js, .mjs, and of course the TypeScript file, .ts.

NX

NX provides a set of command that you can run to start a project with a pre-configured build setup for running test, compiling codes, and integrating to several CI providers. It frees you up from the trouble of setting up a web project and can help to streamline build process in a monorepo setup.

TypeChallenge

A collection of challenges to help you to understand how type system in TypeScript works. The challenge ranges from the easy ones to the extreme. I think it’s an overall great resource for anyone whether you’ve just got started or want to improve their skills to become an expert on TypeScript.

Lottie

A JavaScript a library that provides a set of tools to create a rich animation or motion design on the web. It’s used by many big names on the industry and has become a standard to create, edit, test, and collaborate on creating the web animation. It is faster compared to GIF or displaying video and also integrates with many popular design tool such as Adobe XD, Figma, Webflow, and even VSCode.