X Bookmarks — 2024 KW45: Animated SVGs in Your Console

November 7, 2024

|bookmarks

by Florian Narr

X Bookmarks — 2024 KW45: Animated SVGs in Your Console

@jh3yy — animated SVGs as console background images

an alternative approach to console animation that doesn't hijack the console

  1. inline CSS animation into an SVG
  2. style console message with background-image
  3. use SVG as the background-image 🚀

console​.info( "%ccome cook", "background-image: url(/animated.svg);" )

Genuinely clever. console.log styling via %c is something most devs know about, but using a data URI or a hosted SVG as background-image to get actual animation in the console without monkey-patching anything — that's the kind of thing you don't think of until someone shows you. Saved this the second I saw it.


@KaraBharat — full-stack task list CRUD with optimistic UI

⚡️ Task List UI - Complete CRUD With Optimistic UI

⌘ Searching, sorting, filtering, and pagination ⌘ UI with @reactjs, @tan_stack, @shadcn and @HookForm ⌘ @typescript, #zod and #zustand ⌘ API with @honojs and @DrizzleORM ⌘ Database: PostgreSQL with @neondatabase

The stack here is the interesting part: Hono for the API layer, Drizzle for the ORM, Neon for serverless Postgres. Zustand for state, TanStack Query for data fetching, and optimistic UI on top. That's a lot of moving parts and seeing it all wired together with source code is useful, even if you'd swap out individual pieces.


@jal_eelll — multiple dynamic OG images in Next.js

Next.js Tip: Generate multiple dynamic OG images based on route params

Short post, but the use case is real. Most people set up one OG image route and call it done. If you have multiple content types — posts, tags, authors — you want different OG layouts per route. Next.js ImageResponse lets you do this cleanly; this is a good reminder to actually structure it that way.


@JulianGarnier — createDraggable() API is done

I think the createDraggable() API is now complete 😮‍💨

This is Julian Garnier of anime.js — createDraggable() is part of the v4 rewrite. The exhausted emoji is doing a lot of work here. Drag-and-drop APIs that handle inertia, constraints, and accessibility well are notoriously fiddly to get right, and anime.js v4 has been a long road. Worth watching if you need any kind of draggable UI.


@JayaGup10 — "Service as Software" and systems of agents

"Service as Software" is Silicon Valley's hottest buzzword right now.

Everyone's talking about SaaS becoming service providers, but no one's explaining HOW. The answer? After 6 months of research and 100s of startup conversations, we have the answer: Systems of Agents.

The framing is a bit breathless, but the underlying point is real: SaaS products are starting to wrap their functionality in agents that can execute tasks end-to-end rather than just expose features. Whether "Service as Software" becomes the shorthand people stick with or not, the direction is correct. Worth reading for the structural breakdown of how these agent systems are being built.


@BilliCodes — lesser-known HTML features

HTML Hidden Powers Lesser-known but powerful HTML features

No specific features listed in the tweet text — it's a thread or image post. That said, this category of content is consistently worth a look. Things like <details>, <dialog>, popover, contenteditable, and inert are underused and can cut a lot of JavaScript. Saved it as a reference to check later.


@tom_doerr — browser automation made easier

This makes browser automation so much easier

No tool name in the tweet text (image-only context), but 1,000+ bookmarks says it's pointing at something real. Browser automation is one of those areas where the tooling has gotten legitimately better over the past year — Playwright is solid but the setup overhead for quick scripts is still non-trivial. Flagged this to dig into later.


@tom_doerr — Supermemory, a second brain for bookmarks

"Build your own second brain with supermemory. It's a ChatGPT for your bookmarks. Import tweets or save websites and content using the chrome extension."

supermemory is an open-source project that indexes your bookmarks and makes them searchable via chat. The appeal is obvious — the graveyard of saved links you'll never actually read. Whether the RAG implementation is good enough to surface useful things rather than vague matches is the real question. Worth trying before writing off the concept.


@tom_doerr — open-source note-taking, painless

"An open-source, lightweight note-taking solution. The pain-less way to create your meaningful notes."

The descriptor "painless" is doing a lot of lifting here. 2,400 bookmarks on a note-taking app tweet suggests it's at least striking a nerve. The open-source angle matters — most note apps lock you into their format eventually. Honestly just saved this so I don't forget it exists when I'm next annoyed at Obsidian.


20 Popular Open Source Projects Started or Supported By Big Companies

Alex Xu's system design content is usually diagram-heavy and dense with useful specifics. This one is a useful map of the OSS-corporate overlap — which projects exist because a big company needed them internally and open-sourced the result. Kubernetes, Flink, Envoy, Cassandra — the pattern is consistent: big companies solve scaling problems and then donate the solution.


@tom_doerr — free and open-source ERP

"Free and Open Source Enterprise Resource Planning (ERP)"

ERP software is typically either expensive, ancient, or both. An OSS alternative that doesn't require a six-figure implementation partner is interesting on principle. Whether it's production-ready for anything beyond small business workflows is a different question. Saved this as a reference for the next time someone asks me about internal tooling.