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

Advertisement

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

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

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.

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.

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.

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

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