TLDR WEB DEV 2024-09-05

Start building with Stytch

THE BOOLEAN TRAP

Using boolean flags in function parameters is a trap - enums should probably be used instead. Boolean flags can lead to confusion and maintenance issues, especially when dealing with multiple output types. While boolean flags can be appropriate in specific cases, enums are generally preferable for API and function parameters because they are more readable, maintainable, extensible, and future-proof.

CSS @PROPERTY AND THE NEW STYLE

CSS's @property is a new at-rule allowing explicit definition of custom property syntax, initial value, and inheritance. This article shows how @property enables smooth animations and transitions, demonstrated by a shiny animated button with rotating gradients, a silky smooth hover effect, and tiny shimmering dots. @property lets developers create intricate designs and complex animations, previously difficult or impossible with standard CSS.

COMPONENT TESTING IN STORYBOOK

Component testing may be the future of UI testing. While end-to-end (E2E) tests provide the highest fidelity, they are often impractical for comprehensive UI coverage due to slow execution, difficulty in managing complex states, and setup overhead. Component tests, on the other hand, offer a balance between unit tests and E2E tests, allowing for both faster and more reliable testing. Component tests are not necessarily a replacement for E2E tests, but rather a complement.

EXPLICIT IS BETTER THAN IMPLICIT

Explicit code is better than implicit code because implicit code has a higher number of WTFs per minute (basically being more frustrating and confusing). This post presents two code examples to make this point, showing how explicit code makes it easier to understand and maintain the codebase by clearly defining variables and permissions.

THINGS I WISHED MORE DEVELOPERS KNEW ABOUT DATABASES

Jaana Dogan, a Principal Engineer at Google, wrote a post about database-related issues commonly overlooked. It emphasizes the importance of understanding nuances like ACID compliance, isolation levels, and data consistency. It also talks about the pitfalls of auto-incrementing primary keys, optimistic locking, write skews, and clock skews.

INTRODUCING @SVG-USE

@svg-use is a set of tools and bundler plugins that facilitate the use of 'use href' for better SVG loading in a React context. It's more efficient than the current common practice of inlining SVG as JS code.

MIDDAY CREATE V1

This is an open-source starter kit for building production-ready SaaS applications. It uses a curated stack of tools, including Next.js, Supabase, and TailwindCSS, organized as a monorepo with a focus on code reuse and best practices.

FETCHFOX

FetchFox is a Chrome extension for extracting any data from any website. It takes the raw text of a website and uses AI to extract data the user is looking for.

A REAL LIFE OFF-BY-ONE ERROR

There was a subtle off-by-one error during the European Climbing Championships in Villars-sur-Ollon. A hold on the right-hand side of the wall was off by one position compared to its counterpart on the left side. Despite the error going unnoticed for years, this author spotted it because he had a reference point from a previous competition and was not visually fatigued by repeated exposure to the same wall.

INTEL HONESTY

Intel once dominated the chip industry. Despite its historic success, Intel's failure to adapt to changing market demands, particularly in mobile and AI, has led to a situation where its foundry business, Intel Foundry, is struggling to compete with industry leaders like TSMC. Intel Foundry's existence is no longer justified by market forces and the U.S. government will need to provide substantial financial support, such as purchase guarantees, for it to survive.

EXACTLY-ONCE PAYMENTS AT AIRBNB

Airbnb manages the challenge of idempotency in payment processing by coordinating both client and server systems to avoid double charges, despite the technical impossibility of "exactly-once" delivery in distributed systems. Airbnb's approach involves splitting requests into phases and ensuring mutual exclusion to handle retries effectively.

THE TSCONFIG CHEAT SHEET

The TSConfig Cheat Sheet is a guide to configuring TypeScript's tsconfig.json file - it includes a cheatsheet of recommended base, strictness, and project-specific options.

CODE REVIEW ANXIETY WORKBOOK

This Code Review Anxiety Workbook provides self-guided cognitive-behavioral exercises to help developers reduce their code review anxiety.

SRCBOOK

Srcbook is an open-source, interactive programming environment for TypeScript that allows users to create, run, and share reproducible programs and ideas locally with a web interface.

ALPHAFOLD3 OPEN-SOURCE IMPLEMENTATION

Ligo has open-sourced its implementation of AlphaFold3, letting researchers use the protein structure prediction model freely.