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

Web Tools Weekly
WEB VERSION
Tools for Web Developers

Issue #439 • December 16, 2021

Advertisement
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.

Get It Free For Chrome and Firefox
A Fine Start

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.

Advanced JavaScript Design Patterns

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.


Now on to this week's tools
 

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.

Shadow Palette Generator

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.
 
PickBetterPack

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.
 
Code Hike

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.

A Tweet for Thought
 

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

Older messages

Web Tools #438 - VS Code, JS Utilities, Uncats (misc. tools)

Thursday, December 9, 2021

Web Tools Weekly WEB VERSION Issue #438 • December 9, 2021 Advertisement Retool is the Fast Way to Build Internal Tools Visually design apps that interface with any database or API. Switch to code

Web Tools #437 - Learn RegEx, JS Libraries, Testing, React

Thursday, December 2, 2021

Web Tools Weekly WEB VERSION Issue #437 • December 2, 2021 Advertisement The New Tab Page You'll Actually Use Replace your web browser's new tab page with a minimal list of links, grouped and

Web Tools #436 - JS Courses, Frontend Frameworks, SVG, JSON/DB

Thursday, November 25, 2021

Web Tools Weekly WEB VERSION Issue #436 • November 25, 2021 Advertisement Testim.io Testim is an AI-powered UI test automation tool that gives developers an easy way to author and maintain cross-

Web Tools #435 - CSS Tools, JS Utils, Git/CLI Tools

Thursday, November 18, 2021

Web Tools Weekly WEB VERSION Issue #435 • November 18, 2021 The following intro is a paid product review for Retool, a platform that provides a fast way to build internal tools. Like many startups and

Web Tools #434 - JS Quiz, React, Build Tools, Uncats

Thursday, November 11, 2021

Web Tools Weekly WEB VERSION Issue #434 • November 11, 2021 Advertisement Need a Better Way to Test Your Web App? Testim's Advanced AI Automates UI Testing. Your dynamic web application needs test

You Might Also Like

Import AI 399: 1,000 samples to make a reasoning model; DeepSeek proliferation; Apple's self-driving car simulator

Friday, February 14, 2025

What came before the golem? ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Defining Your Paranoia Level: Navigating Change Without the Overkill

Friday, February 14, 2025

We've all been there: trying to learn something new, only to find our old habits holding us back. We discussed today how our gut feelings about solving problems can sometimes be our own worst enemy

5 ways AI can help with taxes 🪄

Friday, February 14, 2025

Remotely control an iPhone; 💸 50+ early Presidents' Day deals -- ZDNET ZDNET Tech Today - US February 10, 2025 5 ways AI can help you with your taxes (and what not to use it for) 5 ways AI can help

Recurring Automations + Secret Updates

Friday, February 14, 2025

Smarter automations, better templates, and hidden updates to explore 👀 ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

The First Provable AI-Proof Game: Introducing Butterfly Wings 4

Friday, February 14, 2025

Top Tech Content sent at Noon! Boost Your Article on HackerNoon for $159.99! Read this email in your browser How are you, @newsletterest1? undefined The Market Today #01 Instagram (Meta) 714.52 -0.32%

GCP Newsletter #437

Friday, February 14, 2025

Welcome to issue #437 February 10th, 2025 News BigQuery Cloud Marketplace Official Blog Partners BigQuery datasets now available on Google Cloud Marketplace - Google Cloud Marketplace now offers

Charted | The 1%'s Share of U.S. Wealth Over Time (1989-2024) 💰

Friday, February 14, 2025

Discover how the share of US wealth held by the top 1% has evolved from 1989 to 2024 in this infographic. View Online | Subscribe | Download Our App Download our app to see thousands of new charts from

The Great Social Media Diaspora & Tapestry is here

Friday, February 14, 2025

Apple introduces new app called 'Apple Invites', The Iconfactory launches Tapestry, beyond the traditional portfolio, and more in this week's issue of Creativerly. Creativerly The Great

Daily Coding Problem: Problem #1689 [Medium]

Friday, February 14, 2025

Daily Coding Problem Good morning! Here's your coding interview problem for today. This problem was asked by Google. Given a linked list, sort it in O(n log n) time and constant space. For example,

📧 Stop Conflating CQRS and MediatR

Friday, February 14, 2025

​ Stop Conflating CQRS and MediatR Read on: m​y website / Read time: 4 minutes The .NET Weekly is brought to you by: Step right up to the Generative AI Use Cases Repository! See how MongoDB powers your