This Web Site is a Tech Talk

Great talk by Zach Leatherman as recorded at Smashing Conf Austin 2020:

The talk delves into Single Page Applications, Multi Page Applications, modern JavaScript Frameworks, and what I believe to be a better future for web development.

/me nods along for the entirety of this talk.

Powering his faux-live-coding slidedeck is Queue Code, a package to let you live code like he did in this talk.

This Web Site is a Tech Talk (incl. resources)

“This website is a single HTML file”

This website is a single HTML file. It simply uses the #anchor suffix (from 1992) and the :target CSS selector to show and hide pages/content.

This setup is databaseless, javascriptless, and buildshit-free, so you can edit your website with a text editor and upload it somewhere like a normal person.

Brilliant! 🤩

John Doe →

How to render 3D in 2D canvas

Louis Hoebregts walks us through how they rendered a 3D globe on a 2D canvas.

Because as all the following animation steps were plain 2D, I couldn’t use a 3D renderer such as Three.js. And so I had to figure out how to render a 3D shape using only the Canvas 2D API.

In this article, I’ll show you how I finally did it. I’ll first explain how to render a basic shape from a 3D scene using the JavaScript Canvas 2D API. Then in the second part of this post, I’ll show you how to make everything a bit fancier with some textures and 3D volumes.

Some really nice demos in there, such as this one:

See the Pen 3D Globe in 2D (Depth sorting) by Base Design (@basedesign) on CodePen.

How to render 3D in 2D canvas →

How We Improved SmashingMag Performance

Interesting real-world case-study over at Smashing Magazine:

In this article, we’ll take a close look at some of the changes we made on this very site — running on JAMStack with React — to optimize the web performance and improve the Core Web Vitals metrics. With some of the mistakes we’ve made, and some of the unexpected changes that helped boost all the metrics across the board.

Be sure to check out the linked diagnostics.css by Tim Kaldec. It can be used to indicate clear (or potential) problems with the markup.

How We Improved SmashingMag Performance →

Design Principles For The Web

The opening presentation from An Event Apart Online Together: Front-End Focus held online in August 2020

It’s a typical Jeremy Keith talk with many things mentioned, all converging to what he described before in his blog post Robustness and least power (and also covered in other talks). Definitely worth your time.

Hit the link for a full transcript, audio-only download, and the slides.

Design Principles For The Web →

Alt vs Figcaption

This message by Elaina Natario writing over at Thoughtbot cannot be repeated enough:

While both the alt attribute and the figcaption element provide a way to describe images, the way we write for them is different. alt descriptions should be functional; figcaption descriptions should be editorial or illustrative.

Examples of both functional and editorial descriptions in the full post!

Alt vs Figcaption →

Wave

I like this demo. Very pleasing on the eyes.

To easily create WebGL demos the author created a little library called RGBA.js which is used under the hood.

Focusing on hiding WebGL/JavaScript code from you and giving ability to write fragment shader code only

Once included, this is the only code one has to write:

RGBA(`
float channel(vec2 p, float t) {
  float a = atan(p.x, -p.y);
  float w = sin(a*8.0 + t*2.0)*sin(t+a);  
  float d = length(p) - w*0.013 * smoothstep(0.85, 1.4, abs(a*0.5));
  d = abs(d - 0.25);
  return smoothstep(0.005, 0.0005, d);
}

void main() {
  vec2 p = gl_FragCoord.xy/resolution-0.5;
  p.x *= resolution.x/resolution.y;
  gl_FragColor = vec4(
    channel(p, time*0.7),
    channel(p, time*0.9+1.0),
    channel(p, time*1.1+2.0),
    1.0);
}
`);

More demos in this CodePen Collection

Webbed Briefs – Brief videos about web technologies and how to make the most of them.

Heydon is back with a new project named “Webbed Briefs”:

WEBBED BRIEFS are brief videos about the web, its technologies, and how to make the most of them. They’re packed with information, fun times™, and actual goats. Yes, it’s a vlog, but it isn’t on Youtube. Unthinkable!

The first video is entitled “What Is ARIA Even For?”, and indicates where this is headed: tons of information, fast paced, lots of mindfarts, and quite a lot of cursing …

Webbed Briefs →

How to embed AV1 Image File Format (AVIF) images

New in Chromium 85 is support for the AV1 Image File Format (AVIF), which is pretty impressive:

AVIF offers significant file size reduction for images compared with JPEG or WebP; ~50% savings compared to JPEG, and ~20% savings compared to WebP.

🦊 Using Firefox and can’t wait to use AVIF images? Set the image.avif.enabled flag to true to enable experimental support for it.

Time to tweak the modern way to embedding images a bit, and add AVIF in there:

<picture>
  <source srcset="/images/cereal-box.avif" type="image/avif" />
  <source srcset="/images/cereal-box.webp" type="image/webp" />
  <img src="/images/cereal-box.jpg" alt="Description of Photo" />
</picture>

The browser will load the first source it can interpret, eventually falling back to the JPG if none are supported.

☝️ Now that Safari is about to support WebP in version 14, the image/jp2 image that was in the original snippet was also dropped.

How to Use AVIF: The New Next-Gen Image Compression Format →

UPDATE 2020.09.08: Jake Archibald just released an extensive post on AVIF packed with examples and comparisons, worth checking out.