font-synthesis
The font-systhesis property in CSS gives the browser instructions for how to handle font bolded and italicized character when the specified font-family doesn’t include them.… Read article “font-synthesis”
Spotting a Trend
There are tons of smokin’ hot websites out there, with an equal or greater number of talented designers and developers who make them. The web is awesome like that and encourages that sort of creativity.
Even so, it amazes me that certain traits find their way into things. I mean, it makes sense. Many of us use the same UI frameworks and take cues from sites we admire. But every once in a while, my eye starts catching wind of … Read article “Spotting a Trend”
CSS Painting Order
Geoff Graham
Usually, when I see terms like “painting order” or “stacking context” my brain will start to shut off and my eyes will gloss over. Not that my brain doesn’t normally shut off more often than not, but that’s another topic for another time.
Martin Robinson over at Igalia touches on these concepts using an example that’s pretty easy to grok, even for me. He starts with two boxes that overlap with negative margins.… Read article “CSS Painting Order”
Backdrop Filter effect with CSS
Geoff Graham
I love these little posts where some tricky-looking design is solved by a single line of CSS using a little-known property. In this case, the design is a frosted glass effect and the CSS property is backdrop-filter.… Read article “Backdrop Filter effect with CSS”
Introducing Headless WordPress with Gatsby Cloud (Live Preview, Incremental Builds, and more!)
Geoff Graham
The Gatsby team shipped an update to its source plugin for WordPress, graduating it to a beta release. The new version brings a new set of features to Gatsby’s headless WordPress configuration, which brings together WPGraphQL and WPGatsby to power a Gatsby front-end that pulls in data from WordPress.
If you haven’t encountered these plugins before, that’s probably because they’re only available on GitHub rather than the WordPress Plugin Directory.
And if you’re wondering what the big deal is, … Read article “Introducing Headless WordPress with Gatsby Cloud (Live Preview, Incremental Builds, and more!)”
WordPress Contributors Seek Sponsorship for Improving Gutenberg Developer Docs
Geoff Graham
A couple of WordPress contributors are currently looking for folks to sponsor them to work on the documentation for the WordPress block editor (often referred to as “Gutenberg”) and this is your chance to support them.… Read article “WordPress Contributors Seek Sponsorship for Improving Gutenberg Developer Docs”
Styling Layout Wrappers In CSS
Geoff Graham
Two things that strike me often about the web are how many ways there are to go about the same thing and how many considerations go into even the most seemingly simple things.
Working with wrapper elements is definitely on both those lists. Wrappers (or containers or whatever) are so common — especially when establishing grid layouts and boundaries for the elements inside them — that it’s easy to take them for granted and reach for them without stepping back … Read article “Styling Layout Wrappers In CSS”
WebP Image Support Coming to iOS 14
Geoff Graham
Apple announced a ton of new updates at yesterday’s WWDC20 keynote address, from new hardware to updated applications. There’s lots to gawk at and enough device-envy to go around.
But there’s one little line in the Safari 14 Beta release notes that caught my eye:
Added WebP image support.
Some Innocent Fun With HTML Video and Progress
The idea came while watching a mandatory training video on bullying in the workplace. I can just hear High School Geoff LOL-ing about a wimp like me have to watch that thing.
But here we are.
The video UI was actually lovely, but it was the progress bar that really caught my attention – or rather the [progress].value. It was a simple gradient going from green to blue that grew as the video continued playing.
Learn Eleventy From Scratch
Geoff Graham
The latest edition of Andy Bell’s Piccalilli landed in my inbox this morning with a sweet offer: preorder Andy’s course on learning Eleventy from scratch at a third of the price.
Why the plug? No, not sponsorships or anything like that. I just happen to hear a heckuva lot about Eleventy these days. Like how we can use it with Google Sheets as a pseudo-CMS. Or how it can be a key component of an emergency website kit. I … Read article “Learn Eleventy From Scratch”
