High quality, curated design, dev and tech links. Twice a week.https://piccalil.li/the-index/https://piccalil.li/the-index/172/https://piccalil.li/the-index/172/Fri, 13 Mar 2026 11:55:00 GMT<h2><a href="https://nostalgic-css.github.io/NES.css/?utm_source=the-index&amp;utm_medium=newsletter">NES.css</a></h2> <p>A NES-themed CSS framework and it looks exactly as you'd expect it to.</p> <h2><a href="https://jclahoot.com/?utm_source=the-index&amp;utm_medium=newsletter">An immersive personal site</a></h2> <p>We're all out here building blogs, while Jonathan is here building an immersive first-person world as a personal site.</p> <h2><a href="https://youraislopbores.me/?utm_source=the-index&amp;utm_medium=newsletter">Your AI slop bores me</a></h2> <blockquote> <p>In a world looming with the threat of ai stealing your job, save humanity by stealing AI's job.</p> </blockquote> <p>A very interesting person-to-person &quot;chat bot&quot;.</p> <h2><a href="https://bonsplit.alasdairmonk.com/?utm_source=the-index&amp;utm_medium=newsletter">Bonsplit</a></h2> <p>A handy looking tabs and layout splitting tool for macOS power users.</p> <h2><a href="https://basewatch.dev/?utm_source=the-index&amp;utm_medium=newsletter">BaseWatch</a></h2> <p>Want to get alerted as soon as your favourite new web platform features hit a certain <em>Baseline</em> status? These folks have your back with this great looking service.</p> <hr> <p>P.S. <a href="https://www.robbymacdonell.com/?utm_source=the-index&amp;utm_medium=newsletter">this is a good website</a> from <a href="https://personalsit.es/?utm_source=the-index&amp;utm_medium=newsletter">personalsit.es</a>.</p> <h2>Sponsor message</h2><a href="https://beyondtellerrand.com/events/dusseldorf-2026/tickets?utm_source=piccalilli&utm_medium=the-index"><img src="https://piccalil.b-cdn.net/images/ads/btconf-dus26.jpg" alt="Let’s go beyond" /></a><p><strong>beyond tellerrand comes to Düsseldorf on 27 and 28 April 2026.</strong></p> <p>A welcoming, single-track conference where designers and developers share honest ideas and fresh perspectives. Connect with 500+ curious peers and leave energised and inspired.</p> <p>Tickets are limited. Grab yours today.</p> <p><a href="https://beyondtellerrand.com/events/dusseldorf-2026/tickets?utm_source=piccalilli&utm_medium=the-index">Get your ticket</a></p>https://piccalil.li/the-index/171/https://piccalil.li/the-index/171/Wed, 11 Mar 2026 11:55:00 GMT<h2><a href="https://css-tricks.com/the-value-of-z-index/?utm_source=the-index&amp;utm_medium=newsletter">The value of z-index</a></h2> <p>A really pragmatic and systematic approach to z-index here.</p> <h2><a href="https://buttondown.com/monteiro/archive/how-to-start-a-record-collection/?utm_source=the-index&amp;utm_medium=newsletter">How to start a record collection</a></h2> <p>Some great recommendations here and as Mike says, &quot;Congrats. <a href="https://bell.bz/music-collection/">I’m</a> sorry.&quot;</p> <h2><a href="https://ericwbailey.website/published/you-probably-shouldnt-be-annotating-focus-order/?utm_source=the-index&amp;utm_medium=newsletter">You probably shouldn’t be annotating focus order</a></h2> <p>A delightfully thorough piece by Eric here. Not many do it better.</p> <h2><a href="https://jonshamir.com/writing/color-mode?utm_source=the-index&amp;utm_medium=newsletter">Animated dark mode transition with modern CSS</a></h2> <p>Did <em>you</em> know that you can animate <code>@property</code>? You will by the end of this article.</p> <h2><a href="https://philna.sh/blog/2026/03/05/talking-tips/?utm_source=the-index&amp;utm_medium=newsletter">5 quick tips for giving better presentations</a></h2> <p>Plenty of very good advice here for people wanting to get into speaking/improving their speaking.</p> <hr> <p>P.S. <a href="https://mxd.codes/?utm_source=the-index&amp;utm_medium=newsletter">this is a good website</a> from <a href="https://personalsit.es/?utm_source=the-index&amp;utm_medium=newsletter">personalsit.es</a>.</p> <h2>Sponsor message</h2><a href="https://www.densediscovery.com/?ref=piccalilli "><img src="https://piccalil.b-cdn.net/images/ads/dense-discovery.jpg" alt="One email worth opening, every week. Thoughtful links hand-picked weekly to inspire reflection, not reaction" /></a><p>The internet moves fast. <strong>Dense Discovery doesn’t</strong>.</p> <p>Every week since 2018, Kai hand-picks a tight selection of links spanning design, tech, culture and art – the kind of things the algorithm buried for being interesting rather than trending. No filler, no automation, no hot takes.</p> <p>Just one beautiful email, once a week, that 38,000+ readers actually look forward to opening. Fancy that.</p> <p><a href="https://www.densediscovery.com/?ref=piccalilli ">Sign up here</a></p>https://piccalil.li/the-index/170/https://piccalil.li/the-index/170/Fri, 06 Mar 2026 11:55:00 GMT<h2><a href="https://www.puzzmo.com/today?utm_source=the-index&amp;utm_medium=newsletter">Puzzmo</a></h2> <p>Web puzzles without the corporate media slime. It looks like they're <a href="https://www.puzzmo.com/bluesky">integrating nicely with the AT protocol too</a>.</p> <h2><a href="https://whitep4nth3r.com/blog/how-to-make-your-first-open-source-contribution/?utm_source=the-index&amp;utm_medium=newsletter">How to make your first contribution to an open source project</a></h2> <p>A thoroughly good explainer of how to get involved in open source.</p> <h2><a href="https://www.dotcom.press/history-of-domains?utm_source=the-index&amp;utm_medium=newsletter">A brief history of domains</a></h2> <p>Very interesting read with a delightful, subtle use of sticky positioning.</p> <h2><a href="https://voxoban.com/?l=67i?utm_source=the-index&amp;utm_medium=newsletter">Voxoban - 3D Sokoban Puzzle Game</a></h2> <p>A creative reimagining of the classic (infuriating at times) puzzle game, made with CSS.</p> <h2><a href="https://visdeurbel.nl/en/?utm_source=the-index&amp;utm_medium=newsletter">The fish doorbell</a></h2> <p>You see a fish on the live feed and you ring the doorbell to they can be let in. Simple.</p> <hr> <p>P.S. <a href="https://michaelgroen.com/?utm_source=the-index&amp;utm_medium=newsletter">this is a good website</a> from <a href="https://personalsit.es/?utm_source=the-index&amp;utm_medium=newsletter">personalsit.es</a>.</p> <h2>Sponsor message</h2><a href="https://piccalil.li/courses?utm_source=the-index&utm_campaign=next-level-2026"><img src="https://piccalil.b-cdn.net/images/ads/next-level-event-newsletter.png" alt="Save 20% on all courses" /></a><p><strong>Take your career to the next level by taking our premium courses and save 20%</strong>.</p> <p>Use the code <code>NEXTLEVEL</code> at checkout to get our courses for only <strong>£199.20</strong>.</p> <p>By taking our courses, you’re supporting independent publishing, rooted in doing right for workers in design, development and leadership.</p> <p><a href="https://piccalil.li/courses?utm_source=the-index&utm_campaign=next-level-2026">Take your career to the next level</a></p>https://piccalil.li/the-index/169/https://piccalil.li/the-index/169/Wed, 04 Mar 2026 11:55:00 GMT<h2><a href="https://www.alwaystwisted.com/articles/beyond-the-blur-css-backdrop-filter?utm_source=the-index&amp;utm_medium=newsletter">Beyond the blur: a quick guide to the css backdrop-filter property</a></h2> <p>The <code>backdrop-filter</code> CSS property can do a heck of a lot more than you probably think it can. Stu expertly shows you with this in-depth guide.</p> <h2><a href="https://haptics.lochie.me/?utm_source=the-index&amp;utm_medium=newsletter">WebHaptics</a></h2> <p>An interesting looking library that enables you to provide haptic feedback with your interactive elements on the web. A native API one day maybe?</p> <h2><a href="https://dbushell.com/2026/03/02/mooving-to-a-self-hosted-bluesky-pds/?utm_source=the-index&amp;utm_medium=newsletter">MOOving to a self-hosted Bluesky PDS</a></h2> <p>The momentum behind the AT protocol and services like Bluesky is really picking up. If you were thinking of self-hosting your data (known as a PDS), David has a great write up here.</p> <h2><a href="https://piccalil.li/blog/finding-an-accessibility-first-culture-in-npmx/?utm_source=the-index&amp;utm_medium=newsletter">Finding an accessibility-first culture in npmx</a></h2> <p>It was great to get Abbey back writing for Piccalilli to share her account of how accessibility is right at the core at npmx. It’s so refreshing to read while standards continue to plummet, elsewhere in the industry.</p> <h2><a href="https://tangled.org/?utm_source=the-index&amp;utm_medium=newsletter">Tangled has a new homepage</a></h2> <p>After a very healthy recent investment, it's definitely time to pay attention to this AT protocol version of GitHub. Their new homepage is <em>very</em> nice too.</p> <p>Related to self-hosting earlier in the issue, I'm particularly interested in where Tangled are going.</p> <hr> <p>P.S. <a href="https://wes.dev/?utm_source=the-index&amp;utm_medium=newsletter">this is a good website</a> from <a href="https://personalsit.es/?utm_source=the-index&amp;utm_medium=newsletter">personalsit.es</a>.</p> <h2>Sponsor message</h2><a href="https://piccalil.li/courses?utm_source=the-index&utm_campaign=next-level-2026"><img src="https://piccalil.b-cdn.net/images/ads/next-level-event-newsletter.png" alt="Save 20% on all courses" /></a><p><strong>Take your career to the next level by taking our premium courses and save 20%</strong>.</p> <p>Use the code <code>NEXTLEVEL</code> at checkout to get our courses for only <strong>£199.20</strong>.</p> <p>By taking our courses, you’re supporting independent publishing, rooted in doing right for workers in design, development and leadership.</p> <p><a href="https://piccalil.li/courses?utm_source=the-index&utm_campaign=next-level-2026">Take your career to the next level</a></p>