📣🚀 Capsize release alert! Minimise webfont-induced layout shift, generating... metrics-based font family fallbacks by leveraging the modern CSS `size-adjust` descriptor. (Video demonstrates layout shift between Arial and custom font. Left is before Capsize, right is after) 🧵show more

Responsive grid layout using HTML and CSS 🚀

Create this responsive flex layout using just HTML and... CSS 🚀show more

i'll know cloudflare is serious about design when they... get rid of these ugly layout shift causing bannersshow more

Seems like a good opportunity to share a trick... I used on the React Aria website to make headings scale to fit the viewport on mobile, even with SSR. I used fontkit, a library I wrote 10 years ago to parse fonts and layout glyphs, to measure the width of the heading at build time in the "em" unit. width = font.layout('DateRangePicker').advanceWidth / font.unitsPerEm This is a size independent measurement using the font's internal metrics. When multiplied by any font size, you get the pixel width of the text. To calculate the font size, set this as a CSS variable and divide the target width (100vw minus padding). Clamp to make sure it doesn't get too big or small. font-size: clamp(35px, (100vw - 32px) / var(--text-width), 55px) And tada! You have perfectly scaling text no matter the viewport size. 🎉show more

react-native-enriched-markdown 0.3.0 is out! 🚀 📝 GFM support (tables,... task lists, and autolinks) 🌍 Full right-to-left (RTL) layout support ✨ New inline style properties for link, strong, and emphasis 🛠️ Many bug fixes for better stability Check 🧵for full release notesshow more

a well-known iOS Safari quirk is that inputs with... a font-size <16px trigger an auto-zoom on focus using 16px is probably the best solution, but it can feel a bit heavy in tight UIs a clever workaround is to keep the font-size at 16px and scale the input down with CSS!show more

I've been working on a custom tool to visualize... our compiler optimization graphs for SpiderMonkey. The layout algorithm is all custom and produces dramatically more readable and stable graphs than GraphViz. All the layout and rendering is less than 1000 lines of code.show more

Create this layout using nested css grids and media... queries 💪show more

🚀 Dev Challenge Alert 🚀 A quality right, left,... right, left! Challenge: Pass all bridge pillars between Oahu and Mahui Goal: Take the smoothest video! Share: Tag us with the #TCMDevChallengeshow more

Shift Up, you did not release one of the... cutest and sexiest Nikke right before ANNIVERSARY brooooshow more

Browsers should do CSS layout off the main thread!... 🤓 Top left: Ladybird (work in progress) Others: Chrome, Safari, Firefoxshow more

Auto layout in Figma now lets you adjust auto... gap spacing for nested elements for better CSS flex-box parity. Rolling out to all users by August 31st. More here:show more

Hank Johnson is easily the most stupid person in... congress and it is not even close This is the man who was afraid the island of Guam could capsize.show more

"What's the point of setting width and height for... img?" Browsers determine aspect ratio from it and allocate necessary space while image loads to prevent layout shiftshow more

🇺🇸 American Magic making the post-capsize recovery look easy... after finding the edge in Pensacola. 💪 #AC37Reocn 👉show more

is the layout fire 🔥🔥