9333ea

Drop #620 (2025-03-12): Welcome To Websday

Unsafe At Any Speed; It’s All Relative; Terminally Web

O M Gosh we have another themed Drop!

Today, we take a look at some web-centric developments, and a very critical look at one in particular.

TL;DR

(This is an AI-generated summary of today’s Drop using Ollama + llama 3.2 and a custom prompt.)

• Microsoft announced a TypeScript native port in Go that will drastically improve editor startup, reduce most build times by 10x, and substantially reduce memory usage, with TypeScript 7.0 planned to introduce the native implementation by mid-2025 (https://devblogs.microsoft.com/typescript/typescript-native-port/).
• CSS Relative Colors is a new feature that enables dynamic color generation based on other colors, eliminating the need for preprocessors when modifying colors, with syntax like color-function(from origin-color channel1 channel2 channel3 / alpha) (https://ishadeed.com/article/css-relative-colors/).
• WebTUI is a new project providing terminal-styled components for web interfaces, including form elements, navigation components, and data display elements with terminal aesthetics, supporting modern color schemes like Catppuccin and Nord (https://webtui.ironclad.sh/).

Unsafe At Any Speed

Normally I’d suggest that you’d have to be living under a rock to not know that Microsoft just announced a 10x speedup for TypeScript. But, these are far from normal times, and we’ve been jamming at least a week’s worth of newsmaking events into a single 24-hour period since January 20th, so you can most certainly be forgiven for not knowing this already.

This speedup is due to a full rewrite of the TypeScript compiler in Go (which now explains why Microsoft bothered to start a very lame Go blog), and it’s not just all about compilation speed.

Editor startup time (which should theoretically apply to some degreed to real editors as well as VS Code) is about 8x faster when loading large projects, and memory usage is roughly half of the current implementation.

This new Go version will take over when TypeScript turns 7.0.

While I have begrudginly switched at least half of my JS dev to TypeScript (thanks to Deno and Bun), that doesn’t mean it still is not a Potemkin type village.

TypeScript’s type system completely disappears at runtime, creating several blind spots.

Take array indexing:

const array = [1, 2, 3];const value = array[100]; // TypeScript thinks this is a number, but it's undefined at runtime

TypeScript cannot verify the shape of data coming from external sources:

// TypeScript assumes this matches the User type, but the API could return anythingfetch('/api/user')  .then(res => res.json())  .then((data: User) => {    // No runtime validation happens here    console.log(data.name.toUpperCase()); // Runtime error if data.name is undefined  });

And, beacuse this is Microsoft and they don’t really care about anything, you can just bypass types in TypeScript if you want:

function test(x: number) {  console.log(typeof x);}let y: any = '1';test(y); // No compile error, but causes unexpected behavior at runtime

If you want real safety, you have to do what we R folk have to do and test and guard religiously (something I tend to reserve for production-level R project since it’s a royal pain).

TypeScript is primarily designed to catch errors during development, not to provide runtime guarantees. For truly robust applications, you need both TypeScript’s static analysis and explicit runtime validation, especially at system boundaries where data enters or leaves your application.

So, regardless of this new Go port, TypeScript is still unsafe at any speed.

It’s All Relative

CSS Relative Colors is a new feature in CSS lets us generate colors dynamically based on other colors. This capability eliminates the need for CSS preprocessors like Sass when working with color modifications.

Ahmad Shadeed did a bang up job creating this interactive guide to CSS Relative Colors. We’ll condense some of the info here, but you should 100% hit up Ahmad’s post to get the full picture.

Traditionally, we’ve been faced with two main challenges when working with colors in CSS. Modifying opacity of hex colors required either using preprocessors or creating complex CSS variable structures; and, creating lighter/darker variations of colors required manually picking new colors with a color picker, which was time-consuming and super inefficient.

The new relative colors syntax follows this pattern:

color-function(from origin-color channel1 channel2 channel3 / alpha(optional))

For example, to create a black color with 10% transparency:

border-color: rgb(from #000 r g b / 0.1);

That syntax essentially says: “Get the RGB values from #000 and change the alpha to 0.1.”

You can use calc() with relative colors to modify any color channel:

/* Make a color lighter by increasing lightness by 10 */background-color: hsl(from #9333ea h s calc(l + 10));/* Make a color darker by decreasing lightness by 10 */background-color: hsl(from #9333ea h s calc(l - 10));

CSS Relative Colors also works with different color spaces, and when using them, the computed color for HSL remains in the sRGB color space, while for LCH and OKLCH, the computed color remains in their respective color spaces.

Since relative colors are relatively new, color-mix() can be used as a fallback:

.button {  border-color: color-mix(in srgb, #000 10%, transparent);  @supports (color: rgb(from #000 r g b / 0.1)) {    border-color: rgb(from #000 r g b / 0.1);  }}

This is a neat and welcome capability, and you’ll learn tons more in Ahmad’s post.

Terminally Web

WebTUI (GH) is a super new project that hopes to eventually provide a comprehensive collection of terminal-styled components for web interfaces.

While still in its early stages of development, WebTUI promises to deliver a range of components including:

• Form elements with terminal styling
• Navigation components like dialogs and drawers
• Data display elements with that classic terminal look
• Visual elements that maintain the terminal aesthetic
• Pure CSS ASCII loaders with step animations

Beyond the classic black and white terminal look, WebTUI intends to support modern color schemes like Catppuccin, Nord, and Rose Pine — perfect for creating interfaces that balance nostalgia with contemporary design sensibilities.

Why Terminal UI for the web in 2025? As Lucy (from Peanuts) might say, I’ve got five reasons for you (though, mine do not result in volence):

• Providing distraction-free environments for focused tasks
• Offering keyboard-centric navigation for power users
• Creating distinctive, memorable user experiences
• Reducing visual clutter and cognitive load
• Evoking a sense of old school authenticity

I’m going to wait a bit to toss up an example, but will add a note or section to a future Drop when I do.

FIN

Remember, you can follow and interact with the full text of The Daily Drop’s free posts on:

• 🐘 Mastodon via @[email protected]
• 🦋 Bluesky via https://bsky.app/profile/dailydrop.hrbrmstr.dev.web.brid.gy

Also, refer to:

• this post, and
• this post

to see how to access a regularly updated database of all the Drops with extracted links, and full-text search capability. ☮️

#000 #9333ea