James describes his process for designing fluid grid layouts, which very much involves working with the grain of the web but against the grain of our design tools:
In 2022 our design tools are still based around fixed-size artboards, while we’re trying to design products which scale gracefully to suit any screen.
I love this list of ever-increasing timelines. All that’s missing is the time since the Carrington Event, just to remind us what could happen when the next one hits.
A terrific tour of just some of the fantastic ways you can use :has() in CSS.
The section on using it with sibling selectors blew my mind:
How often have you wanted to adjust the margins on a headline based on the element following it? Now it’s easy. This code allows us to select any h2 with a p immediately after it.
h2:has(+ p) { margin-bottom: 0; }Amazing.
The algorithm I’m going after is pretty simple: If the grid of items has an odd number of items, then make the first item full-width. But CSS can’t do logic… right? Well… hold my proverbial beer.
Brian recounts the sordid messy history of user-agent strings.
I remember somebody once describing a user-agent string as “a reverse-chronological history of web browsers.”
A lovely visualisation of asteroids in our solar system.
When I was travelling across the Atlantic ocean on the Queen Mary 2 back in August, I had the pleasure of attending a series of on-board lectures by Charles Barclay from the Royal Astronomical Society.
One of those presentations was on the threat of asteroid impacts—always a fun topic! Charles mentioned Spaceguard, the group that tracks near-Earth objects.
Spaceguard is a pretty cool-sounding name for any organisation. The name comes from a work of (science) fiction. In Arthur C. Clarke’s 1973 book Rendezvous with Rama, Spaceguard is the name of a fictional organisation formed after a devastating asteroid impact on northen Italy—an event which is coincidentally depicted as happening on September 11th. That’s not a spoiler, by the way. The impact happens on the first page of the book.
At 0946 GMT on the morning of September 11 in the exceptionally beautiful summer of the year 2077, most of the inhabitants of Europe saw a dazzling fireball appear in the eastern sky. Within seconds it was brighter than the Sun, and as it moved across the heavens—at first in utter silence—it left behind it a churning column of dust and smoke.
Somewhere above Austria it began to disintegrate, producing a series of concussions so violent that more than a million people had their hearing permanently damaged. They were the lucky ones.
Moving at fifty kilometers a second, a thousand tons of rock and metal impacted on the plains of northern Italy, destroying in a few flaming moments the labor of centuries.
Later in the same lecture, Charles talked about the Torino scale, which is used to classify the likelihood and severity of impacts. Number 10 on the Torino scale means an impact is certain and that it will be an extinction level event.
Torino—Turin—is in northern Italy. “Wait a minute!”, I thought to myself. “Is this something that’s also named for that opening chapter of Rendezvous with Rama?”
I spoke to Charles about it afterwards, hoping that he might know. But he said, “Oh, I just assumed that a group of scientists got together in Turin when they came up with the scale.”
Being at sea, there was no way to easily verify or disprove the origin story of the Torino scale. Looking something up on the internet would have been prohibitively slow and expensive. So I had to wait until we docked in New York.
On our first morning in the city, Jessica and I popped into a bookstore. I picked up a copy of Rendezvous with Rama and re-read the details of that opening impact on northern Italy. Padua, Venice and Verona are named, but there’s no mention of Turin.
Sure enough, when I checked Wikipedia, the history and naming of the Torino scale was exactly what Charles Barclay surmised:
A revised version of the “Hazard Index” was presented at a June 1999 international conference on NEOs held in Torino (Turin), Italy. The conference participants voted to adopt the revised version, where the bestowed name “Torino Scale” recognizes the spirit of international cooperation displayed at that conference toward research efforts to understand the hazards posed by NEOs.
James shares his experience of teaching a class of 9 and 10 year old children how to code, and offers some advice:
- Don’t dumb it down
- Use real-world examples
- Make it hands on
- Set clear expectations
- Award certificates and/or stickers
As members of the web community we have a responsibility to share what we have learned. I can’t think of a better way of doing that then helping kids get started.
Hear, hear!
A collection of short stories and essays speculating on humanity’s future in the solar system. The digital versions are free to download.
A write-up of the BrightSparks programme that Clearleft is taking part in.
Each company agreed to help support one local child from a low-income family, on free school meals or with a yearly household income of under £25k.
A lovely piece of design fiction imagining a project where asteroids are shaped and polished into just the right configuration to form part of an enormous solar-system wide optical telescope.
Once they are deployed in space, a celestial spiderweb of crisscrossed laser beams can push around clouds of those microscopic optical sensors to desired locations.
This is so great! Charlotte takes two previous ideas she’s been writing about (quantity queries and flexbox) and puts them together in a new way.
It took me a while to get around what the nth-child selectors are doing here, but Charlotte does such great job of explaining the CSS that even I could understand it.
This guide to CSS grid layout is the perfect companion piece to Rachel’s Grid by Example.
Grid frameworks don’t get much more minimal than this—eleven lines of CSS:
.row { display: flex; }
.col { flex: 1; }
@media (max-width: 48em) {
.row { flex-direction: column; }
.col { flex: 0 0 100%; }
}
.col-tenth { flex: 0 0 10%; }
.col-fifth { flex: 0 0 20%; }
.col-quarter { flex: 0 0 25%; }
.col-third { flex: 0 0 33.3333334%; }
.col-half { flex: 0 0 50%; }
Should’ve been a gist really.
Results of a survey of over 1000 people working on the web. It’s beautifully put together and the overall trajectory regarding responsive design looks pretty positive to me.
A beautiful website for ISS-based biology experiments.
Science Hack Day San Francisco was held in the Github offices last weekend. It was brilliant!
This was the fifth Science Hack Day in San Francisco and the 40th worldwide. That’s truly incredible. I mean, I literally can’t believe it. When I organised the very first Science Hack Day back in 2010, I had no idea how far it would go. But Ariel has been indefatigable in making it a truly global event. She is amazing. And at this year’s San Francisco event, she outdid herself in putting together a fantastic cross-section of scientists, designers, and developers: paleontology, marine biology, geology, astronomy, particle physics, and many, many more disciplines were represented in the truly diverse attendees.
After an inspiring set of lightning talks on the first day, ideas started getting bounced around and the hacking began to take shape. I had a vague idea for—yet another—space-related hack. What clinched it was picking the brains of NASA’s Keri Bean. She’d help me get hold of the dataset I needed for my silly little hack.
So here’s the background…
There are many possibilities for human habitats in space: Stanford tori, O’Neill cylinders, Bernal spheres. Another idea, explored in science fiction, is hollowing out asteroids (Larry Niven’s bubbleworlds). Kim Stanley Robinson explores this idea in depth in his book 2312, where he describes the process of building an asteroid terrarium. The website of the book has a delightful walkthrough of the engineering processes involved. It’s not entirely implausible.
I wanted to make that idea approachable, so I thought about the kinds of people we might want to have living with us on the interior shell of a rotating hollowed-out asteroid. How about the people you follow on Twitter?
The only question that remains then is: which asteroid is the right one for you and your Twitter friends? Keri tracked down the motherlode of asteroid data and I started hacking the simplest of mashups—Twitter meets space rocks.
Here’s the result…
Give it your Twitter username and it will tell you exactly which one of the asteroids in the main belt is right for you (I considered adding an enterprise option that would tell you where you could store your social network in the cloud …the Oort cloud, that is).
Be default, your asteroid will have the population density of Earth, which is quite generously. But if you want a more sparsely-populated habitat—say, the population density of Australia—or a more densely-populated world—with something like the population density of Japan—then you will be assigned a larger or smaller asteroid accordingly.
You’ll also be told by how much you should increase or decrease the rotation of the asteroid to get one gee of centrifugal force on the interior. Figuring out the equations for calculating centrifugal force almost broke me, but luckily I had help from a rocket scientist and a particle physicist …I’m not even kidding. And I should point out that the calculations take some liberties—I’m assuming a spherical body, which is quite a stretch, given the lumpy nature of most asteroids.
At 13:37 on the second day, the demos began. Keri and I were first up.
Give Habitasteroids a whirl for yourself. It’s a silly little thing, but I quite like how it turned out.
Speaking of silly things …at some point in the proceedings, Keri put the call out for asteroid data to her fellow space enthusiasts on Twitter. They responded with asteroid-related puns.
@PlanetaryKeri So you’re not as investa’d in Ceres as the rest of the team? @motorbikematt @adactio #LordOfThePuns
— J.L. Galache (@JLGalache) October 5, 2014@jlgalache @planetarykeri @motorbikematt @adactio Don’t Juno better than to make puns like that? @brianwolven
— lukemonster (@lukedones) October 5, 2014@lukedones @JLGalache @PlanetaryKeri @motorbikematt @adactio Recruiting the rest of your astro Pallas to get in on the asteroid pun action?
— Brian Wolven (@brianwolven) October 5, 2014@brianwolven @lukedones @JLGalache @PlanetaryKeri @motorbikematt @adactio Your puns give me the Hebe jeebies.
— ｂｒｘ０ (@brx0) October 5, 2014@brx0 @brianwolven @jlgalache @planetarykeri @motorbikematt @adactio @paix120 At this point we’ve all been led Astraea :-(
— lukemonster (@lukedones) October 5, 2014@brx0 @lukedones @JLGalache @PlanetaryKeri @motorbikematt @adactio Ida feeling that might happen eventually.
— Brian Wolven (@brianwolven) October 5, 2014@brianwolven @lukedones @JLGalache @PlanetaryKeri @motorbikematt @adactio It’ like you’re Psyche or something.
— ｂｒｘ０ (@brx0) October 5, 2014@lukedones @brx0 @JLGalache @PlanetaryKeri @motorbikematt @adactio @paix120 With this crew, at least the pun Themis pretty obvious.
— Brian Wolven (@brianwolven) October 5, 2014@brianwolven @lukedones @brx0 @JLGalache @PlanetaryKeri @motorbikematt @adactio You guys sure know Alauda asteroid names.
— Renee (@paix120) October 5, 2014@brianwolven @lukedones @brx0 @JLGalache @PlanetaryKeri @motorbikematt @adactio Europa creek if u’re Wikipedia’ing like me. Thisbe the end.
— Renee (@paix120) October 5, 2014@paix120 @brianwolven @lukedones @JLGalache @PlanetaryKeri @motorbikematt @adactio The end? So this is the last Gaspra?
— ｂｒｘ０ (@brx0) October 5, 2014@brx0 @paix120 @brianwolven @jlgalache @planetarykeri @motorbikematt @adactio We should probably stop at Gaspra before we reach Eros.
— lukemonster (@lukedones) October 5, 2014@brianwolven @paix120 @lukedones @JLGalache @PlanetaryKeri @motorbikematt @adactio I Echo this sentiment.
— ｂｒｘ０ (@brx0) October 5, 2014@lukedones @paix120 @brianwolven @JLGalache @PlanetaryKeri @motorbikematt @adactio Too late. Pandora’s box has been opened.
— ｂｒｘ０ (@brx0) October 5, 2014@brx0 @lukedones @brianwolven @JLGalache @PlanetaryKeri @motorbikematt @adactio tho, someone might Summanus to the Psyche ward.
— Renee (@paix120) October 5, 2014@paix120 @brx0 @brianwolven @jlgalache @planetarykeri @motorbikematt @adactio Have Merxia on us all!
— lukemonster (@lukedones) October 5, 2014@paix120 @lukedones @brianwolven @JLGalache @PlanetaryKeri @motorbikematt @adactio Every other Twitter pun game Pales in comparison.
— ｂｒｘ０ (@brx0) October 5, 2014They have nice asteroids though: @brianwolven, @lukedones, @paix120, @LGalache, @motorbikematt, @brx0.
Oh, and while Habitasteroids might be a silly little hack, WRANGLER just might work.
A fascinating look at how Flipboard combines art direction and algorithms to generate layouts.
This was my favourite moment from the Handheld conference in Cardiff.
Defending Earth against asteroids, just like the Spaceguard organisation described in Rendezvous With Rama.
Detect. Deflect. Defend.