TLDR Web Dev 2024-05-24

Top 1% Google engineer advice šŸ“ˆ, high quality code tricks āœļø, React optimization šŸ› ļø

šŸ§‘ā€šŸ’»
Articles & Tutorials

Snappy UI Optimization with useDeferredValue (16 minute read)

useDeferredValue is a React hook that optimizes performance by prioritizing the rendering of important UI elements over less important ones. It does this by allowing React to interrupt low-priority renders if a higher-priority update occurs, preventing the UI from becoming unresponsive. This hook is best used with components that require complex calculations or slow data fetching. In React 19, useDeferredValue gets the ability to specify an initial value, which can speed up initial renders.

Sneaky React Memory Leaks: How useCallback and closures can bite you (10 minute read)

In React, closures combined with the useCallback hook can cause hidden memory leaks by holding onto large objects in the component's context, preventing garbage collection. Memoized functions may inadvertently reference each other and shared data, creating an endless chain of closures. To avoid such issues, keep closure scopes small, avoid unnecessary memoization, and consider using useRef for large objects.
šŸ§ 
Opinions & Advice

How this Googler Got the Highest Rating Twice (8 minute read)

Akash Mukherjee shares his journey of achieving the highest rating (top 1% of Google engineers) twice at Google. Mukherjee took the time to build a strong foundation and focused on impactful projects to gain organizational visibility. When he transitioned to a leadership role, he learned to balance support and feedback, which allowed him to be more communicative and transparent with his team.

Design System Retrospective (10 minute read)

This author initially designed a strict, composable design system inspired by Chakra UI to solve inconsistencies and a poorly structured existing design system. However, the system proved difficult for many developers to use due to their lack of experience with functional composition. In hindsight, the author believes a design system built around Tailwind/NativeWind would have been more approachable for developers.

Test-Driven Development: How I failed at it and tried again (8 minute read)

This author initially failed to properly adopt Test-Driven Development (TDD) because he took on too much complexity at once. When he started again with smaller steps while focusing on good API design, he found that TDD was much more sustainable and improved code quality a lot.
šŸš€
Launches & Tools

Namviek (GitHub Repo)

Namviek is an open-source project manager for small teams. It has different customizable views, like calendar, goal, and list views.

matcha.css (Website)

matcha.css is a pure CSS library designed to style HTML elements similarly to a default browser stylesheet. It's ideal for fast prototyping, static HTML pages, and Markdown-generated documents.

Cover Agent (GitHub Repo)

The CodiumAI Cover Agent increases code coverage by automatically generating qualified tests for existing test suites. It uses the OpenAI API.
šŸŽ
Miscellaneous

Making EC2 boot time 8x faster (9 minute read)

One major bottleneck in the boot time of Amazon EC2 instances is the initial loading of data blocks from S3 to the EBS root volume, which can be sped up by pre-warming the volume by booting and stopping the instance once. Another optimization in the boot process is using cheaper instance types for warming and resizing the instance before starting. These optimizations helped this author reduce boot times from 40 seconds to 5 seconds.

A root-server at the Internet's core lost touch with its peers. We still don't know why (6 minute read)

One of the 13 root servers responsible for the Internet's domain name system (DNS) stopped updating for four days due to an unexplained bug. The incident caused delays in planned updates to .gov and .int domain name servers.
āš”ļø
Quick Links

Porter Cloud (Website)

Porter Cloud is a fully hosted cloud for early MVPs, with options to eject to AWS, Azure, or Google Cloud as an application scales.

Env-var (3 minute read)

Env-var verifies, sanitizes, and coerces types for environment variables in Node.js and web apps.

HealthKit API for the Web (Website)

This is an API for accessing Apple HealthKit data.

What is your favorite trick/rule that results in high-quality code? (Reddit Thread)

Good code is boring code, code is for computers and for other people, and good code should not have any unnecessary patterns.
Get our free, 5-minute newsletter read by 350,000 frontend, backend, and full stack developers
Join 300,000 readers for