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

Key phrases

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

Kotlin Weekly #321

Sunday, September 25, 2022

ISSUE #321 25th of September 2022 Hello from Berlin! We are here to run the Berlin marathon, which does not make us better at Kotlin, but does it make us happier? Also not. Find our selection of

The image in this post displays its own MD5 hash — and A mysterious voice is haunting American Airlines’ in-flight announcements

Saturday, September 24, 2022

Issue #900 — Top 20 stories of September 25, 2022 Issue #900 — September 25, 2022 You receive this email because you are subscribed to Hacker News Digest. You can open it in the browser if you prefer.

Weekend Reading — 👋 0.1 + 0.2

Saturday, September 24, 2022

This week we play Dungeon & Types, visualize our designs IRL, FOMO into the Metaverse, and wrestle a bear for a Belgium waffle. Weekend Reading — 👋 0.1 + 0.2 By Assaf Arkin – 24 Sep 2022 – View

Daily Coding Problem: Problem #889 [Easy]

Saturday, September 24, 2022

Daily Coding Problem Good morning! Here's your coding interview problem for today. This problem was asked by Amazon. Run-length encoding is a fast and simple method of encoding strings. The basic

Animated | Visualizing 140 Years of Global Surface Temperatures 🌐

Saturday, September 24, 2022

Here's a look at 140 years of global surface temperatures, highlighting the ten coldest and warmest years since 1880. View Online | Subscribe Presented by: Explore what 8 billion people means for

The Best Laptops of 2022

Saturday, September 24, 2022

Did You Know?: The stethoscope was invented in 1816 by French physician René-Théophile-Hyacinthe Laennec and motivated by a desire to accurately (and modestly) diagnose heart problems in women. The

Noonification: Monsters of Mars

Saturday, September 24, 2022

Top Tech Content sent at Noon! Private Applications Begin Here How are you, @hacker? 🪐 What's happening in tech this week: The Noonification by HackerNoon has got you covered with fresh content

Week in Review - GTA 6 footage leaks, Revolut gets hacked, and Wipro fires 300 for "moonlighting"

Saturday, September 24, 2022

TechCrunch Newsletter TechCrunch logo Week in Review logo By Greg Kumparak Saturday, September 24, 2022 Hi, friends! Welcome back to Week in Review, the newsletter where we very quickly sum up the most

London Police Arrested 17-Year-Old Hacker Suspected of Uber and GTA 6 Breaches

Saturday, September 24, 2022

The Hacker News Daily Updates Newsletter cover 2022 First Half Threat Report A Semiannual Report by FortiGuard Labs Download Now Sponsored LATEST NEWS Sep 24, 2022 London Police Arrested 17-Year-Old

Startups Weekly - Tiger Global, fickle checks and the difficulty of acceleration

Saturday, September 24, 2022

TechCrunch Newsletter TechCrunch logo Startups Weekly logo By Natasha Mascarenhas Saturday, September 24, 2022 Welcome to Startups Weekly, a fresh human-first take on this week's startup news and