Johannes Odland

Front-end engineer at NRK.
Been centering elements since 1996.

Pronouns: He/Him. πŸ³οΈβ€πŸŒˆ

Johannes Odland boosted:
Kilian ValkhofKilian
2025-05-30

@lolaodelola how much close could a closewatcher close if a closewatcher could close WAT

Johannes Odland boosted:
2025-05-29

πŸ‘€ Coming to Chrome DevTools in Chrome 138: CSS Value Tracing

When you hover a --custom-prop in a `var()`, DevTools currently shows you the computed value. From Chrome 138 onwards, you can hover the `var` part to see how CSS actually got to that value.

2025-05-29
Johannes Odland boosted:
2025-05-28

Hey friends, did you know you can make a modal <dialog> element dismissible by clicking outside (aka light dismiss) by adding `closedby=any` to it. That's it. That's all there is to it.

<dialog closedby=any>

developer.mozilla.org/en-US/do

Chrome 134+, Firefox 140+, coming soon to Safari.

Johannes Odland boosted:
Stephanie Eckles5t3ph@front-end.social
2025-05-27

I'm not sure my ideas are technically feasible, but good golly would I love to see movement of some kind on the issue of "shrink wrapping" text that happens to wrap!

github.com/w3c/csswg-drafts/is

(Tagging @mia and @kizu who have somewhat recently considered this)

2025-05-24

Building slides in html and css is so much more rewarding than good old powerpoint 🀩

Johannes Odland boosted:
66642 [lucy]xyno@catgirl.cloud
2025-05-24

github actions have github consequences

Johannes Odland boosted:
World Wide Web Consortiumw3c@w3c.social
2025-05-21

The CSS Working Group has published a First Public Working Draft of CSS Functions and Mixins Module. This module defines the ability for authors to define custom functions, acting similar to parametrized custom properties. They can use the full power of CSS’s values and conditional rules. It also defines an early form of a similar idea for CSS rule mixins, allowing parametrized substitution of entire blocks of properties into other rules.
w3.org/news/2025/first-public-

Johannes Odland boosted:
Matthias Ottmatthiasott
2025-05-16

Last week, I had the immense honor of speaking at one of my favorite events, @btconf. (🀯)

My talk β€œPainting With the Web” is now available on YouTube. I hope you like it! πŸ€—πŸ’š

youtube.com/watch?v=1Pq7VqNrtk4

2025-05-16

@mia That’s the correct way in Norwegian typography – and probably many other languages – so you can always say you’ve adopted it from there πŸ˜€

2025-05-15

The CSSWG has published a first public working draft of CSS Functions and Mixins today πŸŽ‰

> This module defines the ability for authors to define custom functions, acting similar to parametrized custom properties. They can use the full power of CSS’s values and conditional rules. It also defines an early form of a similar idea for CSS rule mixins, allowing parametrized substitution of entire blocks of properties into other rules.

Thank you so much @mia and @tabatkins πŸ™

w3.org/TR/2025/WD-css-mixins-1

2025-05-12

@keithamus If there's no other takers, I'd be happy to look into it when I have some more time after CSS Day in June.

2025-05-11

How nice wouldn't it be to have `sibling-index()` with a selector argument?

I need this yesterday πŸ˜…

github.com/w3c/csswg-drafts/is

Johannes Odland boosted:
Sarah L. Fossheimfossheim@front-end.social
2025-05-10
Johannes Odland boosted:
2025-05-09

Lots of folks fell for the "DOM is slow" marketing of certain frameworks, but DOM isn't slow. *Uncontrolled style read-back* is. But what if that wasn't a thing?

Looking for feedback on a new proposal to control layout thrashing here:

github.com/MicrosoftEdge/MSEdg

Johannes Odland boosted:
Sara Joy :happy_pepper:sarajw@front-end.social
2025-05-06

This year @btconf got me thinking about the things I touch every day, about my own curiosity, remembered AI is both greedy and extremely useful, saw mad things can be done without AI, that I should just get on and make stuff, saw the web as an art medium, and the artistry in lettering, saw creativity in development, and inclusiveness, and calm, and empathy.

I loved it all - never change, #BTConf.

One of the things I touch daily is my phone, but it is also a great life and curiosity enabler 😊

A pencil drawing of a cartoony phone, with the words "what do I do on my phone?"

Around it are examples of the many things I do on my phone:

I talk to my friends.
Sometimes, I even make new friends.
I check weather.
I set alarms to stop forgetting.
I add people to my CSS webring.
I read books!
I track my health.
I listen to music.
I do my banking.
I identify stars or planets.
I watch videos.
I time my watch.
I learn new things.
I doomscroll.
I push quick fixes to my websites.
I book taxis.
I post photos for family.
I plan journeys.
I read the news.
I navigate.
I play games.
I calculate.
I do the food shop.
I contact medical practices.
I take photos.
Sometimes, I make calls!!!
I read/write emails.
I write lists:
- packing
- to do's
- shopping
I note ideas.
I (have to) use it for life admin (why is everything an app nowadays?).
I browse the web.
I draw.
I translate.
I collect loyalty points.
I buy stuff.
I entertain my kids.
I buy/sell/give away stuff locally.
I identify plants.
Johannes Odland boosted:
2025-05-05

New Blog Post: Houdini Re-ReVisted

In which I discuss a recent presentation by @bramus at BlinkOn...

bkardell.com/blog/HoudiniReRe.

Johannes Odland boosted:
2025-05-05

πŸ“ Polyfilling CSS with CSS Parser Extensions

Polyfilling CSS features is extremely hard, mainly because the CSS Parser discards what it does not understand. What if, instead of having authors write their own CSS parser and cascade, they could teach the parser new tricks?

πŸ”— brm.us/css-parser-extensions

2025-05-04

@tunetheweb @anthony

Thanks for the explanation πŸ™πŸ˜€

It feels a bit cumbersome to convert CSS animations and starting-style transitions in order to prerender the page. I guess I'll stick with prefetch πŸ˜….

2025-05-01

A well thought out post from @kizu on the current discussion of fit-to-width πŸ™Œ

I agree that it would be a good idea to focus on text-grow and have a soft 200% max-font-size limit.

front-end.social/@kizu/1144336

Client Info

Server: https://mastodon.social
Version: 2025.04
Repository: https://github.com/cyevgeniy/lmst