@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.

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

My wife, last week: “Why is your phone open to a note that just says, ‘Endless Shrimp Jesus?’“

Well!

https://ericportis.com/posts/2024/endless-shrimp-jesus/

eeeps,
@eeeps@front-end.social avatar

@mia riiiiiight??

zachleat, to random
@zachleat@zachleat.com avatar

is your tech stack a metaphorical cybertruck trunk slowly closing on your fingers? in this ted talk I will…

eeeps,
@eeeps@front-end.social avatar

@zachleat …explain how to host your stack on an actual cybertruck, whose trunk is slowly closing on your fingers! That bad boy is just running Ubuntu “under the hood”, as it were, haha, ahem, where are you going?

nhoizey, to random French
@nhoizey@mamot.fr avatar

“New field insights for debugging INP” by Jeremy Wagner

🔗 https://www.youtube.com/watch?v=xfjumh8ySRY

> Interaction to Next Paint (INP) is a Core Web Vital that measures how responsive a page is to interactions. Due to INP's scope, it can be difficult to identify why some interactions are slow. Learn how to use new Chrome APIs that provide detailed information on the causes behind slow interactions, and how to collect insights from your website's…

#INP #WebPerf #CoreWebVitals

⚓️ https://nicolas-hoizey.com/links/2024/05/20/new-field-insights-for-debugging-inp/

eeeps,
@eeeps@front-end.social avatar

@nhoizey Looks like he was here, but is not active: @malchata

He recs email (initiated via a web form). If you find him elsewhere let me know (:

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

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