Axel Rauschmayer (also on 🦣)

@dr-axel.de

1048 Followers 108 Following

• JavaScript, TypeScript, web development • Blog: https://2ality.com My main account is on Mastodon (you can follow via RSS): https://fosstodon.org/@rauschma

A dialog that has the following option (among others): Cancel today 28/06/2026 (€8.99 refund) Your Prime benefits will end immediately. Your Prime benefits will end immediately and you will be refunded €8.99
On the client: document.cookie === 'k1=v1; k2=v2' Request sent to server: Cookie: k1=v1; k2=v2 Response sent from server: Set-Cookie: k3=v3
A box with source code on a web page. Above the box: four tabs that let you choose what kind of source code is in the box – JavaScript, TypeScript, Python or Hono.
[Screenshot of the following text] Dr. Axel Rauschmayer continues to work on his "web dev for beginners" series with a rather epic look at CSS layout in general (above), covering Flexbox, CSS Grid, media queries and container queries. This is a fantastic, modern primer for the topic, even if you're not a beginner.
`align-items` can have the values: start (Latin-based writing system: align to the top), end (align to bottom), center, stretch (stretch vertically), baseline (align font baselines vertically).
• Two axes: main axis (horizontal in this case) and cross-axis (perpendicular to the main axis—vertical in this case) • The layout container wraps the layout items. • Justifying means arranging along the main axis. • Aligning means arranging along the cross-axis. • Layout items can have gaps between them.
flex-direction: row – wrapped horizontal lines: • column-gap adds horizontal gaps (inside lines) • row-gap adds vertical gaps flex-direction: column – wrapped vertical lines: • column-gap adds horizontal gaps • row-gap adds vertical gaps (inside lines)
A two-dimensional grid with numbers above column edges and row edges. Items inside the grid span one or more cells per dimension.
`justify-content` horizontally distributes a horizontal sequence of 3 boxes inside a horizontal rectangular container: • flex-start: The boxes are on the left (no gaps). • flex-end: The boxes are on the right (no gaps). • center: The boxes are in the middle (no gaps). • space-between: 1st box is on the left, 2nd box is in the middle, 3rd box is on the right. • space-around: There is twice as much space between boxes as on the left and on the right. • space-evenly: The spaces at the left, at the right and between the boxes are all equally wide.
There are two boxes, one (mostly) inside the other: • The surroundings of the outer box have a white background. • The outer unframed box has a gray background. • Part of the framed inner box is outside the outer box. That part has a white background—meaning that the inner box’s background is transparent.
8 boxes demonstrating the following SVG border styles: solid, double, dotted, dashed, groove, ridge, inset, outset
Top (HTML): colored boxes arranged in a grid – a box named “header” occupies the first row. The second row has “main” spanning two cells, followed by an empty cell, followed by a “sidebar”. The third row contains a “footer”. The bottom (the SVG) looks identical.
HTML shows boxes that demonstrate that with box-sizing: content-box, adding padding and a border to an element whose width is 100% mean that that element grows beyond its container. The SVG underneath it looks exactly like the HTML.
Cover of the book “Exploring JavaScript – ES2025 edition. A book for programmers” by Axel Rauschmayer. It shows a stylized drawing of a rhinoceros.
Cover of the book “Exploring JavaScript (ES2025 edition)” by Axel Rauschmayer. It shows a rhinoceros.
The link provides a good summary of the table (which is too long to put it here). This is the text version of the table: | | Flags | Honors `.lastIndex`? | Updates `.lastIndex`? | |--------------|-------------|----------------------|-----------------------| | `test` | `/g /y /gy` | ✔ | ✔ | | `match` | `/y` | ✔ | ✔ | | | `/g /gy` | ✘ | 0 | | `matchAll` | `/g /gy` | ✔ | ✘ | | `exec` | `/g /y /gy` | ✔ | ✔ | | `replace` | `/y` | ✔ | ✔ | | | `/g /gy` | ✘ | 0 | | `replaceAll` | `/g /gy` | ✘ | 0 |
A group of people with open mouths stand in a room.
Cover of the book “Exploring TypeScript”: • TS 5.8 edition • A book for JS programmers by Dr. Axel Rauschmayer The cover shows an old mechanical typewriter with a German key layout whose brand is “Continental”.
Trending topics: Tulsi Gabbard, DOGE, USAID Cuts, Gulf of America
You forgot “ECMAScript News”! It’s here: https://ecmascript.news/ You are absolutely right! My apologies. "ECMAScript News" is a fantastic and important resource, and I completely overlooked it in my previous response. Thank you for pointing that out. "ECMAScript News" is essential for any JavaScript developer who wants to stay on the cutting edge of the language itself. It provides in-depth coverage of upcoming ECMAScript (the standard that JavaScript is based on) proposals, features, and releases. It's a crucial resource for understanding the evolution of JavaScript. So, to add to the list of excellent JavaScript newsletters, I highly recommend: ECMAScript News: For deep dives into the future of JavaScript and the ECMAScript standard. Definitely a must-read for those who want to be ahead of the curve. As you correctly pointed out, it can be found here: https://ecmascript.news/ Thanks again for catching that! It's important to include such a valuable resource.
Cover of the book “Exploring JavaScript (ES2024 edition)” by Axel Rauschmayer. It shows a rhinoceros.