TLDR Index
TLDR Web Dev

TLDR WEB DEV 2024-04-18

5 sections14 entrieslinks blockcomplete parse

Parse notes

  • Subscription/account footer truncated before parsefooter_truncated

01ARTICLES & TUTORIALS

HARDEST PROBLEM IN COMPUTER SCIENCE: CENTERING THINGS

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.

tonsky.me8 min read

SCALING MYSQL AT SHOPIFY THROUGH TRANSITIONING TO VITESS FOR ENHANCED PERFORMANCE

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.

blog.quastor.org4 min read

02OPINIONS & ADVICE

BASIC THINGS

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.

bit.ly17 min read

THE STRUGGLES OF A YOUNG DEVELOPER

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.

blobstreaming.org4 min read

03LAUNCHES & TOOLS

REACT QUERY BUILDER

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.

github.comGitHub repository

AWESOME LOW-LEVEL DESIGN

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

github.comGitHub repository

04MISCELLANEOUS

DID THE MAKERS OF DEVIN AI LIE ABOUT THEIR CAPABILITIES?

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.

machine-learning-made-simple.medium.com12 min read

HEALTHY DOCUMENTATION

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.

vadimkravcenko.com16 min read

A CASE STUDY ON CAMPFIRE'S IMPLEMENTATION

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.

dev.37signals.com8 min read