@eeeps@front-end.social avatar

eeeps

@eeeps@front-end.social

Rootinโ€™ & tootinโ€™

This profile is from a federated server and may be incomplete. Browse more on the original instance.

alexcox, to random
@alexcox@mastodon.social avatar

I wish we lived in a universe where Apple apologized via a Notes.app screenshot.

eeeps,
@eeeps@front-end.social avatar

@alexcox

zachleat, (edited ) to random
@zachleat@zachleat.com avatar

Planning on doing a full Organizer retrospective blog post, but in the interest of transparency hereโ€™s a peek at the conference budget (funded primarily by our Open Collective, prices in USD):

Expenses: $7574.20
Revenue: $4653.79 (Free event, but via sponsors and merch)
Profit: -$2920.41

Edit: Fixed a spreadsheet error ๐Ÿ˜ฌ

eeeps,
@eeeps@front-end.social avatar

@zachleat @cloudcannon so that's... 16 years of my $11/month OC contribution, kinda puts things in perspective

lene, to random
@lene@front-end.social avatar

A possum contribution from my daughter

eeeps,
@eeeps@front-end.social avatar

@lene winner!

chriscoyier, to random
@chriscoyier@front-end.social avatar

Maybe we can get an interesting thread of examples here.

Less than 10 second videos of @container queries in action on websites.

Go!

eeeps,
@eeeps@front-end.social avatar

@chriscoyier Picking a site from the list of top sites that are using 'em (https://chromestatus.com/metrics/css/timeline/popularity/699), here's hotels.com adjusting the width of items in a carousel, in order to ensure there's always an integer number of whole items plus a hint of a next showing. https://o.img.rodeo/video/upload/q_auto/v1715097722/hotels-cq.mp4

zachleat, to random
@zachleat@zachleat.com avatar

I too would like to announce that I am not on the bluesky board of directors

eeeps,
@eeeps@front-end.social avatar

@bkardell @zachleat it me

eeeps, to random
@eeeps@front-end.social avatar

Converting an sRGB color to P3 does not make it โ€œpopโ€. It doesn't change it at all.

If you want to make it pop, do so by boosting the chroma in a space like OKLCH. P3 does give you more room to boost.

https://observablehq.com/d/c09ce2e69591f709

eeeps, to random
@eeeps@front-end.social avatar

Am I missing something or is there no RSS feed for https://web.dev ?

eeeps,
@eeeps@front-end.social avatar

@simevidas @db How did you find these??

eeeps, to random
@eeeps@front-end.social avatar

I haven't dug in enough to have opinions but I am fascinated that this (big! important!) web platform argument is happening via fantastic community-facing blog posts, with a Big Brand on each side.

I guess when they agree they just ship without doing outreach to invite the larger developer community into the discussion. Which, I don't know, probably โ€“ usually โ€“ that's for the best. Usually.

chriscoyier, to random
@chriscoyier@front-end.social avatar

A web designer has talent in visual design and UX, and knows the basics of HTML & CSS. If they were going to learn one thing about JavaScript to help what they do, what would it be?

eeeps,
@eeeps@front-end.social avatar

@chriscoyier
ideal world: querySelector/All
real world: npm

zachleat, to random
@zachleat@zachleat.com avatar

The number of times I have audibly gasped this morning learning about inefficiencies in Next.jsโ€™ <Image> component has made me realize that Iโ€™m a little out of shape.

eeeps,
@eeeps@front-end.social avatar

@zachleat it is very bad! I dislike it! Very much!!!

eeeps,
@eeeps@front-end.social avatar

@zachleat Here's an (official?) demo I was looking at a few weeks ago: https://nextjsconf-pics.vercel.app

The hardcoded list of srcset breakpoints kills me. You're taking an image, asking Cloudinary to resize it to w_720, and then downsizing it to 256w, 384w, and 640w (fine) but then serving it, as-is (at least they don't upscale!), under different URLs, as the 750w, 828w, 1080w, 1200w, 1920w, 2048w, and 3840w versions. Lots of useless load events, cache entries/misses, & WILD .naturalWidths result.

eeeps,
@eeeps@front-end.social avatar

@zachleat https://nextjs.org/docs/pages/api-reference/components/image#devicesizes lets you override that list, but wow, bad name! Misleading documentation! Bad framing!

I'm glad they give you a per-component way to specify sizes (via imageSizes), and they try to explain it in the docs, but I wish they did more to help here (especially in lazy contexts), because this is the hardest problem in respimg.

I'm not sure why they are always setting decoding=async but whatever can't hurt lol.

eeeps,
@eeeps@front-end.social avatar

@zachleat Right. And! Speak of the devil! This just came across my desk.

eeeps,
@eeeps@front-end.social avatar

@zachleat ๐Ÿ˜ฌ

eeeps,
@eeeps@front-end.social avatar

@nhoizey @zachleat FULL DISCLOSURE FOLLOW UP: this ended up being my fault, not Next.JS's

(rouge regex replace during analysis)

(I still don't like it, but this particular level of awful: all me ๐Ÿ˜ฌ)

collinsworth, to random
@collinsworth@hachyderm.io avatar

I think we're focused on the wrong thing when we look at what tech works for a company like Amazon or Facebook or Netflix.

We should be looking at what tech works when you don't have a small army of staff engineers optimizing it. I want to know what I can scale without paying someone a half million dollar salary to do it.

There should be more case studies on things that don't have a billion-dollar company propping them up, humming along quietly on a cheap-ass VPS somewhere.

eeeps,
@eeeps@front-end.social avatar

@zachleat @collinsworth I feel like I'm gonna spend my whole career wondering if, instead of making supply more complex/expensive, we could somehow grow demand for cheap simple things

eeeps, to random
@eeeps@front-end.social avatar

h/t @Meyerweb

A TikTok reaction video that has had some text overlayed. A person (labelled "me watching React devs") watches someone else's hand put a series of shaped blocks into shaped holes. The holes and shapes are all basic and recognizable: square, triangle, circle, etc. The holes are labelled after HTML elements: "div", "button", "li", "table", "input" and "a". The hand takes a square block, which is labelled "generic block content"; The person excitedly says "square hole" (which is labelled "div") and is excited when that's where it goes. The hand then picks up a longer square block (labelled "element group"); the person also gets this one correct (also goes in the div hole), and is excited. The hand then picks up "tabular data"; the person wants it to go in the "table" hole, but no, the hand says it goes in the "div" hole as well. Person gets increasingly upset as blocks labelled "list item", "perform an action", "user input", and ultimately, "a hyperlink" all go in the "div" hole, and not the more appropriately shaped holes/elements that they are correctly calling out, each time, at the end โ€“ when "a hyperlink" goes into the "div" hole instead of into the "a" hole โ€“ almost though tears.

eeeps, to random
@eeeps@front-end.social avatar

> Added support for View Transitions.

Hell yeah. https://webkit.org/blog/15260/release-notes-for-safari-technology-preview-192/

eeeps, to random
@eeeps@front-end.social avatar

โ€œCSS is so good these days!โ€

We owe lot of that goodness to work proposed, pushed, and/or led by @mia. Someone decided to stop funding her work. Letโ€™s keep a good thing going:

https://front-end.social/@mia/112208118572767469

argyleink, to random
@argyleink@front-end.social avatar

apparently progressive enhancement is scary?

so much fear around the concept when talking with folks.

eeeps,
@eeeps@front-end.social avatar

@sarajw @belldotbz @davatron5000 @argyleink this is called progressive chastisement

eeeps, to random
@eeeps@front-end.social avatar

Come for the fun, interactive examples, stay for the extensive set of thoughtful, detailed use cases. โ€œAn Interactive Guide to CSS Container Queriesโ€ by @shadeed9

https://ishadeed.com/article/css-container-query-guide

simevidas, to random
@simevidas@mastodon.social avatar

I need help with CSS debugging:

Why is the image too wide, causing a horizontal scrollbar? This looks like a 100vw issue, but I donโ€™t see that value anywhere.

https://www.jamiesitalian.rs/en/ji-serbia/

video/mp4

eeeps,
@eeeps@front-end.social avatar

@simevidas @meduz @db is the width of the initial containing block known before layout? (The presence or absence of scrollbars canโ€™t be, right?)

eeeps,
@eeeps@front-end.social avatar

@simevidas @meduz @db Right, sizes is there to give a value before layout that's a hint of the after-layout width. If it changes after layout, you could get double-loads, which defeat the whole point.

Is the concern what the platform can do for users when authors make the mistake of omitting CSS, like this? Or is there an unmet use case around "HTML-only" responsive images, that you think is important?

eeeps,
@eeeps@front-end.social avatar

@simevidas @meduz @db I'm not sure if this is fixable soon, in a web-compatible way. Some images (like the one you found) are depending on the intrinsic size, and folks might be surprised at some new whitespace / consider their layouts "broken".

I'm doubting that the fix you mentioned will fix this, because it depends on other CSS, and srcset selection can't depend on any CSS. I guess this will end up like 1em meaning different things in different contexts?

  • All
  • Subscribed
  • Moderated
  • Favorites
  • โ€ข
  • megavids
  • kavyap
  • DreamBathrooms
  • Durango
  • magazineikmin
  • InstantRegret
  • ngwrru68w68
  • Youngstown
  • everett
  • slotface
  • tacticalgear
  • cisconetworking
  • khanakhh
  • rosin
  • anitta
  • thenastyranch
  • vwfavf
  • osvaldo12
  • mdbf
  • modclub
  • GTA5RPClips
  • Leos
  • normalnudes
  • cubers
  • ethstaker
  • tester
  • provamag3
  • JUstTest
  • All magazines
    •