Web Tools Weekly Issue #443 (Magic Numbers, Frameworks, Testing, Uncats)

Issue #443 (Magic Numbers, Frameworks, Testing, Uncats)01/13/22

I've always liked the suggestion to avoid using hard-coded values (often called "magic numbers") when writing code. Unfortunately, because all the work I do nowadays is on my own, it doesn't bother me to do something like this:

setTimeout(() => {

        // do stuff...

      }, 3600000); // ms in one hour

Without the comment indicating what this magic number is, anyone coming across the code wouldn't know why that particular value was used. The comment clears this up: It's the number of milliseconds in one hour.

As I said, for personal projects that others are unlikely to touch, I'm not against doing something like this. Even if I moved that value to a variable, I think a comment is enough info to help future maintenance of this code snippet.

But when working on larger applications in a team environment, or on projects that you may have to hand off to others, it's much better to do something like the following:

// minutes/hour * seconds/minute * milliseconds/second

      const HOUR_IN_MILLISECONDS = 60 * 60 * 1000;

      setTimeout(() => {

        // do stuff...

      }, HOUR_IN_MILLISECONDS);

      console.log(HOUR_IN_MILLISECONDS); // 3600000

The above code sets the value in a constant that's clearly named so there's no confusion when it's used later in the code. Additionally, even when I define the constant, I'm not just hard-coding the value, but I'm "showing my work" via the comment and the full equation.

Now, you could argue that all this did was introduce three more hard-coded values. But I think in this case this is acceptable. These aren't values that are ever going to change and it's pretty clear what they do.

Of course, ideally you'd like to pull those numbers in from some kind of universal API that stores universal values or something. In that case, if all of humanity decides that they'd like to add more seconds to a minute or something like that, then the value would still be correct. But that's kind of nutty talk, so I think this solution is good enough! 😀

Now on to this week's tools!

Front-end Frameworks

How Tempo Got Their Data in Shape
High-growth fitness start-up Tempo needed to better organize their data to continue growth. Their solution? Mozart Data’s [modern data stack/modern data platform] and a 76% reduction in time-to-insight. sponsored

Theme UI
A library for creating themeable user interfaces based on constraint-based design principles. Build custom component libraries, design systems, web applications, Gatsby themes, and more with a flexible API.

Punjucks
A starter template for building projects with Parcel.js, Nunjucks, and Tailwind.

Enact
An app development framework built on top of React that’s easy to use, performant, and customizable.

Bulletproof React
A simple, scalable, and powerful architecture for building production ready React applications.

Next.js 12 Complete Boilerplate
An opinionated Next.js 12 boilerplate built with SCSS, Jest, React Testing Library, Prettier, ESLint, and more.

Arco Design
A comprehensive UI component library and design system for React and Vue.

OpenUI5
A runtime and SDK to build enterprise-ready, cross-browser, responsive web apps.

Windster
An open-source admin dashboard interface built on top of Tailwind CSS and Flowbite (a Tailwind component library).

Tamagui
A styling library and UI kit to build design systems that work on React and React Native.

Nextal
A starter template to get projects up and running with Next.js, TypeScript, Tailwind, css-modules, Jest, Husky, ESLint, Prettier, and more.

Vitesse for Nuxt 3
A starter toolkit for building projects with Nuxt.js, Vite, TypeScript, UnoCSS, Pinia for state management, and more.

Testing and Debugging Tools

Screenshots Aren’t Photos. Until Now.
Turn screenshots into actual image assets. Screenstab lets you import screenshots, transform them into photo-realistic 3D renderings, and export high definition images that are perfect for sharing. sponsored

APCA Contrast Calculator
An online tool to try out what is apparently the future of contrast testing according to the upcoming version of WCAG.

Vitest
Still in early development. A blazing fast unit-test framework powered by Vite.

fuite
A CLI tool for finding memory leaks in web apps, particularly SPAs. Use a single command to test any URL for leaks.

html-mocker
A script to mock dynamic data in HTML to automatically test the responsiveness of page elements with various types of content.

mess with dns
An interactive website that allows you to do weird DNS-based tests and experiments, so you can learn while not breaking stuff on a live site.

Lighthouse Simulator
A tool that runs a Lighthouse performance test at a range of different network speeds, to show how bandwidth and round-trip latency impact site performance metrics.

Patchstack
Monitoring tool to identify vulnerabilities in your WordPress plugins, themes, and core. Free plan is enough to locate problems, but you have to upgrade to fix them automatically.

Clarity
A free, easy-to-use tool by Microsoft that captures how real people actually use your site.

DeLorean JS Debug
VS Code extension that enables time travel debugging of pure functions in TypeScript with custom transformers.

Plow
A high-performance HTTP benchmarking tool with real-time web UI and terminal displaying.

vscode-jest
VS Code extension that provides optimal flow for Jest-based testing in VS Code.

log-editor
Node.js utility to use your editor to inspect the log instead of scrolling the congested terminal.

On the Release Radar:

Puppeteer - Headless Chrome API for Node.js at version 13+
Detox - End-to-end mobile testing at version 19+
Cypress - Cross-platform test suite now at version 9+
Polly.JS - HTTP interactions testing at version 6+

The Uncategorizables

RapidAPI Hub
Discover and connect to thousands of curated, public APIs.

Basement Grotesque
A heavyweight new open-source font inspired by early 19th-century "grotesque" typefaces and modern "brutalist" aesthetics.

Namy
Type a description of your business and this tool will offer suggestions for domain names, indicating which ones are available.

SqueakJS
An HTML5 runtime engine to embed executable Squeak Smalltalk programs on web pages.

Vector
A lightweight, ultra-fast tool for building observability pipelines. Collect, transform, and route all your logs and metrics with one tool.

Hashids
A small open-source library that generates short, unique, non-sequential ids from numbers. Available in 30+ programming languages.

Zinc
A lightweight alternative to Elasticsearch that requires minimal resources, written in Go.

Commercial Apps and Classifieds

These are affiliate links, paid classifieds, and curated commercial apps (i.e. not free, not open source, limited free plan, etc).

Evervault - Security toolkit for developers to prevent data breaches.

Pack of Carrds - Unique landing page templates for websites built in Carrd.

vscode.email - Newsletter featuring tips/tools for VS code, coming soon. ad

Relume Library - 650+ components for building sites with Webflow.

Advanced React - React course with 70+ HD videos, currently half price. ad

Simmmple - Free and Premium UI kits, templates, themes, etc.

A Tweet for Thought

Apparently my entire map-learning experience in school was a sham. Or maybe I just wasn't paying attention.

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

Amazon Web Services has launched a cool new platform: AWS re:Post, which is more or less a Stack Overflow for AWS-related questions. Looks like it's already been populated with lots of content already.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris