CSS initial doesn’t do what you think it does

Another great video by Kevin Powell on one of those things in CSS that many may have heard of, but most likely don’t understand entirely (I know I didn’t for a very long time 😅). We often think initial sets something back to how it started, but it actually does a lot more than that. …

CSS Grid: Overlapping grid-template-areas

When working with CSS Grid, I’m a huge fan of using Grid Template Areas. In this short video Kevin Powell builds a small layout where certain elements overlap inside a grid container. I was very glad to see Kevin also go for grid-template-areas here, showing exactly why I like using them: the ability to reshuffle …

Next.js + Apollo + Server Side Rendering (SSR)

Interesting video from the CodePen podcast in which Shaw goes over this approach to SSR with Next and Apollo: A probably-better approach is to use the getDataFromTree method, which walks down the tree and executes the queries to fill up the ApolloClient cache. Create a shared ApolloClient instance Render the page using getDataFromTree() to fill …

Random Paint Effects with Houdini

Speaking of George Francis in the previous post: in the latest episode of HTTP 203 Jake talks Surma through recreating these Houdini-powered “Fleck Patterns” George created before. Generative Houdini Stuff! ✨Create always-unique, responsive, “fleck” patterns — all without leaving your CSS 🎨Pass in a seed value, up to 8 colors of your choice, and a …

Dev Roulette Live — Conversations with Frontend Developers

I don’t know exactly how she does it, but apart from all the work on her side projects, newsletter, family, etc. Stephanie Eckles also hosts a show named “Dev Roulette Live” Dev Roulette is a conversation between Stephanie Eckles and up to two mystery guests about topics that are particularly important to front-end developers including: …

What’s new in React 18

About a month ago React 18 got announced, with these new features: Automatic batching — React will now better batch state updates no matter what the context. If you do want to force an update, wrap your state change inside ReactDOM.flushSync() Transitions — A new hook named useTransition() to tell your app which updates are …