Web Tools #439 - JS Patterns, CSS, Build Tools, React

Advertisement

There are some coding topics that are certainly beyond the scope of this newsletter's intro section. For example, I've never really studied JavaScript classes yet on my own, so I wouldn't be able to write anything too in-depth on that even if it did fit for this short intro.

If, however, you want what looks to me to be a pretty good guide to using JavaScript classes, you'll want to check out Advanced JavaScript Design Patterns on DEV.to by a developer who works for a company called DhiWise.

What I like about this post is that it's not actually supposed to be a tutorial on JavaScript classes but, as the author explains, the post covers 20+ JavaScript design patterns with all the code examples using JavaScript classes.

So you're more or less getting two tutorials in one: A deep look at design patterns commonly used in software development along with a bunch of practical uses for JavaScript classes.

The only thing that's annoying about the post is the fact that all the code examples are images. Terrible for accessibility and copying/pasting. That being said, when I first started to code more than 20 years ago, I learned everything from hard copy books and had to type it all by hand while learning. That was valuable to be able to do that because it forced me to memorize a lot of things. So if you have to type these examples out yourself, maybe that will help the concepts stick a bit more?

And if you want a few hundred JS/DOM quick tips in book form you can buy my JavaScript E-Books bundle (half price!) that compiles into 3-ebooks most of the coding tips I've included in past issues of this newsletter.

CSS and HTML Tools

The New Tab Page You'll Actually Use
Replace your web browser’s new tab page with a minimal list of links, grouped and sorted how you like. A Fine Start is for fans of minimalism and nice typography.  sponsored 

Open Props
Pre-defined components made up of CSS variables that you can drop into a project to build your own components or design system.

Text Balancer
A fast text wrap balancer for multi-line headlines on the web that wraps text more evenly across lines, reducing uneven line lengths.

Container Query Polyfill
A tiny polyfill for CSS Container Queries that transpiles CSS on the client side and implements Container Query functionality using ResizeObserver and MutationObserver.

Shadow Palette Generator
Online tool to create more realistic looking CSS shadows. Uses CSS variables along with layered shadows to get a more "lush" look.

Atmos
Multi-featured tool to create, edit, and customize color palettes for UI designs that lets you generate colors and uniform shades or refine specific colors in the palette. Free during Beta phase.

Mimcss
A CSS-in-JS library that allows authoring CSS styles without creating CSS files. Instead, you code your styling rules by creating TypeScript classes.

UnoCSS
An instant on-demand atomic CSS engine. There's a blog post explaining the rationale, along with a playground and VS Code extension.

Stampino
A fast and powerful HTML template system that lets you write dynamic templates using real HTML <template> tags.

tailwindcss-typography
A plugin that provides a set of `prose` classes that adds beautiful typographic defaults to any vanilla HTML you don't control (like HTML rendered from Markdown or a CMS).

Color Wheel
An interactive tool that lets you recognize the relationship between colors, to discover color harmonies and color combinations and create beautiful palettes easily for your designs.

Modular Scale
An older tool that lets you generate CSS/Sass or JS for a modular scale in your typographic designs.
 

Build Tools, Bundlers, etc.

Build Internal Apps Remarkably Fast with Retool
Retool is a new approach to building internal apps: we’ve unified the ease of visual programming with the power and flexibility of real code. Drag and drop a form together, and have it POST back to your API in minutes. Deploy instantly with access controls and audit logs.  sponsored 

eslint-plugin-anti-trojan-source
An ESLint plugin to detect and prevent Trojan Source attacks from entering your code base.

envsafe
TypeScript module that makes sure you don't accidentally deploy apps with missing or invalid environment variables.

Nandu
An open source npm registry compatible with npm, Yarn and pnpm. They warn that while it's functional, it may not be production-ready yet.

Depp
Check your npm modules for unused and duplicate dependencies fast.

gko/Project
Shell script to create Node, Rust, Python, or Ruby projects locally and on GitHub.

PickBetterPack
Online tool that lets you enter a project's package.json contents, then this will list similar packages you can consider as alternatives.
 
nanobundle
Yet another bundler for tiny modules, powered by esbuild, with support for ESM and CommonJS.

Create Rust App
Set up a modern Rust+React web app by running a single command.

TypeDI
A dependency injection tool for TypeScript and JavaScript to build well-structured and easily testable applications in Node or in the browser.

eslint-plugin-simple-import-sort
Easy autofixable import sorting, for those who use eslint --fix (autofix) a lot and want to completely forget about sorting imports.

React Tools

Build Internal Apps Remarkably Fast with Retool
Retool is a new approach to building internal apps: we’ve unified the ease of visual programming with the power and flexibility of real code. Drag and drop a form together, and have it POST back to your API in minutes. Deploy instantly with access controls and audit logs.  sponsored 

React Query Helper
A helper library to help you use React Query (the Hooks library for fetching, caching, and updating data) more easily and consistently.

Rendition
A Figma plugin that converts a Figma design into a React component with a single click.

resourcerer
Declarative data-fetching and caching framework for REST APIs with React.

Graphire
A declarative and unopinionated graph visualization library for React that supports different layouts to visualize large dynamic networks of nodes and links in both 2D and 3D.

React Location
Powerful, enterprise-grade routing for React apps. Features declarative and asynchronous route elements and data loaders, first-class search param APIs, nested-routing, code-splitting, and more.

Code Hike
React component to write embedded code-walkthroughs. Handy for presentations, documentation, coding videos, blog posts, etc.
 
Chakra-UI AutoComplete
An autocomplete library for the Chakra UI component library, featuring accessibility via a utility called Downshift.

use-smartcrop
React hook for smartcrop.js, the utility for content-aware image cropping with points of interest and facial recognition.

React Search Field
An elegant search field component for React with a few different options for on-page filtering via search.

React Marquee Slider
A marquee/slider component for React. Certainly not for every project but brings back memories of HTML's <marquee> element.

use-onclickoutside
A React hook for listening for clicks outside of an element.

React Transcript Editor
A React component from BBC's open source, to make transcribing audio and video easier and faster.
 

Commercial Apps and Classifieds

These are commercial (non-free) tools, paid classifieds, and affiliate links. You can submit a link for consideration or you can buy a classified link (will be marked "ad").

Linkz.ai - Add link preview popups that appear on hover.

Morning Brew - A daily newsletter to keep you informed & entertained. ad 

Package Updater - Safely update npm packages in all your projects.

Nebo - Visual React builder to assemble React components with no code.

Alternative Assets - World’s largest alternative investment community. ad 

Uideck - Premium HTML landing page templates and UI kits.

Nudge - A privacy-first analytics stack for content marketers.
 

A Tweet for Thought

Sahil Bloom's advice on getting ahead is on point, even though on the surface it seems like it will end up with the opposite result.

 

Send Me Your Tools!

Made something? Send links via Direct Message on Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions for improvement or corrections, feel free to reply to this email.
 

Before I Go...

If you're looking for a quick way to look up IMDB ratings for a TV series, check out SeriesHeat. Do a search then get a heatmap of average IMDb ratings for each episode. The cool part is you can click on a square in the heat map (e.g. any green one, which represent the highest rated episodes) to view that episode's IMDB page.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly

Support this newsletter:
PayPal.me  /  Patreon / GitHub Sponsors  /  E-Books / Buy Me a Coffee