9 squares – The Man in Blue
Some lovely little animation experiments from Cameron.
Tags: play
67
Font Playground — Play with variable fonts!
A fun way to play around with the options in variable fonts.
Segmented type appreciation corner
Marcin built this lovely little in-browser tool to demonstrate how segmented type displays work at different sizes.
The Wisdom and/or Madness of Crowds
The latest explainer/game from Nicky Case is an absolutely brilliant interactive piece on small world networks.
pacapong by kingPenguin
Pong + Pacman + Space Invaders!
How display: contents; Works
A really deep dive into display: contents from Ire.
Constellations
A fun game with pins and string in canvas.
90 Minutes | Type Supply
Tal Leming’s thoroughly delightful (and obsessive) account of designing the 90 Minutes typeface for U.S. Soccer.
FIFA has strict regulations that govern the size and stroke weight of numbers and letters used on official match uniforms. This made me unbelievably paranoid. I had a nightmare that one of the national teams would be set for kickoff of an important match and the referee would suddenly blow the whistle and say, “Hey, hey, hey! The bottom stroke of that 2 is 1 mm too light. The United States must forfeit this match!”
Mini Tetris
The spirit of 5K.org lives on. View source: this JavaScript version of Tetris is less than 1K. Details on Github.
Explorable Explanations
A collection of interactive lessons—games that teach—featuring the work of Bret Victor, Nicky Case, and more (the site is put together by Nicky Case).
Ridley Scott’s ‘Blade Runner’: A Game-Changing Science-Fiction Classic • Cinephilia & Beyond
A nexus of hypermedia on all things Blade Runner, from links to Tumblr blogs to embedded screenplays, documentaries, and scanned images.
‘Neopets’: Inside Look at Early 2000s Internet Girl Culture - Rolling Stone
Girls on Neopets took what they needed from the site and used the skills acquired there to further develop a burgeoning digital girls’ culture, whether it be in expanding their guild pages into personal sites, teaching others to code, or exchanging those skills for economic gain in Neopets.
I have anecdotal evidence from a few people that Neopets was their introduction to web design and development.
If you really dislike FOUT, `font-display: optional` might be your jam | CSS-Tricks
Everyone’s been talking about font-display: swap as a way of taking the pain out of loading web fonts, but here Chris looks at font-display: optional and font-display: fallback as well.
It’s Time to Make Code More Tinker-Friendly | WIRED
We don’t want the field to de-democratize and become the province solely of those who can slog through a computer science degree.
So we need new tools that let everyone see, understand, and remix today’s web. We need, in other words, to reboot the culture of View Source.
Fixing fieldsets — That Emil is Emil Björklund
This is an excellent proposal from Emil. If we can apply display: contents to fieldsets, then we would finally have a way of undoing the byzantine browser styles that have hindered adoption of this element. This proposal also ensures backwards compatibility so there’d be no breakage of older sites:
The legacy appearance of fieldsets probably needs to be preserved for compatibility reasons. But
display: contentsis not supported in any old browsers, and is most likely used on exactly zero sites using the legacy look of fieldsets.
Whaddya say, browser makers?
Patterns Day playlist on Spotify
If you were at Patterns Day and you liked the music that was playing during the breaks, here’s the playlist. All the artists are based in Brighton.
Springer Nature frontend playbook: house style guide
I like it when organisations share their in-house coding styles. This one from Springer Nature not only has guides for HTML, CSS, and JavaScript, but it also has a good primer on progressive enhancement.
The invisible parts of CSS · MadebyMike
This is a really clear explanation of how CSS works.
Flatris
Tetris in your browser. Visit it once and it works offline (if your browser supports service workers) so go ahead and add it to your home screen.