Issue #402 (Nullish Coalescing, CSS/HTML, Text Editors, Media)04/01/21
The nullish coalescing operator was added to the ECMAScript specification in 2020 and currently has support in all modern browsers.
This is a feature that has a name that's way more complex sounding than it actually is. So if you're like me and you largely ignored this one for some time, here's a quick crash course.
let myVar = someVar || 7;
This is a simple variable declaration using the OR operator (||). The idea here is that if the left side of the OR operator is falsy, the value "7" will be applied to the myVar variable. The problem with doing it this way is that the following line will also apply 7 to myVar:
As will this:
This is where the new nullish coalescing operator comes in. This operator, represented by two question marks (??), ensures that only null or undefined values are viewed as falsy.
let myVar3 = '' ?? 7;
console.log(myVar3); // ''
let myVar4 = 0 ?? 7;
console.log(myVar4); // 0
let myVar5 = null ?? 7;
console.log(myVar5); // 7
let myVar6 = undefined ?? 7;
console.log(myVar6); // 7
Try all examples on CodePen
Notice in the code above and in the live demo, when the ?? operator is used, the empty string and zero value are treated as proper values (which is usually what you want). The last two examples demonstrate that both null and undefined will be viewed as falsy (or, more accurately, nullish).
Now on to this week's tools!
CSS and HTML Tools
Set Up, Manage & Secure Apple Devices in Minutes
Jamf Now is a device management solution for your team's Apple devices at work. We make management tasks simple and affordable, so you can support your users; no IT required. Web Tools Weekly readers can manage 3 devices free now! sponsored
Fluid Space Calculator
Live edit a "fluid space system" based on min/max viewport sizes, then copy and paste the generated CSS into your project.
A tiny utility for constructing `className` strings conditionally.
A no-code form creation service that offers 99% of its features free and offers unlimited forms and submissions in the free plan.
A utility-first CSS framework as a programming language that has similarities to Tailwind but purports to make improvements.
A conic gradient generator and gallery of gradients using the new conic-gradient() syntax.
An experimental just-in-time compiler for Tailwind CSS that generates your styles on-demand as you author your templates instead of generating everything in advance at initial build time.
An easy way to set, read, or update CSS variables per element.
An interactive live preview of dozens of coding fonts that you can test using various coding languages. Also includes a "compare" feature.
Single-file drop-in video player web app for using MP4 video files served using basic directory listing.
Toggle to view color combos most used by designers or color combos least used by designers.
Data Color Picker
Palette chooser to create a series of colors that are visually equidistant, useful for data visualizations like pie charts, grouped bar charts, and maps.
Text Editors, VS Code, etc.
Advanced React & GraphQL
A visual editor for Chakra UI, a React component library. Quickly draft components with a simple drag and drop interface.
Code Spell Checker
VS Code extension. A basic spell checker that works well with camelCase code. Helps catch common spelling errors while keeping the number of false positives low.
Chrome or VS Code extension. A code snippet manager to save snippets to the cloud and organize them in collections or by hash tags.
Design and deploy your own VS Code themes from scratch or browse, star, and fork existing custom themes created by others.
Online tool to batch transform text snippets using regular expressions, to avoid doing similar edits manually.
Automated typing in VS Code, potentially useful for live coding presentations or streams.
A nice looking VS Code theme that has dark and light versions and named after the starter template with of the same name.
VS Code extension that provides a convenient way of creating, duplicating, moving, renaming, and deleting files and directories.
Media Tools (SVG, Images, Video, etc.)
A web app to generate unique SVG shapes, backgrounds, and patterns, ready to use with your design tools and workflow.
Free Figma Templates
A collection of Figma templates, UI kits & resources for designers, agencies, and business owners.
HTML media player made for movies. Has an elegant look, lots of ways to customize it dynamically, and support for captions files.
Dither Me This
Online tool to reduce the file size of an image, giving it a pixilated old-school look.
Online tool to remove the background from any image using artificial intelligence. Requires login to download higher than 0.5 MP.
Another background removal tool using AI, but this one is free for low resolution and paid plans for higher resolution.
Similar to react-three-fiber but for Vue. A Three.js + Vue 3 + Vite library for creating WebGL effects.
A simple online tool installable as a PWA to create large-pixel graphics. You can upload an image to work with or start from scratch.
A set of small and minimal icons in outline or solid mode and you can select a size before copying the SVG.
A Tweet for Thought
Here's a thread by Matt May, head of inclusive design at Adobe, discussing a history of Flash, which reached end of life in December 2020.
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...
Needledrop is a UI that lets you play an album via a link from YouTube in a turntable format. Click the "track" button to enter a different URL then use the "arm" to pick a spot on the chosen "record".
Thanks to all for subscribing and reading!