iiinova — where your digital self keeps evolving

Axel Rauschmayer (also on 🦣) @dr-axel.de · 02/10/2026

#Firefox: Vertical tabs plus tab groups are really nice: The user interface is intuitive and I don’t need an extension anymore (Tree Style Tab etc.).

A column of vertical tabs at the left-hand side of a Firefox window: There are two “tab groups”—which work like collapsible folders. The first tab group is called “JavaScript” and has three “child tabs” in it (=underneath it, slightly indented). The second tab group is called “Travel” and has two child tabs. At the very end, there is a single top-level tab for the Mastodon account “Light bulbs”.

Now there are only three items visible in the tab column: The collapsed tab group “JavaScript” (none of its children are visible), the collapsed tab group “Travel” and the top-level “Light bulbs” tab.

1181

Axel Rauschmayer (also on 🦣) @dr-axel.de · 27/09/2026

MacOS 27 shows a handle for resizing when the screen is split between two windows. Dragging it resizes both windows at the same time.

Two windows, one on the left and one on the right with their borders touching in the middle. Where they meet, there is the cursor for horizontal resizing for the left window. Underneath it, there is a short and narrow vertical rectangle that serves as a handle for resizing both windows.

010

Axel Rauschmayer (also on 🦣) @dr-axel.de · 20/09/2026

Fingers crossed! Not a fan of the shortcuts UI either. My Logitech keyboard doesn’t have Globe key, so I defined my own shortcuts for tiling left, right, etc. MacOS changed Ctrl-Opt-Cmd-▶︎ to simply Ctrl-Opt-Cmd 😬 Desktop shortcuts are built in but don’t work (anymore)—see below.

100

Axel Rauschmayer (also on 🦣) @dr-axel.de · 28/06/2026

This Amazon Prime cancelation option has me confused: Do I really get all of my money back if I cancel today (one day before the renewal)?

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

111

Axel Rauschmayer (also on 🦣) @dr-axel.de · 04/11/2025

Hono looks interesting. It’s a server-side framework that supports a large variety of platforms: Node.js, Deno, Cloudflare Workers, Netlify, AWS Lambda, etc. Cloudflare even has Hono versions of their code examples. hono.dev

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.

4110

Axel Rauschmayer (also on 🦣) @dr-axel.de · 29/10/2025

Kind words from @cooperx86.bsky.social in the most recent JavaScript Weekly (*). Thanks Peter! My CSS blog post: 2ality.com/2025/10/css-... (*) javascriptweekly.com/issues/758

[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.

030

Axel Rauschmayer (also on 🦣) @dr-axel.de · 22/10/2025

There are many diagrams—e.g., this one for the #CSS Grid Layout property `align-items`:

`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).

000

Axel Rauschmayer (also on 🦣) @dr-axel.de · 19/10/2025

#CSS: flexbox diagram with the most important terms

• 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.

031

Axel Rauschmayer (also on 🦣) @dr-axel.de · 17/10/2025

#CSS grid-auto-flow: I’m surprised that #1 and #2 overlap. I’d expect the first cell to be empty and #1 to be placed in the second cell (where it does fit). Any ideas? codepen.io/rauschma/pen...

120

Axel Rauschmayer (also on 🦣) @dr-axel.de · 14/10/2025

#CSS: Creating CSS grid layout diagrams via HTML and exporting them to SVG or PNG. This page demonstrates the approach: rauschma.github.io/learning-web...

A two-dimensional grid with numbers above column edges and row edges. Items inside the grid span one or more cells per dimension.

040

Axel Rauschmayer (also on 🦣) @dr-axel.de · 11/10/2025

#CSS: flexbox cheat sheet created via HTML. Inspired by: css-tricks.com/snippets/css... 1. justify-content (along main axis) 2. align-items (along cross-axis)

`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.

`align-items` vertically aligns a horizontal sequence of 3 boxes (with gaps between them) inside a horizontal rectangular container:
• stretch: Each box is as tall as the container.
• flex-start: Each box is at the top.
• flex-end: Each box is at the bottom.
• center: Each box is vertically centered.
• baseline: Each box has text with a different size. The baselines of the texts are at the same level – which requires a different vertical position for each box.

030

Axel Rauschmayer (also on 🦣) @dr-axel.de · 08/10/2025

1/ #CSS: Example of background-color *not* being inherited: • Top level: transparent • Outer: gray • Inner: transparent (not inherited)

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.

100

Axel Rauschmayer (also on 🦣) @dr-axel.de · 29/09/2025

CSS grid layout (top: HTML, bottom: SVG via html-to-svg)

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.

000

Axel Rauschmayer (also on 🦣) @dr-axel.de · 29/09/2025

Impressive: • Top: HTML (uses flexbox) • Bottom: SVG created via html-to-svg

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.

100

Axel Rauschmayer (also on 🦣) @dr-axel.de · 16/07/2025

My books on #JavaScript and #TypeScript are free to read online: – Exploring JavaScript (ES2025 edition) – Deep JavaScript – Exploring TypeScript (TS 5.8 edition) – Shell scripting with Node.js 🦋 Reposts appreciated! exploringjs.com

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 “Deep JavaScript” by Axel Rauschmayer. It shows a photo of a freediver who swims under water and follows a rope down into the deep.

Cover of the book “Exploring TypeScript – TS 5.8 edition. A book for JS programmers” by Axel Rauschmayer. It shows black-and-white photo of a typewriter.

Cover of the book “Shell scripting with Node.js” by Axel Rauschmayer. It shows a field of light blue hexagonal bars, with three yellow ones in the middle.

11510

Axel Rauschmayer (also on 🦣) @dr-axel.de · 13/06/2025

Out now: “Exploring JavaScript (ES2025 edition)” • Free to read online • Lots of new content • New: flashcards for learning the content and the standard library API exploringjs.com/js/ #JavaScript

Cover of the book “Exploring JavaScript (ES2025 edition)” by Axel Rauschmayer. It shows a rhinoceros.

1189

Axel Rauschmayer (also on 🦣) @dr-axel.de · 31/05/2025

#JavaScript regular expressions: summary of how various methods handle regExp.lastIndex. More information: exploringjs.com/js/book/ch_r...

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 |

032

Axel Rauschmayer (also on 🦣) @dr-axel.de · 10/04/2025

My new book is out: “Exploring TypeScript”. It’s free online! • About 75% of the content is new or rewritten. • Most of the new content is about computing at the type level. exploringjs.com/ts/ #TypeScript

24112

Axel Rauschmayer (also on 🦣) @dr-axel.de · 12/02/2025

Yeah, nice try Bluesky but I’m not clicking on those.

Trending topics: Tulsi Gabbard, DOGE, USAID Cuts, Gulf of America

030

Axel Rauschmayer (also on 🦣) @dr-axel.de · 04/02/2025

Google Gemini does admit when it makes a mistake 😀 (reason for my prompt: ChatGPT sent a new subscriber our way and I was wondering what Gemini recommends).

020

Axel Rauschmayer (also on 🦣) @dr-axel.de · 07/12/2024

My books on #JavaScript and #TypeScript are free to read online: – Exploring JavaScript (ES2024 edition) – Deep JavaScript – Tackling TypeScript – Shell scripting with Node.js 🦋 Reposts appreciated! exploringjs.com

Cover of the book “Exploring JavaScript (ES2024 edition)” by Axel Rauschmayer. It shows a rhinoceros.

Cover of the book “Deep JavaScript” by Axel Rauschmayer. It shows a freediver who swims under water and follows a rope down into the deep.

Cover of the book “Tackling TypeScript” by Axel Rauschmayer. It shows a a pair of boxing gloves.

02811