Tags: age

2849

sparkline

Monday, April 22nd, 2019

Checked in at Zum Brandanfang. Matjes 🐟 — with Jessica map

Checked in at Zum Brandanfang. Matjes 🐟 — with Jessica

Ostern.

Ostern.

Saturday, April 20th, 2019

Checked in at Jugendbildungsstätte Bahnhof Göhrde. with Jessica map

Checked in at Jugendbildungsstätte Bahnhof Göhrde. with Jessica

Thursday, April 18th, 2019

Inlining SVG background images in CSS with custom properties

Here’s a tiny lesson that I picked up from Trys that I’d like to share with you…

I was working on some upcoming changes to the Clearleft site recently. One particular component needed some SVG background images. I decided I’d inline the SVGs in the CSS to avoid extra network requests. It’s pretty straightforward:

.myComponent {
    background-image: url('data:image/svg+xml;utf8,<svg> ... </svg>');
}

You can basically paste your SVG in there, although you need to a little bit of URL encoding: I found that converting # to %23 to was enough for my needs.

But here’s the thing. My component had some variations. One of the variations had multiple background images. There was a second background image in addition to the first. There’s no way in CSS to add an additional background image without writing a whole background-image declaration:

.myComponent--variant {
    background-image: url('data:image/svg+xml;utf8,<svg> ... </svg>'), url('data:image/svg+xml;utf8,<svg> ... </svg>');
}

So now I’ve got the same SVG source inlined in two places. That negates any performance benefits I was getting from inlining in the first place.

That’s where Trys comes in. He shared a nifty technique he uses in this exact situation: put the SVG source into a custom property!

:root {
    --firstSVG: url('data:image/svg+xml;utf8,<svg> ... </svg>');
    --secondSVG: url('data:image/svg+xml;utf8,<svg> ... </svg>');
}

Then you can reference those in your background-image declarations:

.myComponent {
    background-image: var(--firstSVG);
}
.myComponent--variant {
    background-image: var(--firstSVG), var(--secondSVG);
}

Brilliant! Not only does this remove any duplication of the SVG source, it also makes your CSS nice and readable: no more big blobs of SVG source code in the middle of your style sheet.

You might be wondering what will happen in older browsers that don’t support CSS custom properties (that would be Internet Explorer 11). Those browsers won’t get any background image. Which is fine. It’s a background image. Therefore it’s decoration. If it were an important image, it wouldn’t be in the background.

Progressive enhancement, innit?

Hacking and writing at Homebrew Website Club Brighton.

Hacking and writing at Homebrew Website Club Brighton.

Wednesday, April 17th, 2019

Checked in at Jolly Brewer. Tunes! — with Jessica map

Checked in at Jolly Brewer. Tunes! — with Jessica

Sunday, April 14th, 2019

Pork!

Pork!

Saturday, April 13th, 2019

Checked in at The Parlour. Afternoon tea — with Jessica map

Checked in at The Parlour. Afternoon tea — with Jessica

Monday, April 8th, 2019

AddyOsmani.com - Native image lazy-loading for the web!

The loading attribute for images and iframes is coming to Chrome. The best part:

You can also use loading as a progressive enhancement. Browsers that support the attribute can get the new lazy-loading behavior with loading=lazy and those that don’t will still have images load.

Sunday, April 7th, 2019

Checked in at The Bugle Inn. Fiddles map

Checked in at The Bugle Inn. Fiddles

Saturday, April 6th, 2019

Taking the train from Brighton to London is the perfect opportunity to test the “lie-if” strategy I’ve been experimenting with on my site.

Taking the train from Brighton to London is the perfect opportunity to test the “lie-fi” strategy I’ve been experimenting with on my site.

Cool goal

One evening last month, during An Event Apart Seattle, a bunch of the speakers were gathered in the bar in the hotel lobby, shooting the breeze and having a nightcap before the next day’s activities. In a quasi-philosophical mode, the topic of goals came up. Not the sporting variety, but life and career goals.

As I everyone related (confessed?) their goals, I had to really think hard. I don’t think I have any goals. I find it hard enough to think past the next few months, much less form ideas about what I might want to be doing in a decade. But then I remembered that I did once have a goal.

Back in the ’90s, when I was living in Germany and first starting to make websites, there was a website I would check every day for inspiration: Project Cool’s Cool Site Of The Day. I resolved that my life’s goal was to one day have a website I made be the cool site of the day.

About a year later, to my great shock and surprise, I achieved my goal. An early iteration of Jessica’s site—complete with whizzy DHTML animations—was the featured site of the day on Project Cool. I was overjoyed!

I never bothered to come up with a new goal to supercede that one. Maybe I should’ve just retired there and then—I had peaked.

Megan Sapnar Ankerson wrote an article a few years back about How coolness defined the World Wide Web of the 1990s:

The early web was simply teeming with declarations of cool: Cool Sites of the Day, the Night, the Week, the Year; Cool Surf Spots; Cool Picks; Way Cool Websites; Project Cool Sightings. Coolness awards once besieged the web’s virtual landscape like an overgrown trophy collection.

It’s a terrific piece that ponders the changing nature of the web, and the changing nature of that word: cool.

Perhaps the word will continue to fall out of favour. Tim Berners-Lee may have demonstrated excellent foresight when he added this footnote to his classic document, Cool URIs don’t change—still available at its original URL, of course:

Historical note: At the end of the 20th century when this was written, “cool” was an epithet of approval particularly among young, indicating trendiness, quality, or appropriateness.

Friday, April 5th, 2019

Welcoming @jbirdui and @trysmudford to @Clearleft.

Welcoming @jbirdui and @trysmudford to @Clearleft.

Wednesday, April 3rd, 2019

Getting ready to open the show at @FrontendNE in Newcastle.

Getting ready to open the show at @FrontendNE in Newcastle.

Tuesday, April 2nd, 2019

Yet Another JavaScript Framework | CSS-Tricks

This is such a well-written piece! Jay Hoffman—author of the excellent History Of The Web newsletter—talks us through the JavaScript library battles of the late 2000’s …and the consequences that arose just last year.

The closing line is perfect.

Monday, April 1st, 2019

This “feature”—which is enabled in the latest version of iOS by default—is a very bad idea, in my opinion.

This “feature”—which is enabled in the latest version of iOS by default—is a very bad idea, in my opinion.

Saturday, March 30th, 2019

Went for a walk in the countryside and made a friend.

Went for a walk in the countryside and made a friend.

Checked in at Lewes. Lewes picnic — with Jessica map

Checked in at Lewes. Lewes picnic — with Jessica

Saturday, March 23rd, 2019

Catching up with Tiff.

Catching up with Tiff.

Celebrating the life of @CindyLi. ♥️

Celebrating the life of @CindyLi. ♥️