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 …

Using deepfake to create better Lip-Syncing

Now this is a good use of deepfake: correct the mouth and jaw movements of actors in dubbed video to match the new language track. The result is a (nearly) seamless lip-synced experience. TrueSync is the first AI offering from our neural network film lab. Filmmakers and content owners are now able to visually translate …