Here are the slides of my talk at today's @WebMeetupCgn@twitter.com on what I learned on imagery on the web: schepp.github.io/imagery-on-th

The intrinsicsize attribute renders object-fit useless. Maybe object-fit should be made to always override it in the future, at least for when width & height are defined. /cc @ojanvafai@twitter.com

And this is very noticable! My advice would therefore be: Don't try to speed up critical path rendering with Service Workers. It's ace for all the rest but for the critical path you should rely on a well configured Cache-Control headers (and maybe localstorage, now I said it...)

BTW, I also found the Service Worker to take those 60 - 80ms to return cached fonts, probably because of the async nature of the Cache API.

I did this back in 2017 when CSS Font Rendering Controls were not yet widely supported (e.g. display: swap). Now kicking JavaScript out and going with display: swap all alone <3

Turns out, it's because I rely too much on JavaScript using the CSS Font Loading API. My inlined JavaScript takes 382ms on a 4Ghz Core i7 to spin up, then the asychronous "ready"-promise takes another 60 - 80ms to finally set the CSS class.

In my current project I tried to optimize the FOUT and reflows by switching the font setting a CSS class on the root element once all fonts are loaded. Sadly there is always font "jumping" at the start, even with the fonts being immutably cached.

RT @WebMeetupCgn@twitter.com

Tomorrow we'll have our first meetup of 2019. Hurry up it's only 8 spots left. Topics, schedule and more info available here: meetup.com/Web-Meetup-Cologne/. This time we are sponsored by @denkwerk@twitter.com. Our speakers are: @tom_says_things@twitter.com and @derSchepp@twitter.com. Join, it's gonna be interesting!

🐦🔗: twitter.com/WebMeetupCgn/statu

Add to your list of users not having JavaScript available when visiting your site all people with a Killer NIC Wireless card in their laptop, paired with a Fritzbox router: dell.com/community/Laptops-Gen (like me)

RT @heydonworks@twitter.com

✏️ The Flexbox Holy Albatross

I found a way to make Flexbox switch directly between multiple and single column layouts. No media queries; no JS 🎉🎉🎉

heydonworks.com/article/the-fl

🐦🔗: twitter.com/heydonworks/status

RT @sir_pepe@twitter.com

Hui! 341 Slides mit ca. 8 MB in 117 Requests, davon 500k JS (voller komplexem Zeug wie Web Components) lädt Firefox von Localhost 7x (!!!) so schnell wie Chrome. Ich dachte mein Zeug wäre lahm und müsste optimiert werden, dabei isses der Monopolistenbrowser!

🐦🔗: twitter.com/sir_pepe/status/10

RT @tobiasbu@twitter.com

@derSchepp@twitter.com ...and optioaly report it to your server
img::after {
background-image:url("/report-error?message=broken-image-found ");
...
}

🐦🔗: twitter.com/tobiasbu/status/10

Style your broken images, 2019 edition:

img {
display: grid;
font-size: 0;
}
img::after {
content: '\1F517 Broken Image showing ' attr(alt);
position: relative;
display: block;
padding: 1em;
background: ;
border: 1px dotted;
font-size: 2rem;
text-align: center;
}

Ah, I think it's not CSS Typed OM what I was looking for but CSS Properties and Values.

I remember having seen CSS Typed OM being used within CSS itself when declaring a new custom property. Anyone remembering and having pointers for me?

RT @regocas@twitter.com

I've been working on css-contain lately, this is a blog post introducing the spec and the status of things around it: blogs.igalia.com/mrego/2019/01 Thanks to @TechAtBloomberg@twitter.com for supporting @igalia@twitter.com's contributions on this field.

🐦🔗: twitter.com/regocas/status/108

Also, @tom_says_things@twitter.com, one of the people behind @trivago@twitter.com's PWA, will be talking about the potential, PWAs can unlock. Looking forward!

@WebMeetupCgn@twitter.com @denkwerk@twitter.com Also pinging @Jessman5@twitter.com :)

Show more
Mastodon

Follow friends and discover new ones. Publish anything you want: links, pictures, text, video. This server is run by the main developers of the Mastodon project. Everyone is welcome as long as you follow our code of conduct!