Add blog post: AbortController.abort() Doesn't Mean It Stopped#1111
Open
Add blog post: AbortController.abort() Doesn't Mean It Stopped#1111
Conversation
commit: |
0ad6c3b to
aa6a08f
Compare
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.
d2c1064 to
c0ce4ab
Compare
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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
setIntervalthat keeps running afterabort()returnsscoped()andspawn()to show automatic cleanupFiles added
www/blog/2026-02-13-abortcontroller-abort-doesnt-mean-it-stopped/index.mdwww/blog/2026-02-13-abortcontroller-abort-doesnt-mean-it-stopped/abortcontroller-abort.svgRelated