Delivering a dynamic hexagonal world map in just 10kbThe is really impressive stuff from the speed experts at Calibre.The importance of people who careTech is full of people who care deeply about their area of chosen specialism, and we’re all struggling in a world where doing lots of stuff really fast has become the most important thing.Keep caring and wait it out.I don't want a screenshot of your Claude conversationAbove everything else, it's disrespectful behaviour. We're glad Dave has written this.BeeswacksAnother stellar font from Dan Cederholm that's just been released.CSS or BS?Surprisingly tricky game!Making content-aware components using CSS :has(), grid, and quantity queriesHere's one from the Piccalilli archives that you might have missed to wrap up this issue.P.S. this is a good website from personalsit.es.Sponsor messageThe CodePen you’ve loved for years has levelled up, now with multiple files, deployments, lightning fast processing and previews — all with advanced privacy

I’ve been waiting for fourteen years to write this article. Fourteen years to tell you about one relatively new addition to the way images work on the web. For you, just a handful of characters will mean improvements to the fundamental ergonomics of working with images. For users, it will mean invisible, seamless, and potentially massive improvements to front-end performance, forever stitched into the fabric of the web. For me, it means the time has finally come to confess to my sinister machinations — a confession almost a decade and a half in the making.Back then, I was the esteemed Chair of the RICG — the "pirate radio" web standards body responsible for bringing responsive image markup to the web platform. Some of you remember. Some of you were there at the advent of responsive web design, helping to find brand new use cases where the web platform fell short — as a scrappy band of front-end specialists rallied, organized, and crashed headlong into a web standards process that did n

GraphiteA free and open source vector editing tool that looks great. Sure, Affinity is now free to everyone, but tools like Graphite will work well if you want to get away from corporate software, for example.Blank pageA handy, simple markdown/text editor that even has dictation capabilities.delphitoolsThere's some unbelievably good tools in this collection and there are loads to choose from. Our favourite is the simple font file explorer.WiretextWireframes are supposed to be very lo-fi and this tool does exactly that, right in your browser.ReKindleThis is really cool. It's like a web-based dashboard for Kindles (and other E Ink devices that have a browser). It's even got a Mario game!How I build a button componentHere's one from the Piccalilli archives that you might have missed to wrap up this issue.P.S. this is a good website from personalsit.es.Sponsor messageThe CodePen you’ve loved for years has levelled up, now with multiple files, deployments, lightning fast processing and prev

Let's work out what I need to account for here by referring back to our existing page audit.I need to account for the following:Post listings, limited by a defined items per pagePagination to render each page of post listingsThe actual blog items themselvesWith those, I'd consider this base implementation done, which is where I want to be in this iteration.A pagination shell component---const { next, previous } = Astro.props;---{ (previous || next) && ( <div class="wrapper"> <nav class="repel" aria-label="Pagination links"> {previous ? <a href={previous}>Newer posts</a> : <>&nbsp;</>} {next && <a href={next}>Older posts</a>} </nav> </div> )}I've used a <nav> here, so it needs an appropriate label: "Pagination links". The logic is quite straightforward here:Attempt to grab next and previous props, which are URLsTest if either next or previous have anything for usIf so, we're safe to render any wrapping markup because there will be at least one linkIf previous is good to go, render the l

Using CSS animations as state machinesExtremely clever stuff from Patrick here!Endgame for the open webAnil articulates the reality of the open web really well and gives us pragmatic advice of what we can tangibly do to protect if from the vultures in the tech industry.Checking if a movie has a post or mid credit sceneA very cool tool (and write up) that's surprisingly simple.EZ-TreeNeed to procedurally generate trees? Don't slop it and use this tool instead.Wind Waker JSOne for the Zelda fans out there.P.S. this is a good website from personalsit.es.Sponsor messageThe CodePen you’ve loved for years has levelled up, now with multiple files, deployments, lightning fast processing and previews — all with advanced privacy controls.Check out CodePen 2.0