Web Tools #443 - Frameworks, Testing Tools, Uncats (misc. tools)

Web Tools Weekly
WEB VERSION
Tools for Web Developers

Issue #443 • January 13, 2022

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

Read the Case Study
Mozart Data

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.

OpenUI5

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

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:

The Uncategorizables

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 

Bottles
Open source software that helps you manage and run Windows apps on Linux with ease.

fabform.io
Create JSON API endpoints to store form data to Google Sheets, allowing you to use Sheets as a database for form data.

microStudio
A free online game engine to create games, learn programming, play, share, and prototype games.

Drovp
A native Mac, Windows, or Linux app that allows you to drag-and-drop to do various operations (encode audio/video, optimize images, batch rename files, etc).
 
Drovp

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.

A Tweet for Thought
 

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

Keep tooling,
Louis
@WebToolsWeekly

Support this newsletter:
PayPal.me  Patreon  /  GitHub Sponsors  E-Books  /  $5 Tip  /  $1 Tip

Older messages

Web Tools #442 - Git/CLI Tools, SVG Tools, JS Utilities

Thursday, January 6, 2022

Web Tools Weekly WEB VERSION Issue #442 • January 6, 2022 Advertisement The Best Time to Build a Data Stack A data stack is a collection of tools that allow you to efficiently organize and analyze your

Web Tools #441 - The Top Tools of 2021 (part 2)

Thursday, December 30, 2021

Web Tools Weekly WEB VERSION Issue #441 • December 30, 2021 Advertisement Best ETL Tools in 2021 ETL tools allow you to gather all of your data in one organized place for better analysis. Learn about

Web Tools #440 - The Top Tools of 2021 (Part 1)

Thursday, December 23, 2021

Web Tools Weekly WEB VERSION Issue #440 • December 23, 2021 Advertisement Springboard Teaches all of the Web Tools You Need for a High-Paying Job Self-paced, online bootcamp. Get mentored 1:1 by

Web Tools #439 - JS Patterns, CSS, Build Tools, React

Thursday, December 16, 2021

Web Tools Weekly WEB VERSION Issue #439 • December 16, 2021 Advertisement The New Tab Page You'll Actually Use Replace your web browser's new tab page with a minimal list of links, grouped and

Web Tools #438 - VS Code, JS Utilities, Uncats (misc. tools)

Thursday, December 9, 2021

Web Tools Weekly WEB VERSION Issue #438 • December 9, 2021 Advertisement Retool is the Fast Way to Build Internal Tools Visually design apps that interface with any database or API. Switch to code

You Might Also Like

From Request to Response: How APIs Work – Beginners Guide

Thursday, March 28, 2024

In the vast expanse of the digital ecosystem, APIs (Application Programming Interfaces) act as critical conduits, facilitating seamless conversations between different software platforms. From clicking

Elastic 8.13 is here: Amazon Bedrock in the AI Assistant for Observability

Thursday, March 28, 2024

Learn about Amazon Bedrock support within the Elastic AI Assistant for Observability ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ elastic | Search. Observe. Protect

A Creative Market Reset 🎨

Thursday, March 28, 2024

Adobe needed some real competition. Now it has some. Here's a version for your browser. Hunting for the end of the long tail • March 27, 2024 A Creative Market Reset Canva's purchase of

Fisker lost millions … then it got them back

Wednesday, March 27, 2024

More Fisker woes View this email online in your browser By Christine Hall Wednesday, March 27, 2024 Welcome back to TechCrunch PM! This afternoon, learn about some new Google features, a startup that

▶️ How to Get Better YouTube Video Recommendations — What to Know About Alexa Skills

Wednesday, March 27, 2024

Also: The Best Samsung Phones of 2024, and More! How-To Geek Logo March 27, 2024 📩 Get expert reviews, the hottest deals, how-to's, breaking news, and more delivered directly to your inbox by

JSK Daily for Mar 27, 2024

Wednesday, March 27, 2024

JSK Daily for Mar 27, 2024 View this email in your browser A community curated daily e-mail of JavaScript news Bad Abstractions Could Be Ruining Your Code The code is easy to read and it runs fine -

Ranked | The World's Biggest Oil Producers in 2023 🛢️

Wednesday, March 27, 2024

The word's three biggest oil producers accounted for 40% of production in 2023. View this graphic to learn more. View Online | Subscribe Presented by FEATURED STORY The World's Biggest Oil

Daily Coding Problem: Problem #1394 [Easy]

Wednesday, March 27, 2024

Daily Coding Problem Good morning! Here's your coding interview problem for today. This problem was asked by Google. Given the head of a singly linked list, reverse it in-place. Upgrade to premium

Free Event: Watch 10 entrepreneurs launch their AI ideas

Wednesday, March 27, 2024

They built this in 2 months 👀 ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

Digging into Marissa Mayer’s newest app

Wednesday, March 27, 2024

Plus a snake robot on Saturn's moon View this email online in your browser By Alex Wilhelm Wednesday, March 27, 2024 Welcome to TechCrunch AM! Today we have notes on Marissa Mayer's new app,