A rather geeky/technical weblog, est. 2001, by Bramus
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 website is a single HTML file. It simply uses the
#anchorsuffix (from 1992) and the:targetCSS 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! 🤩
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.
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.
If you’re not entirely familiar with CORS, this guide by Lydia Hallie will explain it to you using lots of visuals.
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.
This message by Elaina Natario writing over at Thoughtbot cannot be repeated enough:
While both the
altattribute and thefigcaptionelement provide a way to describe images, the way we write for them is different.altdescriptions should be functional;figcaptiondescriptions should be editorial or illustrative.
Examples of both functional and editorial descriptions in the full post!
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
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 …
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.