TLDR Web Dev 2024-03-29

Get this free ebook by DataDog to learn how to adopt a metrics-driven mindset, improve software quality, and achieve DevOps at enterprise scale.

Use these best practices to:

• Enable dev teams to write and produce higher quality software
• Help scale DevOps teams without sacrificing resources
• Provide your dev teams with tools to navigate their own code quickly and easily
• Create reporting standards that clearly communicate software performance

Get the ebook from DataDog ↗️

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.

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.

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.

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 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.

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.

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

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 is a classless CSS stylesheet. It supports dark mode and switches themes depending on system settings.

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.

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.

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.

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

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.

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

Both x86 and ARM CPUs have evolved to use complex instructions alongside simpler ones in order to maximize performance.