TLDR WEB DEV 2024-09-04

Get the guide from Builder.io

THIS CRAZY SYNTAX LETS YOU GET AN ARRAY ELEMENT'S TYPE

You can extract the type of an array element in TypeScript using the "Array[number]" syntax, which can be useful for creating enums from arrays and extracting specific types from complex data structures. This technique is called an indexed access type, which lets you access a property on a type by its key. In the case of arrays, using "number" as the key retrieves the type of the array's elements.

WIKIMEDIA SLASHED 300MS OFF EVERY WASM EXECUTION WITH WASMEDGE

Wikifunctions, a Wikimedia Foundation project under development, made improvements in system performance, particularly in the speed of function calls. Its team pre-loaded WASM into a pool of ready threads, which led to faster single and saturated requests. They also implemented a variety of front-end improvements, bug fixes, and code enhancements, including a re-write of front-end styling code and a feature flag for WikiLambda code installation on other wikis.

BRAND NEW PERFORMANCE FEATURES IN CHROME DEVTOOLS

The new Performance Panel features in Chrome DevTools provide detailed insights and tools for optimizing Core Web Vitals and overall web performance. This tutorial explains how to access and configure these features. It also goes over how to interpret lab and field data, along with practical tips for fixing LCP, CLS, and INP issues using the new Performance Panel features.

SANDING UI

“Sanding” a user interface involves repeatedly clicking through the UI, testing its functionality, and identifying any issues or "splinters" that might disrupt user experience. As an example, a developer encountered a problem where a gap in a flexbox layout created a dead zone that prevented users from interacting with a radio button. By removing the gap and adding padding to the label, he eliminated the problem and smoothed out the user experience.

MY TECH PROMOTION ALGORITHM

Steve Huynh, a former Amazon Principal Engineer, shares his "Tech Promotion Algorithm," a three-step strategy for career advancement. The algorithm encourages engineers to identify their biggest gaps in skills and performance, formulate a plan by working backward from desired evidence of success, and then execute the plan while seeking regular feedback.

NEXT.JS + SUPABASE APP IN PRODUCTION: WHAT WOULD I DO DIFFERENTLY

This developer built a mid-sized Next.js application with Supabase and, as a result, he recommends using server components for data fetching, server actions for data mutations, and shared utility wrappers for authorization, validation, and authentication. In terms of database design, the developer emphasizes the importance of using surrogate keys, implementing row-level security (RLS) in a performant way, and utilizing server-side routing for mutations.

ANNOUNCING VUE 3.5

Vue 3.5 has performance enhancements, including a reactivity system refactor resulting in improved memory usage and faster reactivity tracking for large arrays. The release also includes several new features, such as reactive props destructuring for easier prop declaration, SSR improvements like lazy hydration and a stable ID generation API (useId), and enhancements to the defineCustomElement API for creating custom elements.

DATALINE

DataLine is an AI-powered data analysis and visualization tool that allows users to explore and analyze data from various sources like Postgres, Snowflake, MySQL, Excel, and more. It provides a user-friendly interface where users can ask natural language questions about their data and get instant insights in the form of charts, tables, and reports. All data is stored locally.

BOMBARDIER

bombardier is a benchmarking tool for HTTP(S) requests. It is built in Go, but it uses the highly performant fasthttp library rather than Go's standard HTTP library.

HOW NAVY CHIEFS CONSPIRED TO GET THEMSELVES ILLEGAL WARSHIP WI-FI

The senior enlisted leaders of the USS Manchester secretly installed a Starlink Wi-Fi network during a deployment for their exclusive use while rank-and-file sailors were denied internet access. The network, dubbed "STINKY", was installed without authorization and posed significant risks to the ship's security and operations. Command Senior Chief Grisel Marrero, the orchestrator of the scheme, was convicted at court-martial and reduced in rank.

MY BLOG ENGINE IS THE ERLANG BUILD TOOL

Fred Hebert's blog is powered by the Erlang build tool, Rebar3. He uses its compiler infrastructure to generate static HTML content. His blog engine uses Erlydtl, an Erlang implementation of Django Templates, for template inheritance and Rebar3's compiler for incremental rebuilds, ensuring only necessary files are recompiled.

STATE OF CSS 2024

The State of CSS 2024 survey is now open.

IS MY BLUE YOUR BLUE?

Test your color categorization as the color shown converges between blue and green.

BRIEF NOTE ON BUTTONS, ENTER, AND SPACE

Native `button` elements have different keyboard interaction behaviors across browsers and screen readers, with variations in how Enter and Space keys trigger events.

REPAINT

Repaint is a website builder for people who want to make professional websites on an open canvas.