Sunday, July 12th, 2020
Saturday, July 11th, 2020
Friday, July 10th, 2020
An excellent and clear explanation of specificity in CSS.
Tuesday, July 7th, 2020
I made the website for the Clearleft podcast last week. The design is mostly lifted straight from the rest of the Clearleft website. The main difference is the masthead. If the browser window is wide enough, there’s a background image on the right hand side.
I mostly added that because I felt like the design was a bit imbalanced without something there. On the home page, it’s a picture of me. Kind of cheesy. But the image can be swapped out. On other pages, there are different photos. All it takes is a different class name on that masthead.
var names = ['jeremy','katie','rich','helen','trys','chris']; var name = names[Math.floor(Math.random() * names.length)]; document.querySelector('.masthead').classList.add(name);
(You could paste that into the dev tools console to see it in action on the podcast site.)
Then I read something completely unrelated. Cassie wrote a fantastic article on her site called Making lil’ me - part 1. In it, she describes how she made the mouse-triggered animation of her avatar in the footer of her home page.
It’s such a well-written technical article. She explains the logic of what she’s doing, and translates that logic into code. Then, after walking you through the native code, she shows how you could use the Greeksock library to achieve the same effect. That’s the way to do it! Instead of saying, “Here’s a library that will save you time—don’t worry about how it works!”, she’s saying “Here’s it works without a library; here’s how it works with a library; now you can make an informed choice about what to use.” It’s a very empowering approach.
That’s fine. But really, I should try to avoid touching the DOM at all. It can have performance implications, possibly triggering unnecessary repaints and reflows.
This made me realise that I need to be aware of automatically reaching for a solution just because that’s the way I’ve done something in the past. I should step back and think about the more efficient solutions that are possible now.
But I too have been guilty of underselling them. I almost always refer to them as “CSS custom properties” …but a lot of their potential comes from the fact that they’re not confined to CSS. From now on, I’m going to try calling them custom properties, without any qualification.
Good point. When we talk about perceived performance, the perception in question is almost always visual. We should think more inclusively than that.
Friday, July 3rd, 2020
Dark mode revisited
I added a dark mode to my website a while back. It was a fun thing to do during Indie Web Camp Amsterdam last year.
I tied the colour scheme to the operating system level. If you choose a dark mode in your OS, my website will adjust automatically thanks to the
prefers-color-scheme: dark media query.
But I’ve seen notes from a few friends, not about my site specifically, but about how they like having an explicit toggle for dark mode (as well as the media query). Whenever I read those remarks, I’d think “I’m really not sure I’ve got time to deal with adding that kind of toggle to my site.”
But then I realised, “Jeremy, you absolute muffin! You’ve had a theme switcher on your website for almost two decades now!”
Doh! I had forgotten about that theme switcher. It dates back to the early days of CSS. I wanted my site to be a demonstration of how you could apply different styles to the same underlying markup (this was before the CSS Zen Garden came along). Those themes are very dated now, but if you like you can view my site with a Zeldman theme or a sci-fi theme.
To offer a dark-mode theme for my site, all I had to do was take the default stylesheet, pull out the custom properties from the
prefers-color-scheme: dark media query, and done. It took less than five minutes.
So if you want to view my site in dark mode, it’s one of the options in the “Customise” dropdown on every page of the website.
Tuesday, June 30th, 2020
There is a gentle sadness to being present in a moment so precious that you know you’ll never forget it, and will revisit it as a memory time and time again. It will be a shadow, many details missing, the moment bittersweet.
Sunday, June 28th, 2020
Probably fewer than a hundred people in the world have seen what you’re looking at right now.
Jessica and I were taking turns at the microscope when we were told that.
Let me back up a bit and explain how we found ourselves in this this situation…
It all started with The Session, the traditional Irish music community site that I run. There’s a big focus on getting together and playing music—something that’s taken a big hit during this global pandemic. Three sections of the website are devoted to face-to-face gatherings: events (like concerts and festivals), sessions, and the most recent addition, trips.
The idea with trips is that you input somewhere you’re going to be travelling to, along with the dates you’ll be there. It’s like a hyper-focused version of Dopplr. The site then shows you if any events are happening, if there are any sessions on, and also if there are any members of the site in that locality (if those members have added their location to their profiles).
Last August, I added the trips I would be taking in the States. There’s be a trip to Saint Augustine to hang out with Jessica’s family, a trip to Chicago to speak at An Event Apart, and a trip to New York for a couple of days because that’s where the ocean liner was going to deposit us after our transatlantic crossing.
A fellow member of The Session named Aaron who is based in New York saw my trip and contacted me to let me know about the session he goes to (he plays tin whistle). Alas, that session didn’t coincide with our short trip. But he also added:
I work at the American Museum of Natural History, and if you have time and interest, I can provide you with vouchers for tickets to as many special exhibits and such as you’d like!
Ooh, that sounded like fun! He also said:
In fact I could give you a quick behind-the-scenes tour if you’re interested.
Jessica and I didn’t have any set plans for our time in New York, so we said why not?
That’s how we ended spending a lovely afternoon being shown around the parts of the museum that the public don’t usually get to see. It’s quite the collection of curiosities back there!
There’s also plenty of research. Aaron’s particular area was looking into an entirely different kingdom of life—neither animal, nor plant, nor fungus. Remarkably, these microscopic creatures were first identified—by a classmate of Aaron’s—by happenstance in 2016:
The hemimastigotes analyzed by the Dalhousie team were found by Eglit during a spring hike with some other students along the Bluff Wilderness Trail outside Halifax a couple of years ago. She often has empty sample vials in her pockets or bags, and scooped a few tablespoons of dirt into one of them from the side of the trail.
That’s like a doctor announcing that they’d come across a hitherto-unknown limb on the human body. The findings were published in the paper, Hemimastigophora is a novel supra-kingdom-level lineage of eukaryotes in 2018.
In the “backstage” area of the American Museum of Natural History, Aaron had samples of them. He put them under the microscope for us. As we took turns looking at them wriggling their flagella, Aaron said:
Probably fewer than a hundred people in the world have seen what you’re looking at right now.
Saturday, June 27th, 2020
Thursday, June 25th, 2020
Cassie’s redesign is gorgeous—so much attention to detail! (And performant too)
A score of 100 in Lighthouse or 0 errors in axe doesn’t mean that you’re done, it means that you’re ready to start manual testing and testing with real users, if possible.
Tuesday, June 23rd, 2020
This is a very nifty use of CSS gradients!
Wednesday, June 17th, 2020
A meditative essay on the nature of time.
The simultaneous dimming of Betelgeuse and the global emergence of COVID-19 were curiously rhyming phenomena: disruptions of familiar, reassuring rhythms, both with latent apocalyptic potential.
Time and distance are out of place here.
We will have left a world governed by Chronos, the Greek god of linear, global, objective time measured by clocks, and arrived into a world governed by Kairos, the Greek god of nonlinear, local, subjective time, measured by the ebb and flow of local patterns of risk and opportunity. The Virus Quadrille is not just the concluding act of pandemic time but the opening act of an entire extended future.
Sunday, June 14th, 2020
Friday, June 12th, 2020
When I log onto someone’s website I want them to tell me why they’re weird. Where’s the journal or scrapbook? Where’s your stamp collection? Or the works-in-progress, the failed attempts, the clunky unfinished things?
Friday, May 29th, 2020
This is a lovely new project from Mark that gets very meta, cataloging specimens of type specimens:
This project will dig into specimens from these three perspectives: as artefacts made by and for font designers to evolve type culture; as tools for font users to make decisions about choosing and using type; and as effective marketing tools.
Chris has put together one of his indispensable deep dives, this time into responsive images. I can see myself referring back to this when I need to be reminded of the syntax of
Tuesday, May 26th, 2020
You can send me messages using the form below. If I go 24 hours without receiving a message, I’ll permanently self-destruct, and everything will be wiped from my database.