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.
This is a really clear explanation of how CSS works.
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.
The texture here is shockingly realistic.
I can relate to what Rachel describes here—I really like using my own website as a playground to try out new technologies. That’s half the fun of the indie web.
I had already decided to bring my content back home in 2017, but I’d also like to think about this idea of using my own site to better demonstrate and play with the new technologies I write about.
The font-display property is landing in browsers, and this is a great introduction to using it:
If you don’t know which option to use, then go with
swap. Not only does it provide an optimal balance between custom fonts and accessibility of content, it provides the same font loading behavior that we’ve relied on JavaScript for. If you have fonts on the page that you’d like to have load, but could ultimately do without, consider going withfallbackoroptionalwhen usingfont-display.
Until it’s more widely supported, you can continue to use a JavaScript solution, but even then you can feature detect first:
if ("fontDisplay" in document.body.style === false) {
/* JavaScript font loading logic goes here. */
}
Dave is making a nifty in-browser game that you can play by yourself or in co-operative mode. If your device has a gyroscope, you can use that to aim. Very cool!
(And it looks like it’s all set to become a progressive web app once it’s running on HTTPS.)
I’ve seen the exact problem that Rachel describes here—flexbox only applied to direct children, meaning the markup would have to be adjusted. display: contents looks like a nifty solution.
I think I’ve shown great restraint in not linking to loads of think-pieces about Star Wars and The Force Awakens, because believe me, I’ve been reading—and listening to—a lot.
What Jessica has written here is about The Force Awakens. But more than that, it’s about Star Wars. But more than that, it’s about childhood. But more than that…
What I’m saying is: if you only read one thing about the new Star Wars film, read this.
If you were at Responsive Day Out on Friday and you liked the music that was playing during the breaks, here’s the track listing. Creative Commons licensed.
Still a few days left to back this great project for Brighton:
Build, tinker, make and play! For anyone with imagination, The Brighton Makerlab lets ages 8 to 80 create cool stuff with technology.
Design principles for the newly-formed USDS. I’ve added these to my collection.
Zoe uses one little case study to contrast two different CSS techniques: display-table and flexbox. Flexbox definitely comes out on top when it comes to true source-order independence.
A cute approach to pairing typefaces: treat it like a dating game.
Hypertext adventure.
This might well be the best thing Wired has ever published. I wish every article were in this format.
A lovely new service from Adrian that allows you to sync up guitar tabs with videos. It’s a very impressive in-browser app.
And this is why Code Club is such a great initiative.
Yet another write-up of this year’s dConstruct.
A nice write-up of dConstruct that focuses on three ideas that were threaded throughout the day: