diana

Portfolio revamp for 2025! 🎉 dianaow.com #pixijs #webdev #dataviz #portfolio #design

lady gaga's discography and songs she wrote #musicbrainz music-knowledge-graph.vercel.app

詩人でマルチモーダル文化人類学者のふくだぺろ氏の単著『平等主義暴力』のWebサイト／アプリをつくりました　装丁家や版元の編集者の方々の仕事ぶりにも感激しながら、チャラく短命なWebなりに何ができるんだろうって考えながらつくりました batwa.fukudapero.com

The best way to explore masks is the map. samspratt.com/6/masks/?view=…

As data extraction pipeline from MusicBrainz API is slow and prone to TLS connection timeouts, I’ve pre-seeded Supabase with catalog of some popular artists. All search results are cached in Supabase so that data retrieved from MusicBrainz API does not need to be fetched again.

It includes search, filtering and node-based navigation to uncover patterns and relationships within music metadata. I have been experimenting with graph representation involving entities within connected combos and expandable graph interactions, well-suited for music data.

Music Knowledge Graph — I created an interactive web app that helps users explore music data from MusicBrainz through a visual network of artists, collaborators, albums and songs. music-knowledge-graph.vercel.app #dataviz #datavisualization #networkviz #graphviz #nuxt #antvg6 #music

Exploring arena board with peripheral canvas The squished edges are a mini-map of what's nearby!

I wanted a way to explore Unicode by visual similarity, not just by name or codepoint, so I built Charcutrie. It lets you browse characters that look alike, search across scripts and symbols, and even sketch a shape to find matching glyphs. (pretty badly for now :D)

This is not the best dendrogram but I'm glad we're starting to create complex diagrams of the complex systems we're embedded in & I hope that the ability to make & read them that AI enables leads to more nuanced conversations rather than the slop we've had for the last 30 years.

75 years of MotoGP constructor history — mapped as a living network. Every constructor. Every rider. Every era. samodrole.com/projects/machi… #dataviz #datavisualization #motogp #motorcycleracing #d3js #svelte #informationdesign #motorsport #interactivedesign #grandprix

This 2D → 3D map animation on @vercel's new CDN dashboard is absolutely magical ✨🤤

you can instantly 10x your vibecoded frontends by just learning what different ui components are called ofc opus is creating generic slop, the only words you know are menu and button.

dog follows pointer + avoids collisions with no dependencies - builds the page as a graph, more subdivisions towards the text for perf - dijkstra shortest path

New project: I dove into @CMHC_ca housing starts data and built an interactive dashboard that visualizes provincial trends across major shocks — from 90s policy cutbacks to 2008, the 2017/18 slowdown, and the COVID surge. #dataviz #dashboard #Canada samodrole.com/projects/canad…

ok this is actually a sick 404 page lol

software is still about thinking software has always been about taking ambiguous human needs and crystallizing them into precise, interlocking systems. the craft is in the breakdown: which abstractions to create, where boundaries should live, how pieces communicate. coding with ai today creates a new trap: the illusion of speed without structure. you can generate code fast, but without clear system architecture – the real boundaries, the actual invariants, the core abstractions – you end up with a pile that works until it doesn't. it's slop because there's no coherent mental model underneath. ai doesn't replace systems thinking – it amplifies the cost of not doing it. if you don't know what you want structurally, ai fills gaps with whatever pattern it's seen most. you get generic solutions to specific problems. coupled code where you needed clean boundaries. three different ways of doing the same thing because you never specified the one way. as Cursor handles longer tasks, the gap between "vaguely right direction" and "precisely understood system" compounds exponentially. when agents execute 100 steps instead of 10, your role becomes more important, not less. the skill shifts from "writing every line" to "holding the system in your head and communicating its essence": - define boundaries – what are the core abstractions? what should this component know? where does state live? - specify invariants – what must always be true? what are the constants and defaults that make the system work? - guide decomposition – how should this break down? what's the natural structure? what's stable vs likely to change? - maintain coherence – as ai generates more code, you ensure it fits the mental model, follows patterns, respects boundaries. this is what great architects and designers do: they don't write every line, but they hold the system design and guide toward coherence. agents are just very fast, very literal team members. the danger is skipping the thinking because ai makes it feel optional. people prompt their way into codebases they don't understand. can't debug because they never designed it. can't extend because there's no structure, just accumulated features. people who think deeply about systems can now move 100x faster. you spend time on the hard problem – understanding what you're building and why – and ai handles mechanical translation. you're not bogged down in syntax, so you stay in the architectural layer longer. the future isn't "ai replaces programmers" or "everyone can code now." it's "people who think clearly about systems build incredibly fast, and people who don't generate slop at scale." the skill becomes: holding complexity, breaking it down cleanly, communicating structure precisely. less syntax, more systems. less implementation, more architecture. less writing code, more designing coherence. humans are great at seeing patterns, understanding tradeoffs, making judgment calls about how things should fit together. ai can't save you from unclear thinking – it just makes unclear thinking run faster.

#UILab でラック&ピニオンを模したスクロール UI を発表しました。 歯車の半径を変えて触ってみてね yamatoiizuka.github.io/rap-scroll/