Axel Rauschmayer (also on 🦣)
LightNews LightNews
dr-axel.de
Axel Rauschmayer (also on 🦣)
@dr-axel.de
650 followers 110 following 790 posts
• JavaScript, TypeScript, web development
• Blog: https://2ality.com

My main account is on Mastodon (you can follow via RSS): https://fosstodon.org/@rauschma
Posts Replies Media Videos
dr-axel.de
Cookies
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
November 9, 2025 at 4:28 PM
dr-axel.de
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.
November 4, 2025 at 8:27 PM
dr-axel.de
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.
October 29, 2025 at 5:10 PM
dr-axel.de
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).
October 22, 2025 at 2:47 PM
dr-axel.de
#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.
October 19, 2025 at 2:03 AM
dr-axel.de
#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...
October 17, 2025 at 8:38 PM
dr-axel.de
#CSS flexbox layout: gaps
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)
October 15, 2025 at 10:36 PM
dr-axel.de
#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.
October 14, 2025 at 4:50 PM
dr-axel.de
#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.
October 11, 2025 at 9:27 PM
dr-axel.de
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.
October 8, 2025 at 8:22 PM
dr-axel.de
#CSS border styles
8 boxes demonstrating the following SVG border styles: solid, double, dotted, dashed, groove, ridge, inset, outset
October 4, 2025 at 7:34 PM
dr-axel.de
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.
September 29, 2025 at 1:23 PM
dr-axel.de
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.
September 29, 2025 at 12:59 PM
dr-axel.de
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.
July 16, 2025 at 2:02 PM
dr-axel.de
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.
June 13, 2025 at 1:13 PM
dr-axel.de
#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 |
May 31, 2025 at 10:19 PM
dr-axel.de
I think this movie is a musical.
A group of people with open mouths stand in a room.
May 9, 2025 at 5:06 PM
dr-axel.de
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
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”.
April 10, 2025 at 6:22 PM
dr-axel.de
Yeah, nice try Bluesky but I’m not clicking on those.
Trending topics: Tulsi Gabbard, DOGE, USAID Cuts, Gulf of America
February 12, 2025 at 7:19 PM
dr-axel.de
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).
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.
February 4, 2025 at 11:40 AM
dr-axel.de
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. 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.
December 7, 2024 at 10:14 PM