Together with  Frontend Masters logo
🚀 Frontend Focus

#​646 — June 5, 2024 | Read on the web

The Gap — A thorough, detailed exploration of the various pain points that the widely supported CSS 'gap' property solves. Lots of code examples and demos here to help you get a solid understanding of things.

Ahmad Shadeed

An Intro to CSS Anchor Positioning with Basic Examples — This is a solid overview of the CSS Anchoring API (already available in Chrome 125, others to follow), highlighting some of its shortcomings, the wins it introduces for creating complex layouts, and more.

Brecht De Ruyte

Everything You Need to Know About Git — Join ThePrimeagen for this extensive video course and ensure you never run into an unsolvable Git problem again. You'll learn advanced git abilities like interactive rebasing, bisecting, worktrees, the reflog, and more.

Frontend Masters sponsor

CSS Length Units — A comprehensive guide covering nine types of lengths that CSS uses to size elements in terms of dimensions, space, time, and even sound. The sort of thing worth bookmarking.

Geoff Graham

⚡️ Quick Links

📙 Tutorials, Articles & Opinion

▶  Transition to height: auto; and display: none; Using Pure CSS — How to easily transition from height: 0; to height: auto; and display: none; to display: block; without any hacks, tricks, or JS, using only new CSS features such as the calc-size() function, transition-behavior property and @starting-style at-rule.

Zoran Jambor

Revolutionizing UI Development with Chromatic and StackBlitz — Join our live stream to see how tools like Storybook, Chromatic, and StackBlitz can revolutionize your design system workflow.

StackBlitz sponsor

In Praise of the Basics — When starting out, is learning the ‘basics’ of frontend development still the best way to go? Particularly with a seemingly endless supply of frameworks? Geoff puts forward the case for starting with straightforward HTML & CSS, and even explains why going back to these key basics can enhance your career.

Geoff Graham

How Deep is Your DOM? — A look at how the depth of a DOM tree affects rendering performance. Plus, a question the Bee Gees might have had, if they had been web designers..

Maxi Ferreira

“Just” One Line — Adding just one line of code, be that for styles, scripts, frameworks, etc is something of a facade. Jim challenges us to pause and consider the long-term implications.

Jim Nielsen

Eight CSS & JavaScript Snippets for Awesome Reveal Effects
Eric Karkovack

How to Make a CSS (Only) Timer
Preethi Sam

My Approach to alt Text
Adrian Roselli

🔧 Code, Tools & Resources

Screen Ruler: A Chrome Extension to Measure and Analyze Page Elements — Once enabled, it lets you hover over elements to view info similar to DevTools (padding, margin, etc.) with the added ability to measure specific distances on the page.

Myster Violets

Type Fluidity: A Tool to Calculate Fluid Typography Sizes — Select px or rem units and define font and viewport sizes to generate the custom CSS clamp function. You can also preview the result with a custom line height and your choice of Google font.

required

Simplify Data Collection with a Fully Integrated Custom Form Builder — Integrate SurveyJS UI components and maintain full control over your survey data. Create dynamic JSON forms of any complexity directly within your app.

SurveyJS sponsor

SVG Gobbler: Find, Optimize, Edit, and Manage SVG — An open-source browser extension that finds the SVG content in your current tab and lets you optimize, download, copy, edit, or export. Something that really should be built into browsers nowadays!

Ross Moody

A-Frame 1.6: A Framework for Building WebVR Experiences — A web framework for building virtual reality experiences that work on Vive, Rift, Quest, as well as desktop and mobile platforms, including in the browser (as the demos here show).

A-Frame VR Team

Chromicons: A Set of 400+ Handcrafted SVG Icons — Not a new project, but a nice set of searchable line icons, easy to copy and paste as SVG or download them all with one click.

lifeomic

FastBootstrap: A Bootstrap Theme Built with Atlassian Design — Includes CSS utilities and a library of components with support for dark mode.

FastBootstrap

Ipx.