TLDR WEB DEV 2024-10-17

DRAG TO SELECT

This blog post goes over the end-to-end process of implementing a drag-to-select functionality in React, with code examples and challenges faced along the way. For example, one of the challenges of implementing this functionality was representing user interactions when handling drag selections in multiple directions. To fix this, create a DOMVector class, a custom data type that captures both magnitude and direction, which removes the need for complex state management.

WHAT I LEARNED FROM MAKING THE PYTHON BACKEND FOR YOUTUBE TRANSCRIPT OPTIMIZER

When building a Python backend for a transcript optimizer app, this developer used FastAPI, SQLmodel, and Whisper for transcript generation, along with LLMs for text optimization and quiz generation. GPT4o-mini and Claude 3 Haiku were cheaper for this task, especially when combined with chunking input text and creating pipelines to handle complex transformations. SQLite was used as the database solution.

REAL-TIME MOUSE POINTERS

Canva's collaboration team implemented real-time mouse pointers to make its whiteboard product better. Initially, they utilized a backend-centric architecture using WebSockets and Redis, which scaled to support hundreds of thousands of simultaneous users, but had limitations in update rate. Recognizing these limitations, the team migrated to a WebRTC-based architecture, which allowed direct peer-to-peer communication between clients, reducing latency and improving scalability.

REFLECTIONS ON PALANTIR

This is a detailed retrospective from a former Palantir employee who spent eight years at the company. Palantir is unique in that it has "forward deployed engineers" (FDEs) who work directly with clients and engineers who work on the core product (away from clients). The company also has a "messianic cult" culture, characterized by intellectual intensity and a focus on achieving real-world outcomes, and deals with the moral complexities of working with clients in the "grey areas" of government and defense.

BE SUSPICIOUS OF SUCCESS

Success in programs or applications due to flawed tests or incorrect models can lead to unexpected real-world failures. Even if tests pass and/or a model seems to work, it's still useful for developers to be “suspicious” by testing both "happy paths" (ideal scenarios) and "sad paths" (error handling).

THE BIG "SERVER WATERFALL PROBLEM" WITH RSCS

React Server Components can cause a "server waterfall” problem, which is when a component's data fetching causes a delay in rendering due to dependencies. However, this problem also exists on the client-side. The benefit of server-side waterfalls over client-side waterfalls is that the server environment offers more control over the network and caching.

Get the ebook →

NEXT.JS 15 RC 2

The new Next.js 15 Release Candidate 2 introduces Turbopack for development, which improves cold compilation performance and reduces memory usage. There are also Async Request APIs, a breaking change that makes rendering and caching better by making data-dependent APIs asynchronous. The release also includes a new Static Route Indicator, a 'Form' component for client-side navigation, and TypeScript support for the Next.js configuration file.

TINYWIDGETS

TinyWidgets is a collection of lightweight, reusable UI components for building local-first applications fast. It provides layout features like headers, sidebars, and dark mode along with a variety of components like buttons, cards, and metrics.

EXPRESS V5

Express.js v5 has security updates, updated path matching and regular expressions, support for rejected promises, and body parser enhancements.

WHY STRIPE WON

Stripe is immensely successful for a few reasons. It strategically rode the wave of e-commerce growth by focusing on developer-friendly solutions. The company diversified its product offering early on, expanding into adjacent markets and launching successful products like Stripe Connect, which allows businesses to create their own payment platforms. It also prioritized software solutions, particularly in the billing and tax software space, to overcome financial challenges.

HOW WE OUTSMARTED CSGO CHEATERS WITH IDENTITYLOGGER

A CSGO community server struggled with cheaters until someone developed IdentityLogger, a system that fingerprints players based on their IP address, Steam ID, and a unique Tracking ID derived from a persistent cookie stored on the player's computer via the game's built-in web browser. This third identifier is tied to the player's Steam installation directory and prevents ban evasion by requiring cheaters to change their Steam ID, IP address, and Steam installation folder simultaneously.

WORDPRESS RETALIATION IMPACTS COMMUNITY

Automattic's retaliatory actions against WP Engine have negatively impacted the WordPress community, leading to contributor bans, a hostile fork of a popular plugin, and a growing perception of WordPress as a risky platform. This has led to many contributors questioning the Automattic CEO's leadership along with raising concerns about the commercialization of open-source projects.

WHAT ARE YOUR FAVORITE RESOURCES ON DEALING WITH SOFTWARE COMPLEXITY? (REDDIT THREAD)

A discussion on fighting software complexity with references to talks, papers like "Out of the Tar Pit", books like "A Philosophy of Software Design", and languages.

MACOS SOMETIMES LEAKS TRAFFIC AFTER SYSTEM UPDATES

macOS may leak traffic through the firewall after system updates - this requires a reboot to resolve.

NUMBER FLOW

Number Flow is a React component that provides animation, formatting, and localization for numbers.

GREENMASK

Greenmask is an open-source tool for anonymizing, transforming, and generating synthetic data for PostgreSQL databases with features like deterministic transformations and dynamic parameters.