Alex Russell

It is *intense* just how badly the JS/React brainworms have infected the frontend community.

Every single NYT story page has *both* a 437KiB (1.5MiB unzipped) *and* a 474KiB (1.7MiB) JS file, to display ~50K of text. It isn't ad bloat. It isn't tracking. It's this sort of bunk:

Jul 8, 2023 at 3:34amWeb
Show threadAlex RussellJul 8, 2023
An image map would be faster.
Show threadThomasAPowellJul 8, 2023
@slightlyoff careful the old powers of imagemaps should not be trifled with. The web ancients speak of these horrors and other unspeakable things like SPAs done with framesets or unnatural tags like <layer>. We must tread lightly over the web tech burial grounds. 🤣
Show threadbluestarultorJul 9, 2023

@thomasapowell @slightlyoff Honestly, go nuts. Nobody's cared enough to find mine, so I don't even feel bad about the spoiler, but the whole thing isn't that slow.

My site is almost 100% HTML and CSS, with only a JS redirect to mobile. (If you're on mobile, then I didn't duplicate the whole setup because it would be far harder to use.)

Superhero League of Wausau

Show threadmokobienJul 8, 2023
@slightlyoff
Make article pages in InDesign and serve as big SVGs 🧠
Show threadNot a Spring OnionJul 9, 2023
@mokobien @slightlyoff
That would likely be way smaller.
Show threadLudovic Archivist LagouardetteJul 8, 2023
@slightlyoff My fucking god making their website with Unity3D would lead to performance improvement
Show threadWhitney McNamaraJul 8, 2023
@slightlyoff Do not disturb that which lies buried deep in unhallowed ground.
Show threadMarcin WicharyJul 8, 2023
@slightlyoff Aaaarghhhhhh
Show threadAlex RussellJul 8, 2023
@mwichary The news isn't for poor people, Marcin.
Show threadJoe GregorioJul 8, 2023

@slightlyoff

I never understood wrapping CSS in JS! What could that possibly improve that wouldn't be immediately destroyed by the performance hit?

Show threadHazel WeaklyJul 8, 2023

@jcgregorio @slightlyoff the ergonomics of css in JS are excellent when done right. Like, *really* excellent. Much in the same way that JSX has really good ergonomics when done right.

That said. CSS in JS never implied a runtime penalty. That was an implementation choice (one I disagree with). Same with JSX compiling to runtime functions + a virtual dom rather than html templates + a bit of runtime.

But if you've already made 78 choices to compromise perf for UX what's one more? /jk

Show threadMiguel MáiquezJul 8, 2023
@slightlyoff All the JS That's Fit to Code.
Show threadTinyrabbit ✅Jul 8, 2023
@slightlyoff ”but the browser can cache the files so it doesn’t fetch them every time.” — the argument I get from frontend devs when pointing out this imbalance
Show threadŠime VidasJul 8, 2023
@tinyrabbit @slightlyoff That doesn’t solve the re-execution problem.
Show threadUrsidinoj/The BjornsdottirsJul 8, 2023
@tinyrabbit @slightlyoff it can do that anyway!
Show threadMoved to @[email protected]Jul 8, 2023
@slightlyoff what the hell ​
Show threadLorewegian 📚Jul 8, 2023
@slightlyoff feels like software overall has just been getting progressively worse in the past 30 years
Show threadrealcaseyrollins ✝️Jul 8, 2023
@lore @slightlyoff Over time I’ve gone from using #FOSS out of principle to using #FOSS because it’s better.
TECI Social

Show threadChris WagnerJul 9, 2023
@lore @slightlyoff cat and mouse between hardware and software engineers. I can’t imagine how frustrating it is for hardware engineers to watch us software engineers pissing away their advances. But at the same time… job security?
Show threadLorewegian 📚Jul 9, 2023
@cwagdev @slightlyoff i write some embedded code and the most frustrating part of the experience is never the hardware itself. it's always the tooling and APIs that my fellow software developers made for it that i hate. i did it for a job for 15 years but had enough of it.
Show threadsapphyra Jul 8, 2023
@slightlyoff I feel like businesses/companies/etc. are just allergic to clean, beautiful HTML at this point.
Show threadnatriumchlorideJul 8, 2023
@slightlyoff what fhe hell am i looking at...
Show threadMichael 🏴‍☠️ FleetJul 8, 2023
@slightlyoff
PREACH.
Show threadcatraxx Jul 8, 2023
@slightlyoff Oh don't get me started. I had to work with react yesterday and i still feel like throwing my screen out the window.
Show threadJane AdamsJul 8, 2023

@catraxx @slightlyoff If you have to use react, I found this flowchart by Dan Abramov to be helpful - "React Makes You Sad": https://cdn.jsdelivr.net/gh/gaearon/react-makes-you-sad@1377b6a6cdc644adfea6bf238f06c75d33ed6f1e/fatigue.svg

But if you don't have to use it, vanilla JS and CSS value functions & flexbox can do some pretty incredible things these days.

Show threadjellJul 9, 2023

@janeadams Since I'm not in the industry and basically just an entrenched-enthusiast, my heralding matters for about zipola... BUT... I've still been singing the praises of just what's possible, manageable and performant with plain browser API, observers, js proxy and custom elements these days.

Usually to glassy-eyes that immediately return to heavy monolithic React.

But I'm trying. :D

Show threadChristian "Schepp" SchaeferJul 8, 2023
@slightlyoff intesting concept! Looks like code to define the looks of the page. Ingenious React people! Would be cool if browsers could implement that natively (I mean the stuff within the parentheses)
Show threadJonJul 8, 2023

@slightlyoff I remember when Washington Post posted a blog, cheerfully saying how they "fixed" mastodon verification by making it support HTML files over one megabyte.

They should have spent the effort debugging why their HTML was over one megabyte. But then they'd find its a fundamental flaw in react SSR. https://washpost.engineering/heres-how-the-washington-post-verified-its-journalists-on-mastodon-7b5dbc96985c

Here’s how The Washington Post verified its journalists on Mastodon

A small cross-disciplinary team of engineers worked together to add a feature so journalists at The Washington Post could link their Mastodon profiles from The Post’s website and verify themselves on…

Washington Post Engineering
Show threadAaron GustafsonJul 8, 2023
@slightlyoff Back in like 2016, I remember running a single newspaper article (not NYTimes) through @tkadlec’s fabulous What Does My Site Cost? and that one page cost more to download than the full print edition cost for the day it published.
Show threadArtem R 🇺🇦Jul 8, 2023
@slightlyoff if only people knew how to use Linaria. But cheap hate is easy
Show threadBeau NouvelleJul 8, 2023
@slightlyoff and yet in coding interviews they expect you to use the most efficient algorithm possible to solve a task.
Show threadSolar GranulationJul 8, 2023
@slightlyoff THANK YOU
Show threadNiels van RongenJul 8, 2023
@slightlyoff Didn't the guy behind Svelte used to work at NYT? (I would expect them to use Svelte, but guess not 🤷)
Show threadStephen Bannasch (316 ppm)Jul 8, 2023
@niels @slightlyoff they do in some of the “visual investigations” articles. I think they are great. Annoying paywall but this is a great example: https://www.nytimes.com/interactive/2021/sports/olympics/suni-lee-gymnastics.html
Sunisa Lee, Gymnast and Uneven Bars Expert, Has a Shot at Olympic Gold

Lee, 18, is making her Olympic debut after a challenging year. Her versatility is crucial to Team USA’s shot at a third consecutive gold.

The New York Times
Show threadAlbert SchillingJul 8, 2023
@slightlyoff That has actually nothing to do with React, that has a pretty small bundle size. It is very probably a death by a million cuts, meaning many additional UI or utility libraries that add up. Plus, this problem does no longer really exist with server side rendering which is becoming more and more the industry standard for web applications.
Show threadnullJul 8, 2023
@slightlyoff oh dear god
Show threadPhil SherryJul 8, 2023
@slightlyoff Won’t someone PLEASE think of the Developer Experience?
Show threadUhlusJul 8, 2023

@slightlyoff I'm a Frontend Dev who never used react.

Why the HELL would you EVER write css in js?

what would be the benefit of that?

we already have css variables var(--variable)

we already have math calc(5 * var(--variable))

even if you want to compile some other language into css, why would you do it client side?

Show threadTushar ChauhanJul 8, 2023
@slightlyoff It's an app. Everything's an app. Thank you apple.
Show threadPhil M0OFXJul 8, 2023
@slightlyoff That is incredible. No wonder their site takes so long to load.
Show threadAllan ChowJul 8, 2023
@slightlyoff this makes me think of when @foone was just finding all sorts of random crap in video game discs
Show threadNikola Orsinov [Joseph Grimaldi]Jul 8, 2023
@slightlyoff css in js is ugly to write too 😭
Show threadC64toneJul 8, 2023
@slightlyoff go server-side and nuke the JS from orbit. It's the only way.
Show threadLarge Heydon ColliderJul 8, 2023
@slightlyoff JESUS FUCK JUST USE CSS
Show threadmrtnvhJul 8, 2023
@heydon @slightlyoff Can't help but hearing you scream this over a blackened metal rendition of the Shoptalk intro.
Show threadLarge Heydon ColliderJul 8, 2023
@mrtnvh @slightlyoff Lmao
Show threadKit Rhett AultmanJul 8, 2023
@slightlyoff What really stings in all this isn't just the incredible waste and bloat but the way it pushes browsing into monoculture. I was just explaining to a junior dev on my team that, as late as 2006, I was still using lynx, a text-based browser, about 25% of the time, and he just boggled. It's now basically impossible to do that because everything renders through JS frameworks.
Show threadStu RobsonJul 8, 2023

@slightlyoff

margin: 4px 0 0 29px

where was the art director at the time of this coding.

Show threaddevoluteJul 8, 2023
@sturobson @slightlyoff
Show threadCursed Elf on TThe Shelf Sings a SongJul 8, 2023
@slightlyoff javascript has destroyed the minds of millions on their quest to reinvent a basic HTML document with CSS
Show threadani bettsJul 8, 2023
@slightlyoff also wait until you find out about the transphobia and nazi apologia
Show threadxrvsJul 8, 2023
@slightlyoff a 437KiB (1.5MiB unzipped) what? HTML?
Show threadAlex RussellJul 8, 2023
@xarvos JS file.
Show threadxrvsJul 8, 2023
@slightlyoff so there are two JS files?
Show threadAlex RussellJul 8, 2023
@xarvos two that are nearly half a meg, but many more besides.
Show threadxrvsJul 8, 2023
@slightlyoff i see, thought you might missed a word there
Show threadNeil Carpenter Jul 8, 2023
@slightlyoff I've been using https://brutalist.report/ and it loads so fast that I sometimes think it didn't refresh when I click refresh.
The Brutalist Report

The day's headlines delivered to you without bullshit.

Show threadKadinJul 9, 2023

@slightlyoff It's *really* hard to believe that couldn't be more compactly stored as a nested-list/tree structure. (You know, like CSS does.)

In fact I'm pretty sure I've seen interview questions that involved normalizing a pile of shit like that into its most-compact inherited-tree form. 🤔

Show threadRickJul 9, 2023
@slightlyoff @nicklockwood script kiddies running the asylum.
Show threadNot a Spring OnionJul 9, 2023

@slightlyoff
Maybe search engines should take the overall size of a webpage into account again(?) (more?)

And of course punish websites that don't work without JS ​