Web Tools #402 - CSS Tools, VS Code, Media, SVG

Advertisement

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.

In your JavaScript you've probably done something like this before:

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:

The zero value or the empty string are both considered falsy values, so the JavaScript engine assumes you want the value 7 and not those falsy values. But those values aren't always considered falsy in all circumstances. Sometimes you want an empty string or zero value to stand.

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.

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

This is a nice improvement and with strong browser support should be safe to use in a lot of projects today. If you need older browser support, you can use Babel to compile your code to equivalent older JavaScript.
 

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.

clsx
A tiny utility for constructing `className` strings conditionally.

Tally
A no-code form creation service that offers 99% of its features free and offers unlimited forms and submissions in the free plan.

Turbo CSS
A utility-first CSS framework as a programming language that has similarities to Tailwind but purports to make improvements.

TabPanelWidget
An accessible tab panel widget that turns into an accordion component on smaller screens. Use in vanilla JavaScript projects, Vue, or React.

Conic.css
A conic gradient generator and gallery of gradients using the new conic-gradient() syntax.

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

css-proxied-vars
An easy way to set, read, or update CSS variables per element.

Dev Fonts
An interactive live preview of dozens of coding fonts that you can test using various coding languages. Also includes a "compare" feature.

player.html
Single-file drop-in video player web app for using MP4 video files served using basic directory listing.

Poolors
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
ICYMI, Wes Bos has re-launched his Advanced React course that offers 70+ HD videos in the master package. (Alternatively, there's React for Beginners and Beginner JavaScript).   promoted

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

thiscodeWorks
Chrome or VS Code extension. A code snippet manager to save snippets to the cloud and organize them in collections or by hash tags.

Theme Studio
Design and deploy your own VS Code themes from scratch or browse, star, and fork existing custom themes created by others.

TxtFiddle
A JavaScript playground specifically for text manipulation. Includes a number of prebuilt templates and the ability to save fiddles.

ReX
Online tool to batch transform text snippets using regular expressions, to avoid doing similar edits manually.

JSPad
A live JavaScript editor that lets multiple people edit the document and uses camera and microphone, useful for live code collaborations or even for conducting job interviews.

VSCode Typer
Automated typing in VS Code, potentially useful for live coding presentations or streams.

Vitesse Theme
A nice looking VS Code theme that has dark and light versions and named after the starter template with of the same name.

File Utils
VS Code extension that provides a convenient way of creating, duplicating, moving, renaming, and deleting files and directories.

Media Tools (SVG, Images, Video, etc.)

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

Aladino
A tiny (~5kb gzip'd) and dependency-free JavaScript library that allows you to enhance your site using shader effects.

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

BackgroundCut
Online tool to remove the background from any image using artificial intelligence. Requires login to download higher than 0.5 MP.

Removal.ai
Another background removal tool using AI, but this one is free for low resolution and paid plans for higher resolution.

TroisJS
Similar to react-three-fiber but for Vue.  A Three.js + Vue 3 + Vite library for creating WebGL effects.

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

Teenyicons
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 everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly

Support this newsletter:
PayPal.me  /  Patreon / GitHub Sponsors  /  E-Books