Extending CSS with Houdini

In this video from #ChromeDevSummit 2020, Una walks us through Houdini and the aforementioned houdini.how

CSS Houdini is an umbrella term that describes a series of low-level browser APIs and worklets which enable developers to hook into the browser’s rendering engine and extend the styling capabilities of today. Learn about the various Houdini API’s, as well as how to use them cross-browser with the Houdini Paint Polyfill. Also learn about a new resource to help you quickly get started with exploring Houdini in your own projects today.

Playing with JSX

In The several ways to import React, Kent C. Dodds also covers a bit about JSX and β€œthe JSX pragma”. Here’s a video of CSS Tricks’ Chris Coyier goofing around with it.

JSX is not fancy. It essentially transforms angle brackets in JavaScript into function calls. That works great for React, but because we can customize it, we can make it work for other libraries or write our own.

πŸ’β€β™‚οΈ You can see Chris importing React using the wonderful SkyPack there.

πŸ”— Related:

Why The Web Is Such A Mess

Video by Tom Scott on 3rd party cookies and tracking and what not.

Painting a Selfie Girl, with Math

Today we are painting a girl taking a selfie, with mathematics.

I like how the author, a few minutes into the video, says … none of which is too complicated to be honest … while I’m hardly understanding any of the things that he’s explaining πŸ₯΅

You can play with the result over at Shadertoy.

Skypack β€” Load optimized npm packages with no install and no build tools

I was delighted to read that CodePen now has built-in support for Skypack. This is a huge step forward to working with packages on CodePen. Great addition to the product!

But what exactly is Skypack? Well, it’s the successor to the aforementioned Pika CDN *COMBINED* with the aforementioned Snowpack: Skypack not only serves ES Modules, it also converts older CommonJS Modules to ES Modules while at it.

Ever tried to load JavaScript from a CDN and realized that it doesn’t work in a browser without a bundler? Skypack operates like your favorite CDN but with an important difference: packages are preoptimized for browser use.

But Skypack doesn’t stop there: it handles minification, browser polyfilling, gzip/brotli, HTTP/3, caching, and more!

Skypack is free to use for personal and commercial purposes, forever. The basic CDN is production-ready and is backed by Cloudflare, Google Cloud, and AWS. We’re fully committed to building a core piece of infrastructure you can rely on.

Fred K. Schott, one of its authors, announced it this summer at ESNext Conf β€” a virtual conference which I also gave a talk at.

(Fast forward to the 18 minute mark to get to the Skypack part)

Here’s a simple Confetti example:

See the Pen
Confetti
by Chris Coyier (@chriscoyier)
on CodePen.

Neat, right?

Skypack β€” Load optimized npm packages with no install and no build tools →
Skypack + CodePen →

8 Tips to Make Your Website Feel Like an iOS App

Very nice video by Sam Selikoff in which he sets up a web manifest to make his site feel more app-like. Great production quality.

There are some tweaks I’d suggest though:

  1. Fixate the header using position: sticky; instead of position: fixed;. No need for that extra margin on the content then. Update: See note below

  2. Don’t set the header height to a fixed number, as not all devices have (equally sized) notches. Use the User Agent Variable safe-area-inset-top instead, and apply it as the top padding:

    header {
      padding-top: env(safe-area-inset-top);
    }
  3. Don’t disable scaling in case your app does not follow the system font sizing β€” which it does not by default. To make it do follow the system font sizing, use this snippet:

    @supports (font: -apple-system-body) {
      html {
        font: -apple-system-body;
      }
    }

    πŸ’‘ You can still override the font-family after that. That way you can have your custom font and also follow the preferred system Text Size

As an extra: to prevent that long-press behavior when the app is not added to the home screen, set -webkit-touch-callout: none; on the links.

On Twitter Sam pointed me out that when using position: sticky; there’s an issue with overscroll/bounce: The header will shift down along with the body as you do so.

In theory one could easily fix this by applying some overscroll-behavior on the body. However, as Safari does not support overscroll-behavior you’ll have to resort to a hack to prevent overscrolling in Safari. But, as that hack relies on 100vh β€” which Safari also doesn’t understand properly β€” you’ll have to use another hack to make Safari use the correct value for 100vh.

(* mumbles something about Safari being the new IE6 *)

Did this help you out? Like what you see?
Thank me with a coffee.

I don't do this for profit but a small one-time donation would surely put a smile on my face. Thanks!

β˜•οΈ Buy me a Coffee (€3)

To stay in the loop you can follow @bramus or follow @bramusblog on Twitter.

What’s new / coming to Google Cloud Run?

At Google Cloud Next ’20, Cloud Run Product Manager Steren Giannini (@steren) walked us through some of the new things that are coming to Google Cloud Run.

Some highlights:

  • VPC Peering
  • Gradual Rollouts (with custom URLs per tagged release)
  • New Load-Balancing Features (Multi Region, Cloud CDN, IAP)
  • Easy Continuous Deployment
  • Min instances (no cold starts)
  • 4 cpus/4 GB RAM
  • 1 hour request timeouts
  • Graceful shutdowns (SIGTERM)
  • Server-Side Streaming
  • …

🧐 Unfamiliar with Google Cloud Run? Watch the video of a talk I recently gave on the subject.

Going Serverless with Google Cloud Run (JSConf.be)

Back in June I was invited to speak at JSConf.be. This year’s edition focused on DevSecOps and Security. My talk β€œGoing Serverless with Google Cloud Run” β€” which I have brought forward before at Full Stack Ghent and PHP-WVL β€” was a perfect match for it.

Cloud Run is a fully managed compute platform by Google that automatically scales stateless containers. By abstracting away all infrastructure management, us developers can focus on what matters most: building great applications.

In this talk I’ll show you not only how to deploy PHP/Node applications onto Cloud Run, but also how to create a build pipeline using either Google Cloud Build or Github Actions.

In mid August the video got released, which I’ve embedded below:

The slides are up on slidr.io, and also embedded below:

Thanks to the organisers for having me, and thanks to the attendees for coming to see me. I hope you all had fun attending this talk. I know I had making it (and whilst bringing it forward) πŸ™‚

πŸ’β€β™‚οΈ If you are a conference or meetup organiser, don’t hesitate to contact me to come speak at your event.

Inception – Ten Years Later

Being a fan of Christoper Nolan’s work, I liked this look back at Inception β€” an amazing movie with a wonderful soundtrack β€” which recently turned 10.

Say No To Complexity With AlpineJS

If you’re looking for a quick rundown of the aforementioned AlpineJS, here’s a talk by AlpineJS’s author Caleb Porzio which he presented at JSNation: