Web Tools #479 - Learn Patterns, CSS, Build Tools, Uncats

Web Tools Weekly
WEB VERSION
Tools for Web Developers

Issue #479 • September 22, 2022

Advertisement
Application Monitoring with Low Overhead
Easily analyze increased response time with intuitive dashboards that help you drill down into individual endpoints, requests, paths, and users tied to your slow downs. Scout quickly shows you the exact endpoint causing the issue.

Start a Free Trial!
Scout APM

A really old JavaScript guide that many people link to in all sorts of contexts is Addy Osmani's fantastic Learning JavaScript Design Patterns. If you've never seen it, then by all means, bookmark it and check it out when you get a chance. Or just keep it in an open tab and try to study one of the patterns once in a while, maybe once or twice a week.

If you've seen it before, then I'm sure you're thinking it's just an old resource that might not be as applicable to modern JavaScript. That was true a few years ago, but as the main page points out, "This edition was updated to ES2015+ syntax in 2021."

Learning JavaScript Design Patterns

The content has been updated, but it's also been moved from Addy's personal website. It's now hosted as a sub-resource on Patterns.dev, a more recent project of Addy Osmani and Lydia Hallie. The new book is described as, "a free book on design patterns and component patterns for building powerful web apps with vanilla JavaScript and React."

Learning JavaScript Design Patterns

I think it's great that such an old and important JavaScript resource is still fresh in 2022, but it's especially nice that it's now part of a much larger project. And just to be clear: The original JS Patterns book is not part of the new book; it's part of the website for the new book.

As a side point, maybe you're wondering how these well-researched publications can possibly be offered for free. I'm sure there was literally hundreds of hours of research that went into all the content.

In case you're not aware, Addy works on Google Chrome, mostly focused on web performance. Making the web fast makes more money for Google. Therefore, there's huge incentive for someone like Addy to put out free information on making the web faster. Of course, speed makes more money for any app that's fast, so there's incentive for all of us to use the suggestions.

Now on to this week's tools!
 

CSS and HTML Tools

Application Monitoring with Low Overhead
Easily analyze increased response time with intuitive dashboards that help you drill down into individual endpoints, requests, paths, and users tied to your slow downs. Scout quickly shows you the exact endpoint causing the issue.     SPONSORED 

mediaquery.style
A quick reference for looking up the syntax for some of the most common media queries with code and explanations for each.

Vanilla Breeze
Online tool to convert Tailwind CSS classes to traditional CSS. Includes options to use web components for the output and customize the CSS output.

Breakpoint
Sass mixin that makes writing the most common media queries as simple as possible.

Juice
A JavaScript module to inline your CSS properties into the style attribute, also available as a CLI with limited options.

Tailwind CSS Plugin Starter
A boilerplate and starter project for creating Tailwind CSS plugins.

Lightning CSS
A fast CSS parser, transformer, bundler, and minifier, written in Rust and claims to be 100x faster than comparable JavaScript-based tools. Also includes an online playground.

Lightning CSS

Gradient Text Generator
Online tool to create text that has a gradient background. Uses -webkit- prefixes and requires use of !important on -webkit-background-clip.

Palette Maker
A multi-featured interactive tool to test out various color palettes on different categories of real-world UI and design elements (typography, illustration, etc).

PowerGlitch
A standalone library with no dependencies that leverages CSS animations to "glitch" anything on the web, without using canvas.

CSS.GUI
A visual builder to create, style, and customize components directly on a page before exporting the raw HTML and CSS.

PixelZoomer
Chrome extension that provides a zoom, ruler, and eyedropper tool for measuring elements and grabbing colors.

Build Tools, Bundlers, etc.

Mastering Prettier & Stylelint
Get in-depth knowledge of Prettier & Stylelint and take your linting skills to the next level. You and your team will be glad you did.   SPONSORED 

Squint
An experimental ClojureScript to JavaScript compiler, designed to work especially well for projects that you'd like to deploy on CloudFlare workers, node scripts, GitHub actions, etc.

tsx
"TypeScript Execute". Node.js enhanced with esbuild to run TypeScript and ES modules.

create-t3-app
Interactive CLI to quickly set up an opinionated, full-stack, type-safe Next.js project using the "T3 Stack" (details in the repo).

npm trends
Online tool to compare package download counts over time for npm packages using a visual line graph.

GradeJS
Enter a URL and this tool will analyze webpack production bundles without access to the source code. It detects a list of bundled npm libraries and works for minified or tree-shaken bundles.

GradeJS

sdc-check
An npm script to add to your project's package.json file that will inform you about potential risks in your project dependencies list.

Create Tailwind
A command-line tool to scaffold Tailwind-ready projects using create-next-app, create-vite, create-astro, or create-svelte.

Burm
A simple, fast and reliable object relational manager for Bun (the JavaScript runtime).

vite-plugin-svelte-console-remover
A Vite plugin that removes all console statements (log, group, dir, error, etc.) from Svelte, JS, and TS files during build so they don't leak into production.

React 18 + SSR
An experimental server-side rendering (SSR) solution for projects created with React 18.

Fleet
A build tool for Rust that claims to be up to 5x faster than cargo, by optimizing your builds using existing tooling available in the Rust ecosystem.
 

The Uncategorizables

Mastering Prettier & Stylelint
Get in-depth knowledge of Prettier & Stylelint and take your linting skills to the next level. You and your team will be glad you did.   SPONSORED 

Remix Chat
A chat application built on top of Remix and Cloudflare.

Manrope
A free modern sans-serif variable font with wide language support.

Use.GPU
A set of declarative, reactive WebGPU legos to compose live graphs, layouts, meshes and shaders, on the fly.

SharePie
An easy-to-use, clean and blazing fast code collaboration platform to increase your connectivity across teams, perform code interviews, or brainstorm your code.

WebApp-Store
Run your apps on the web and access them from any device.

UTMDog
A free UTM code builder that also includes various links for info on UTM codes and why they're useful.

UTMDog

BrewMyMac
Online tool for Mac to quickly generate the necessary installation instructions for apps via Homebrew, Homebrew Cask, and the Mac App Store.

Revolt
A native cross-platform chat app for connecting with team members, friends, etc., similar to Slack, Discord, etc.

Podvine
A complete podcast platform to search for podcasts, create playlists, view subscriptions, and even create your own podcast.

Marta
A native, privacy-friendly file manager for macOS that's fast, extensible, and has keyboard support.

Commercial Apps and Classifieds

These are commercial apps (i.e. not free or limited free plan), paid classifieds, and affiliate links.

Onduis – Privacy-focused web analytics with a simple stats view.

Walkthrough – Build step-by-step code walkthroughs to share knowledge.

Emerging Tech Brew – The latest tech news, three times a week.  AD

Iris Themes – High-quality Ghost themes with premium support.

Refind – 7 links every day to make you smarter, tailored to your interests. AD

Swimm – Documentation platform built for engineers.

Superblocks – A programmable IDE for developers to build internal apps.
 

A Tweet for Thought

How to throw the web dev community into a rage...
 
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...

In case you were wondering what it would be like if everything on earth was a reviewable product on Amazon: Earth Reviews. My favourite is the reviews of "Babies".

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly
PayPal.me/WebToolsWeekly

Older messages

Web Tools #478 - Top Languages, JS Utils, JSON/DB, Mobile

Thursday, September 15, 2022

Web Tools Weekly WEB VERSION Issue #478 • September 15, 2022 Advertisement Protect Your Apple Devices From Anywhere Jamf Now is a mobile device management solution that makes managing company-owned

Web Tools #477 - No-code Tests, React Tools, Git/CLI, Vue

Thursday, September 8, 2022

Web Tools Weekly WEB VERSION Issue #477 • September 8, 2022 The following intro is a paid product review for Reflect, an automated no-code platform for end-to-end regression testing. For complex apps

Web Tools #476 - Classes, Frameworks, Jamstack, Uncats

Thursday, September 1, 2022

Web Tools Weekly WEB VERSION Issue #476 • September 1, 2022 Advertisement Scout: Powerful Application Monitoring Easily analyze increased response time with intuitive dashboards that help you drill

Web Tools #475 - DOM Examples, CSS Tools, Build, JS Utils

Thursday, August 25, 2022

Web Tools Weekly WEB VERSION Issue #475 • August 25, 2022 Advertisement Retool is the Fast Way to Build Internal Tools Retool offers a component library and app-building framework in one, powerful

Web Tools #474 - JS Libraries, SVG, Git/CLI

Thursday, August 18, 2022

Web Tools Weekly WEB VERSION Issue #474 • August 18, 2022 Advertisement Build Internal Tools 10x Faster with Retool Retool is the fast way for developers to build and share internal tools. Teams at

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