Code Computerlove logo Front End Tools & Docs

TypeScript 5.5 beta is out!

Microsoft have announced that TypeScript 5.5 beta is officially out! It comes with some interesting things, such as:

Inferred Type Predicates

For those cases where you might want to filter an array by checking whether a property of it is undefined, previously TS wouldn't know that you had filtered out the undefined parts. This works because TypeScript now infers a type predicate for the filter function.

Inferred Type Predicates
function makeBirdCalls(countries: string[]) {
  // birds: Bird[]
  const birds = countries
    .map(country => nationalBirds.get(country))
    .filter(bird => bird !== undefined);


  for (const bird of birds) {
    bird.sing();  // ok!
  }
}

Control Flow Narrowing for Constant Indexed Accesses

A long title but what this boils down to is that you can now narrow down the Type for an obj[key] pattern without TS erroring:

Control Flow Narrowing for Constant Indexed Accesses
function f1(obj: Record<string, unknown>, key: string) {
    if (typeof obj[key] === "string") {
        // Now okay, previously was error
        obj[key].toUpperCase();
    }
}

There are a few other bits and pieces so take a read of the article. One other feature I thought might be handy is that TS now includes some basic regex syntax checks! Previously, TS would ignore regex but now you will get some basic syntax checks in your code!

Basic Regex Syntax Checks
let myRegex = /@robot(\s+(please|immediately)))? do some task/;
//                                            ~
// error!
// Unexpected ')'. Did you mean to escape it with backslash?

JavaScript Visualised - Event Loop, Web APIs, (Micro)task Queue

I came across this awesome video this week that does an amazing job of breaking down how the Event Loop works and why things don't always compute the way you expect. Philip Roberts did a great breakdown a long time ago but it's quite technically, and certainly not as well visualised (in my opinion) as this one.

Something a lot mathy

Here's an awesome blog post about animation smoothing. Something that sounds quite simple can actually be rather complicated to achieve. Some of this went way over my head but I really enjoyed the concepts and the breadown of how the easing could be achieved.

If you find yourself getting a bit lost with all this (as I did) Theo has a video where he talks through the blog post and goes into a bit more detail.

Jhey's Spot

This week, how would you like to spend some time popping balloons? Of course, in order to learn how the popover API works because learning can be fun!

Each wave is a [popover] and the Golden Bear opens a new [popover] keeping the chain alive

Your job is to find the Golden Bear and pop their balloon in order to progress to the next level. This is just HTML and CSS (the JS is just used for randomness on reload.

See the Pen Poppin' Bears w/ the Popover API [A CSS Game] by Jhey (@jh3y) on CodePen.

This is a lot more difficult with a trackpad than a mouse!

Jake Archibald - HTML Attributes vs Properties

Jake has written a really informative article on the importance differences between attributes and properties in HTML.

Attributes and properties are fundamentally different things. You can have an attribute and property of the same name set to different values.

It seems like fewer and fewer developers know this, partially thanks to frameworks

HTML Attributes vs Properties
<input className="…" type="…" aria-label="…" value="…" />

If you do the above in a framework's templating language, you're using attribute-like syntax, but under the hood it'll sometimes be setting the property instead, and when it does that differs from framework to framework.

But it's important to know the differences and where frameworks might set them as attributes, properties, or sometimes both. Other things to consider are:

  • HTML Serialisation - Attributes serialise to HTML, whereas properties don't.
  • Value types - In order to work in the serialised format, attribute values are always strings, whereas properties can be any type.
  • Case sensitivity - Attribute names are case-insensitive, whereas property names are case-sensitive.
  • Naming differences - Sometimes properties and attributes have different names for the same thing (think el.ariaLabel and aria-label).
  • value on input fields - value is a fun one. There's a value property and a value attribute. However, the value property does not reflect the value attribute. Instead, the defaultValue property reflects the value attribute.

Read more about it here.

AI Tools

I've had a look at a couple of AI tools that seem to be alternatives to Copilot. Not had chance to check them out yet:

  • Supermaven - says it's fast and good but I feel like the paid version gives the most value
  • watsonx - again, boats speed and context but not much info really
  • tabnine - private and personal, $12 per month for pro so not bad

My projects on the go

  • Front End tools upgrade - need to get the tools working properly on the live site
  • Front End challenges website
  • API flattener tool needs upgrading
  • Keeping the starters upgraded!