React 19.1.0 released
Owner Stack An Owner Stack is a string representing the components that are directly responsible for rendering a particular component. You can log Owner Stacks when debugging or use Owner Stacks to...
Count child elements HOC
I'm looking to write an HOC that counts and prints to the console the number of
<h1/>
elements in the wrapped component. For example:undefined
const Foo: FC<{}> = ({}) => {
return (
<div>
<h1>Foo</h1>
<p>Bar</p>
</div>
)
}
export default countH1(Foo)
this should print 1 and then return Foo as is for rendering.
undefined
React.Children.forEach(child => {...})
seems to be about the explicit children property and not descendant html elements. How can I achieve this?
For vanilla-extract CSS users: A new ESLint plugin that sorts your CSS properties (alphabetical/concentric/custom)
An ESLint plugin for enforcing best practices in vanilla-extract CSS styles, including CSS property ordering and additional linting rules. Available presets are for alphabetical and concentric CSS ...
First off, I've been loving vanilla-extract for the past 10 months. 😊
The only thing I really missed was the ability to sort CSS properties. Since there wasn't an ESLint plugin for that, I decided to create my own.
@antebudimir/eslint-plugin-vanilla-extract offers CSS property ordering (alphabetical, concentric, and custom), auto-fix capabilities, and supports multiple Vanilla Extract APIs.
If anyone wants to give it a shot, you can find more details in the readme. Looking forward to hearing your feedback.
I have a Vite+React+Typescript project where I wast trying to follow the instructions on how to install sidebar. It automatically added some styles to my index.css file. Now, the content pretty muc...
Chakra UI: Announcing v3
Today, we're excited to announce the release of Chakra UI v3.0
Reactivity and Reactive Programming
Nearly all modern browser UI frameworks boast Reactivity as a core feature. What is Reactivity all about? Is it useful or applicable outside of frontend development? what is the hype all about anyways?
Hi all,
This is my first time posting my blog, I hope you enjoy it!
Material UI v6 is out now 🎉
Material UI v6 is now stable. It comes with new features, improvements, and an experimental integration for static CSS extraction.
I built an AI-powered quiz app with Next.js and OpenAI
In this tutorial, you'll learn how to build an AI-powered quiz application that enables users to...
State of React 2023 survey results
The 2023 edition of the annual survey about the latest trends in the React ecosystem.
I wrote an ESLint rule to prevent me from forgetting to set the sizes attribute on <Image>s, which results in bigger than required images to be sent to users.
The article mentions Next.js but it also applies to vanilla React as the sizes attribute is useful even outside Next's <Image> component.
Latitude: The open-source analytics layer between your database and your users
What is Latitude? Latitude is the open-source framework for embedded analytics. Create...
How I built a server-side cache with ExpressJS & React
TL;DR In this tutorial, you’ll learn how to implement server-side caching to ensure your...
Hi there,
I have written an article on implementing server-side caching that ensures your app stays fast as you scale.
I’ve used ExpressJS for the API server, and React for the frontend.
Hope this helps someone!
Next.js App Router Training: list of various basic patterns of app router with simplified code.
Introducing various basic patterns using Next.js' app router with simplified code.
I stumbled upon this project on GitHub and figured it might be of interest to some people here
CSS Folding Effect in React Component
In this post, we'll explore a technique we can use to "fold" a DOM node, like folding a letter in real-life. On that journey, we'll learn a lot about 3D transforms and CSS animation techniques!
