/FrontEnd

Hardest Problem in Computer Science: Centering Things

- Nikita Prokopov tl;dr: Nikita discusses the struggles of properly centering text and icons despite the advances of modern CSS. He discusses problems with: (1) font metrics where the bounding box of a text block is not balanced around the cap height. (2) Line heights that complicate centering. (3) Icon fonts that convert icons into text. 

featured in #507

The Hidden Depths Of The Input Element

- Phil Nash tl;dr: "The <input> element is the most fascinating element in HTML. Most elements behave the same way regardless of their attributes, the type attribute of the <input> element can take 1 of 22 different values that gives it not only different behaviour, but a different visual appearance too. I want to look beyond the various types that the <input> can embody, to the attributes you may not know about. Attributes that tweak the behaviour of the <input> to make it more usable, more accessible, and more applicable to various situations. Let's dig in."

featured in #473

Building Modern Web Applications: 5 Essential Frontend Architecture Principles

- Patrick Roos tl;dr: Principles you should always follow: (1) Async or defer load, consider the critical path. (2) Tree-shake, consciously bundle and eliminate dead code. (3) Define and respect a performance budget. Principles you should follow when possible: (4) Stick to the web platform APIs and web standards. (5) Use new generation frontend frameworks. Patrick discusses each in this post. 

featured in #464

Useful DevTools Tips And Tricks

- Patrick Brosset tl;dr: (1) Zoom DevTools. (2) Delete annoying overlays. (3) List the fonts used on a page. (4) Measure arbitrary distances on a page. (5) Detect unused code. And more.

featured in #427

The Modern Way Of Serving Images

- Jacob Groß tl;dr: "The following article will guide you through responsive image techniques, and introduce a novel technique that aims to make <img> tags work (almost) like <picture> tags, making migration in existing codebases easier. With the reduced engineering effort, this hopefully helps you improve the images on your website in 2023.”

featured in #423

Watch Transitions in Slow Motion in Chrome’s DevTools

- Jim Nielsen tl;dr: “The animations panel lets you slow down the animations happening in the browser so you watch them play out at much slower speeds and troubleshoot the mechanics of the animation.”

featured in #420

Spinning Diagrams With CSS

- Harold Cooper tl;dr: “Several people expressed surprise that the spinning diagrams don’t use any JavaScript or animated image formats, just HTML and CSS. So I thought I’d explain how they work before I forget.”

featured in #408

6 CSS Snippets Every Front-End Developer Should Know In 2023

- Adam Argyle tl;dr: (1) A container query. (2) Scroll snap. (3) Grid pile (4) Quick circle. (5) Control variants with @layer. (6) Memorize less and reach more with logical properties.

featured in #405

The Evolution Of Scalable CSS

tl;dr: "In this post, we’ll develop a deeper understanding of CSS by diving into the underlying issues that make it difficult to scale. We’ll understand the evolution of the various CSS best practices that have emerged and changed over time. By the end, we’ll have a good grasp on past approaches to scaling CSS on large projects, and how popular tools like Tailwind and a range of others address these issues in counter-intuitive ways."

featured in #368

The State Of Frontend In 2022

- Gergely Orosz tl;dr: Gergely covers topics such as How Frontend Engineers Work, Engineering Practices, Technologies, Developer Tools, and more. "27% of respondents reported working at a company with more than 50 frontend engineers. At the same time, 30% of developers shared how 5 or fewer frontend developers work at their company. 50% of respondents work at companies with 10 or more frontend engineers."

featured in #367