Web Platform. SVG geometry properties can be used from CSS starting with Firefox 69 / An intro to Line breaking and related properties from CSS Text, by Florian Rivoal (video) / DOM element dimensions and CSS transforms by Louis Lazaris
Toolbox. Use npmfs to look inside npm packages / priority-plus, a simple, IntersectionObserver-based solution for navigation bars / bundlesize keeps your bundle size in check / streamx, an iteration of the Node.js core streams with a series of improvements
SSG. Using bookmarklets to script static sites by Tom Critchlow / Hylia, a simple starter kit for Eleventy by Andy Bell
UX / Accessibility. Delight comes last by Matthew Ström / API design is UI design by Tridip Thrizu / Inaccessibility of CAPTCHA, a W3C report
Performance. CSS Triggers / Bringing service workers to Google Search by Jeff Posnick / Virtualize large lists with
Hardware. Raspberry Pi 4 has been released and everybody's excited; some possible uses, for inspiration / Let's make more calm technology by Max Braun
Explorables. Learning Synths from Ableton
Creative coding. Working with Wikipedia data in Observable, by Mike Bostock / Swiss-style Typographical Posters with CSS Grid, a CodePen collection by Henry Desroches / Generative Machines with Matt DesLauriers (video), a talk at FITC Toronto 2019
Web Components: not great, not terrible / Why I don't use Web Components by Rich Harris; counterpoints by Andrea Giammarchi, Preet Shihn / The truth about web components and frameworks, by Dion Almaer / Weeknote 14 by Baldur Bjarnason on his recent experience with Web Components / heresy, React-like custom elements
Collaborative editing. Collaborative Editor in Rust, a prototype by Caolan McMahon / Creating a collaborative editor by Pierre Hedkvist / A simple approach to building a real-time collaborative text editor by Rudi Chen / Open source collaborative text editors by Jure Triglav
Making software. How does debugging a program look like? by Julia Evans / Bracket pair colorizer — such a nice idea, but struggling to find one for Sublime Text / Things that may (not) help with bugs: static typing, code coverage
Cross-platform. Catalyst deep dive: the future of Mac software according to Apple and devs / The secret to good Electron apps by James Long / WASM by example by Aaron Turner
Things I learned
I made this. An old idea, finally realized: CMYK Named Colors. I thought I'd give Next.js a shot for this project. Deploying it to GitHub Pages turned out to be a bit fiddly, but other than that I'm pretty happy with the outcome. Server-side rendered React feels good and I think I'll use this setup for more projects.
Position: sticky. It's also the first time I used the
position: sticky CSS property for navigation — I guess it hadn't occurred to me it had such wide support? A minimal setup:
position: -webkit-sticky; /* For Safari */
position: sticky; /* For all the other browsers */
top: 0; /* Where to stick */
z-index: 100; /* Ensure proper stacking */
z-indexpart is to ensure consistent stacking across browsers. I bumped into "incorrect" stacking in Firefox, but there seems to be a discussion around it
A nice addition to this CSS property would be a
:stuck pseudo-class selector, so you can style the element based on whether it's in its sticky state. There are good reasons for why this doesn't exist in CSS, but you can roll your own
sticky-change event with IntersectionObserver.
Inputs on iOS. Everybody's used to iOS Safari zooming into
<select> elements when you use them. But why? Turns out it happens when the font size for the element falls below 16px. Being a fan of the
em unit, I came up with this to fix it:
font-size: max(1em, 16px);
Curiously, Safari is the only current browser supporting the
Speaking of inputs, I haven't looked into why
<input type='range'/> is so capricious in iOS Safari. Sometimes it's very responsive, other times you struggle with grabbing the handle.
formaction attribute. You can have more than one submit button in a HTML form, pointing to different URLs.
Listening to: Take 5 with Warren Ellis