Latest Articles

Script Integrity

By Chris Coyier on July 5, 2024

Polyfill.io recently served malicious code, redirecting users to inappropriate sites. Subresource Integrity (SRI) can help prevent such issues by verifying script integrity.

Color CSS Dark Theme Email

Why is this thing in Dark Mode?

By Chris Coyier on July 3, 2024

The website has the most control, since that’s what applies the CSS. But browsers also have a Dark/Light/System setting, and that can fall through to the OS/Device.

HTML JavaScript Performance Video Web Components

YouTube Embeds are Bananas Heavy and it’s Fixable

By Chris Coyier on July 1, 2024

Which one makes more sense to use, big and slow or small and fast? Especially with the same appearance and functionality, the youtube-lite component is a no-brainer.

Browser Support JavaScript

Browser Support Tests in JavaScript for Modern Web Features

By Chris Coyier on June 28, 2024

Sometimes it’s good to know when a browser feature is supported or not so you can do something. Perhaps load a polyfill or just choose a slightly different approach. This post looks at newish features in browsers and shows the test.

conic-gradient()CSS Typography

A Text-Reveal Effect Using conic-gradient() in CSS

By Preethi Sam on June 26, 2024

This article explores creating a typographic effect that “reveals” text in an interesting animated way.

CSS HTML Popup

Popovers Work Pretty Nicely as Slide-Out Drawers

By Chris Coyier on June 24, 2024

Especially on mobile, the slide-out drawer UI/UX seems like a perfect fit for a popover, and works fine on desktop too.

CSS

Pure CSS Circular Text (without Requiring a Monospace Font)

By Amit Sheen on June 21, 2024

Setting text on a circle in CSS isn’t straightforward, but it is possible with some effort. This technique splits text into segments and uses transforms and perspective to pull it off.

Almost every site has at least one third-party script on it, and the average is 5. I’ve taken that from the blog post Introducing Nuxt Scripts from Harlan Wilton. While third-party scripts are a performance and security drain, they are, as Harlan puts it “fundamentally useful and aren’t going anywhere soon.”

Typically, you just chuck a third-party script in the HTML somewhere with a <script> tag that is high enough up that any usage of it comes after. But these days, with JavaScript frameworks abound, loading and using them is far more complicated. I applaud Nuxt for taking this head on and providing sensible helpers for them. Loading triggers and callbacks, types, bundling, etc.

Looks like it’s on the roadmap, but getting Partytown in there to gets the scripts off the main thread would be very good.

A Chrome extension that “steals” a button from every website you open. Button Stealer works automatically. Do your usual everyday online stuff and watch the collection of your stolen buttons grow. It’s fun, useless, and free!

Little boosts of front-end development news, information, and advice — right to your feed reader of choice.

RSS

Chrome is experimentally shipping with Gemini Nano, their smallest Large Language Model (LLM) baked right in, then offer APIs to use it.

In Chrome, these APIs are built to run inference against Gemini Nano with fine-tuning or an expert model. Designed to run locally on most modern devices, Gemini Nano is best for language-related use cases, such as summarization, rephrasing, or categorization.

It’s an API most, with methods you call and get responses. Raymond Camden had a look:

const model = await window.ai.createTextSession();
await model.prompt("Who are you?");

// I am a large language model, trained by Google.Code language: JavaScript (javascript)

Using AI in this way means 1) it’s fast (no network trip) 2) it works offline 3) it’s private (maybe) 4) it’s free to use.

I admit that’s awfully compelling. I suspect this will happen and will be very highly used.

Don’t we need to think about standards here though? What if Apple ships window.ai.instantiateIntelligence() with an .ask() method? And Firefox ships navigator.llm('dolly').enqueueQuery()? I’d just like to remind everyone that when browser just ship whatever and compete on proprietary features, everybody loses.

I’m first hearing about the CloseWatcher API after running across Abdelrahman Awad’s blog post about it. The MDN docs are quite direct, making the purpose clear:

Some UI components have “close behavior”, meaning that the component appears, and the user can close it when they are finished with it. For example: sidebars, popups, dialogs, or notifications.

Users generally expect to be able to use a particular mechanism to close these elements, and the mechanism tends to be device-specific. For example, on a device with a keyboard it might be the Esc key, but Android might use the back button.

So rather than bind an closing action to the Esc key, use this API, which normalizes that user action across platforms.

I also like how it automatically creates a “stack” of things to close. So if there are multiple closeable things open, a close event only closes the most recently open one. I made a demo to play with this (note the Chrome-n-friends only support!).

Wanna write?

Here's our page on guest writing. It's a win-win-win!

Latest Articles

Script Integrity

Why is this thing in Dark Mode?

YouTube Embeds are Bananas Heavy and it’s Fixable

Browser Support Tests in JavaScript for Modern Web Features

A Text-Reveal Effect Using conic-gradient() in CSS

Popovers Work Pretty Nicely as Slide-Out Drawers

Pure CSS Circular Text (without Requiring a Monospace Font)

The Beat

Subscribe

Wanna write?

Did you know?

Latest Articles

Script Integrity

Why is this thing in Dark Mode?

YouTube Embeds are Bananas Heavy and it’s Fixable

Browser Support Tests in JavaScript for Modern Web Features

A Text-Reveal Effect Using conic-gradient() in CSS

Popovers Work Pretty Nicely as Slide-Out Drawers

Pure CSS Circular Text (without Requiring a Monospace Font)

The Beat

Third Party Scripts

Button Stealer

AI in Chrome

CloseWatcher