TLDR Web Dev 2024-04-18

Shopify uses Vitess, a tool that helps distribute database data across multiple servers, to better handle large amounts of data. To integrate Vitess into its stack, it created logical data groupings called keyspaces and implemented features like connection pooling and transaction management to support the Shop app's growth.

Centering UI elements is surprisingly hard due to factors like font metrics (which can be inconsistent), line height complexities, and the difficulty of aligning text with icons. This article shows multiple examples of non-centered text on websites from companies like Apple, Slack, Microsoft, GitHub, and Google. Some tips to align elements properly: stop using fonts for icons, understand your font metrics, and pay more attention to alignment in the first place.

Projects benefit from investing upfront in foundational elements like READMEs, developer docs, websites, and clear process documentation. Code quality should always be upheld on the main branch. These kinds of elements are a productivity multiplier when a project gets larger and are much harder to introduce into a large project that doesn't already have them.

Young developers often focus too much on premature optimization, which leads to over-engineering things too early. It's better instead to focus on writing clear, concise, and testable code. This author tells a story where they wrote over-engineered code as a young developer, but when it came time to debug it months later, they could no longer understand the code they had written.

One of the best ways to fight distractions is to have planned productive hours and get into a “flow state.” To be productive and focused while coding, it's useful to prioritize tasks ahead of time and code with good habits.

React Query Builder is a fully customizable query builder component for React. It has a collection of utility functions for importing from - and exporting to - various query languages, like SQL and MongoDB.

Low-level design resources to improve your design skills and prepare for interviews.

To build a documentation-first culture, CTOs and engineering leaders should lead by example, provide tools and templates, and establish documentation as a key part of the company's values. Documentation saves time for everyone since it leads to less meetings, chat pings, and knowledge loss.

Campfire utilizes CSS features like custom properties and the ‘oklch()' color function to streamline design consistency and adaptability across devices. The ‘:has()' pseudo-class allows for conditional styling based on element content.

Devin AI has been promoted with claims that it can perform software engineering tasks by itself. However, it has been revealed that the company cherry-picked tasks and hid the true capabilities of Devin AI with flashy demos.

To conduct effective meetings, developers should prepare ahead of time, drive the discussion, and follow up with meeting notes.

An overview of all of the missing web features in iOS.

The HTML popover attribute allows for native modals to be created.

Antithesis, a bug-finding platform, explores complex system state spaces to uncover bugs quickly.