Johan Leino

@mxstbr @glenmaddern SC was an early crush for me with react and I only have fond memories of it. Even though I mostly use tailwind these days I still see some codebases now and then with SC. Thanks for everything...oh and also thanks to Glen who taught me a lot with his courses etc

styled-components is entering maintenance mode. It didn’t just change the React ecosystem; it changed my life. 🫡 @glenmaddern and I had this crazy idea: what if you had to write all your styling as React components? We built and launched styled-components in 2016. We had no clue what was coming. It exploded. 1.2 billion npm downloads, 40,000+ GitHub stars. Every single one of the 5.5 billion humans connected to the internet has visited a website built with it. 🤯 But it's not just about the numbers. It was the doors it kicked open for me. Open source was my crash course in everything. No team, no teacher—just me, a keyboard, and a growing community of devs who cared as much as I did. I learned to code better, sure, but also how to collaborate, how to lead, how to turn chaos into something real. styled-components was my ticket to a career I couldn't have foreseen. It all traced back to that first commit. @superbryntendo and @brianlovin were using styled-components for their project and hit a bug. Bryn slid into my DMs to flag it, and we got to talking. Next thing I know, we’re cofounding @withspectrum, which then got acquired by GitHub in 2018. That bug report wasn’t just a fix; it was fate. Open source didn’t just give me code, it gave me people, partnerships, a whole new path. The opportunities kept stacking. After Spectrum, I joined GitHub, soaked up everything I could, then jumped to Gatsby as a staff engineer. Later, I founded Stellate—a GraphQL CDN that Shopify scooped up in 2024—and started angel investing in startups. None of it happens without styled-components. It’s insane to think a side project Glen and I dreamed up in a whiskey bar in Sydney could ripple like that—changing how I work, who I meet, what I build. Now, with @quantizor stepping down and styled-components hitting maintenance mode, it’s a moment to pause. Even though styled-components won't be used as widely anymore, it shaped the web forever and influenced every library that came after. Open source taught me you don’t need permission to start, just curiosity and a willingness to share. That’s the real story here: not the specific tech, but the journey.

@housecor It depends on the service you're building ofc but generally when this is the case the FE locally only uses either the production api or at least a testing environment of the backend. The BE dev environment is "theirs" and they probably don't expect the FE dev env to be stable

Common scenario: Separate backend and UI teams are building a web app together. Problem: The shared development environment is unreliable because the backend team deploys to the development environment multiple times a day. When they do, there's a backend outage. So the UI team is blocked until the deploy completes. And the UI team's CI builds fail too until the backend deploy is complete. So the UI team pays the price for the backend's instability. One solution: Blue/green deploys (Toggle between two separate deploys so one is always up). Then a backend deploy doesn't create an outage. How do others handle this?

@housecor What I've done is similar but instead read from the query cache in details and if I find something "useful" I use that as placeholder data...I tend to use react-query-kit also that has middleware support that's useful for this type of situation

React-query problem: I fetched a list and I want to avoid needlessly refetching the same data on my detail page. Solution: Use setQueryData to pre-populate the detail page cache. Now the detail page loads immediately. 🔥 Example below: This fetches a list of users, then stores each of the user's details in react-query's cache so that the fetch on the details page automatically has a cache hit. Note: This pattern only works if the list page fetches the same properties as the detail page.⚠️

@kettanaito Fully agree. I can spot my C# colleagues in the code base all the time 😬

I like it when engineers bring things from other languages to JavaScript. Unfortunately, the things they bring are often bad things about the language. This happens due to familiarity bias. It is also often subconscious! I believe it's the same thing as when learning a different (human) language. It is natural to try applying what we already know and what you are used to. And while it does make things a bit simpler for us, it certainly doesn't mean we are speaking the language right. Programming languages are the same. We get used to certain syntactic constructs, to the program flow, to type declarations, to countless other things, and we wish to keep using those familiar bits anywhere we go. But that's now how you make the most out of any language. It is only through a tedious process of exercise and time that you learn what you love and how to transfer and apply it to another language.

@j_elmstrom En del vill bara vinna med 10-0 helt enkelt...det är resultatet som räknas...bara det.

Grupper i ST Erikscupen efter nivå skulle ju vara en bra ide om ledare hade lite sunt förnuft. Eller om resultat följdes upp och spelare registrerades. Då skulle man kunna se - och agera på - när lag spelar med svår-lag i lätt serien. #sanktan #stff

@EmmaBostian We have 3. Hardest was 2-3 since we are 2 and now "they" outnumber us 🙈

Folks with multiple children, particularly those who are the primary care taker: how many do you have, and what were the easiest/hardest transitions for you? 👶

@_asa Hjorton 😍 Det är barndom det...min mamma hade alltid en burk nånstans till glassen. Så gott

@jjenzz @kentcdodds @jjenzz meant it more like "I want the functionality of this thing but let me use my own component for rendering". That we had with render props and friends right? Still think it's a thing of beauty though...so thanks for creating it. I use the Slot a lot for my own components.

@johanleino @kentcdodds it was unique when radix created it 😛

Radix is great btw

I love the new @figma vscode plugin...so nice not having to leave the editor. Just wish you could customize the "auto" css intellisense "system/thingy" to output css-in-js objects instead if you happen to not use regular css. Or maybe you can? 🤷‍♂️

@_asa Övertygad om att du har rätt Åsa. Jag har nog aldrig fått höra att jag har skinn på näsan. Rättfram, säga vad du tycker, rak, osv...ja du fattar...typ så. Osäkra män finns det tyvärr alldeles för gott om i vår branch och de blir ännu mer osäkra kring en kvinna...tyvärr.

This👇is so very true and exactly a time line of my career I would say

@ryanflorence @kentcdodds Happy you're back Ryan ❤️. We (I) missed you...Twitter just isn't the same without you.

React's life as a human: React v0.1 -> v0.14: Cute baby everybody loved. Object identity didn't matter. "Stale closures" wasn't a thing. Just setState, stuff worked and was fast. Mixins for effect composition. So cute, just wanna squish it's little cheekies!

@CompuIves Tailwind likely...I do have soft spot for vanilla extract and its sprinkles api (which basically is a bit like tailwind). But as a foundation likely tailwind because of docs and ease of use.

If you would start a new project today, what styling library would you use? Tailwind, stitches, emotion, styled-components, CSS, something else?

@_asa Solid är ju "react fast bättre" (eller vad nu slogan är nu för tiden)...prova nåt wild istället, qwik kanske? 🤷‍♂️

@_asa yolo 🥳😎

@torkelo @grafana That's my take too. I basically use react state just for component state, e.g. things like "is the dialog open or not". Then I use external state for app/domain state, be it something like react query for api calls etc and/or something subscribable for the other things. Looks 💯

@johanleino @grafana it is external yes, but subscribable

I really love how simple the React code is in @Grafana scenes (next-gen dashboard lib). It just subscribes to state, renders markup, and pipes callbacks to the state model. No need for useEffects, useCallbacks etc. The state model handles mount effects.

@PeterOrneholm Gör du en för Electrolux också är du snäll 😜. Eller ska man fråga chatGPT kanske...risken är väl att svaret blir detsamma dock. RTFM

Den här Tweeten får alltid uppmärksamhet en gång på hösten och en gång på våren :)

@kentcdodds Love it too, makes things very easy. I've had some concerns with the Checkbox primitive but maybe it's just me used to working with real inputs in forms. Otherwise I love it

I've been using Radix and I'm really impressed how capable it is and still it's easy to use! Well done team! I'm currently working on this UI and it's working great! radix-ui.com/docs/primitive…