mdfor.dev's Mermaid diagrams are now ~12x faster to redraw and ship 79% less JS.
I swapped Mermaid.js for Pele (pele.run) from @kepano.
• JS for one flowchart: 732 kB → 151 kB gz
• Redraw 22 diagrams after an edit: 302 ms → 25 ms
• Light/dark is pure CSS, no redraw
22/22 diagram types still render (a few look different). PR lists everything: github.com/ikhattab/md-previ…
3
21
1,779
karakeep is sitting at 29,999 GitHub stars. One more gets it to 30k 🎉
It's a self-hostable bookmark-everything app: links, notes, images, with AI auto-tagging and full-text search.
Be the star that tips it ⭐
github.com/karakeep-app/kara…
1
2
78
5,437
We've decided to sunset Arc on December 22, 2026.
That's not an easy sentence to write. We spent years building Arc and celebrating each and every release along the way: we have so much pride and love for what we made alongside the Arc community.
Our priority is to deliver best-in-class security for our members. Keeping a browser secure takes constant, dedicated work that is only increasing in the age of AI. Dia was built from the ground up to meet today’s security standards, so that's where our engineering and security teams will focus moving forward.
We've worked to make switching to @diabrowser as easy as possible for Arc members. Here's how:
· Your passwords, bookmarks, extensions and history come over to Dia seamlessly.
· Spaces, Folders, and Tab Groups are in Dia and import over with your data intact.
· Dia now surpasses Arc benchmarks in stability, speed, and security.
· The browser features you use in Arc are free in Dia, and the AI is optional.
Thank you for using Arc, for pushing us to make it better, and for building alongside us. The team that made Arc is the same team behind Dia, and some of our most ambitious work is just ahead. We'd love for you to be there with us when it lands.
1
6
1,117
Where's the bug?
Type "berlin" fast and sometimes you see results for "b".
Answer + 7 follow-ups:
ihabkhattab.com/blog/abortco…
1
153
I had Claude Code profile my markdown editor, mdfor.dev, even though nothing felt slow. It found something anyway.
On a 328 KB document, the biggest cost per keystroke was walkTokens in marked, not the parsing itself. It's the hook extensions use to visit every token, and it collected results like this:
values = values.concat(result)
concat returns a new array, so every token copied everything gathered so far, and the cost grew with the square of the document size. In a standalone repro, an empty hook on 4,000 blocks took 1.6s, against 38ms without one.
A local patch that appends in place confirmed it: walkTokens dropped from about 607ms to 6ms on that document. I reported it upstream and opened a PR, which is now merged.
A reviewer also caught an edge case in the first version: concat copies by index, not through the array's iterator, so a for...of copy isn't an exact replacement. An indexed loop fixed it.
Two takeaways for me: profile even when nothing feels wrong, and concat is fine on its own, but reassigning it inside a loop is where it adds up.
Issue: github.com/markedjs/marked/i…
PR: github.com/markedjs/marked/p…
1
2
238
here's the /cost
ALT Total cost: $3.02 Total duration (API): 15m 33s Total duration (wall): 25m 43s Total code changes: 444 lines added, 1 line removed Usage by model: claude-haiku-4-5: 1.4k input, 257 output, 0 cache read, 0 cache write ($0.0027) claude-sonnet-5-5: 694 input, 115.2k output, 5.8m cache read, 177.2k cache write ($3.02) Prompt cache (main): 46 requests · 97% of input tokens from cache · no misses · warm (1h TTL, last activity 1m 5s ago)
3
721
I tried the same prompt with Claude Sonnet 5.5, here is the result (effort: high)
I made this using Claude Opus 5.5 with effort set to high
Prompt:
Make a dynamic 30-second motion graphics video that shows what an incredible motion designer you are, like it's your showreel for a résumé. go all out. Make it a video to introduce mdfor.dev Use actual product screenshot/logo/assets Must have music and motion must match the music Do it like a real professional production video, not like a demo or prototype. Add more animation and motion design; avoid using screenshots as raw; instead, break them down into components/icons so we can animate those too. Make the motions more juicy. Use the best motion design techniques you can.
5
2
145
33,015
Prompt:
Make a dynamic 90-second motion graphics video with a professional voiceover that teaches frontend and Node developers the difference between debounce and throttle, and shows what an incredible motion designer and technical storyteller you are, like it's your showreel for a résumé. Go all out.
The news hook: Node.js core is getting util.debounce and util.throttle built in. Read the PR first (github.com/nodejs/node/pull/…) and use its real facts, code, and review discussion. Don't invent API details. Use the news to open the video and to close it, but the middle is the lesson.
The voiceover is the teacher. Write a tight, conversational script with personality, and record it with a natural, confident voice. The animation must support the narration beat by beat. The viewer should feel the difference between debounce and throttle before any code appears, then see the code.
Teach through visual metaphors, not slides or talking heads. Invent your own memorable metaphors, one for each concept, and let them play out side by side so the difference is obvious. Cover when to use each one and when to use neither.
The audience is fluent in JavaScript, so skip the basics and don't make it too simple. Every section should teach something they probably didn't know: edge cases, common mistakes, better alternatives, and the design decisions the Node maintainers argued over in the PR review. Make people understand why those decisions were made.
Use real assets: the Node.js logo, code from the PR, and the PR discussion. Don't use screenshots raw. Break them into components (code lines, labels, comment bubbles, terminal output) and animate each one.
Must have music that sits under the voiceover, every motion must match the beat, and add sound design. Add captions synced to the voice.
Make it look like a real professional production video, not a demo or prototype. Add more animation and motion design, make the motion juicy, and use the best motion design techniques you can. End with a clear takeaway a dev could remember in one sentence.
93
playing with different options using Opus 5.5
Prompt:
Make a dynamic 60-second motion graphics video that announces and explains this Node.js change to developers: github.com/nodejs/node/pull/… (Node.js core now ships util.debounce and util.throttle). Read the PR first and use its real facts, code, and discussion. Don't invent API details.
Make it feel like a showreel for a résumé: you're an incredible motion designer and technical storyteller. Go all out.
Tell it as a story, not a changelog. Open on the real pain the author describes (reaching for an npm dependency again and again for something so common) and build to why it belongs in core. Then teach what's actually new and interesting, including the design decisions that came out of the review debate. Show at least one non-obvious behavior or edge case that most devs don't know, and make people feel why the maintainers decided the way they did.
Teach through visual metaphors, not slides or talking heads. Invent your own metaphors and make them memorable. The viewer should feel how debounce and throttle differ before any code appears. Assume the audience is fluent in JavaScript and Node, so skip the basics and don't make it too simple.
Use real assets: the Node.js logo, the PR page, code from the PR, and the participants' avatars if it helps the story. Don't use screenshots raw. Break them into components (code lines, labels, comment bubbles, terminal output) and animate each one.
Must have music, and every motion must match the beat. Use sound design too.
Make it look like a real professional production video, not a demo or prototype. Add more animation and motion design, make the motion juicy, and use the best motion design techniques you can. End with a clear takeaway of when to reach for these and when not to.
1
2
267
I made this using Claude Opus 5.5 with effort set to high
Prompt:
Make a dynamic 30-second motion graphics video that shows what an incredible motion designer you are, like it's your showreel for a résumé. go all out. Make it a video to introduce mdfor.dev Use actual product screenshot/logo/assets Must have music and motion must match the music Do it like a real professional production video, not like a demo or prototype. Add more animation and motion design; avoid using screenshots as raw; instead, break them down into components/icons so we can animate those too. Make the motions more juicy. Use the best motion design techniques you can.
8
10
162
48,289
The internet is held together by 975,000 copies of content: ""; display: table; and nobody wants to talk about it.
2
4
388
طلبت قهوة من مكان، الكوباية sealed زي كوبايات المياه، تفضل سخنة ومفيش حاجة هتقع في التوصيل. وباعتين الغطا العادي في كيس تاني، والغطا شفاف مش أبيض شكله أحلى. ومعاها مناديل وبراوني، اهتمام حقيقي بجد. فاضل بس حاجة واحدة بسيطة... إن القهوة نفسها تبقى حلوة
1
159
أول مرة أجرب remotion.dev/docs/ai/skills
أنا ماحاولتش أجتهد لأني كنت بستكشف لسه فقلت ل Cursor شوف الcode وأعمل Prompt ل promotional video
132
The HTML <select> element is finally getting the glow-up it deserves
With `appearance: base-select` in Safari 27 + Chrome 135, you can now:
• Fully style the button & dropdown
• Drop SVGs/images inside <option>
• Use grid layouts in your menu
• Keep all the built-in a11y for free
developer.apple.com/videos/p…
1
4
147
I hate reviewing markdown in an editor. Too much syntax noise. So I built a simple previewer I use every day.
Just shipped two features I kept wishing I had:
Export Mermaid charts as PNG, for when I migrate a .md to Google Docs.
Export as a standalone HTML file, for when I want to share something for review without touching Google Docs at all.
6
335
All 17 TanStack Projects In ONE App! youtu.be/J4kzovOTNKw?si=xTzj… via @YouTube
101
codiff: a fast local diff viewer for reviewing your Git changes before they go anywhere. native window, works in any repo, open source. github.com/nkzw-tech/codiff
76
The add-to-cart arc animation looks like magic but the position trick is dead simple
getBoundingClientRect() on both elements, subtract the centers, pass the delta to x/y:
ALT const from = product.getBoundingClientRect() const to = basket.getBoundingClientRect() const dx = to.left + to.width / 2 - (from.left + from.width / 2) const dy = to.top + to.height / 2 - (from.top + from.height / 2)
72
Motion just shipped arc(), a single function that makes "add to cart" animations trivial to build
Instead of flying in a straight line, the item curves naturally into the basket
animate(".product", { x: 200, y: -120 }, { path: arc() })
No bezier math, no hardcoded paths. It figures out the curve dynamically based on start/end position
motion.dev/docs/arc
1
104
LinkedIn turned my code into hyperlinks and made the whole post unreadable
Just shipped /modernize-js
A slash command that rewrites old JS patterns to modern native equivalents:
-> JSON.stringify hack -> structuredClone()
-> arr[arr.length - 1] -> arr.at(-1)
-> Promise chains -> async/await
-> x !== null && x !== undefined -> x ?? fallback
-> obj && obj.foo -> obj?.foo
-> ...and 13 more
Why a slash command and not a skill? Skills need project context. This is just a transformation -- one invocation, done.
Install: agentcmds.work/#modernize-js
1
115
Just shipped /modernize-js
A slash command that rewrites old JS patterns to modern native equivalents:
-> JSON.stringify hack -> structuredClone()
-> arr[arr.length - 1] -> arr.at(-1)
-> Promise chains -> async/await
-> x !== null && x !== undefined -> x ?? fallback
-> obj && obj.foo -> obj?.foo
-> ...and 13 more
Why a slash command and not a skill? Skills need project context. This is just a transformation -- one invocation, done.
Install: agentcmds.work/#modernize-js
1
169
TIL the CSS content property accepts alternative text via a slash syntax
So generated content in ::before and ::after no longer has to hurt screen reader users. Pretty handy.
stefanjudis.com/today-i-lear…
ALT .new-item::before { /* "black star" and element content is read out */ content: "★"; /* "Highlighted item" and element content is read out */ content: "★" / "Highlighted item"; /* Generated content is ignored and only element content is read out */ content: "★" / ""; }
1
56
@FrontendMasters Career Guidance v2 link keeps sending me to a 404. The 404 page is great but I was kind of hoping to see the course.
frontendmasters.com/courses/…
69
Who in Android thought a "Spinner" would be a good name for a <select> component? What is happening in Android land?
developer.android.com/develo…
1
138
I built mdfor.work because I don’t enjoy reading Markdown files in a code editor’s dark theme. I use Markdown a lot now, so I wanted a place where I can paste content, collapse the editor pane, and read it comfortably in light mode.
1
49
The best part of building something for your own use is that you can add features whenever you feel like it. Right now, I’m working on adding support for Mermaid graphs.
2
1
48
Next Thursday @logaretm and I will be live streaming our reaction to CSS Wrapped for 2025! Join us as we unwrap what happened this year.
Reference: chrome.dev/css-wrapped-2025/
youtube.com/watch?v=Oopu3o30…
1
72
أه والله
youtu.be/HzL65tTeANs?si=NjCO…
Our work for Lando Norris is nomiated for SOTM on @awwwards. Good luck to all participants - its a stacked month!
🗳️ link below !
122
احنا نعمل IDE يستخدم كذا git worktrees وكذا model وبعدين في agent يحكم بينهم و ي merge الحلو من هنا ع الحلو من هناك.
كأنك عامل hackathon ع الضيق كده جوه ال repo
159
بجد الكتب أكتر حاجة تساعدك تفتح مواضيع مع الناس.
عارف لما تكون بتتعرف على حد أول مرة وتقوله عارف أن الخط قبل ما يبقى الخط كان شغال صياد سمك عادي. حقيقي براڤو!
84
والله حضرتك انا كان في مخيلتي الموضوع أبسط من كده بكتير. وياترى ال Rate Limiter ده بتحطوا قدامه Rate Limiter برضه 🤔
blog.algomaster.io/p/rate-li…
142
ALT الحب لعبة قديمة بالية، ولكنه رياضة في عوَّامتنا، الفسق رذيلة في المجالس والمعاهد، ولكنه حرية في عوَّامتنا، والنساء تقاليد ووثائق في البيوت، ولكنهن مراهَقة وفتنة في عوَّامتنا، والقمر كوكب سيَّار خامد، ولكنه شِعر في عوَّامتنا، والجنون مرض في أي مكان، ولكنه فلسفة في عوامتنا، والشيء شيء حيثما كان، ولكنه لا شيء في عوَّامتنا.
107
جامد بجد أنا بعد ما ضفت معظم الكتب كان نفسي في ميزة زي دي. كمان عاملها بطريقة حلوة مش مملة الكروت دول كتير تعرف تحركهم شمال ويمين
2
68
بحاول الأيام دي أرجع اقرا تاني لقيت Bookmory هو زي Goodreads بس احسن كتير بالنسبة لي من ناحية ال design وال features
موضوع أنك تسجل وقت القراءة اكتشفته وانا باخد screenshot 🤯
1
2
437
End of an era: exported my entire Pocket library and moved to Raindrop.io
ALT Screenshot of the Raindrop.io web interface showing a user named "Ihab" with 6.3K items under "All bookmarks." The browser URL bar displays "app.raindrop.io/my/0", and the interface has a dark theme with a search bar and filter icon.
3
282
A modern URL bar (in @diabrowser):
• Page Title not "/2025/12/seo-spam" gibberish
• Space on both sides of "/" for readability
• Hover to reveal & edit URL
• Emphasize domain for trust+security
Dia isn't just AI. It's refined browser basics too, @browsercompany style.
75
