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 →

The 6 Stages of Spam Protection

The journey of the folks over at Laracasts on how they stopped spam (for now) on their forums.

  1. Keyword Censoring
  2. Email Confirmation
  3. Language Detection
  4. Throttling
  5. Honeypots
  6. reCAPTCHA

Comes with (Laravel) code snippets to go along with that.

The 6 Stages of Spam Protection →

Yes, that dreaded reCAPTCHA. Hate it all you want, but it actually works. And yes, it can become quite stressful in some edge cases:

😅

Front Line PHP – Building modern web applications with PHP 8

The folks over at Spatie are at it again, this time with Front Line PHP.

An ebook on cutting edge tactics in PHP 8, accompanied by videos and practical examples.

The videos covering the new additions to PHP 8 are free to watch, and should give you an idea of what you can expect.

At €79 (now €56 due to #BlackFriday) this is a steal.

Front Line PHP →
Front Line PHP Videos (paid + free) →

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 always put a smile on my face. Thanks!

☕️ Buy me a Coffee (€3)

(t,i,x,y) => “creative code golfing”

Martin Kleppe has created tixy.land, “the most minimalist creative coding environment” as he calls it

Control the size and color of a 16×16 dot matrix with a single JavaScript function. The input is limited to 32 characters – but no limits to your creativity!

I especially like how the site starts off with some simple examples that are directly rendered. Within a few clicks you’ll get why it’s called (t,i,x,y) 🙂

In a true code golfing style, Noah Doersing created (t,i,x,y,z), which adds a third dimension to it:

The best part of tixy is that your code snippet can be persisted in the URL, and therefore shared 🙂

(t,i,x,y) →
(t,i,x,y,z) →
(t,i,x,y,z) Source (GitHub) →

The Raven Technique: One Step Closer to Container Queries

Building further upon The Holy Albatross technique, comes The Raven Technique by Mathias Hülsbusch:

I want to get closer to actual container queries! So, what does CSS have offer that I could tap into? I have a mathematical background, so functions like calc(), min(), max() and clamp() are things I like and understand.

Next step: build a container-query-like solution with them.

Leveraging clamp() he builds new CSS Custom Properties (aka CSS Variables) which in their turn are used as Conditions for CSS calculations.

☝️ Did you know Chromium will be experimenting with native Container Queries, and we might eventually have them built into the browser?

You can play with the results in the pen below, by adjusting the width of .try_out_dimensions although I’d recommend to read the explanatory post first 😉

The Raven Technique: One Step Closer to Container Queries →