How CodePen leverages Cloudflare Workers and Cloudflare KV Storage

Interesting to see Chris Coyier and Stephen Shaw lift the hood of CodePen, detailing how they use Cloudflare Workers and Cloudflare’s KV Storage.

Cloudflare workers are like serverless functions that always run at the edge, making them incredibly fast. Not only that, but the tooling around them is really nice. They can run at particular routes on your own website, removing any awkward CORS troubles, and helping you craft clean APIs. But they also have special superpowers, like access to KV storage (also at the edge), image manipulation and optimization, and HTML rewriting.

💡 If you’re already familiar with the two concepts (and know how to link them together), feel free to fast forward to the 15-minute mark.

Generative design with CSS Houdini

Recording of George Francis giving his talk “Generative design with CSS Houdini” at the most recent edition of London CSS

Learn how the mystical powers of CSS Houdini can be harnessed to create ever-unique, generative user interfaces — think random patterns, shapes, animations, and more!

The Beauty of Bézier Curves

They’re used for animation, text rendering, and all sorts of curved shapes! But how do they actually work? well, like, that’s what the video is about, so, watch it to find out etc!!

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. Often, we’re looking for unset or revert instead.

The gist of the video is written down in this Twitter thread:

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 the entire layout in a Media Query.

Grid-template-areas are amazing, but sometimes we want to overlap things over areas and that isn’t really possible… or is it?

🔥 You should definitely subscribe to Kevin’s YouTube Channel.

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.

  1. Create a shared ApolloClient instance
  2. Render the page using getDataFromTree() to fill the cache with data
  3. Render the page again with that data using Next’s Document.getInitialProps()
  4. Extract the cache to deliver with the page and hydrate the client-side Apollo cache

Nice!

CodePen Podcast #331: Next.js + Apollo + Server Side Rendering (SSR) →
Example Repository →

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.

Jake first takes a naive approach, and then polishes the result until he gets a version that plays nice with resizing.

You can see the final result here.

Note to self: I should probably implement some of these adjustments in css-houdini-voronoi 😅

The Universe is Hostile to Computers

I like this video from Vertiasium on Cosmic Rays and how they can trigger bit flipping in our computers, known as “Single Event Upsets”.

Tiny particles from distant galaxies have caused plane accidents, election interference and game glitches.

Solid buildup, good pacing, and well explained.

Dune Trailer

Coming late October; Pretty excited about it as it’s directed by Denis Villeneuve (Sicario, Blade Runner 2049, Arrival, …) and features Timothée Chalamet (Call Me by Your Name, Beautiful Boy, …).

Although subtle at times, the Teal and Orange is very present in this one …

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: CSS, JS, and Accessibility.

For the second episode (mid June) I had the honor to join the conversation together with Michelle Barker.

It was great to finally “meet” both Stephanie and Michelle, two persons who definitely are on my “you should follow them on Twitter”-list. In the hour we had we talked about Layout in CSS, Creative CSS, Progressive Enhancement, etc.

I very much like the spontaneous atmosphere that lives during these conversations. Take the topics for example: although they are a pre-defined set of topics, they are not fixed — a spin of the wheel decides what topic will be talked about.

If you can’t join live (on Twitch), you can always watch the recordings afterwards, on YouTube.

Dev Roulette Live →
Dev Roulette Live on YouTube →