Saturday, November 16th, 2019
Saturday, April 13th, 2019
Woah! This is one smart hack!
Scott has figured out a way to get all the benefits of pointing to an external SVG file …that then gets embedded. This means you can get all the styling and scripting benefits that only apply to embedded SVGs (like using
The fallback is very graceful indeed: you still get the SVG (just not embedded).
Monday, March 18th, 2019
This is a nifty visualisation by Hui Jing. It’s really handy to have elements categorised like this:
- Root elements
- Interactive elements
- Document metadata
- Tabular data
- Grouping content
- Embedded content
- Text-level semantics
Sunday, February 10th, 2019
This orrery is really quite wonderful! Not only is it a great demonstration of what CSS can do, it’s a really accurate visualisation of the solar system.
Monday, June 11th, 2018
Mandy’s experiments with text effects in CSS are kinda mindblowing—I can’t wait to see her at Ampersand at the end of the month!
Thursday, May 31st, 2018
This ever-growing curated collection of interface patterns on CodePen is a reliable source of inspiration.
Wednesday, May 9th, 2018
I really like this month’s CodePen challenge, all about HTML elements that go well together. First up:
Sunday, March 4th, 2018
Wednesday, January 10th, 2018
Suggestions for small interface tweaks.
Thursday, September 14th, 2017
There’s going to be a CodePen meetup in Brighton as part of the Brighton Digital Festival. Should be fun! See you there.
Tuesday, July 11th, 2017
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.
Sunday, July 2nd, 2017
This is a really great screencast on getting started with React. I think it works well for a few reasons:
- Sarah and Chris aren’t necessarily experts yet in React—that’s good; it means they know from experience what “gotchas” people will encounter.
- They use a practical use-case (a comment form) that’s suited to the technology.
- By doing it all in CodePen, they avoid the disheartening slog of installation and build tools—compare it to this introduction to React.
- They make mistakes. There’s so much to be learned from people sharing “Oh, I thought it would work like that, but it actually works like this.”
There’s a little bit of “here’s one I prepared earlier” but, on the whole, it’s a great step-by-step approach, and one I’ll be returning to if and when I dip my toes into React.
Sunday, June 25th, 2017
Sunday, April 9th, 2017
Here’s a handy interface if you want to get your head around named areas in CSS Grid, also known as doing layout with ASCII art.
Wednesday, March 22nd, 2017
Incredibly impressive work from the CodePen team—you can now edit entire projects in your web browser …and then deploy them to a live site!
Friday, December 16th, 2016
This is a clever technique by Dave—use viewport units to make a lightweight lightbox.
Wednesday, August 3rd, 2016
Here’s another clever CSS technique. It uses flexbox to add horizontal lines either side of centred content.
This is witchcraft. I’ve been deconstructing the CSS to figure out how this works and it’s really clever.
(Hint: try commenting out some of the CSS and see what happens.)
Wednesday, May 18th, 2016
Here’s a nice little pattern from Dave—showing data tables one column at a time on smaller screens.
Wednesday, April 13th, 2016
I quite like this step-by-step interface for a form, all cleverly handled with the
:focus pseudo-class. I’d want to refine some of the usability issues before using it in production, but the progressive disclosure is nice.