TLDR Web Dev 2024-03-29

Google on Rust’s productivity 📈, React Native charts 📱, productivity in 2024 🧑‍💻️

Articles & Tutorials

The Unreasonable Effectiveness of Inlining CSS (3 minute read)

This developer inlined their CSS and split it into critical and non-critical sections to optimize their website’s loading speed, leading to a 22% reduction in First Contentful Paint time. Moving minor JavaScript logic into static HTML generation further improved load times slightly. These optimizations ultimately increased page views by 32% over one week.

The Evolution of SoundCloud's Architecture: Part 1 (5 minute read)

SoundCloud kept its initial technology stack simple. As the platform grew, it made strategic choices, like adding HAProxy and RabbitMQ, to address performance bottlenecks caused by long-running requests and high traffic. To further optimize performance and support its growth, SoundCloud eventually decoupled its architecture, introduced caching and new data stores, and transitioned towards a microservices model.

Improving INP and FID with production profiling (10 minute read)

Google introduced INP (Interaction to Next Paint) as part of its Core Web Vitals this year. Your website's SEO ranking can be affected by INP. INP can be reported if the UI fails to respond promptly to a pointer or keyboard event triggered on your website. This blog post looks at a few different methods to identify the root cause of slow interactions, including comparing JavaScript self-profiling to other browser APIs.
Opinions & Advice

5 Non-Verbal Behaviors Killing Team Health (6 minute read)

Non-verbal signals can significantly impact team morale and should be addressed early. This article describes 5 common negative non-verbal behaviors: 1. silent but irritated, 2. annoying interrupter, 3. always confused, 4. non-appreciative, and 5. ignorer. It shares strategies for avoiding these behaviors in yourself and offers tips on how to respectfully manage them when displayed by others.

Frontend Debugging Is Bad and it Should Feel Bad (12 minute read)

Frontend debugging is often a time-consuming and frustrating process because developers lack visibility into what's happening on the user's end. Traditional tools provide metrics, but don't always give enough context to identify root causes of issues. A better way to debug frontend issues is to use observability tools that capture more contextual data about how problems occur.

Kubernetes and back - Why I don't run distributed systems (5 minute read)

This author switched a side project to a Kubernetes-based infrastructure, only to find it overly complex, expensive, and difficult to manage. Despite the promise of high availability, the system suffered from slow performance, difficult debugging, and downtime during node failures. While Kubernetes can be powerful, it's important to choose the right tools for the job and not get caught up in complexity for its own sake if it's not necessary.
Launches & Tools

React Resize Aware (GitHub Repo)

React Resize Aware can detect resize events on elements without relying on intervals, loops, DOM manipulation detection, or CSS redraws.

React Native Gifted Charts (GitHub Repo)

React Native Gifted Charts is a library for Bar, Line, Area, Pie, Donut, Stacked Bar, and Population Pyramid charts in React Native. The charts are fully customizable, clickable, scrollable, and can be combined together.

Concrete.css (GitHub Repo)

Concrete.css is a classless CSS stylesheet. It supports dark mode and switches themes depending on system settings.

The State of Engineering Productivity in 2024 (11 minute read)

This study of engineer productivity based on 204 survey responses looks at how engineers and managers rank themselves in a team, productivity offenders, and boosters and metrics that teams use to track productivity. Some interesting takeaways are that extreme setups (fully in-person or fully remote) score highest on personal and team productivity, managers generally feel more productive than engineers, and only 35% of teams track productivity despite 60% seeing it as an opportunity.

Large language models use a surprisingly simple mechanism to retrieve some stored knowledge (4 minute read)

LLMs often use simple linear functions to retrieve stored facts. Researchers developed a technique to estimate these functions, allowing them to probe what the model knows and where that knowledge is stored, potentially leading to ways to correct falsehoods within the model.

How a group of Berkeley researchers took over the chip industry (20 minute read)

RISC-V is an open-source instruction set architecture (ISA) for developing chips. It is an alternative to the dominant proprietary ISAs offered by Intel, ARM, and AMD. RISC-V has removed barriers to entry for academia, startups, and smaller players thanks to its open standards and free licensing. There is a strong community around RISC-V and the success of the standard shows that commercial success is possible without strict IP restrictions.
Quick Links

The Case for Design Engineers, Pt. III (2 minute read)

Website development is partly a creative endeavor and requires a flexible iterative approach similar to filmmaking.

How to Build Your Own ChatGPT Clone Using Clerk & AWS Bedrock (55 minute read)

This walkthrough of how to build a ChatGPT clone, which focuses on the UI, uses Amazon’s Bedrock service for its LLM/AI components, Clerk to handle auth, and Next.js as its framework.

Lars Bergstrom (Google Director of Engineering): "Rust teams are twice as productive as teams using C++." (Reddit Post)

Google found a more than 2x decrease in the amount of effort required to both build, maintain, and update services written in Rust.

Why x86 Doesn’t Need to Die (8 minute read)

Both x86 and ARM CPUs have evolved to use complex instructions alongside simpler ones in order to maximize performance.
Get our free, 5-minute newsletter read by 350,000 frontend, backend, and full stack developers
Join 300,000 readers for