Tags: 9

3423

sparkline

Sunday, March 24th, 2019

Picture 1 Picture 2

District of Columbia.

Saturday, March 23rd, 2019

Celebrating the life of @CindyLi. ♥️

Celebrating the life of @CindyLi. ♥️

Checked in at Glen Echo Bumper Car Pavilion. with Jessica, Lauren, Tantek, Ben, Paul, Jackson

Friday, March 22nd, 2019

Going to Bethesda. brb

Bumped into @csswizardry in Heathrow. Statistically speaking, this was only a matter of time.

Thursday, March 21st, 2019

Hacking away at Homebrew Website Club Brighton! https://indieweb.org/Homebrew_Website_Club#Brighton

Hacking away at Homebrew Website Club Brighton!

https://indieweb.org/HomebrewWebsiteClub#Brighton

Reminder: it’s Homebrew Website Club Brighton this evening (and every Thursday) in the @Clearleft studio from 6pm:

https://indieweb.org/HomebrewWebsiteClub#Brighton

Everyone welcome!

Wednesday, March 20th, 2019

Like me, Tantek posts from his own website to Twitter.

So you can see everything @t has posted by looking at http://tantek.com/

What do you see there that could possibly warrant an account suspension?

WT actual F, @TwitterSupport?

CSS custom properties in generated content

Cassie posted a neat tiny lesson that she’s written a reduced test case for.

Here’s the situation…

CSS custom properties are fantastic. You can drop them in just about anywhere that a property takes a value.

Here’s an example of defining a custom property for a length:

:root {
    --my-value: 1em;
}

Then I can use that anywhere I’d normally give something a length:

.my-element {
    margin-bottom: var(--my-value);
}

I went a bit overboard with custom properties on the new Patterns Day site. I used them for colour values, font stacks, and spacing. Design tokens, I guess. They really come into their own when you combine them with media queries: you can update the values of the custom properties based on screen size …without having to redefine where those properties are applied. Also, they can be updated via JavaScript so they make for a great common language between CSS and JavaScript: you can define where they’re used in your CSS and then update their values in JavaScript, perhaps in response to user interaction.

But there are a few places where you can’t use custom properties. You can’t, for example, use them as part of a media query. This won’t work:

@media all and (min-width: var(--my-value)) {
    ...
}

You also can’t use them in generated content if the value is a number. This won’t work:

:root {
    --number-value: 15;
}
.my-element::before {
    content: var(--number-value);
}

Fair enough. Generated content in CSS is kind of a strange beast. Eric delivered an entire hour-long talk at An Event Apart in Seattle on generated content.

But Cassie found a workaround if the value you want to put into that content property is numeric. The CSS counter value is a kind of generated content—the numbers that appear in front of ordered list items. And you can control the value of those numbers from CSS.

CSS counters work kind of like variables. You name them and assign values to them using the counter-reset property:

.my-element {
    counter-reset: mycounter 15;
}

You can then reference the value of mycounter in a content property using the counter value:

.my-element {
    content: counter(mycounter);
}

Cassie realised that even though you can’t pass in a custom property directly to generated content, you can pass in a custom property to the counter-reset property. So you can do this:

:root {
    --number-value: 15;
}
.my-element {
    counter-reset: mycounter var(--number-value);
    content: counter(mycounter);
}

In a roundabout way, this allows you to use a custom property for generated content!

I realise that the use cases are pretty narrow, but I can’t help but be impressed with the thinking behind this. Personally, I would’ve just read that generated content doesn’t accept custom properties and moved on. I would’ve given up quickly. But Cassie took a step back and found a creative pass-the-parcel solution to the problem.

I feel like this is a hack in the best sense of the word: a creatively improvised solution to a problem or limitation.

I was trying to display the numeric value stored in a CSS variable inside generated content… Turns out you can’t do that. But you can do this… codepen.io/cassie-codes/p… (not saying you should, but you could)

Checked in at Bone Daddies. 🍜 map

Checked in at Bone Daddies. 🍜

Tuesday, March 19th, 2019

Checked in at Curry Leaf Cafe map

Checked in at Curry Leaf Cafe

Monday, March 18th, 2019

Brightonians with websites: Homebrew Website Club Brighton is now happening every Thursday evening in the @Clearleft studio:

https://indieweb.org/HomebrewWebsiteClub#Brighton

Show up from 6pm and we’ll mess about with our websites.

Sunday, March 17th, 2019

Checked in at Jolly Brewer. St. Patrick’s Day session — with Jessica map

Checked in at Jolly Brewer. St. Patrick’s Day session — with Jessica

Wearing green and playing tunes.

Lá féile Pádraig sona daoibh go léir!

I’ll be at The Bugle from 4pm: https://thesession.org/sessions/6208

And The Jolly Brewer from 7pm: https://thesession.org/events/7479

Saturday, March 16th, 2019

@CraigMod Your choice of tech stack made somebody very, very happy: https://twitter.com/zachleat/status/1106887526789320704?s=20

Thursday, March 14th, 2019

I was in the neighbourhood so I just had to come by and say hello…

I was in the neighbourhood so I just had to come by and say hello…

Checked in at Natural History Museum. 🐋 map

Checked in at Natural History Museum. 🐋

Checked in at Natural History Museum. Clearlefties map

Checked in at Natural History Museum. Clearlefties

Wednesday, March 13th, 2019

What a day that was

I woke up in Geneva. The celebrations to mark the 30th anniversary of the World Wide Web were set to begin early in the morning.

It must be said, March 12th 1989 is kind of an arbitrary date. Maybe the date that the first web page went online should mark the birth of the web (though the exact date might be hard to pin down). Or maybe it should be August 6th, 1991—the date that Tim Berners-Lee announced the web to the world (well, to the alt.hypertext mailing list at least). Or you could argue that it should be April 30th, 1993, the date when the technology of the web was officially put into the public domain.

In the end, March 12, 1989 is as good a date as any to mark the birth of the web. The date that Tim Berners-Lee shared his proposal. That’s when the work began.

Exactly thirty years later, myself, Martin, and Remy are registered and ready to attend the anniversay event in the very same room where the existence of the Higgs boson was announced. There’s coffee, and there are croissants, but despite the presence of Lou Montulli, there are no cookies.

Happy birthday, World Wide Web! Love, One third of the https://worldwideweb.cern.ch team at CERN.

The doors to the auditorium open and we find some seats together. The morning’s celebrations includes great panel discussions, and an interview with Tim Berners-Lee himself. In the middle of it all, they show a short film about our hack week recreating the very first web browser.

It was surreal. There we were, at CERN, in the same room as the people who made the web happen, and everyone’s watching a video of us talking about our fun project. It was very weird and very cool.

Afterwards, there was cake. And a NeXT machine—the same one we had in the room during our hack week. I feel a real attachment to that computer.

A NeXT machine from 1989 running the WorldWideWeb browser and my laptop in 2019 running https://worldwideweb.cern.ch

We chatted with lots of lovely people. I had the great pleasure of meeting Peggie Rimmer. It was her late husband, Mike Sendall, who gave Tim Berners-Lee the time (and budget) to pursue his networked hypertext project. Peggie found Mike’s copy of Tim’s proposal in a cupboard years later. This was the copy that Mike had annotated with his now-famous verdict, “vague but exciting”. Angela has those words tattooed on her arm—Peggie got a kick out of that.

Eventually, Remy and I had to say our goodbyes. We had to get to the airport to catch our flight back to London. Taxi, airport, plane, tube; we arrived at the Science Museum in time for the evening celebrations. We couldn’t have been far behind Tim Berners-Lee. He was making a 30 hour journey from Geneva to London to Lagos. We figured seeing him at two out of those three locations was plenty.

This guy again! I think I’m being followed.

By the end of the day we were knackered but happy. The day wasn’t all sunshine and roses. There was a lot of discussion about the negative sides of the web, and what could be improved. A lot of that was from Sir Tim itself. But mostly it was a time to think about just how transformative the web has been in our lives. And a time to think about the next thirty years …and the web we want.

Tuesday, March 12th, 2019

Listening to @TimBerners_Lee talk about the past, present, and the future …I just wish Mike Sendall could be here to see what he enabled. #Web30