Skip to content

Add blog post: AbortController.abort() Doesn't Mean It Stopped#1111

Open
taras wants to merge 20 commits intov4from
blog/abortcontroller-abort-doesnt-mean-it-stopped
Open

Add blog post: AbortController.abort() Doesn't Mean It Stopped#1111
taras wants to merge 20 commits intov4from
blog/abortcontroller-abort-doesnt-mean-it-stopped

Conversation

@taras
Copy link
Member

@taras taras commented Feb 13, 2026

Motivation

Add a new blog post that addresses a specific pain point with AbortController: calling abort() doesn't guarantee the operation actually stopped. This is a companion piece to the existing "The Heartbreaking Inadequacy of AbortController" post, focusing on one visceral example rather than a comprehensive critique.

The post uses the "inverted default" framing that resonated well in community conversations (Reddit r/javascript thread from Feb 2025, which achieved 2 full conversions from skeptics).

Approach

  • ~620 words in Taras's voice (direct, consultative, technically precise)
  • Minimal code example showing a setInterval that keeps running after abort() returns
  • Effection contrast using scoped() and spawn() to show automatic cleanup
  • Key phrases that landed well: "inverts the default", "cleanup is guaranteed unless you opt out", "7 years in production"
  • Custom thumbnail SVG with light/dark mode support, showing AbortController (leaking boxes) vs Effection (contained boxes)

Files added

  • www/blog/2026-02-13-abortcontroller-abort-doesnt-mean-it-stopped/index.md
  • www/blog/2026-02-13-abortcontroller-abort-doesnt-mean-it-stopped/abortcontroller-abort.svg

Related

@pkg-pr-new
Copy link

pkg-pr-new bot commented Feb 13, 2026

Open in StackBlitz

npm i https://pkg.pr.new/thefrontside/effection@1111

commit: 3407cd6

Companion piece to 'The Heartbreaking Inadequacy of AbortController'.
Focuses on a specific pain point: abort() is synchronous but cleanup
is not guaranteed. Introduces the 'inverted default' framing from
community conversations.

- ~620 words, Taras voice
- Minimal code example showing the leak
- Effection scoped() example showing the fix
- Custom thumbnail SVG with light/dark mode support
Documents the requirement to run 'deno fmt' and 'deno lint' before
committing. This makes the existing www/AGENTS.md checklist item
authoritative at the repo level.
- Clarify signal vs consequences: 'The signal is synchronous; the
  consequences are not'
- Merge 'Why this happens' and 'The deeper problem' into one section
- Add killer framing: 'AbortController propagates intent; structured
  concurrency propagates ownership'
- Acknowledge platform constraint, not AbortController flaw
- Rename section to 'Structured lifetimes in practice'
- Expand real resources explanation (fetch, WebSocket, child processes)
- Strengthen close: 'delivers this' not 'one way to get there'
- Reorder leak section: outcome first, code second, explanation third
- Vary 'cleanup' → 'teardown'/'unwound' to reduce redundancy
Show actual console output from the code examples instead of abstract
boxes. Left terminal shows AbortController continuing to tick after
abort(), right terminal shows clean exit when Effection scope exits.

More distinctive than the previous 'boxes overflowing vs contained'
design and directly ties to the proof in the article.
@taras taras force-pushed the blog/abortcontroller-abort-doesnt-mean-it-stopped branch from d2c1064 to c0ce4ab Compare February 13, 2026 23:41
Remove rx='0 0 12 12' which is invalid SVG syntax (rx only accepts
a single value). The bottom-rounded corners weren't rendering anyway
since the terminal frame rect with rx=12 covers the full shape.
- Expand filter regions to cover full canvas (1280x710) so right
  terminal shadow renders correctly (was clipped at x=620)
- Move captions below terminal bottom (y=602 vs terminal bottom y=570)
- Fix typo: >>>> to >>>
Shift titles right to account for window dots on the left side.
- Left terminal: x=320 -> x=355
- Right terminal: x=880 -> x=915
Use dominant-baseline='middle' and y=158 (same as window dots)
to properly center text in the 36px header bar.
- Replace dominant-baseline='middle' with dy='0.35em' for reliable
  vertical centering across browsers
- Fix dark-mode left terminal title coordinates (was x=320 y=163,
  now x=355 y=158 to match light-mode and dot center line)
- Header height: 36px -> 40px
- Dots/title vertical center: cy/y=158 -> cy/y=160
- Body overlap rect: y=164 -> y=168
- Body start: y=176 -> y=180, height: 394 -> 390
- Shift all terminal content text by +4px to match new body position
Use <path> elements with only top corners rounded (bottom corners
square) instead of <rect rx=12> which rounds all corners. This
eliminates the need for the overlap rect hack that was causing
the window dots to appear cramped at the bottom of the toolbar.

Changes:
- 4 header <rect> elements -> 4 header <path> elements
- Removed 4 overlap <rect> elements (the y=168 h=12 hack)
Fix corrupted structure: remove leftover overlap rect and
duplicate dots/title/body elements that were causing overlap.
Animate terminal output to show the story playing out:
- Lines appear sequentially like real terminal output
- Left terminal: ticks, abort() call, then warning-colored ticks continue
- Right terminal: ticks, scope exits, clean stop
- 7s loop cycle (3s animation + 4s pause)
- Respects prefers-reduced-motion (shows static image)
Shows a blinking block cursor before content appears, making
the loop reset feel like a terminal 'clear' command rather
than an abrupt disappearance. Cursor blinks twice then
disappears when the first line appears.
Use individual keyframes per line instead of shared animation with
staggered delays. This ensures all lines vanish at exactly 3s
(the 'clear' moment) rather than staggered based on their
appearance delay, which was causing a scroll-up effect.
3s animation + 7s hold (was 3s + 4s). Gives readers more time
to absorb the contrast between the two terminals before the
loop resets.
Timeline (10s total):
- 0-0.2s: Cursor blinks
- 0.2-3s: Lines appear sequentially
- 3-8s: Hold final state (5s reading time)
- 8-10s: Blank with blinking cursor

Content now stays visible for 8 seconds (80%) instead of
disappearing at 3s (30%). Cursor blinks during the 2s pause
to indicate the terminal is 'ready' for the next cycle.
Links the SVG thumbnail to the post and adds description for
social sharing/SEO.
Change 'You called abort()' to 'You called controller.abort()'
and add 'calling abort() on an AbortController' for clarity.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant