Drake
@saeris
Design Engineer. React, Typescript, Figma. Sometimes I do photography. Either ranting about programming or raving about Dota.
had friends over tonight to watch The Solitary Gourmet (2025) together and it was so so nice to be able to share this wonderful movie (and the series) with more people!
anyways, back to grinding on today's deck(s)! maybe I can have it translate my markdown formatted dialog text next. the lack of furigana/<ruby> text formatting in Figma means I need to do all of *that* by hand as well...
the next step, now that I've got these processing, will be to replicate the stroke-order animations that the source SVGs have but I'll punt on that for now, given that Figma Slides doesn't yet have support for Figma Motion animations it would be pretty slick to have these in a slide deck
so I described in detail to Figma's agent my process for cleaning these up. it didn't get it on the first couple of tries, but by the fourth or fifth iteration telling it to compare its output to the existing hand-crafted versions, it finally cracked the code! here is it's best result so far:
as you can see, that's a heck of a lot of components I went and touched up by hand (224 kanji, before stroke variants) so naturally, I'd rather not pour more of my time into the remaining 18 lessons worth. that's a lot of paths to restyle!
yesterday I gave @figma.com's new generative plugins a spin to automate some tedious work away for me in my monthly Kanji lessons, I put together slide decks with stroke order diagrams. while I have the SVGs sourced already, they needed cleaning up in Figma, which at best was an hour of hard work
narrowed down an issue I had previously experienced with @npmx.dev and just now again with @antfu.me's Nostics docs site it appears that because I had downloaded Geist (a @vercel.com font) when it first came out, anytime I visited a site that used it, the wrong font weight would be loaded!
fallback fonts would help in cases such as my previous rant, where you can see on the left the unicode character doesn't have a glyph available so Figma bails out to another font (Inter, probably), but you can't override that behavior yourself on the right I substituted the character for an svg
on a related note, I really wish Figma supported configuring fallback fonts and had native ruby text rendering support in my slide decks I have to manually handle furigana, so an example passage like this one takes me a good chunk of time to do the typesetting by hand
final day of Fanime! had lots of fun seeing friends that I don’t get to spend nearly enough time with. looking forward to next year!
Rokujizo statues at Reigen-in, Kyoto, #幼六地蔵 #童地蔵 #霊源院 #京都 #Kyoto 📍 Tofukuji, Kyoto, JP #GrainSocial https://grain.social/profile/did:plc:cphegthq6dhys7gyzbq6t64b/gallery/3ml3y3jkxcj2f
we recently wrapped up Journal with Witch (違国日記); by far it is one of the best anime I've seen in a long time! unusual for a piece of Japanese media, the depth and humanity of the story and dialog were refreshing, with some of the most relatable neurodivergent characters in the medium
compare this to the text to speech app I made last weekend, which got the multi-voice dialog speaking and a dialog editor all working right off the bat! It even adapted the crude design I gave it half-way through pretty well too user-sting-92053801.figma.site
here's the design I gave it (first image) versus version 9 (second image) this came about while trying to fix the select inputs, which were completely broken to start. not a single version is usable, either, as it fails to use mediabunny from npm (claude couldn't do it either)
my first thought upon seeing this was how to use it to implement this top-level navigation
this year I'm doing something new and I'm teaching 5 of my friends Japanese in weekly 2-hour classes with the goal of preparing them to take and pass the JLPT N5 next December just completed our second session and man... I'm gonna be an expert at @figma.com Slides by the time we're done...
bundled up all of the @vscode.dev Markdown Preview extensions I've published lately into one package, including a list of the markdown-it plugins they use in addition to what the equivalent remark plugins are marketplace.visualstudio.com/items?itemNa...
got 6 markdown preview syntax extensions published to the @vscode.dev marketplace now! helping me to get a 1:1 preview in my IDE that'll match what goes live on my site
for a while now I've been beating the drum that you should just author your content in Markdown and use GitHub + VSCode as your CMS with the right VSCode extensions and some imported CSS, your Markdown preview can match your site's content, giving you a WYSIWYG experience right in your browser!
another TI is now in the bag! this year I wasn't able to go to Hamburg with the rest of the Crimson Witnesses crew, but I did cook up a new website to feature our survival guide over the last several weeks! designed in @figma.com and built using @astro.build, markdown & css crimsonwitnesses.com
made some progress on an idea I had a few months back, but it looks like I've hit a wall 😭 turns out you can't programmatically select child nodes in @figma.com widgets, so while I can load remote Kanji SVGs, I can't animate their strokes as I had hoped to! wanted this to be a Slides widget
over the weekend I had a thought: what if you could do syntax highlighting for Japanese grammar? to my surprise, there didn't seem to be an existing tool for this, so I decided to try making one myself now I've got a prototype of a remark plugin that does just that!