Discover ways to use lazy loading with out hurting internet efficiency, a small interactive cowl element, how one can have enjoyable with leaked Claude Code’s supply code, and extra.
Headlines
Learn how to Use Lazy Loading With out Hurting Internet Efficiency
Jakub Andrzejewski explains when lazy loading improves efficiency, when it backfires, and the way it impacts Core Internet Vitals like LCP, CLS, and INP — with sensible patterns and real-world pitfalls.
An Interactive Cowl Element
Kitty Giraudel provides a technical walkthrough on constructing a small interactive cowl element with some nifty CSS tips.
From Our Sponsor
One CSS change broke checkout. No person seen till customers did.
You spent three hours getting the CSS precisely proper. Loopy Egg exhibits you if customers really click on the button you targeted.
From heatmaps, scroll maps, and click on maps, you’ll get a visible breakdown of actual consumer habits, session recordings, A/B testing, and rather more.
What Have I Been up Tp
I’ve just lately began a brand new position as a Developer Advocate at JointJS.
JointJS is a JavaScript diagramming library for interactive UIs. I’ve been creating quite a lot of content material round it, particularly associated to AI Coding Brokers, on the weblog and YouTube channel.
So for those who’re thinking about AI-assisted improvement workflows, Claude Code, or creating interactive visible apps, try a number of the newest content material I created:
Construct higher Claude Code Playgrounds
Customise JointJS demo app with Claude Code
5 tips about utilizing AI coding brokers with JointJS (and different frameworks)
Simply as properly, I’ve been rather more energetic on LinkedIn recently, so let’s join on Linkedin too.
CSS Weekly on YouTube
Claude Code’s Supply Code Leaked! (Let’s Have Enjoyable With It!)
Claude Code’s supply code has simply been leaked through a map file of their npm registry. This may be very unhealthy for them, however for us, it is a implausible likelihood to have enjoyable and doubtlessly construct one thing actually cool.
Frontend Information #22
Learn how to detect at-rule help in CSS, how the pointer-box-offset property works, what the totally different and inventive methods are to pick out the HTML ingredient, the way it’s potential to recreate the x86 CPU structure in CSS, and extra.
Articles & Tutorials
David A. Herron exhibits learn how to construct UI patterns for modal home windows and prompts utilizing the <dialog> and popover internet options.
Multi-Stroke Textual content Impact in CSS
Yuan Chuan demonstrates learn how to create a multi-stroke textual content impact.
New CSS Multi-Column Structure Wrapping Options
Abhishek Pratap Singh explains how the column-height and column-wrap CSS multi-column format properties allow you to wrap the extra content material into a brand new row.
font-family Doesn’t Fall Again the Approach You Suppose
Harry Roberts shares a fast however essential reminder that font-family declarations don’t inherit fallback stacks the way in which many builders assume.
box-shadow isn’t any different to stipulate
Manuel Matuzovic explains why utilizing box-shadow for styling focus outlines will be problematic.
Sponsored Hyperlink
Construct any internet format, with confidence.
The Structure Maestro is a written, interactive CSS course that teaches you learn how to assume, construct, and debug layouts, not simply memorize properties. It covers flexbox, grid, :has(), and container queries.
Use the coupon code CSSWEEKLY for $50 off.
Instruments
View Transitions Toolkit
A set of utility capabilities to extra simply work with View Transitions.
CalendarJS
CalendarJS is a modular suite of JavaScript parts that makes time-based UI painless.
Inspiration
CodePen TV – 100% Pure CSS
Ben Evans created one other gorgeous piece of artwork in pure CSS.
Till Subsequent Week
Thanks for studying! Should you discover the content material priceless, please contemplate supporting the e-newsletter on Patreon.
Joyful coding,
