Tom Dohnal

Sam Selikoff (@samselikoff) talks about 5 new exciting utilities with real-world use cases during Tailwind Connect keynote (@tailwindcss). You can watch the talk (link in the thread) or read the notes below ↓ 1) Accent Color - new `accent-...` class (e. g. `accent-liime-400`) that lets you choose colors for (otherwise blue by default) native HTML elements like checkboxes or sliders - you can add it to a parent `div` and then all its children elements respect that - under the hood, it sets the (new) `accent-color` property - Tailwind does a great job at staying up-to-date w/ modern CSS and can educate you about what’s possible and can be used safely w/ reasonable browser support 2) Fluid Typography - you can use arbitrary value syntax with `-[...]` syntax - for example, to implement fluid typography, `text-[min(19vw,130px)]` will make sure a heading fill up the entire width of the viewport but doesn’t get too large (tweak the exact values based on your specific page and desired font size) 3) Text balance - you heading can have orphan words (if there’s just one word after a line break) and is not balanced uniformly - new `text-balance` feature coming to Tailwind (uses `text-wrap: balance`) which is a new CSS feature - if your browser doesn’t support it, nothing breaks, you text isn’t just gonna be as pretty 🙂 continues below ↓

Does Copilot know something I don't? 😀😀

@samselikoff I think useEffectEvent is aimed at a different problem: you'd use it when you want to synchronize with a certain value/prop but also want to have access to other props (whilst not including the "other props" in the deps array) (#declaring-an-effect-event" target="_blank" rel="nofollow noopener">react.dev/learn/separati…)

Fantastic video. I run into this problem all the time with animation. You want to animate X after you click Y. Trying to describe that UI behavior in terms of a synchronizing effect is absolutely an impedance mismatch. Is this the sorta thing useEffectEvent is hoping to solve?

@martinkonicek The "re-render all the time" approach has its benefits as you don't need to manually mark anything as stale or wrap values in signals etc. to trigger UI updates. But there are drawback to it as well, as you mention

@martinkonicek I believe it's React's team philosophy that one should make the app resilient to frequent renders (i. e make renders cheap) rather than try to bring the number of renders down.

Excellent article by @kettanaito on why fetch doesn't reject on responses with error status codes and how it shows how well is the fetch API designed! kettanaito.com/blog/why-fetch…

@_pi0_ It only extends its functionality with Next.js specific behavior, nothing wrong with that. It's clearly documented.

TIL Next.js actually overrides globalThis.fetch 🤦‍♂️ Please leave the standard fetch alone 😭 Issue for context: github.com/unjs/ofetch/is…

@devongovett Isn't that what the @nextjs team are doing with Turbopack? Easier to start from scratch that rewrite Webpack I'd reckon

Been thinking about this. Not only to make changes but to iterate faster. Slowly rewriting Parcel in Rust is like replacing the engine of an airplane while it is flying. It's way easier to build stuff from scratch, ignoring the edge cases, than keep everything working non-stop.

@sebmarkbage @acdlite @delba_oliveira To watch the full video, go to frontendtv.dev/videos/f321494…

Sebastian Markbåge (@sebmarkbage), Andrew Clark (@acdlite) and Delba De Oliveira (@delba_oliveira) discuss server components vs client components, suspense, server actions and future plans (built-in animation API!). Read the notes or watch the panel discussion (link below) How do you think about React? – a way of authoring UI experiences in a way that feels natural and is composable (not important if you call it a library/framework 😄) – React team creates boundaries/concepts that enable others to use them to build their own building blocks What are server components and why we have them? – React is trying to integrate things that used to force you break outside of the component model (e. g. data fetching) and integrate them directly into React itself – a part of the React tree is moved to the server, several benefits – low-latency access to data (avoid waterfall problem) – direct access to database – you can create an ORM / security layer – some parts are a bit annoying to learn, but once you learn it, you unlock a new ecosystem Thinking server components vs client components – you can build an entire feature end to end within the React component model, no need to build a separate UI and API layer – client components aren’t escape hatches, they are a part of this new model, it’s okay to have loads of client component if you have a lot of interactivity, server components are just another tool in the toolbox How do server components work – React renders the component tree on the server – once it hits a client component, it needs to serialize it, and when doing so, if it discovers that the client component has a child server component, it optimistically renders that component on the server as well; the goal is to avoid extra round-trips Streaming with server components – before suspense: everytime you need to access data from the server, you need a loading state, you’d end up with spinners all over the place – original suspense idea: decouple loading state from where the data is fetched – now, you add the suspense boundaries if you wanna show the app in e. g. 2 or 3 stages, gradually streaming, instead of putting spinners wherever you need to fetch data Suspense for data fetching – server components are suspense for data fetching! although it’s not called like that by React team – in the future, offline-first with data sync might be also explored Server actions – a more convenient way of utilizing browser form APIs – actions don’t have to run on the server – oftentimes, action will cause a change to the UI, with actions, you can invalidate caches on the server, and React can send you the updated UI given the new data Future plans – built-in animations API – native support for mobile and offline-first experiences

@erikras @figma @code tbf i don't see that much of a benefit, figma in a separate window is fine imho

Any frontenders have opinions on the @figma @code extension? 👍 / 👎 ?

@GuiBibeau @JoshWComeau twitter.com/tom_dohnal/sta…

@JoshWComeau Last time we had such a big shift was hooks in 2018. It took us a good 1-2 years to all drop recompose and HOC but now we are good with it

@JoshWComeau My bet would be that it'd take much longer for RSCs to penetrate than a year or two as it requires deeper architectural changes then e. g. switching to hooks. New apps will presumably start with RSCs but some large existing apps might never migrate to RSCs. But let's see!

@shashiwhocodes @gethackteam You actually made me realized that I had been using StackOverflow less and less even before ChatGPT came out too. It had mostly been GitHub issues that had been useful for library specific issues for me, rather then StackOverflow.

@tom_dohnal @gethackteam Agree. I barely went to Stack Overflow any who. I used Google and what ever resources helped me, I used that. ChatGPT gives you a decent answer within seconds. Stack Overflow, you still need to swift through comments and threads to find a possible solution.

Very surprising how quickly developers are picking ChatGPT over stackoverflow 🤯

debugging for sure feels longer but it might be just bcs it's generally speaking less entertaining 😄

What takes the bigger part of your day?

@ryanflorence you don't need 7 monitors but you do need an ergonomic chair if you don't wanna develop nasty back problems over the years

Wait until the Jedi crosses 40 and the RSI starts setting in. Desk, keyboard tray, and decent chair at a minimum 😂

@linuz90 global replace with "post"? :D

🫡

@wesbos I think TypeChat might be what you're looking for: microsoft.github.io/TypeChat/blog/…

Any of you using the OpenAI function calling? I've been having it generate me JSON without issue so I'm wondering if it's worth switching. Also, if you have, any tools that can convert a TS type to a OpenAI schema/type?

@bradleymeck @astahmer_dev @Console_buche Then it would be a break in change to remove it and it's understandable that the TS team would be reluctant to do that

@tom_dohnal @astahmer_dev @Console_buche No, but it has been around for a few years.

tsconfig path aliases were a mistake

@JamesIvings 3-5 day delivery is the case for non Amazon vendors but I can't agree with pay by bank transfer and emails about items not being in stock, at least in my experience, having lived in Czechia and UK

🌏 Buying online in SE Asia: Same day delivery, pay instantly, live chat tells you when shipped ✅ 🌍 Buying online in Europe: 3-5 day delivery, pay by *bank transfer*, emails you 3 weeks later to tell you it's not in stock ❌