News
Entertainment
Science & Technology
Life
Culture & Art
Hobbies
News
Entertainment
Science & Technology
Culture & Art
Hobbies
Computing with tuples in TypeScript
JavaScript’s Arrays are so flexible that TypeScript provides two different kinds of types for handling them: Array types for arbitrary-length sequences of values that all have the same type – e.g.: Array<string> Tuple types for fixed-length sequences of values where each one may have a different type – e.g.: [number, string, boolean] In this blog post, we look at the latter – especially how to compute with tuples at the type level.
Template literal types in TypeScript: parsing during type checking and more
In this blog post, we take a closer look at template literal types in TypeScript: While their syntax is similar to JavaScript’s template literals, they operate at the type level. Their use cases include: Static syntax checking for string literals Transforming the casing of property names (e.g. from hyphen case to camel case) Concisely specifying large string literal union types
ECMAScript proposal: RegExp escaping
The ECMAScript proposal “RegExp escaping” (by Jordan Harband and Kevin Gibbons) specifies a function RegExp.escape() that, given a string text, creates an escaped version that matches text – if interpreted as a regular expression. This proposal is currently at stage 3.
A checklist for your `tsconfig.json`
In order to feel more confident about my tsconfig.json, I decided to go through the tsconfig.json documentation, collect the most important options and describe them below: You can come along for the whole ride. Or you can skip ahead to the summary at the end. I also list recommendations for tsconfig.json by several other people. I’m curious what your experiences with tsconfig.json are: Do you agree with my recommendations? Did I miss anything?
ECMAScript feature: regular expression pattern modifiers
Traditionally, we could only apply regular expression flags such as i (for ignoring case) to all of a regular expression. The ECMAScript feature “Regular Expression Pattern Modifiers” (by Ron Buckton) enables us to apply them to only part of a regular expression. In this blog post we examine how they work and what their use cases are. Regular expression pattern modifiers attributes reached stage 4 in October 2024 and will probably be part of ECMAScript 2025.
ECMAScript feature: import attributes
The ECMAScript feature “Import Attributes” (by Sven Sauleau, Daniel Ehrenberg, Myles Borins, Dan Clark and Nicolò Ribaudo) helps with importing artifacts other than JavaScript modules. In this blog post, we examine what that looks like and why it’s useful. Import attributes reached stage 4 in October 2024 and will probably be part of ECMAScript 2025.
Mastodon’s weaknesses and how to fix them
As a web developer, I love Mastodon: Since Twitter became X, there are enough web dev people here. I’m happy with the web app – it even has several nice touches where it is better than Twitter. I’m not locked into an ecosystem that is controlled by a single company. That being said, Mastodon still has several major weaknesses. In this blog post, I collect those and explain what’s being done to fix them. It is not meant to be exhaustive: If there is a weakness that affects you and isn’t mentioned here, then please let us know in the comments.
ECMAScript 2024 features: resizing and transferring ArrayBuffers
In this blog post, we examine ArrayBuffer features that were introduced in ECMAScript 2024: “In-place resizable ArrayBuffers”, proposed by Shu-yu Guo “ArrayBuffer.prototype.transfer and friends” proposed by Shu-yu Guo, Jordan Harband and Yagiz Nizipli
ECMAScript proposal: duplicate named capturing groups for regular expressions
In this blog post, we take a look at the ECMAScript 2025 feature “Duplicate named capturing groups” which was proposed by Kevin Gibbons. It’s a feature for regular expressions that enables us to use the same capture group name more than once. The only restriction is that duplicates must exist in different alternatives – in other words: At any time, there can’t be more than one capture with a given name. Why is that useful? It lets us reuse regular expression fragments and match-processing code between alternatives.
ECMAScript proposal: iterator helpers
In this blog post, we look at the ECMAScript proposal “Iterator helpers” by Gus Caplan, Michael Ficarra, Adam Vandolder, Jason Orendorff, Kevin Gibbons, and Yulia Startsev. It introduces utility methods for working with iterable data: .map(), .filter(), .take(), etc. The style of the proposed API clashes with the style of the current iteration API. We’ll explore how we can fix that.
How do primitive values get their properties?
JavaScript has two kinds of values: primitive values (undefined, null, booleans, numbers, bigints, strings, symbols) objects (all other values) The ECMAScript specification states: A primitive value is a datum that is represented directly at the lowest level of the language implementation. However, despite this fact, we can still use primitive values (other than undefined and null) as if they were immutable objects: > 'xy'.length 2 This blog post answers the following question: How do primitive values get their properties? We’ll look at: Getting property values Invoking property values (a.k.a. method calls) Setting property values Each time, we’ll first examine what’s going on via JavaScript code and then investigate how the language specification explains the phenomena. Note that JavaScript engines only mimick the external behavior of the language specification. Some of what the spec does internally is not very efficient (e.g. wrapping primitive values) and often done differently in engines.
RFC 9239: Updates to ECMAScript media types
(This blog post is based on a tweet thread and additional input by Mathias Bynens.) After work started on it in August 2017, May 2022 finally saw the publication of RFC 9239 “Updates to ECMAScript media types” by Matthew A. Miller, Myles Borins, Mathias Bynens, and Bradley Farias. It updates JavaScript MIME type registrations to align with reality: The JavaScript MIME type is now unambiguously text/javascript. .mjs is now a registered filename extension, specifically for JavaScript modules. This unblocks tooling and server software like Apache to support JavaScript modules out of the box in a unified manner, like e.g. Node.js already does. Better industry alignment on MIME type and file extensions increases interoperability across tooling and other software.
First look: adding type annotations to JavaScript
The ECMAScript proposal “Types as comments” (by Gil Tayar, Daniel Rosenwasser, Romulo Cintra, Rob Palmer, and others) is about adding type annotations to JavaScript (there is also an accompanying blog post). Such type annotations would look similar to TypeScript’s and Flow’s annotations and are completely ignored at runtime. In this blog post, I briefly explain how the proposed type annotations would work and then describe what I think about them.
Publishing and consuming ECMAScript modules via packages – the big picture
The ecosystem around delivering ECMAScript modules via packages is slowly maturing. This blog post explains how the various pieces fit together: Packages – JavaScript’s units for software distribution The three kinds of ECMAScript module specifiers Providing and using packages via module specifiers in Node.js, Deno and web browsers
ShadowRealms – an ECMAScript proposal for a better `eval()`
This blog post describes the ECMAScript proposal “ShadowRealm API” by Dave Herman, Caridy Patiño, Mark S. Miller, Leo Balter, and Rick Waldron. Class ShadowRealm provides a new way of evaluating code at runtime – think eval() but better: Each instance has its own global JavaScript scope. Code is evaluated in that scope. If it changes global data, that only affects the ShadowRealm, but not the real global data.
Using web streams on Node.js
Web streams are a standard for streams that is now supported on all major web platforms: web browsers, Node.js, and Deno. (Streams are an abstraction for reading and writing data sequentially in small pieces from all kinds of sources – files, data hosted on servers, etc.) For example, the global function fetch() (which downloads online resources) asynchronously returns a Response which has a property .body with a web stream. This blog post covers web streams on Node.js, but most of what we learn applies to all web platforms that support them.
A pipe operator for JavaScript: introduction and use cases
The proposal “Pipe operator (|>) for JavaScript” (by J. S. Choi, James DiGioia, Ron Buckton and Tab Atkins) introduces a new operator. This operator is an idea borrowed from functional programming that makes applying functions more convenient in many cases. This blog post describes how the pipe operator works and what its use cases are (there are more than you might expect!).
JavaScript metaprogramming with the 2022-03 decorators API
JavaScript decorators have finally reached stage 3! Their latest version is already supported by Babel and will soon be supported by TypeScript. This blog post covers the 2022-03 version (stage 3) of the ECMAScript proposal “Decorators” by Daniel Ehrenberg and Chris Garrett. A decorator is a keyword that starts with an @ symbol and can be put in front of classes and class members (such as methods). For example, @trace is a decorator: class C { @trace toString() { return 'C'; } } A decorator changes how the decorated construct works. In this case, every invocation of .toString() will be “traced” (arguments and result will be logged to the console). We’ll see how @trace is implemented later.
TypeScript and native ESM on Node.js
In this blog post, I’ll explain everything you need to know in order to use and produce native ECMAScript modules on Node.js. The GitHub repository iterable is an example of a TypeScript ESM package that works on Node.js. It still uses the "typesVersions" workaround (which isn’t needed in TypeScript 4.7 and later).
`structuredClone()`: deeply copying objects in JavaScript
Spreading is a common technique for copying objects in JavaScript: Spreading into an Array literal to copy an Array Spreading into an Object literal to copy a plain object Spreading has one significant downside – it creates shallow copies: The top levels are copied, but property values are shared. structuredClone() is a new function that will soon be supported by most browsers, Node.js and Deno. It creates deep copies of objects. This blog post explains how it works.
Processing Arrays non-destructively: `for-of` vs. `.reduce()` vs. `.flatMap()`
In this blog post, we look at three ways of processing Arrays: The for-of loop The Array method .reduce() The Array method .flatMap() The goal is to help you choose between these features whenever you need to process Arrays. In case you don’t know .reduce() and .flatMap() yet, they will both be explained to you. In order to get a better feeling for how these three features work, we use each of them to implement the following functionality: Filtering an input Array to produce an output Array Mapping each input Array element to one output Array element Expanding each input Array element to zero or more output Array elements Filter-mapping (filtering and mapping in one step) Computing a summary for an Array Finding an Array element Checking a condition for all Array elements Everything we do is non-destructive: The input Array is never changed. If the output is an Array, it is always freshly created.