2ality – JavaScript and more 2025-10-27T00:00:00.000Z Dr. Axel Rauschmayer https://2ality.com/ [Web dev for beginners] Node.js https://2ality.com/2025/10/nodejs.html 2025-10-27T00:00:00.000Z <p><em>Node.js</em> is a program that lets us run JavaScript code outside browsers – which we can use for a variety of things.</p> [Web dev for beginners] Shells https://2ality.com/2025/10/shells.html 2025-10-26T00:00:00.000Z <p>A <em>shell</em> provides a text-based way of interacting with the operating system. In this chapter, we explore how shells work and why we need them for web development.</p> [Web dev for beginners] CSS layout: flexbox, grid, media queries and container queries https://2ality.com/2025/10/css-layout.html 2025-10-22T00:00:00.000Z <p>CSS provides a variety of services for web content:</p> <ul> <li>In the previous chapter, we used it to format content: to change colors, typefaces, etc.</li> <li>In this chapter, we will use it to lay out content: to place HTML elements on a page.</li> </ul> [Web dev for beginners] CSS: Learn the essentials quickly https://2ality.com/2025/10/css-basics.html 2025-10-10T00:00:00.000Z <p>In the previous chapter, we used HTML to create unformatted content. In this chapter, we use CSS to configure the <em>style</em> of that content: We can change the color of the background, use various fonts, add vertical spacing, etc.</p> <p>This chapter covers a lot of ground relatively quickly: It’ll be fun to explore how HTML can be styled and you’ll have a solid foundation after reading it.</p> Taking SVG “screenshots” of HTML elements https://2ality.com/2025/09/svg-screenshots.html 2025-09-29T00:00:00.000Z <p>I was looking for a way to create images (think screenshots) of CSS layouts that I can use in HTML, EPUB and PDF files. This blog post describes my solution – which produces SVG images.</p> CSS wish: inner breakpoints https://2ality.com/2025/09/css-inner-breakpoints.html 2025-09-26T00:00:00.000Z <p>In this blog post, I’d like to talk about CSS: I wish it supported <em>inner breakpoints</em> – breakpoints not for viewports or containers but for HTML elements inside viewports or containers.</p> [Web dev for beginners] HTML: Learn the essentials quickly https://2ality.com/2025/09/html-basics.html 2025-09-23T00:00:00.000Z <p>In this chapter, we learn how to create web pages via HTML.</p> [Web dev for beginners] Getting started https://2ality.com/2025/09/learning-web-dev-getting-started.html 2025-09-22T00:00:00.000Z <p>In this chapter, we perform a few steps to prepare us for web development.</p> [Web dev for beginners] Version control via Git and GitHub https://2ality.com/2025/09/git-github.html 2025-09-18T00:00:00.000Z <p>In this chapter, we learn how to use the version control system <em>Git</em> and a useful companion website, <em>GitHub</em>. Both are important tools when programming in teams but even help programmers who work on their own.</p> [Web dev for beginners] Markdown https://2ality.com/2025/09/markdown.html 2025-09-17T00:00:00.000Z <p>In this chapter, we explore <em>Markdown</em>, a lightweight markup language that’s easy to learn and used a lot when writing about programming: documentation, comments, etc. We’ll need it in the next chapter. Learning it may seem like a detour but it’s easy to pick up and you’ll come across it often if you are interested in web development.</p> [Web dev for beginners] Package managers https://2ality.com/2025/09/native-package-managers.html 2025-09-16T00:00:00.000Z <p>In this chapter, we install a <em>package manager</em>. That gives us access to all kinds of software.</p> [Web dev for beginners] Authenticating users with plain Node.js https://2ality.com/2025/09/authenticating-users-nodejs.html 2025-09-15T00:00:00.000Z <p>In this chapter, we learn how to write a server that lets users log in via passwords. That process is called <em>authentication</em>.</p> [Web dev for beginners] Implementing web servers https://2ality.com/2025/09/implementing-web-servers.html 2025-09-12T00:00:00.000Z <p>In this chapter, we’ll write our own web server: It will serve files and manage the data for a browser app.</p> [Web dev for beginners] Frontend frameworks https://2ality.com/2025/09/frontend-frameworks.html 2025-09-09T00:00:00.000Z <p>In this chapter, we’ll take a look at <em>frontend frameworks</em> – libraries that help with programming web user interfaces (“frontend” means “browser”, “backend” means “server”). We’ll use the frontend framework <em>Preact</em> to implement the frontend part of a todo list app – whose backend part we’ll implement in a future chapter.</p> [Web dev for beginners] Installing npm packages and bundling https://2ality.com/2025/09/npm-packages-bundling.html 2025-09-07T00:00:00.000Z <p>In this chapter we develop a small web app in the same way that large professional web apps are developed:</p> <ul> <li>We use libraries that we install via npm.</li> <li>We write tests for some of the functionality.</li> <li>We combine all JavaScript code into a single file before we serve the web app. That is called <em>bundling</em>. (Why we do that it explained later.)</li> </ul> [Web dev for beginners] Asynchronous JavaScript – Promises and async functions https://2ality.com/2025/09/javascript-async.html 2025-09-02T00:00:00.000Z <p>In this chapter, we learn how to handle tasks that take a long time to complete – think downloading a file. The mechanisms for doing that, <em>Promises</em> and <em>async functions</em> are an important foundation of JavaScript and enable us to do a variety of interesting things.</p> [Web dev for beginners] JSON and processing files in Node.js https://2ality.com/2025/08/javascript-json-processing-files.html 2025-08-31T00:00:00.000Z <p>In this chapter, we explore the popular data format <em>JSON</em>. And we implement shell commands via Node.js that read and write files.</p> [Web dev for beginners] JavaScript Maps https://2ality.com/2025/08/javascript-maps.html 2025-08-30T00:00:00.000Z <p>In this chapter, we’ll explore the data structure <code>Map</code> (a class) which lets us translate (“map”) from an input value to an output value. We’ll use a Map to display text upside-down in a terminal!</p> [Web dev for beginners] JavaScript exceptions https://2ality.com/2025/08/javascript-exceptions.html 2025-08-29T00:00:00.000Z <p>In this chapter, we look at <em>exceptions</em> in JavaScript. They are a way of handling errors. We’ll need them for the next chapter.</p> JavaScript’s trademark problem https://2ality.com/2025/08/javascript-trademark.html 2025-08-29T00:00:00.000Z <p>In this blog post, we discuss Oracle’s trademark of the word “JavaScript”:</p> <ul> <li>What are the problems caused by that trademark?</li> <li>How can we fix those problems?</li> </ul> [Web dev for beginners] Plain objects in JavaScript https://2ality.com/2025/08/javascript-plain-objects.html 2025-08-28T00:00:00.000Z <p>In this chapter, we learn how to create <em>plain objects</em> with properties. We use them to create a simple flash card app.</p> [Web dev for beginners] Modules and testing in JavaScript https://2ality.com/2025/08/javascript-modules-testing.html 2025-08-27T00:00:00.000Z <p>So far, all of our JavaScript code resided in a single file – be it an <code>.html</code> file or a <code>.js</code> file. In this chapter, we learn how to split it up into multiple files. And how to automatically test if the code we write is correct.</p> [Web dev for beginners] Using web servers and npm https://2ality.com/2025/08/web-servers.html 2025-08-26T00:00:00.000Z <p>In this chapter, we run a web server on our own computer and use it to serve a web app.</p> [Web dev for beginners] Loops in JavaScript https://2ality.com/2025/08/javascript-loops.html 2025-08-23T00:00:00.000Z <p>In this chapter, we learn how to do things repeatedly in JavaScript.</p> [Web dev for beginners] Booleans, comparisons and <code>if</code> statements in JavaScript https://2ality.com/2025/08/javascript-booleans-comparisons-if.html 2025-08-20T00:00:00.000Z <p>In this chapter, we learn about tools for only running a piece of code if a condition is met: truth values (booleans), comparisons and <code>if</code> statements.</p> [Web dev for beginners] Arrays in JavaScript https://2ality.com/2025/08/javascript-arrays.html 2025-08-18T00:00:00.000Z <p>In this chapter we look at one way of storing more than one value in a variable: <em>arrays</em>.</p> [Web dev for beginners] Strings and methods in JavaScript https://2ality.com/2025/08/javascript-strings-methods.html 2025-08-17T00:00:00.000Z <p>In the last chapter, we worked with numbers. In this chapter, we’ll work with text and write our first applications.</p> [Web dev for beginners] Numbers, variables, functions in JavaScript https://2ality.com/2025/08/javascript-numbers-variables-functions.html 2025-08-15T00:00:00.000Z <p>In this chapter, we take the very first steps with JavaScript and learn about numbers, variables and functions.</p> New series of blog posts: “Web development for beginners” https://2ality.com/2025/08/learning-web-dev-toc.html 2025-08-14T00:00:00.000Z <p>This blog post provides an overview of my new series of blog posts called “Web development for beginners”.</p> Ecma International approves ECMAScript 2025: What’s new? https://2ality.com/2025/06/ecmascript-2025.html 2025-06-26T00:00:00.000Z <p>On 25 June 2025, the 129th Ecma General Assembly approved the ECMAScript 2025 language specification (<a href="https://ecma-international.org/news/ecma-international-approves-new-standards-11/">press release</a>, <a href="https://github.com/tc39/ecma262/releases/tag/es2025">GitHub release</a>), which means that it’s officially a standard now.</p> <p>This blog post explains what’s new.</p> Tips for making regular expressions easier to use in JavaScript https://2ality.com/2025/06/javascript-regexp-tips.html 2025-06-24T00:00:00.000Z <p>In this blog post, we explore ways in which we can make regular expressions easier to use.</p> TypeScript: checking Map keys and Array indices https://2ality.com/2025/06/checking-map-keys-array-indices-typescript.html 2025-06-21T00:00:00.000Z <p>JavaScript has two common patterns:</p> <ul> <li>Maps: We check the existence of a key via <code>.has()</code> before retrieving the associated value via <code>.get()</code>.</li> <li>Arrays: We check the length of an Array before performing an indexed access.</li> </ul> <p>These patterns don’t work as well in TypeScript. This blog post explains why and presents alternatives.</p> How TypeScript solved its global <code>Iterator</code> name clash https://2ality.com/2025/06/typescript-iterator-types.html 2025-06-18T00:00:00.000Z <p>In ECMAScript 2025, JavaScript gets a class <code>Iterator</code> with iterator helper methods. This class conflicts with TypeScript’s existing types for iterators. In this blog post, we explore why that is and how TypeScript solves that conflict.</p> Styling console text in Node.js https://2ality.com/2025/05/ansi-escape-sequences-nodejs.html 2025-05-15T00:00:00.000Z <p>In this blog post, we explore how we can style text that we log to the console in Node.js.</p> <p>Some of the examples use a Unix shell but most of the code should also work on Windows.</p> Converting values to strings in JavaScript has pitfalls https://2ality.com/2025/04/stringification-javascript.html 2025-04-29T00:00:00.000Z <p>Converting values to strings in JavaScript is more complicated than it might seem:</p> <ul> <li>Most approaches have values they can’t handle.</li> <li>We don’t always see all of the data.</li> </ul> Deploying TypeScript: recent advances and possible future directions https://2ality.com/2025/04/deploying-typescript-present-future.html 2025-04-13T00:00:00.000Z <p>In this blog post we look at:</p> <ul> <li>The current best practice for deploying library packages: <code>.js</code>, <code>.js.map</code>, <code>.d.ts</code>, <code>.d.ts.map</code>, <code>.ts</code></li> <li>Recent new developments in compiling and deploying TypeScript: type stripping, isolated declarations, JSR, etc.</li> <li>What the future of deploying TypeScript might look like: type stripping in browsers, etc.</li> </ul> Ideas for making TypeScript better at testing types https://2ality.com/2025/04/testing-types-typescript.html 2025-04-12T00:00:00.000Z <p>In this blog post, we examine how we can test types in TypeScript:</p> <ul> <li>First, we look at the library <code>asserttt</code> and the CLI tool <code>ts-expect-error</code>.</li> <li>Then, we consider which functionality could be built into TypeScript.</li> </ul> Could JavaScript have synchronous <code>await</code>? https://2ality.com/2025/03/sync-await.html 2025-03-28T00:00:00.000Z <p>In JavaScript, code has <em>color</em>: It is either synchronous or asynchronous. In this blog post, we explore:</p> <ul> <li>The problems caused by that</li> <li>How to fix them via synchronous <code>await</code></li> <li>The two downsides that prevent synchronous <code>await</code> from being practical</li> </ul> A closer look at the details behind the Go port of the TypeScript compiler https://2ality.com/2025/03/typescript-in-go.html 2025-03-11T00:00:00.000Z <p>Today’s <a href="https://devblogs.microsoft.com/typescript/typescript-native-port/">announcement</a> by Microsoft:</p> <blockquote> <p>[...] we’ve begun work on a native port of the TypeScript compiler and tools. The native implementation will drastically improve editor startup, reduce most build times by 10×, and substantially reduce memory usage.</p> </blockquote> <p>This blog post looks at some of the details behind the news.</p> Unions and intersections of object types in TypeScript https://2ality.com/2025/03/object-type-union-intersection.html 2025-03-04T00:00:00.000Z <p>In this blog post, we explore what unions and intersections of object types can be used for in TypeScript.</p> My sales pitch for TypeScript https://2ality.com/2025/03/typescript-sales-pitch.html 2025-03-02T00:00:00.000Z <p>Roughly, TypeScript is JavaScript plus type information. The latter is removed before TypeScript code is executed by JavaScript engines. Therefore, writing and deploying TypeScript is more work. Is that added work worth it? In this blog post, I’m going to argue that yes, it is. Read it if you are skeptical about TypeScript but interested in giving it a chance.</p> What is TypeScript? An overview for JavaScript programmers https://2ality.com/2025/02/what-is-typescript.html 2025-02-27T00:00:00.000Z <p>Read this blog post if you are a JavaScript programmer and want to get a rough idea of what using TypeScript is like (think first step before learning more details). You’ll get answers to the following questions:</p> <ul> <li>How is TypeScript code different from JavaScript code?</li> <li>How is TypeScript code run?</li> <li>How does TypeScript help during editing in an IDE?</li> <li>Etc.</li> </ul> <p>Note: <strong>This blog post does not explain why TypeScript is useful.</strong> If you want to know more about that, you can read <a href="https://exploringjs.com/ts/book/ch_why-typescript.html">my TypeScript sales pitch</a>.</p> Simple TypeScript playgrounds via <code>node --watch</code> https://2ality.com/2025/02/node-watch-typescript-playground.html 2025-02-25T00:00:00.000Z <p>Now that Node.js has <a href="https://2ality.com/2025/01/nodejs-strip-type.html">built-in support for TypeScript</a>, we can use it as the foundation of simple playgrounds that let us interactively explore TypeScript code.</p> Testing types in TypeScript https://2ality.com/2025/02/testing-types-typescript.html 2025-02-24T00:00:00.000Z <p>In this blog post, we explore how we can test that complicated TypeScript types work as expected. To do that, we need assertions at the type level and other tools.</p> The unexpected way in which conditional types constrain type variables in TypeScript https://2ality.com/2025/02/conditional-type-constraints.html 2025-02-23T00:00:00.000Z <p>The TypeScript handbook makes an interesting <a href="https://www.typescriptlang.org/docs/handbook/2/conditional-types.html#conditional-type-constraints">statement</a>: “Often, the checks in a conditional type will provide us with some new information. Just like narrowing with type guards can give us a more specific type, the true branch of a conditional type will further constrain generics by the type we check against.”</p> <p>In this blog post, we’ll see that this goes further than you may think.</p> The bottom type <code>never</code> in TypeScript https://2ality.com/2025/02/typescript-never.html 2025-02-19T00:00:00.000Z <p>In this blog post, we look at the special TypeScript type <code>never</code> which, roughly, is the type of things that never happen. As we’ll see, it has a surprising number of applications.</p> Array type notations: <code>T[]</code> vs. <code>Array&lt;T&gt;</code> in TypeScript https://2ality.com/2025/02/array-type-notation.html 2025-02-17T00:00:00.000Z <p>In this blog post, we explore two equivalent notations for Arrays in TypeScript: <code>T[]</code> and <code>Array&lt;T&gt;</code>. I prefer the latter and will explain why.</p> Symbols in TypeScript https://2ality.com/2025/02/symbols-in-typescript.html 2025-02-17T00:00:00.000Z <p>In this blog post, we examine how TypeScript handles JavaScript symbols at the type level.</p> <p>If you want to refresh your knowledge of JavaScript symbols, you can check out chapter <a href="https://exploringjs.com/js/book/ch_symbols.html">“Symbols”</a> of “Exploring JavaScript”.</p> Conditional types in TypeScript https://2ality.com/2025/02/conditional-types-typescript.html 2025-02-15T00:00:00.000Z <p>A conditional type in TypeScript is an if-then-else expression: Its result is either one of two branches – which one depends on a condition. That is especially useful in generic types. Conditional types are also an essential tool for working with union types because they let us “loop” over them. Read on if you want to know how all of that works.</p> Mapped types in TypeScript https://2ality.com/2025/02/mapped-types-typescript.html 2025-02-14T00:00:00.000Z <p>A mapped type is a loop over keys that produces an object or tuple type and looks as follows:</p> <pre><code class="language-ts">{[<span class="hljs-title class_">PropKey</span> <span class="hljs-keyword">in</span> <span class="hljs-title class_">PropKeyUnion</span>]: <span class="hljs-title class_">PropValue</span>} </code></pre> <p>In this blog post, we examine how mapped types work and see examples of using them. Their most importing use cases are transforming objects and mapping tuples.</p> TypeScript: extracting parts of compound types via <code>infer</code> https://2ality.com/2025/02/typescript-infer-operator.html 2025-02-10T00:00:00.000Z <p>In this blog post, we explore how we can extract parts of compound types via the <code>infer</code> keyword.</p> <p>It helps if you are loosely familiar with conditional types. You can check out chapter <a href="https://exploringjs.com/ts/book/ch_conditional-types.html#ch_conditional-types">“Conditional types”</a> in “Exploring TypeScript”&nbsp;to read up on them.</p> TypeDoc: testing code examples in doc comments https://2ality.com/2025/02/testing-typedoc-examples.html 2025-02-09T00:00:00.000Z <p>TypeDoc now lets us refer to parts of other files via <code>{@includeCode}</code>. In this blog post, I explain how that works and why it’s useful.</p> TypeScript: the <code>satisfies</code> operator https://2ality.com/2025/02/satisfies-operator.html 2025-02-08T00:00:00.000Z <p>TypeScript’s <code>satisfies</code> operator lets us check the type of a value (mostly) without influencing it. In this blog post, we examine how exactly it works and where it’s useful.</p> Read-only accessibility in TypeScript https://2ality.com/2025/02/typescript-readonly.html 2025-02-06T00:00:00.000Z <p>In this blog post, we look at how can make things “read-only” in TypeScript – mainly via the keyword <code>readonly</code>.</p> Tutorial: publishing ESM-based npm packages with TypeScript https://2ality.com/2025/02/typescript-esm-packages.html 2025-02-04T00:00:00.000Z <p>During the last two years, ESM support in TypeScript, Node.js and browsers has made a lot of progress. In this blog post, I explain my modern setup that is relatively simple – compared to what we had to do in the past:</p> Computing with tuple types in TypeScript https://2ality.com/2025/01/typescript-tuples.html 2025-01-29T00:00:00.000Z <p>JavaScript’s Arrays are so flexible that TypeScript provides two different kinds of types for handling them:</p> <ul> <li>Array types for arbitrary-length sequences of values that all have the same type – e.g.: <code>Array&lt;string&gt;</code></li> <li>Tuple types for fixed-length sequences of values where each one may have a different type – e.g.: <code>[number, string, boolean]</code></li> </ul> <p>In this blog post, we look at the latter – especially how to compute with tuples at the type level.</p> Template literal types in TypeScript: parsing during type checking and more https://2ality.com/2025/01/template-literal-types.html 2025-01-24T00:00:00.000Z <p>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:</p> <ul> <li>Static syntax checking for string literals</li> <li>Transforming the casing of property names (e.g. from hyphen case to camel case)</li> <li>Concisely specifying large string literal union types</li> </ul> ECMAScript 2025 feature: RegExp escaping https://2ality.com/2025/01/regexp-escape.html 2025-01-21T00:00:00.000Z <p>The ECMAScript proposal <a href="https://github.com/tc39/proposal-regex-escaping">“RegExp escaping”</a> (by Jordan Harband and Kevin Gibbons) specifies a function <code>RegExp.escape()</code> that, given a string <code>text</code>, creates an escaped version that matches <code>text</code> – if interpreted as a regular expression.</p> <p>This proposal reached stage 4 on 2025-02-18.</p> TypeScript enums: use cases and alternatives https://2ality.com/2025/01/typescript-enum-patterns.html 2025-01-19T00:00:00.000Z <p>In this blog post, we take a closer look at TypeScript enums:</p> <ul> <li>How do they work?</li> <li>What are their use cases?</li> <li>What are the alternatives if we don’t want to use them?</li> </ul> <p>The blog post concludes with recommendations for what to use when.</p> A guide to <code>tsconfig.json</code> https://2ality.com/2025/01/tsconfig-json.html 2025-01-15T00:00:00.000Z <p>I never felt confident about my <code>tsconfig.json</code>. To change that, I went through the <a href="https://www.typescriptlang.org/tsconfig/">official documentation</a>, collected all common options, and documented them in this blog post:</p> <ul> <li> <p>This knowledge will enable you to write a <code>tsconfig.json</code> that is cleaner and that you’ll fully understand.</p> </li> <li> <p>If you don’t have the time to read the post, you can jump to the summary at the end where I show the <code>tsconfig.json</code> that I use now – along with recommendations for adapting it to different use cases (npm package, app, etc.).</p> </li> <li> <p>I also link to <a href="#tsconfig-recommendations">the <code>tsconfig.json</code> recommendations</a> by several well-known TypeScript programmers. (I went through them when I researched this post.)</p> </li> </ul> <p>I’m curious what your experiences with <code>tsconfig.json</code> are: Do you agree with my choices?</p> ECMAScript 2025 feature: regular expression pattern modifiers https://2ality.com/2025/01/regexp-modifiers.html 2025-01-10T00:00:00.000Z <p>Traditionally, we could only apply regular expression flags such as <code>i</code> (for ignoring case) to all of a regular expression. The ECMAScript feature <a href="https://github.com/tc39/proposal-regexp-modifiers">“Regular Expression Pattern Modifiers”</a> (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.</p> <p>This proposal reached stage 4 on 2024-10-08.</p> ECMAScript feature: import attributes https://2ality.com/2025/01/import-attributes.html 2025-01-09T00:00:00.000Z <p>The ECMAScript feature <a href="https://github.com/tc39/proposal-import-attributes">“Import Attributes”</a> (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.</p> <p>Import attributes reached stage 4 in October 2024 and will probably be part of ECMAScript 2025.</p> Node’s new built-in support for TypeScript https://2ality.com/2025/01/nodejs-strip-type.html 2025-01-08T00:00:00.000Z <p>Starting with <a href="https://nodejs.org/en/blog/release/v23.6.0">v23.6.0</a>, Node.js supports TypeScript without any flags. This blog post explains how it works and what to look out for.</p> WebAssembly as an ecosystem for programming languages https://2ality.com/2025/01/webassembly-language-ecosystem.html 2025-01-01T00:00:00.000Z <p>In this blog post, we look at how WebAssembly has become an ecosystem for many programming languages and what technologies enable that.</p>