Web Tools #485 - CSS Tools, Build Tools, React Native

Issue #485 • November 3, 2022

Sometimes it's hard to tell how quickly the web platform is making progress. CSS is one such technology that seems to be moving at a lightning-fast pace. But it's not easy to measure how many 'new things' have been added.

While CSS3 was technically a thing, it doesn't appear that there's going to be a CSS4, though there are efforts in place to remedy that. I personally don't expect that to amount to much because I think things are fine the way they are.

But here's a bit of a hacky way to figure out approximately how many new CSS features have been added in recent years:

Visit the exhaustive CSS reference on MDN
Count the items under the section called "Index"
Compare the number of items in that list to an archived snapshot of the same page

I decided to compare that page to the one on archive.org from January 4, 2020. There are hundreds of items in that list, so in order to count them, I just need to use the HTML. I can use DevTools to grab the element that wraps that list, along with all its contents. In this case, it's marked up using a bunch of unordered lists. So I just needed to use my text editor to "find" how many list items are in the list on the current page compared to the archived version.

Here are the results:

CSS reference today: 732 items
CSS reference on Jan. 4, 2020: 584 items

That's pretty wild! That means 148 items have been added to the MDN reference since the beginning of 2020.

But let's not use this as a scientifically accurate analysis. In some cases, MDN may simply not have had an article on an item that was part of the standard prior to that. Also, not all of these are links to articles yet (i.e. the red links). It's also possible that a single MDN reference was split into multiple articles. And of course, MDN doesn't represent the official standards body of the web platform — so definitely take this analysis with a grain of salt.

Also, you'd probably like to know what those new features are. In that case, you'd have to run a diff between the two documents and see where the changes are. As a side point, although the MDN pages are hosted on GitHub, this particular list seems to be popular automatically and doesn't seem to have a single file's history you can look up for changes.

Whatever the case, this does provide some insight into how things have been progressing. Is it somewhat overwhelming to consider over a hundred new features have been added? Sure, but we don't need to learn all of them. Take in what you can and if you find something practical you can use that has good browser support, then go for it. Otherwise, the old tried-and-true methods for building stuff with CSS work fine.

Now on to this week's tools!

CSS and HTML Tools

Stop Leaving Your // Todos for Dead 💀
Height’s Code to Task feature automatically turns your // todo code comments into actionable tasks, ensuring your todos become dones. Track your tasks in one central place, automatically close tasks as you merge PRs, and work faster than ever with a powerful Command palette. SPONSORED

ColorZilla
An old but popular set of tools that I've never included in this newsletter. Includes a set of color tools for Chrome and Firefox along with an online gradient generator.

JSX Mail
An email framework that uses React to create email templates. Using JSX syntax makes it extremely easy to code your template, allowing you to create highly customized emails and reducing code maintenance work.

Link Preview Meta Tag Tester
An online tool to test out different combinations of meta tags for enabling link previews on social media sites and instant messenger apps.

Satori
A React library to convert HTML and CSS to SVG. It handles layout calculation, font, typography and more, to generate an SVG that matches the exact HTML and CSS in the browser.

Tailwind Color Picker
A Chrome extension to pick any pixel from any website and copy the closest Tailwind color to it.

Website Metadata
Enter a URL and this tool will show you various meta tag-related bits of info for the URL, how it appears in search, social links, thumbnail, etc.

whyframe
A library that enables rendering any UI framework markup within an iframe, including Svelte, Vue, Solid, Preact, and React.

twind.style
A small, fast, and feature-complete tailwind-in-js solution. No build step necessary and it's framework agnostic.

wc-slider
A web component that generates a highly configurable custom range slider element.

@tailwindcss/forms
A Tailwind plugin that provides a basic reset for form styles that makes form elements easy to override with utilities.

Build Tools, Bundlers, etc.

Bytes: Your Favourite JavaScript Newsletter
If you're like me and you subscribe to a lot of newsletters, you likely have that one you look forward to. Bytes is one of those for me. Always entertaining with plenty of cool tools, coding tips, and the latest in JavaScript news. SPONSORED

Ultra
A fast JavaScript package manager, that improves on the performance of common alternatives like npm, Yarn, pnpm, and Bun.

vite-plugin-ssr
Like Next.js/Nuxt, a zero-config SSR solution as a plugin for VIte. It's well tested, scalable, and fast.

DevTools-X
A collection of offline first developer utilities available as a cross-platform desktop application.

cm4all-wp-bundle
A nano-sized high performance JS/CSS resource bundler, made with esbuild, targeting WordPress Gutenberg with minimal dependencies.

Browserslist
Shared browser compatibility config for popular JavaScript tools like Autoprefixer, Babel, ESLint, PostCSS, and Webpack.

Knip
A CLI tool that finds unused files, dependencies, and exports in your JavaScript and TypeScript projects.

Create Nuxt App
Similar to other popular "create" utilities, this one helps scaffold out a project based on Nuxt.js.

npm-check-updates
A popular tool that lets you find newer versions of package dependencies than what your package.json allows.

GopherJS
A Go-based compiler that converts Go code to pure JavaScript, giving you the opportunity to write front-end code in Go that will run in the browser.

@vitejs/plugin-vue2
A Vite plugin for Vue 2.7 an up.

React Native Tools

Bytes: Your Favourite JavaScript Newsletter
If you're like me and you subscribe to a lot of newsletters, you likely have that one you look forward to. Bytes is one of those for me. Always entertaining with plenty of cool tools, coding tips, and the latest in JavaScript news. SPONSORED

React Native Instagram
An experimental implementation of Instagram's iOS page transitions (i.e. that zoom to/from square effect) for React Native.

react-native-jsi-base-coder
Base64/32/16 encoding/decoding for React Native written in C/C++ and JSI.

React Native for Windows
From Microsoft, a popular framework for building Windows apps with React Native.

react-native-file-access
File system access for React Native. Supports saving network requests directly to the file system along with Android scoped storage.

React Native Animated SpinKit
A port of an older CSS project that provides a unique collection of loading spinners for React Native.

MMKV
A fast key/value storage for React Native that provides fast and direct bindings to native C++, which are accessible through a simple JS API.

React Native Bi-directional Infinite Scroll
Adds the capability to allow infinite scroll from both directions (not just the bottom like other solutions) while maintaining smooth scroll UX.

react-native-responsive-fontsize
A responsive font size implementation based on screen size of the device in React Native.

react-native-autoheight-webview
An auto height webview for React Native, and also includes auto width for inline HTML.

Commercial Apps and Classifieds

These are commercial apps, affiliate links, PPC ads, and paid classifieds. Submit yours!

WebFileMaker – A super-fast and easy way to build CSS/SCSS and JavaScript with zero setup.

StackAid – A simple way to donate to all the open source software projects you depend on.

Jamf – Apple-only platform for managing iPhones, Macs, iPads and Apple TVs at scale. AD

Morning Brew – The latest tech and business news in a five-minute read daily, for free. AD

SiteLint – Audit your website for SEO, performance, and more, with real users, networks, and devices.

Scale8 – Fast, simple and privacy-friendly alternative to Google Tag Manager and Google Analytics.

Unflow – Create, experiment and instantly release screens in your native app.

A Tweet for Thought

As the rest of the thread points out, this isn't technically "every" variety of tomato, but I think 500 varieties is still pretty impressive!

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

Dāgs Grīnbergs built Spotify Playlist Lookup, which uses the Spotify API to allow you to find Spotify playlists that contain a specific track name. The only flaw in this is the fact that this pulls up all cover versions of songs, so you kind of have to filter through those to find what you're looking for.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly
PayPal.me/WebToolsWeekly