TIL links from MDN web docs

List of pages on MDN where I learned something new or came across something interesting that I was reminded of.

(This could have been posted in the main resources section)

fetchPriority

The fetchPriority property of the HTMLImageElement interface represents a hint given to the browser on how it should prioritize the fetch of the image relative to other images.

(experimental - but quite good support for now)

MessageChannel

The MessageChannel interface of the Channel Messaging API allows us to create a new message channel and send data through it via its two MessagePort properties.

Dialog

I’ve used this a few times, but thought its worth adding to this list.

The

HTML element represents a dialog box or other interactive component, such as a dismissible alert, inspector, or subwindow.

Array.at()

I swear I remember learning it from a while back, but I rarely see it. I came across it again, and forgot I already knew it, so I added it here.

Very useful for getting final item in an array.

The at() method takes an integer value and returns the item at that index, allowing for positive and negative integers. Negative integers count back from the last item in the array.

block formatting context

A block formatting context (BFC) is a part of a visual CSS rendering of a web page. It’s the region in which the layout of block boxes occurs and in which floats interact with other elements.

HTMLImageElement.fetchPriority

The fetchPriority property of the HTMLImageElement interface represents a hint given to the browser on how it should prioritize the fetch of the image relative to other images.

queueMicrotask

Not exactly a niche topic but interesting to read up on queueMicrotask and how it works.

The queueMicrotask() method, which is exposed on the Window or Worker interface, queues a microtask to be executed at a safe time prior to control returning to the browser’s event loop.

text-rendering (CSS)

The text-rendering CSS property provides information to the rendering engine about what to optimize for when rendering text.

The browser makes trade-offs among speed, legibility, and geometric precision.

text-rendering: auto; /*The browser makes educated guesses about when to optimize for speed, legibility, and geometric precision while drawing text*/

text-rendering: optimizeSpeed;

text-rendering: optimizeLegibility; /*The browser emphasizes legibility over rendering speed and geometric precision. This enables kerning and optional ligatures.*/

text-rendering: geometricPrecision; /* The browser emphasizes geometric precision over rendering speed and legibility. this value can make text using those fonts look good*/