⭐️ Small details like this can make a big difference in how a UI feels, and fluid typography is a nice example of how CSS can handle more logic than we often give it credit for.
🧩 It is especially useful for layouts where content should feel balanced whether the screen is slightly bigger or smaller, without sudden visual changes.
⚙️ This approach reduces the number of media queries you need and helps keep typography more consistent across different devices and screen sizes.
📐 Fluid typography solves this by letting text scale continuously based on the screen size. With clamp(), you can define a minimum size, a preferred fluid value, and a maximum size in a single line.
🤔 It is mostly straightforward to change the font-size of a web page based on the device screen sizes. Media queries can solve this problem.
💡 But sometimes, fixed breakpoints can feel limiting. Font sizes jump at certain widths instead of scaling smoothly.
📐 Fluid typography solves this by letting text scale continuously based on the screen size. With clamp(), you can define a minimum size, a preferred fluid value, and a maximum size in a single line.
📕 To learn more:
- www.epicreact.dev/the-latest-r...
- react.dev/reference/re...
- nextjs.org/docs/app/api...
💡 You can see an example of triggering an effect event when the route changes in a Next.js app in the video.
⚛️ And now, React 19.2 has a new hook called useEffectEvent. In short, you can extract the non-reactive parts of your logic and trigger it only when the reactive parts change!
👀 Of course, another solution to this could be auto-memoization by the React Compiler, but you may not want to (or can't) use it in a production app for now.
⚠️ You may think about not adding the dependency and ignore ESLint, but let's not do that!
👉 With the "latest ref pattern", you guarantee that the latest callback will be called when the effect is triggered, and since it is a ref, you don't need to put it in the dependencies.
🤔 You can put the callback prop in the dependencies of useEffect, but then you will need to wrap the function you pass as a prop with useCallback. If you miss this, that "effect callback" can be called at unexpected times, like during re-renders.
💡 Let's say you need to call a callback prop in a child component when the state of that child changes. The "latest ref pattern" is a useful technique for this case.
👀 Of course, check browser compatibility before using this. It is "Newly Available" according to Baseline.
🤔 Also, this is not a "React only" tip. You can use it with any UI framework, or none at all! And you don't even need to use <dialog> either. You can use any method you want to create a modal, and as long as you can select that element with CSS, :has() is useful in this case.
⭐️ I think one of the very common cases where this is useful is hiding <body> scrollbars when a modal is open, and there are lots of JS-based techniques and libraries around. Nowadays, it is very easy and possible with :has().
👉 Here is a CSS tip in case you need to hide scrollbars on the <body> when a modal is open.
✅ Selecting a parent element based on its children was not possible with pure CSS. But with the :has() pseudo-class, you can select elements based on their children or siblings easily.
⭐️ This can also open up possible new patterns, like pre-fetching a hidden component's data even if it's hidden and immediately showing it to user when they navigate!
💡 Think that you have multiple tabs on a screen. To preserve the state of a tab while another tab is being displayed, you should lift its state up and now its logic should live in its parent component. With <Activity> it is possible to co-locate a component and its state!
🤯 Instead of unmounting a component, <Activity> can just hide it and preserve its state. Looks just like using display: none at first, and it actually uses it under the hood. It also handles effects, cleaning them up so the hidden components don't have unexpected side effects.
[Reposting this because the first one had a typo in the video 🙏]
⚛️ React 19.2 has some cool new features, and <Activity> is definitely one of the most interesting ones!
🤯 Instead of unmounting a component, <Activity> can just hide it and preserve its state. Looks just like using display: none at first, and it actually uses it under the hood. It also handles effects, cleaning up them so the hidden components won't have unexpected side effects.
👀 To learn more:
- npm: www.npmjs.com/package/find...
- Source Code: github.com/onderonur/fi...
🤔 Also, it does not simply read files as a string and search for "TODO" keyword since it is error prone. Instead, it finds all TS/JS files, gets AST of each file, filters comments, searches for TODO keyword, gets commit date of the line.
🧑💻 As a weekend project, I built this tool and made a few small improvements over the next days. You can use it locally or in a CI pipeline to catch old TODOs automatically—and debate with your team whether they still matter.
⭐️ So, I thought, "it’d be nice to have a minimal tool to find TODOs older than a given number of days and decide if they’re worth fixing or just noise".
👀 We’ve all seen TODO comments like "TODO: will fix this later. For now it is good" that stick around for years. These are either tech debt or completely meaningless, and the project often continues just fine without addressing them.
🚀 I published "find-old-todos", a CLI tool to search for TODO comments older than a specified day threshold.
