Me to my engineering director: “Ok but what if we all owned everything”

https://twitter.com/allenholub/status/1596565758661623808

This guy cracked the code

https://twitter.com/sensei_hacker/status/1596885172158631936

It's me, the dude who unapologetically optimizes the things I learn and use, even in my off time, for salary / career progression 💰

I urge you to learn a bit about web components, shadow dom, even declarative shadow dom. And maybe brush up on web primitives (cache headers, etc) So you're really good at twisting and cavorting React's hooks into just the right weird MC Escher painting necessary to do what you need?

Cool. Me too.

Web primitives / deep JS / CSS expertise will likely be much more valuable to you in a FAANG / BigTech interview.

Anyone want to hear about a real world, production upgrade of React 18?

This is my own experience; yours might differ.

If you're a React fanboi (or content grifter...) and this thread angers you, email me at

noreply@adamrackis.dev

and I'll get back to you.

Let's go!

1/ This is for a production system that over a dozen different *teams* of engineers work on. The code isn't always the highest quality - which is good! Time is scarce, and there's features to ship. I'd rather work on a team that gets shit done.

To clarify, Next's *experimental* image does in fact handle this, in spite of what I said down thread.

It sets the css background of the img to the blurry placeholder.

My main point here is, a wc solution works in the general case, even if there's no css solution available.

https://twitter.com/AdamRackis/status/1565554003513163777

A web component that's registered synchronously will allow you to do ... anything, even before hydration is complete.

Don't abuse it. But know it's there for when you need it.

I caught a lot of needless shit for suggesting working hard in your 20's can set you up well for your later years. But damn I was never consistently working 60-70 hour weeks. I don't know how people sustain that level of grind 👀 10 hours M-F plus 5 hours each on Sat & Sun "only" gets you to 60. 70 is unfathomable to me.

Basically 12 hour days M-F and still 5 Sat & Sun I guess? jfc

I’d love to be one of those DevRel people who get to fuck around with all the cool OSS libraries / technologies out there. There’s so many things I want to dive into but don’t have the time: Vue 3, Rx, Framer, Vite, Rust, Tailwind, Amplify, React Query, wasm, SvelteKit 🥺🥲 “Hey some people on GitHub are asking about how our thing integrates with Vue - guess I’ll be learning Vue this week and doing some writing 🎉🥳🥃💯”

The more I poke into serverless, the more excited I get about this stuff.

I just hope the education here improves, though. So many common sense things in a monorepo are less obvious with Lambdas, and almost need to be re-learned. Or maybe I'm just a moron. Or both?

https://twitter.com/brianleroux/status/1378352068331593728

Ie auth. I login & have my auth token from my serverless endpoint—how do I store it in a secure cookie if I'm just sitting in a raw html page dumped out of a Lambda?

Seems you just POST the token to some other lambda, which sets the cookie by returning the right header. Neat!

Who's interested in a 🧵 about tech interviews?

In the last ~2 years I've interviewed at Riot, AWS, Spotify and Citadel, and got offers from all except AWS. I promise that's not to brag, just to say I'm not pulling this stuff out of my 🍑 Everything below is for folks who want to upgrade their careers, and nothing more. I'm not interested in telling anyone what to learn, what to do with their time, etc.

This is just from what I've seen at the interviews I mentioned above.

TIL there are people with *extremely* strong opinions and attachments to ... chat platforms.

I’m old enough to have had to work with Gmail and g-chat 😳

I fell in love with Slack immediately. And when they added threading? For all the controversial shit I’ve said, I never expected “Discord’s lack of threading is a crucial defect and their slightly more polished UI doesn’t really matter” to blow up like that 😂🥃👀☠️

I haven't said this in awhile, but I just published some open source! svelte-helpers isn't much yet, but it's something.

Has some helpers to enable spring animations in transitions, and also a declarative Modal component.

github.com/arackaf/svelte…

1/ First, huge thanks to @Rich_Harris for the helping hand with the spring functions. He laid out a clear path, along with some sample code that was incredibly helpful, and mostly bug-free 😘

I'm finally scratching the surface of how much simpler application code becomes with Svelte. I never expected such a stark difference, yet here we are.

React hook to track an element's height, vs the Svelte equivalent—it's amazing how much simpler things get with a compile step. Usage is equally simple.

Get a "ref" to the element via screenshot #1 (el is just a variable declared with let - lmao this feels like cheating)

Then ... just use it. That's screenshot #2

I know I've been heavy on the Svelte hype lately. Some folks have been asking for specifics, which is pretty reasonable. So while my League Client patches, here's a thread of actual Svelte features that make me happy. 1: Uni-directional prop flow as religion is a shitty religion.

A solid component model, with props being passed downward is great. That was the huge value proposition of React. But there are times when this over-complicates matters.

The nicest surprise with Svelte has been the tooling. I expected it to be raw, but, and I swear on @ken_wheeler's finest bourbon I'm not exaggerating, it's better than React.

Auto complete on Svelte attributes, auto import when you use a component, etc. All *without* TypeScript. And yeah I know the auto-import thing works with React. Usually. If you're using default exports it's often a crap shoot. It's incredibly reliable with Svelte.

And the attribute completions even include warnings if you reference an action that's not defined, etc. Top notch 🍺

My plan for migrating micro-graphql-react to Svelte was to fork the repo, then use a rusty machete to hack away the complicated bullshit I spent months adding for Suspense support. That'd leave it 98% React agnostic.

Then swap out React, for Svelte.

It appears to work 😏 🥳 🍺 The main challenge was ... webpack. If webpack doesn't have .mjs at the front of the extensions array, bad things happen to the writeable store, coming from

var internal = require('../internal');

(webpack hard codes undefined)

/cc @Rich_Harris - maybe add a warning?

@acdlite Has this been elaborated anywhere? I'm trying to see what the rules are for mutating refs within a data-fetching hook. CM interrupting renders + data-fetching asynchrony makes this ... hard.

My worry is something like the following:

1/ @acdlite useQuery hook called, "currentQuery" ref is updated

render is interrupted

Can that same render be re-run but...with older state? That's not possible, is it? Except with useTransition, but in that case the new-state renders / old-state renders are in separate trees?

2/

The React team are some of the best web developers in the world. But sometimes they struggle to explain things to normal people—ie folks who have no fucking clue what "algebraic effects" are (like me!)

So with that, here's my serious attempt at explaining suspense

1/ For simplicity I'll talk in the first person, as though I were one of the devs making Suspense, and announcing it. Again, this is just to keep the messaging simple. I'm not deluded enough to think I could work on that team.

Wait hold up React fam ✋

A route only needs to block (Suspend) on the initial data, right?

If our Route were to preload its data, and also send down a read() method that got called on every render, and threw until the FIRST data were ready, wouldn’t that be sufficient?

1/ Subsequent data updates (and, well, the initial data) would be returned from the same GraphQL hooks we’re already using, with the same incremental spinners.

But now a single initial page reveal with all needed data. And render as you fetch.

Is there a downside I’m missing?

2/

* puts on a black robe *

* sacrifices a goat *

* lights incense *

"Dan Abramov"

"Dan Abramov"

"Dan Abramov"

Hey Dan 👋 How's London?

Anyway, I was just wondering if you could tell us React devs how preloading is supposed to work in this brave new Suspense world.

Thanks! "preload high; read low" was the early advice, and that shit made *total* sense.

But now I'm hearing far, far more complex, and at times contradictory advice.

Ok who's interested in learning more about Svelte? I spent a few hours this morning tinkering, and I think I got enough done to understand and share some big picture things.

tl;dr - it's weird at times, but extremely flexible and reactive, with great perf.

Here goes!

1/ Don't expect any kind of cool, flashy demo. That takes time I don't have; I'll try to show enough code to demonstrate some core concepts.

After a snarky tweet about this sort of blew up, I wanna write a few words on what I'd love to see open source, as commonly understood, become. It's not uncommon for open source projects to blow up, and start getting used heavily in industry. For-profit companies, and the developers who work there, start depending on them to do their jobs.