Web Tools #400 - CSS Tools, Testing, JS Utilities

Advertisement

I previously discussed the new Optional Chaining operator, represented by "?." that allows you to do deep object property references without having to look up every part of the object chain.

Another cool thing you can do with this operator is ensure that a method call exists. MDN points out why this might be useful:

"This can be helpful, for example, when using an API in which a method might be unavailable, either due to the age of the implementation or because of a feature which isn't available on the user's device."

Here's an example – take note of the operator used on the final line:

Try it on CodePen

This is a common way to define methods on an object, similar to what's called the Module Pattern. Notice when I call each function, I have to use the object reference as the parent scope.

With the Optional Chaining operator, I don't have to check for the existence of any of the functions before calling them. In my case, I only used the operator when calling the non-existent doThingThree() function, but I could have used it on all of them, which would be the safest practice.

As when dealing with properties, this operator ensures there's no error thrown if the function doesn't exist or (in line with MDN's use case) if portions of the API being accessed are temporarily down for whatever reason.

A couple of final things to note:

• If the function name exists but is actually a property and not a function, this will throw an error
• If the root object is null or undefined, this will throw an error, but you can use the Optional Chaining operator on the object itself (e.g. myActions?.doThingThree?.()) if you suspect the root object may be down or non-existent

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 

Charts.css
A modern CSS framework that uses CSS utility classes to style HTML elements as charts (area, bar graphs, line charts, 3D charts, animated charts, etc).

Tailwind Shades
A CSS color shades generator for Tailwind projects. Just enter a color and this tool will spit out a group of related shades to drop into a Tailwind project.

css-shorthand-expanders
Type-safe functions to expand CSS shorthands into their longhand sub-properties, to support atomic CSS-in-JS libraries, which can't handle shorthand.

HTML Boilerplates
Online tool to start a web project by generating and downloading a custom HTML boilerplate. Just flip the switches you want and the code is added for those items automatically.

Beamwind
A collection of packages to compile Tailwind CSS like shorthand syntax into CSS at runtime.

Gradient Generator
Customize and generate CSS for linear, radial, and conic gradients. Includes "easing" and "precision" options and the ability to download as SVG.

plchldr.co
API to generate colorful placeholders for web projects. Enter width, height, background color, text color, and custom text, then grab the HTML.

ress
A modern CSS reset based on Normalize.css, but with some customizations.

Microlink Cards
An easy way to create and share dynamic images at scale, useful for social cards or similar.

Windi CSS
A next generation compiler as an alternative to Tailwind, providing faster load times, and supports all the features in Tailwind v2.0.

a11y-color-tokens
npm package to generate accessible complementary text or UI colors as Sass variables and/or CSS custom properties from your base color tokens.

HTML-validate
Offline HTML5 validator. that validates either a full document or a smaller  template (e.g. from an Angular or Vue component).

Testing and Debugging Tools

Tech Productivity Newsletter
A brief weekly newsletter sent out every Monday that features productivity tools and articles on efficiency, well-being, remote work, and more.   promoted

Ponicode
Unit test in just a few clicks. Create, modify and visualize your unit tests in seconds and boost your code coverage with AI-based test generation.

QA Wolf
Helps you create, run, and maintain end-to-end browser tests 10x faster. No library installation or configuration needed.

fast-check
Property based testing for JavaScript and TypeScript. Checks characteristics of the output given the whole range of possible inputs, rather than relying on hard-coded inputs and outputs.

WebdriverIO
Next-generation browser and mobile automation test framework for Node.js.

React Dev Inspector
Package that allows you to jump to local IDE code directly from a React component with a click, similar to Chrome's inspector, but more advanced.

page-with
A library for usage example-driven in-browser testing of your own libraries.

SonarCloud
A code quality analysis tool that finds bugs and vulnerabilities, free for public repos (GitHub, Bitbucket, GitLab, etc).

1log
A replacement for console.log() that adds ability to return an argument/proxy and plugin support.

AWS Pricing Calculator
Estimate the cost for your architecture solution. Configure a cost estimate that fits your unique business or personal needs with AWS products and services.

Inspect
Free for 30 days. A new developer tool for macOS and Windows to inspect and debug your web apps and websites on iOS devices.

pentf
Parallel end-to-end test framework, runs tests (with or without web browsers, emails, and/or direct HTTP requests) in a parallel manner, so that tests bound by client CPU can run while other tests are waiting.

JavaScript Utilities and Modules

Color Picker
A simple color picker with support for touch events, written in pure JavaScript, for modern browsers.

gifenc
A fast and lightweight pure-JavaScript GIF encoder for the browser and Node, with support for GIF animation and transparency.

Monio
An async-capable IO monad (a way to structure code in functional programming) for JavaScript, with several companion monads thrown in.

ackbar-snackbar
A small, very easy to use and highly customizable "snackbar" component (kind of like a "toast" message) to use on any project.

typecheck.macro
Automatically generate blazing fast validators for Typescript types. Helps because Typescript types are erased at compile time and you can't use them to validate data at runtime.

p-limit
Run multiple promise-returning and async functions with limited concurrency.

Gaze-detection
Use machine learning in JavaScript to detect eye movements and build gaze-controlled experiences. FWIW, I couldn't get the demo to work on my machine.

element-resize-detector
Optimized cross-browser resize listener for elements.

disableautofill.js
Script to disable form auto-fill and auto-complete functions in Chrome. I assume this would not be for production but for some other use cases that don't interfere with privacy/security.

OrgChart
Plugin to build a custom tree-based organization chart that you can drop into an about page or similar documentation. The demos are nice.
 
ExcellentExport.js
Older project with recent updates that lets you add an "export to Excel" button to an HTML data table.

On the Release Radar:

• Swiper is now at version 6+
• A11y Dialog is at version 6+
• Freezeframe.js is at version 5+

A Tweet for Thought

This video summary of pretty much everyone's experience using an all-in-one printer made my laugh out loud.

 

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

If you like quick coding tips, check out Front-end Tips, the newest project from Phuoc Nguyen. Currently 100 tips and growing.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly

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