Tonight I’m going to sleep like a front-end engineer: before coming to bed, I built it from ikea_modules 🤓

✨New article!✨ Jumping HTML tags. Another reason to validate your markup. Sometimes, browsers take our mistakes personally, and tags start jumping around 😳

https://pepelsbey.dev/articles/jumping-html-tags/

✨A quick note!✨ If you copy one of my article titles, you’ll probably get “ARTICLE TITLE” in uppercase. Why would I name my article like that? It’s not me, it’s browsers and specs again. The problem and a questionable trick.

https://pepelsbey.dev/articles/uppercase-copy-paste/

Dating apps don’t often bring treasures like this.

Breakup be like 😐

Benny Chrome won’t take “no” for an answer 🤡

🪄 Let me share some handy CLI magic. When I need a QR code for my slides, I type:

qr filename URL

…in the Terminal and get a lightweight filename.svg in the current folder, linking to the URL.

⚙️ Behind the scene, there’s an alias function running two npm packages:

function qr() {
  npx qrcode-svg --join --no-prettify --viewbox --padding 0 --ecl L --force --output $1.svg $2
  npx svgo --quiet --precision 0 $1.svg
}

In my case, it’s in the ~/.oh-my-zsh/custom/qr.zsh file.

Check your shell docs if you haven’t used aliases before. See qrcode-svg and svgo packages if you’d like to customize your QR codes.

Revealed the shocking truth about HTML at GDG Berlin. It was my first offline talk in Berlin! Thanks to Eugenia Zigisova for the invitation and Louis Tsai for the photo!

When I bring PRs or issues to open-source projects, most of the time, maintainers don’t talk to me while they act on them. They merge PRs, and fix issues, but they almost never say “good catch, thanks”. I mean, they don’t owe me anything, but it feels so off. Don’t be like that!

And here’s the video!

https://youtu.be/RPCkuz-TteA

Travel plans for May/June ✈️

Belgrade 12–15/5, meeting with friends
Amsterdam 7–10/6, CSS Day
Amsterdam 20–22/6, Google I/O Connect

Berlin concert plans for the next few months 🪗

Michelle Gurevich 11/5, Festsaal Kreuzberg
Esben and the Witch 22/5, Cassiopeia
Petlia Pristrastiya 30/5, Maschinenhaus
Screaming Females 6/6, Kantine am Berghain
Yeah Yeah Yeahs 29/8, Columbiahalle

I’m kinda mad at people who started a Mastodon account for crossposting from Twitter but then just gave up or forgot about it. And, of course, I unfollowed them on Twitter and followed on Mastodon to spend more time in a much nicer place. Now I’ve lost a bunch of people, and they’re probably already on Bluesky or whatever 🙄

I don’t think anyone expected that, but I planned a live stream on my Russian-speaking channel on May 21 at 12:00, Berlin time 🥸 Let’s chat! Front-end, keyboards, how’s life, and everything else. See if I remember how to do it 😅

Everything is ready for the live stream tomorrow!

Yes, But (web platform edition) for my new Baseline talk. Inspired by Yes, But

You can scope styles inside of the parent with a <style> and a @scope rule 😳

<div>
  <style>
    @​scope {
      p { color: red }
    }
  </style>
  <p>this is red</p>
</div>
<p>not red</p>

See the CSS Cascading and Inheritance L6 draft

It’s not just a fantasy, it already works in Chrome Canary. Thanks to Roma Komarov for the tip!

But at the same time, the <style> is not allowed inside of the <body> by the HTML spec:

4.2.6 The style element
Categories: Metadata content

See issues:
— Style tag should be allowed in body
— Reconsider making <style> in body valid

I think WHATWG and CSSWG need to talk 😅