wsf-xiii

Published Jul 5, 2019

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 react-window by Houssein Djirdeh and Jason Miller / The cost of JavaScript in 2019 by Addy Osmani / The case of partial hydration (with Next and Preact) by Lukas Bombach

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:

header {
	position: -webkit-sticky; /* For Safari */
	position: sticky; /* For all the other browsers */
	top: 0; /* Where to stick */
	z-index: 100; /* Ensure proper stacking */
}

The z-index part 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:

select {
	font-size: max(1em, 16px);
}

Curiously, Safari is the only current browser supporting the max() function.

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.

The 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