https://damien.zone/feed.xml https://damien.zone/favicon-bg.png 2026-03-15T14:46:32Z https://samhenri.gold/blog/20260312-this-is-not-the-computer-for-you/ 2026-03-15T14:46:32Z 2026-03-15T15:47:40Z Damien Erambert <blockquote> <p>That is not a bug in how he’s using the computer. That is the entire mechanism by which a kid becomes a developer. Or a designer. Or a filmmaker. Or whatever it is that comes after spending thousands of hours alone in a room with a machine that was never quite right for what you were asking of it.</p> </blockquote> <p>I resonated more with that piece than I expected because, frankly, I <em>was</em> that kid who obsessed with Apple computers before getting my first iMac circa 2009.<br /> Maybe if I had been born 20 years later, I would be that kid who lusts after the MacBook Neo because he feels limited by Chromebooks, who knows.</p> <a href="https://samhenri.gold/blog/20260312-this-is-not-the-computer-for-you/">Permalink / Comments</a> https://damien.zone/macos-tahoe-forced-me-to-abandon-musicapp 2026-03-13T02:07:32Z 2026-03-14T00:15:18Z Damien Erambert <p>I've been meaning to write this post for <em>checks notes</em> months but, life got in the way, you know how it is.</p> <p>Those who know me know that I listen to <a href="https://listenbrainz.org/user/Eramdam/"><em>a lot</em></a> of music, it's the one thing that has been consistent for...uh...most of my life at this point? I started maintaining a music library back when Windows Media Player on Windows XP was <em>the</em> shit, then like everyone else at the time, I found out about WinAmp. Then I started using iTunes, I <em>think</em> I used it before getting a <a href="https://en.wikipedia.org/wiki/IPod_Nano#/media/File:KoolgiyBlackNano.JPG">1st gen iPod Nano</a> but frankly it has been so long I cannot remember exactly.</p> <p>All that is to say, I've been collecting music files and organizing them through various means for a while. I endured through iTunes' idiosyncrasies for essentially most of my time with it, I put up with its weird quirks around music tag management. And I did the same when it transformed into Music.app on macOS.</p> <p>At some point (circa 2015), I got fed up with having to re-tag stuff by hand and started using <a href="https://beets.readthedocs.io/en/stable/">beets</a> to manage and tag my music library. It clearly wasn't <em>meant</em> to be used in tandem with iTunes/Music.app but I made it work somewhat okay.</p> <p>That lasted for a while, my library continued to grow, I briefly played around with <a href="https://www.musicpd.org/">mpd</a> and <a href="https://github.com/ncmpcpp/ncmpcpp">ncmpcpp</a>, but quickly went back to Music.app because I actually liked its UI a lot, despite it evolving sometimes for the worse.</p> <p>Fast forward to last November when I finally decided to install macOS Tahoe on my main Mac. The upgrade was relatively painless despite... Liquid Glass being a thing. I don't <em>hate</em> Liquid Glass on iOS/iPadOS but it is clear it's half-assed on the Mac and <a href="https://sixcolors.com/post/2026/02/2025reportcard/">this isn't a controversial opinion</a>. But whatever, for better or worse, Apple's weird redesigns are fine, I got used to it relatively quickly.</p> <p>Then I opened the Music app. After being, hum, startled by the UI and its...questionable decisions I went on to play some music and realized I had become <a href="https://xkcd.com/1172/">Longtimeuser4</a> because Music.app broke the way I listen to music. You see, I am the type of sicko who has a lot of music^{<a href="#user-content-fn-1" id="user-content-fnref-1" data-footnote-ref aria-describedby="footnote-label">1</a>} AND who shuffles all of it...by album^{<a href="#user-content-fn-2" id="user-content-fnref-2" data-footnote-ref aria-describedby="footnote-label">2</a>}, meaning when I press "play", Music.app would pick a random album to play, play it in order and then play another album.</p> <p>Except Music.app on macOS Tahoe doesn't do that anymore. Actually, no, it does but <strong>much</strong> slower than it used to on macOS Sequoia. How slow? Unbearably slow if you have a lot of songs/albums.</p> <blockquote class="mastodon-embed" data-embed-url="https://social.erambert.me/@eramdam/115506030628602362/embed" style="background:#FCF8FF;border-radius:8px;border:1px solid #C9C4DA;margin:0;max-width:540px;min-width:270px;overflow:hidden;padding:0"> <a href="https://social.erambert.me/@eramdam/115506030628602362" target="_blank" style="align-items:center;color:#1C1A25;display:flex;flex-direction:column;font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Roboto, sans-serif;font-size:14px;justify-content:center;letter-spacing:0.25px;line-height:20px;padding:24px;text-decoration:none"> <div style="color:#787588;margin-top:16px">Post by @eramdam@erambert.me</div> <div style="font-weight:500">View on Mastodon</div> </a> </blockquote> <p>This is running on my M1 Max Mac Studio, not a slow machine but somehow prepping the queue takes upwards of <strong>four seconds</strong> and blocks the entire UI doing so, making the app feel unusable. The same operation was instantaneous on macOS Sequoia. This was a clear regression and there wasn't much I could do about it. I also knew <a href="https://michaelhans.com/eclecticism/2025/09/29/macos-tahoe-music-app-breaks-shuffle/">I wasn't the only one complaining about this</a>, so it clearly wasn't <em>just</em> me!</p> <p>Some quick troubleshooting showed that the time spent between clicking "play" and music playing was directly correlated to the size of the queue, meaning there's some <em>O(N)</em> type shit going on^{<a href="#user-content-fn-3" id="user-content-fnref-3" data-footnote-ref aria-describedby="footnote-label">3</a>}. A friend of mine who happens to be close-ish to the matter helped me gather evidence that could help draft an internal bug report. I wasn't exactly confident this would get addressed quickly, if at all. I'll be frankly surprised if this gets fixed in macOS 27.</p> <h2 id="exploring-the-alternatives">Exploring the alternatives</h2> <p>Keep in mind that my set of requirements for a possible solution were fairly picky, I wanted:</p> <ul> <li>Local music files. <ul> <li>I was <em>technically</em> using Apple Music for <a href="https://support.apple.com/en-us/118285">Sync Library</a> for easy sync between my machines and iDevices, but music streaming services are incomplete/underwhelming at best and <a href="https://www.theguardian.com/music/2025/sep/18/massive-attack-remove-music-from-spotify-to-protest-ceo-daniel-eks-investment-in-ai-military">complicit in war at worst</a>.</li> </ul> </li> <li>Album shuffling, or at the very least, a way to quickly pick albums at random.</li> <li>Scrobbling, I wasn't going to give up on 10+ years of listening data, damnit.</li> <li>At minimum, a macOS app <em>and</em> an iOS app that don't look like ass.</li> <li>And perhaps the most important: being able to handle a huge library without falling apart.</li> </ul> <p>I had used <a href="https://www.plex.tv/plexamp/">Plexamp</a> on iOS for a minute a few years prior and, while a Mac app <em>does</em> exist for it... it's essentially the iPhone app in a macOS window. I'm sure this works great if you have a few hundreds albums, but it very much doesn't if you have <em>thousands</em>. And it doesn't have album shuffling, and Plex is <em>really</em> not good at handling music files if you care about tagging. I assume Jellyfin would suffer from similar problems because it's not <em>designed</em> for music.</p> <p>I had been a <a href="https://brushedtype.co/doppler/">Doppler</a> user on iOS for a while, and have tried the macOS version and... same deal, no album shuffling and no real solution for syncing either. <a href="https://radiccio.music/">Radiccio</a> seemed like a promising new music player...until I tried it and it could <em>not</em> handle my library.</p> <p>After many deliberations, I remembered I already host a bunch of stuff on my NAS/Home server so I figured I'd give <a href="https://www.navidrome.org/">Navidrome</a> a try. Setting it up was fairly easy, I already had a copy of my music library (because of the previous Plex stint) so I just had to point it at the files and... it worked great.</p> <p>Now, I needed clients. The "macOS native Navidrome/Subsonic clients" ecosystem is relatively dry at the moment. <a href="https://github.com/BLeeEZ/amperfy">Amperfy</a> came up a lot but it lacked my precious album shuffling, so it was a pass.</p> <p>On the Mac, I ended up settling on <a href="https://github.com/jeffvli/feishin">Feishin</a>. The Spotify-like UI definitely took some getting used to but it runs pretty well, the developer is fairly responsive/updates it regularly, and it's an Electron app meaning I can easily <a href="https://github.com/jeffvli/feishin/commits?author=eramdam">contribute fixes</a> to bugs when I see them.</p> <p></p><figure data-type="image"><a href="/img/blog/feishin-showcase.webp"><img src="https://damien.zone/img/blog/feishin-showcase.webp" alt="&quot;How Feishin looks like for me&quot;" loading="lazy" decoding="async" width="auto" height="auto" /></a><figcaption>"How Feishin looks like for me"</figcaption></figure><p></p> <p>On iOS, <a href="https://testflight.apple.com/join/LDWqgjAs">Arpeggi</a> has been my daily driver. It looks nice, fits pretty well on iOS, and the transcoding feature is <em>very</em> handy when on a cellular network^{<a href="#user-content-fn-4" id="user-content-fnref-4" data-footnote-ref aria-describedby="footnote-label">4</a>}, I'll happily pay for it (even with a subscription) when it officially comes out.</p> <p>I am still managing files with <a href="https://beets.readthedocs.io/en/stable/">beets</a> on the NAS directly. I did create a new library from scratch to re-tag things properly. I eventually "upgraded" my whole library to FLAC files and took the time to match as many things on <a href="https://musicbrainz.org/">MusicBrainz</a> as possible; this meant adding releases when they weren't already present. Yes, this took forever, but it makes me happy <em>and</em> I'll be able to <a href="https://beets.readthedocs.io/en/stable/plugins/mbsync.html">sync changes from MusicBrainz</a>, which is neat.</p> <p>At this point, the workflow is pretty solid, I've been living like this for 4 months. I'm still sad about the state of software on macOS but I did gain something: control.<br /> Neither Navidrome nor Feishin can modify my stuff, only I can, and if something blows up it's because <strong>I</strong> fucked up and not because of an obscure bug with Music.app.</p> <p>And that control feels great nowadays.</p> <section data-footnotes class="footnotes"><h2 class="sr-only" id="footnote-label">Footnotes</h2> <ol> <li id="user-content-fn-1"> <p>~26,000 tracks across ~2,500 albums as of writing <a href="#user-content-fnref-1" data-footnote-backref aria-label="Back to reference 1" class="data-footnote-backref">↩</a></p> </li> <li id="user-content-fn-2"> <p>I know some people do it but shuffling individual songs sounds deranged and shuffling songs <strong>within</strong> an album ought to be a crime. <a href="#user-content-fnref-2" data-footnote-backref aria-label="Back to reference 2" class="data-footnote-backref">↩</a></p> </li> <li id="user-content-fn-3"> <p>See <a href="https://en.wikipedia.org/wiki/Big_O_notation">Big-O notation</a>, essentially, the code is written in a way that the more items there are to process...the longer it takes to run. Which <em>could</em> be fine unless your code runs in a way that it taking more than a few miliseconds to run results in the app being unresponsive. <a href="#user-content-fnref-3" data-footnote-backref aria-label="Back to reference 3" class="data-footnote-backref">↩</a></p> </li> <li id="user-content-fn-4"> <p>On the advice of my friend <a href="https://jkap.io/">Jae</a>, I've set it up to transcode files to OPUS at 96kbps which is <em>plenty</em> when I'm on the go. <a href="#user-content-fnref-4" data-footnote-backref aria-label="Back to reference 4" class="data-footnote-backref">↩</a></p> </li> </ol> </section> <a href="https://damien.zone/macos-tahoe-forced-me-to-abandon-musicapp">Permalink / Comments</a> https://damien.zone/updates-march-2026 2026-03-11T03:58:38Z 2026-03-12T02:07:52Z Damien Erambert <p>It's been a minute, hasn't it. In fact it has been <em>checks notes</em> <strong>10 months</strong>?! Oh dear, well. Better late than never I suppose. If you're reading this directly on the website (and you should, imo), you'll see that things look quite different!</p> <p>I've been meaning to touch up my website's design for, uh, most of last year to be honest but I haven't been able to get to it until a few weeks ago. So here it is. It's more of a reskin rather than a redesign but it feels fresher, lighter and tidier in ways I like so I'm pretty happy with it.</p> <p>I've stuck to the excellent <a href="https://fontsource.org/fonts/atkinson-hyperlegible-next">Atkinson Hyperlegible Next</a>^{<a href="#user-content-fn-1" id="user-content-fnref-1" data-footnote-ref aria-describedby="footnote-label">1</a>} as a body font and switched the headings from <a href="https://fonts.google.com/specimen/Merriweather">Merriweather</a> to <a href="https://pangrampangram.com/products/right-serif">Pangrampangram's Right Serif</a>, I think they look quite neat.</p> <p>I've made the website overall feel a bit more "professional". Not that I intend to write super serious stuff or anything but I eventually want to make I made <a href="https://erambert.me">https://erambert.me</a> redirect to this website and to avoid maintaining two websites with a <em>very</em> similar purpose^{<a href="#user-content-fn-2" id="user-content-fnref-2" data-footnote-ref aria-describedby="footnote-label">2</a>}.</p> <h2 id="little-details">Little details</h2> <p>I've had fun with some details in the design so now I'm just gonna show them off.</p> <p>I'm using the shit out of CSS variables custom properties, meaning that all the colors in the theme are derived from 3 base colors, which means I can do stuff like this^{<a href="#user-content-fn-3" id="user-content-fnref-3" data-footnote-ref aria-describedby="footnote-label">3</a>}:</p> <span>Change the color here and see how it affects the style</span> <p>And the color system means that making a dark mode involved <a href="https://github.com/eramdam/damien.zone/blob/2026-redesign/src/assets/styles/redesign.damien.zone.css#L73-L86">changing a few colors</a> and it looked great right away! <small>Huge thanks to <a href="https://blog.platinumtulip.net/">Tulip</a> for helping me with these</small></p> <p>Hover states for links are always a struggle for me, so I decided to stop worrying about it and going whole hog with it and making them <strong>very</strong> obvious:</p> <p></p><figure data-type="image"><a href="/img/blog/2026-redesign-hoverstate.webp"><img src="https://damien.zone/img/blog/2026-redesign-hoverstate.webp" loading="lazy" decoding="async" width="auto" height="auto" /></a></figure><p></p> <p>I wanted to have <em>some</em> fancy/flashy touches in the redesign, so I opted for this progressive blur effect in the sticky header on compatible browsers, I think it looks cute. Kudos to <a href="https://kennethnym.com/blog/progressive-blur-in-css/">kennethnym</a> because I wouldn't have bothered to figure it out myself, I think.</p> <p></p><figure data-type="image"><a href="/img/blog/2026-redesign-blur-header.webp"><img src="https://damien.zone/img/blog/2026-redesign-blur-header.webp" loading="lazy" decoding="async" width="auto" height="auto" /></a></figure><p></p> <p>While on the topic of blurs, you know what's better than a colored shadow? A shadow that matches the image's colors. It's barely noticeable but I know it's there and it makes me happy</p> <p></p><figure data-type="image"><a href="/img/blog/2026-redesign-avatarshadoa.webp"><img src="https://damien.zone/img/blog/2026-redesign-avatarshadoa.webp" loading="lazy" decoding="async" width="auto" height="auto" /></a></figure><p></p> <p>One thing I noticed when working on this redesign was how I really did not like the default Comentario avatar for anonymous comments. It does the job but it felt really jarring in my opinion:</p> <p></p><figure data-type="image"><a href="/img/blog/comentario-default-avatar.png"><img src="https://damien.zone/img/blog/comentario-default-avatar.png" loading="lazy" decoding="async" width="auto" height="auto" /></a></figure><p></p> <p>So I tried to come up with something, and I didn't want to <em>just</em> replace the default avatar with something else so I thought "could I somehow make something more unique and (more importantly) cuter?".</p> <p>So I did! I will make a whole article about it because I don't want to derail this post too much but here's how it looks. It <em>looks</em> random but isn't really (more on that in the future post) and retains the same "random" avatar if an anonymous commenter reuses the same name.^{<a href="#user-content-fn-4" id="user-content-fnref-4" data-footnote-ref aria-describedby="footnote-label">4</a>}</p> <p></p><figure data-type="image"><a href="/img/blog/2026-redesign-anonavatars.png"><img src="https://damien.zone/img/blog/2026-redesign-anonavatars.png" loading="lazy" decoding="async" width="auto" height="auto" /></a></figure><p></p> <p>That's it ✨ I want to post more on this website this year, I swear I will (at least try to) stick to that this time around.</p> <section data-footnotes class="footnotes"><h2 class="sr-only" id="footnote-label">Footnotes</h2> <ol> <li id="user-content-fn-1"> <p>#eggbug forever <a href="#user-content-fnref-1" data-footnote-backref aria-label="Back to reference 1" class="data-footnote-backref">↩</a></p> </li> <li id="user-content-fn-2"> <p>I am, however, not gonna even <em>think</em> about migrating shit like email away from that domain. <a href="#user-content-fnref-2" data-footnote-backref aria-label="Back to reference 2" class="data-footnote-backref">↩</a></p> </li> <li id="user-content-fn-3"> <p>I would have made a video but A) this is funnier and B) this weighs nothing^{<a href="#user-content-fn-5" id="user-content-fnref-5" data-footnote-ref aria-describedby="footnote-label">5</a>} <a href="#user-content-fnref-3" data-footnote-backref aria-label="Back to reference 3" class="data-footnote-backref">↩</a></p> </li> <li id="user-content-fn-4"> <p>In case you're wondering, these are emoji taken from <a href="https://emojipedia.org/noto-emoji">Noto Emoji (monochrome)</a> <a href="#user-content-fnref-4" data-footnote-backref aria-label="Back to reference 4" class="data-footnote-backref">↩</a></p> </li> <li id="user-content-fn-5"> <p>Unfortunately styling the color input in CSS is not possible consistently yet and I am not bothering to write a custom color input <a href="#user-content-fnref-5" data-footnote-backref aria-label="Back to reference 5" class="data-footnote-backref">↩</a></p> </li> </ol> </section> <a href="https://damien.zone/updates-march-2026">Permalink / Comments</a> https://damien.zone/justice-in-san-francisco-may-22nd-2025 2025-05-25T08:36:47Z 2025-05-25T17:39:15Z Damien Erambert <p>In a very on-brand move, I saw Justice live in San Francisco last Thursday^{<a href="#user-content-fn-1" id="user-content-fnref-1" data-footnote-ref aria-describedby="footnote-label">1</a>}, I took a bunch of pictures. BUT! This time, I used my newly-acquired Ricoh GR III, because what better way to really get familiarized with a camera than to use it to take hundreds of pictures for 3 hours in a dark environment, right?</p> <p>Anyway, I got some pretty good ones, the Ricoh's resolution gives so much flexibility when cropping that the short focal length (28mm in 35mm equivalent) wasn't as big of an issue as I feared. And I wasn't even standing remotely close from the stage!</p> <p>As always, click the images to see the full-size, full quality JPEGs. Only the third picture was taken with the iPhone 13 Pro using Halide, everything else was with the Ricoh.</p> <figure data-type="image"><a href="/img/blog/justice-05-2025/justice-05-2025-8.jpg"><img src="https://damien.zone/img/blog/justice-05-2025/justice-05-2025-8-thumb.webp" alt="" loading="lazy" decoding="async" /></a></figure> <figure data-type="image"><a href="/img/blog/justice-05-2025/justice-05-2025-1.jpg"><img src="https://damien.zone/img/blog/justice-05-2025/justice-05-2025-1-thumb.webp" alt="" loading="lazy" decoding="async" /></a></figure> <figure data-type="image"><a href="/img/blog/justice-05-2025/justice-05-2025-2.jpg"><img src="https://damien.zone/img/blog/justice-05-2025/justice-05-2025-2-thumb.webp" alt="" loading="lazy" decoding="async" /></a></figure> <figure data-type="image"><a href="/img/blog/justice-05-2025/justice-05-2025-3.jpg"><img src="https://damien.zone/img/blog/justice-05-2025/justice-05-2025-3-thumb.webp" alt="" loading="lazy" decoding="async" /></a></figure> <figure data-type="image"><a href="/img/blog/justice-05-2025/justice-05-2025-4.jpg"><img src="https://damien.zone/img/blog/justice-05-2025/justice-05-2025-4-thumb.webp" alt="" loading="lazy" decoding="async" /></a></figure> <figure data-type="image"><a href="/img/blog/justice-05-2025/justice-05-2025-5.jpg"><img src="https://damien.zone/img/blog/justice-05-2025/justice-05-2025-5-thumb.webp" alt="" loading="lazy" decoding="async" /></a></figure> <figure data-type="image"><a href="/img/blog/justice-05-2025/justice-05-2025-6.jpg"><img src="https://damien.zone/img/blog/justice-05-2025/justice-05-2025-6-thumb.webp" alt="" loading="lazy" decoding="async" /></a></figure> <figure data-type="image"><a href="/img/blog/justice-05-2025/justice-05-2025-7.jpg"><img src="https://damien.zone/img/blog/justice-05-2025/justice-05-2025-7-thumb.webp" alt="" loading="lazy" decoding="async" /></a></figure> <figure data-type="image"><a href="/img/blog/justice-05-2025/justice-05-2025-9.jpg"><img src="https://damien.zone/img/blog/justice-05-2025/justice-05-2025-9-thumb.webp" alt="" loading="lazy" decoding="async" /></a></figure> <figure data-type="image"><a href="/img/blog/justice-05-2025/justice-05-2025-10.jpg"><img src="https://damien.zone/img/blog/justice-05-2025/justice-05-2025-10-thumb.webp" alt="" loading="lazy" decoding="async" /></a></figure> <section data-footnotes class="footnotes"><h2 class="sr-only" id="footnote-label">Footnotes</h2> <ol> <li id="user-content-fn-1"> <p>For those counting, that's 5 times during their current world tour. <a href="#user-content-fnref-1" data-footnote-backref aria-label="Back to reference 1" class="data-footnote-backref">↩</a></p> </li> </ol> </section> <a href="https://damien.zone/justice-in-san-francisco-may-22nd-2025">Permalink / Comments</a> https://damien.zone/mac-themes-garden-post-launch-updates 2025-05-21T06:07:16Z 2025-05-21T06:08:43Z Damien Erambert <p></p><figure data-type="image"><a href="/img/blog/macthemes-update.webp"><img src="https://damien.zone/img/blog/macthemes-update.webp" loading="lazy" decoding="async" width="auto" height="auto" /></a></figure><p></p> <h2 id="post-launch-stuff">Post-launch stuff</h2> <p>It has been a fun two weeks since I launched <a href="https://macthemes.garden">Mac Themes Garden</a>!<br /> I had published my little <a href="/introducing-mac-themes-garden">blog post</a>, posted about it on <a href="https://social.erambert.me/@eramdam/114458779438545155">Mastodon</a> and <a href="https://bsky.app/profile/damien.zone/post/3lohwzfkglc2o">Bluesky</a> at like 9pm without thinking much of it.</p> <p>Only to wake up to being on <a href="https://news.ycombinator.com/item?id=43919868">Hacker News</a>?! The (in)famous Orange Site! And somehow the thread was full of people just reminiscing and sharing some of their favorite themes they looked for on the site?! Bonkers stuff. But I'm not complaining.</p> <p>Made for a funny set of stats, let me tell you:</p> <p></p><figure data-type="image"><a href="/img/blog/macthemes-garden-stats.png"><img src="https://damien.zone/img/blog/macthemes-garden-stats.png" alt="My analytics showing a 1460% increase of visitor in 24h for macthemes.garden" loading="lazy" decoding="async" width="auto" height="auto" /></a><figcaption>My analytics showing a 1460% increase of visitor in 24h for macthemes.garden</figcaption></figure><p></p> <p></p><figure data-type="image"><a href="/img/blog/damien-zone-stats.png"><img src="https://damien.zone/img/blog/damien-zone-stats.png" alt="My analytics showing a 10,543% increase of visitor in 24h for damien.zone" loading="lazy" decoding="async" width="auto" height="auto" /></a><figcaption>My analytics showing a 10,543% increase of visitor in 24h for damien.zone</figcaption></figure><p></p> <p>Then <a href="https://boingboing.net/2025/05/08/site-has-all-the-classic-macos-themes-you-could-ever-want.html">Boing Boing</a> posted about it, so did <a href="https://mjtsai.com/blog/2025/05/09/mac-themes-garden/">Michael Tsai</a>, and then today (as I write this) <a href="https://9to5mac.com/2025/05/18/mac-themes-garden-kaleidoscope-archive/">9to5Mac</a> also posted about it. I almost expect a second, much smaller wave, of visits if other websites pick it up from 9to5Mac.</p> <p>Wild stuff, but it has been great to see the response to the website, pretty rewarding and motivating!</p> <h2 id="some-updates">Some updates!</h2> <p>Right as I launched the site, <a href="https://hypercritical.co/">John Siracusa</a> made a very good suggestion:</p> <blockquote class="mastodon-embed" data-embed-url="https://mastodon.social/@siracusa/114458934614680148/embed" style="background:#FCF8FF;border-radius:8px;border:1px solid #C9C4DA;margin:0;max-width:540px;min-width:270px;overflow:hidden;padding:0"> <a href="https://mastodon.social/@siracusa/114458934614680148" target="_blank" style="align-items:center;color:#1C1A25;display:flex;flex-direction:column;font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Roboto, sans-serif;font-size:14px;justify-content:center;letter-spacing:0.25px;line-height:20px;padding:24px;text-decoration:none"> <div style="color:#787588;margin-top:16px">Post by @siracusa@mastodon.social</div> <div style="font-weight:500">View on Mastodon</div> </a> </blockquote> <p>So implementing these suggestions (sorting and "likes") has been what I've been doing for the past week and a half.</p> <h3 id="sorting">Sorting</h3> <p><a href="https://github.com/eramdam/macthemes.garden/pull/5">Sorting</a> was relatively straightforward, I just had to get a bit creative because I didn't want to use Astro's server rendering <em>just</em> to sort items. So I used the <a href="https://docs.astro.build/en/guides/routing/#nested-pagination">nested pagination</a> mechanism to generate the ~320 pages necessary, not too bad:</p> <div class="expressive-code"><figure class="frame has-title"><figcaption class="header"><span class="title">src/pages/[sort]/[page].astro</span></figcaption><pre data-language="astro"><code><div class="ec-line"><div class="code"><span style="--0:#99A0A6;--1:#616972">---</span></div></div><div class="ec-line"><div class="code"><span style="--0:#F97583;--1:#BF3441">import</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">type</span><span style="--0:#E1E4E8;--1:#24292E"> { GetStaticPaths } </span><span style="--0:#F97583;--1:#BF3441">from</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#9ECBFF;--1:#032F62">"astro"</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span style="--0:#F97583;--1:#BF3441">import</span><span style="--0:#E1E4E8;--1:#24292E"> { getCollection } </span><span style="--0:#F97583;--1:#BF3441">from</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#9ECBFF;--1:#032F62">"astro:content"</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span style="--0:#F97583;--1:#BF3441">import</span><span style="--0:#E1E4E8;--1:#24292E"> IndexPage </span><span style="--0:#F97583;--1:#BF3441">from</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#9ECBFF;--1:#032F62">"../../components/IndexPage.astro"</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span style="--0:#F97583;--1:#BF3441">import</span><span style="--0:#E1E4E8;--1:#24292E"> { PAGINATION, slugFromSortAndOrder, sortThemes } </span><span style="--0:#F97583;--1:#BF3441">from</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#9ECBFF;--1:#032F62">"../../helpers"</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span style="--0:#F97583;--1:#BF3441">import</span><span style="--0:#E1E4E8;--1:#24292E"> { possibleSortSlugs } </span><span style="--0:#F97583;--1:#BF3441">from</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#9ECBFF;--1:#032F62">"../../helpers"</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span style="--0:#F97583;--1:#BF3441">export</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">const</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">getStaticPaths</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#E1E4E8;--1:#24292E"> (</span><span style="--0:#F97583;--1:#BF3441">async</span><span style="--0:#E1E4E8;--1:#24292E"> ({ </span><span style="--0:#FFAB70;--1:#AE4B07">paginate</span><span style="--0:#E1E4E8;--1:#24292E"> }) </span><span style="--0:#F97583;--1:#BF3441">=&gt;</span><span style="--0:#E1E4E8;--1:#24292E"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#F97583;--1:#BF3441">const</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">themes</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">await</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">getCollection</span><span style="--0:#E1E4E8;--1:#24292E">(</span><span style="--0:#9ECBFF;--1:#032F62">"themes"</span><span style="--0:#E1E4E8;--1:#24292E">);</span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#F97583;--1:#BF3441">return</span><span style="--0:#E1E4E8;--1:#24292E"> possibleSortSlugs.</span><span style="--0:#B392F0;--1:#6F42C1">flatMap</span><span style="--0:#E1E4E8;--1:#24292E">((</span><span style="--0:#FFAB70;--1:#AE4B07">slug</span><span style="--0:#E1E4E8;--1:#24292E">) </span><span style="--0:#F97583;--1:#BF3441">=&gt;</span><span style="--0:#E1E4E8;--1:#24292E"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#F97583;--1:#BF3441">const</span><span style="--0:#E1E4E8;--1:#24292E"> { </span><span style="--0:#79B8FF;--1:#005CC5">order</span><span style="--0:#E1E4E8;--1:#24292E">, </span><span style="--0:#79B8FF;--1:#005CC5">sort</span><span style="--0:#E1E4E8;--1:#24292E"> } </span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">slugFromSortAndOrder</span><span style="--0:#E1E4E8;--1:#24292E">(slug);</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#F97583;--1:#BF3441">return</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">paginate</span><span style="--0:#E1E4E8;--1:#24292E">(</span><span style="--0:#B392F0;--1:#6F42C1">sortThemes</span><span style="--0:#E1E4E8;--1:#24292E">(themes, sort, order), {</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">pageSize: </span><span style="--0:#79B8FF;--1:#005CC5">PAGINATION</span><span style="--0:#E1E4E8;--1:#24292E">.size,</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">params: { sort: slug },</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">});</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">});</span></div></div><div class="ec-line"><div class="code"><span style="--0:#E1E4E8;--1:#24292E">}) </span><span style="--0:#F97583;--1:#BF3441">satisfies</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">GetStaticPaths</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span style="--0:#F97583;--1:#BF3441">const</span><span style="--0:#E1E4E8;--1:#24292E"> { </span><span style="--0:#79B8FF;--1:#005CC5">page</span><span style="--0:#E1E4E8;--1:#24292E"> } </span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#E1E4E8;--1:#24292E"> Astro.props;</span></div></div><div class="ec-line"><div class="code"><span style="--0:#F97583;--1:#BF3441">const</span><span style="--0:#E1E4E8;--1:#24292E"> { </span><span style="--0:#79B8FF;--1:#005CC5">order</span><span style="--0:#E1E4E8;--1:#24292E">, </span><span style="--0:#79B8FF;--1:#005CC5">sort</span><span style="--0:#E1E4E8;--1:#24292E"> } </span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">slugFromSortAndOrder</span><span style="--0:#E1E4E8;--1:#24292E">(Astro.params.sort);</span></div></div><div class="ec-line"><div class="code"><span style="--0:#99A0A6;--1:#616972">---</span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span style="--0:#E1E4E8;--1:#24292E">&lt;</span><span style="--0:#79B8FF;--1:#005CC5">IndexPage</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">page</span><span style="--0:#E1E4E8;--1:#24292E">={page} </span><span style="--0:#B392F0;--1:#6F42C1">order</span><span style="--0:#E1E4E8;--1:#24292E">={order} </span><span style="--0:#B392F0;--1:#6F42C1">sort</span><span style="--0:#E1E4E8;--1:#24292E">={sort} /&gt;</span></div></div></code></pre><div class="copy"><div aria-live="polite"></div><div></div></div></figure></div> <h3 id="user-likes">User likes</h3> <p><a href="https://github.com/eramdam/macthemes.garden/pull/6">Likes</a>... were a Whole Thing as I expected. I knew I wanted to do two things:</p> <ul> <li>Accept "user" likes. Users are "identified" using a <a href="https://en.wikipedia.org/wiki/Universally_unique_identifier#Versions_3_and_5_(namespace_name-based)">UUID v5</a> generated with their IP address as a namespace, making for a convenient hash. It's not perfect, but I'm not going to bother setting up an actual user login system just for a little "like" button.</li> <li>Use the likes on posts from the <a href="https://social.erambert.me/@macthemes">Mastodon</a> and <a href="https://bsky.app/profile/macthemes.garden">Bluesky</a> profiles.</li> </ul> <p>This was a perfect excuse to get familiar with <a href="https://docs.astro.build/en/guides/astro-db/">Astro DB</a>.</p> <p>My <a href="https://github.com/eramdam/macthemes.garden/blob/6e646c2b5ba8d70172783ce405f0ff24eb736257/db/config.ts#L1">database schema</a> is relatively simple:</p> <ul> <li>A <code>Like</code> table with the following columns: <ul> <li><code>id</code> (unique/primary key) which is a UUID v4</li> <li><code>themeId</code>, which references a specific theme in the <code>Theme</code> table</li> <li><code>userId</code></li> </ul> </li> <li>A <code>Theme</code> table with: <ul> <li>a <code>id</code> column which corresponds to the <a href="https://github.com/eramdam/macthemes.garden/blob/6e646c2b5ba8d70172783ce405f0ff24eb736257/src/themesLoader.ts#L28-L31">actual IDs I give each theme</a></li> </ul> </li> <li>A <code>UserRequest</code> table with a <code>userId</code> and a <code>date</code> column, this is used to do basic rate-limiting on the "like" <a href="https://docs.astro.build/en/guides/actions/">action</a>.</li> </ul> <p>The aforementioned action's <a href="https://github.com/eramdam/macthemes.garden/blob/6e646c2b5ba8d70172783ce405f0ff24eb736257/src/actions/index.ts">code</a> is a bit verbose, but the logic is relatively simple:</p> <ol> <li>Receive a user request</li> <li>Do basic validation to ensure the <code>themeId</code> being set matches one of the themes</li> <li>Check against the rate-limiter to see if the user is allowed to perform the action</li> <li>Look if the theme being liked already has a corresponding row in <code>Theme</code> and if not, insert it.</li> <li>Insert/delete a row from the <code>Like</code> table depending on whether the user is liking/unliking the theme.</li> <li>Return the total likes count for the theme and the <code>liked</code> state for the current user.</li> <li>Have the UI update as the action is performed with a simple <a href="https://github.com/eramdam/macthemes.garden/blob/6e646c2b5ba8d70172783ce405f0ff24eb736257/src/components/likeButton.tsx#L12-L32">Preact component</a></li> </ol> <h3 id="mastodonbluesky-likes">Mastodon/Bluesky likes</h3> <p>That's for user-generated likes, next is pulling the likes from Mastodon and Bluesky.</p> <p>I went with solutions that one might call "lazy" or "stupid", to which I would answer "if it is stupid, and it works, then it's not stupid".</p> <p>Since I host my own Mastodon instance, I can bypass the API entirely to get the basis of what I need data-wise. So I wrote a little script that calls PostgreSQL and generates a JSON file that looks like this:</p> <div class="expressive-code"><figure class="frame"><figcaption class="header"></figcaption><pre data-language="json" class="wrap" style="--ecMaxLine:116ch"><code><div class="ec-line"><div class="code"><span style="--0:#E1E4E8;--1:#24292E">[</span></div></div><div class="ec-line" style="--ecIndent:2ch"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">{</span></div></div><div class="ec-line" style="--ecIndent:4ch"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">"text"</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#9ECBFF;--1:#032F62">"Orange'N'Blue - John Bloor</span><span style="--0:#79B8FF;--1:#005CC5">\n</span><span style="--0:#9ECBFF;--1:#032F62">https://macthemes.garden/themes/6471b22c97c7-OrangeNBlue"</span><span style="--0:#E1E4E8;--1:#24292E">,</span></div></div><div class="ec-line" style="--ecIndent:4ch"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">"reblogs_count"</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#79B8FF;--1:#005CC5">2</span><span style="--0:#E1E4E8;--1:#24292E">,</span></div></div><div class="ec-line" style="--ecIndent:4ch"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">"favourites_count"</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#79B8FF;--1:#005CC5">6</span></div></div><div class="ec-line" style="--ecIndent:2ch"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">},</span></div></div><div class="ec-line" style="--ecIndent:4ch"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">{</span></div></div><div class="ec-line" style="--ecIndent:4ch"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">"text"</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#9ECBFF;--1:#032F62">"fvwMac green 1.09 - Alexander E. Ribbe</span><span style="--0:#79B8FF;--1:#005CC5">\n</span><span style="--0:#9ECBFF;--1:#032F62">https://macthemes.garden/themes/739da6aef9f0-fvwMac-green-109"</span><span style="--0:#E1E4E8;--1:#24292E">,</span></div></div><div class="ec-line" style="--ecIndent:4ch"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">"reblogs_count"</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#79B8FF;--1:#005CC5">0</span><span style="--0:#E1E4E8;--1:#24292E">,</span></div></div><div class="ec-line" style="--ecIndent:4ch"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">"favourites_count"</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#79B8FF;--1:#005CC5">2</span></div></div><div class="ec-line" style="--ecIndent:2ch"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">},</span></div></div><div class="ec-line" style="--ecIndent:2ch"><div class="code"><span class="indent"> </span><span style="--0:#99A0A6;--1:#616972">// and so on...</span></div></div><div class="ec-line"><div class="code"><span style="--0:#E1E4E8;--1:#24292E">]</span></div></div></code></pre><div class="copy"><div aria-live="polite"></div><div></div></div></figure></div> <p>The script is basically one cursed SQL query, behold:</p> <div class="expressive-code"><figure class="frame is-terminal"><figcaption class="header"><span class="title"></span><span class="sr-only">Terminal window</span></figcaption><pre data-language="bash" class="wrap" style="--ecMaxLine:457ch"><code><div class="ec-line"><div class="code"><span style="--0:#B392F0;--1:#6F42C1">psql</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">--dbname=mastodon_production</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">-c</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#9ECBFF;--1:#032F62">"SELECT json_agg(json_build_object('text', s.text, 'reblogs_count', ss.reblogs_count, 'favourites_count', ss.favourites_count)) FROM statuses s JOIN status_stats ss ON s.id=ss.status_id WHERE s.account_id=113370184750103599 AND s.in_reply_to_id IS NULL AND s.text LIKE '%https://macthemes.garden/themes/%' AND (ss.reblogs_count&gt;0 OR ss.favourites_count&gt;0);"</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">-t</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">-A</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">-o</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#9ECBFF;--1:#032F62">/home/mastodon/live/public/macthemes-posts-stats.json</span></div></div></code></pre><div class="copy"><div aria-live="polite"></div><div></div></div></figure></div> <p>The file is then made available publicly on my <a href="https://social.erambert.me/macthemes-posts-stats.json">instance's server</a> and is consumed by <a href="https://github.com/eramdam/macthemes.garden/blob/main/scripts/grab-mastodon-likes.ts">a script</a> that runs periodically in a GitHub action that will grab the URLs, extract the IDs, add the reblogs and favorites and make one big JSON map that will be used at build-time to add onto the like count.</p> <div class="expressive-code"><figure class="frame has-title"><figcaption class="header"><span class="title">grab-mastodon-likes.ts</span></figcaption><pre data-language="ts"><code><div class="ec-line"><div class="code"><span style="--0:#F97583;--1:#BF3441">import</span><span style="--0:#E1E4E8;--1:#24292E"> fs </span><span style="--0:#F97583;--1:#BF3441">from</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#9ECBFF;--1:#032F62">"fs-extra"</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span style="--0:#99A0A6;--1:#616972">// File generated daily</span></div></div><div class="ec-line"><div class="code"><span style="--0:#F97583;--1:#BF3441">const</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">stats</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">await</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">fetch</span><span style="--0:#E1E4E8;--1:#24292E">(</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#9ECBFF;--1:#032F62">"https://social.erambert.me/macthemes-posts-stats.json"</span><span style="--0:#E1E4E8;--1:#24292E">,</span></div></div><div class="ec-line"><div class="code"><span style="--0:#E1E4E8;--1:#24292E">);</span></div></div><div class="ec-line"><div class="code"><span style="--0:#F97583;--1:#BF3441">const</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">statsObject</span><span style="--0:#F97583;--1:#BF3441">:</span><span style="--0:#E1E4E8;--1:#24292E"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#FFAB70;--1:#AE4B07">text</span><span style="--0:#F97583;--1:#BF3441">:</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">string</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#FFAB70;--1:#AE4B07">reblogs_count</span><span style="--0:#F97583;--1:#BF3441">:</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">number</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#FFAB70;--1:#AE4B07">favourites_count</span><span style="--0:#F97583;--1:#BF3441">:</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">number</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span style="--0:#E1E4E8;--1:#24292E">}[] </span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">await</span><span style="--0:#E1E4E8;--1:#24292E"> stats.</span><span style="--0:#B392F0;--1:#6F42C1">json</span><span style="--0:#E1E4E8;--1:#24292E">();</span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span style="--0:#F97583;--1:#BF3441">const</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">urlRegex</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">new</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">RegExp</span><span style="--0:#E1E4E8;--1:#24292E">(</span><span style="--0:#9ECBFF;--1:#032F62">"https://macthemes.garden/themes/([a-z0-9]+)"</span><span style="--0:#E1E4E8;--1:#24292E">, </span><span style="--0:#9ECBFF;--1:#032F62">"i"</span><span style="--0:#E1E4E8;--1:#24292E">);</span></div></div><div class="ec-line"><div class="code"><span style="--0:#F97583;--1:#BF3441">const</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">likesByThemeIds</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#E1E4E8;--1:#24292E"> statsObject</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">.</span><span style="--0:#B392F0;--1:#6F42C1">map</span><span style="--0:#E1E4E8;--1:#24292E">((</span><span style="--0:#FFAB70;--1:#AE4B07">obj</span><span style="--0:#E1E4E8;--1:#24292E">) </span><span style="--0:#F97583;--1:#BF3441">=&gt;</span><span style="--0:#E1E4E8;--1:#24292E"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#F97583;--1:#BF3441">const</span><span style="--0:#E1E4E8;--1:#24292E"> [, </span><span style="--0:#79B8FF;--1:#005CC5">themeId</span><span style="--0:#E1E4E8;--1:#24292E">] </span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#E1E4E8;--1:#24292E"> obj.text.</span><span style="--0:#B392F0;--1:#6F42C1">match</span><span style="--0:#E1E4E8;--1:#24292E">(urlRegex) </span><span style="--0:#F97583;--1:#BF3441">||</span><span style="--0:#E1E4E8;--1:#24292E"> [];</span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#F97583;--1:#BF3441">if</span><span style="--0:#E1E4E8;--1:#24292E"> (</span><span style="--0:#F97583;--1:#BF3441">!</span><span style="--0:#E1E4E8;--1:#24292E">themeId) {</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#F97583;--1:#BF3441">return</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">undefined</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">}</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#F97583;--1:#BF3441">return</span><span style="--0:#E1E4E8;--1:#24292E"> { </span><span style="--0:#F97583;--1:#BF3441">...</span><span style="--0:#E1E4E8;--1:#24292E">obj, themeId };</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">})</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">.</span><span style="--0:#B392F0;--1:#6F42C1">filter</span><span style="--0:#E1E4E8;--1:#24292E">(Boolean)</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">.</span><span style="--0:#B392F0;--1:#6F42C1">reduce</span><span style="--0:#E1E4E8;--1:#24292E">((</span><span style="--0:#FFAB70;--1:#AE4B07">prev</span><span style="--0:#E1E4E8;--1:#24292E">, </span><span style="--0:#FFAB70;--1:#AE4B07">curr</span><span style="--0:#E1E4E8;--1:#24292E">) </span><span style="--0:#F97583;--1:#BF3441">=&gt;</span><span style="--0:#E1E4E8;--1:#24292E"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#F97583;--1:#BF3441">if</span><span style="--0:#E1E4E8;--1:#24292E"> (</span><span style="--0:#F97583;--1:#BF3441">!</span><span style="--0:#E1E4E8;--1:#24292E">curr?.themeId) {</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#F97583;--1:#BF3441">return</span><span style="--0:#E1E4E8;--1:#24292E"> {};</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">}</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#F97583;--1:#BF3441">return</span><span style="--0:#E1E4E8;--1:#24292E"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#F97583;--1:#BF3441">...</span><span style="--0:#E1E4E8;--1:#24292E">prev,</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">[curr?.themeId]:</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">(prev[curr.themeId] </span><span style="--0:#F97583;--1:#BF3441">||</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">0</span><span style="--0:#E1E4E8;--1:#24292E">) </span><span style="--0:#F97583;--1:#BF3441">+</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">(curr.favourites_count </span><span style="--0:#F97583;--1:#BF3441">||</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">0</span><span style="--0:#E1E4E8;--1:#24292E">) </span><span style="--0:#F97583;--1:#BF3441">+</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">(curr.reblogs_count </span><span style="--0:#F97583;--1:#BF3441">||</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">0</span><span style="--0:#E1E4E8;--1:#24292E">),</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">};</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">}, {});</span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span style="--0:#F97583;--1:#BF3441">await</span><span style="--0:#E1E4E8;--1:#24292E"> fs.</span><span style="--0:#B392F0;--1:#6F42C1">writeFile</span><span style="--0:#E1E4E8;--1:#24292E">(</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#F97583;--1:#BF3441">new</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">URL</span><span style="--0:#E1E4E8;--1:#24292E">(</span><span style="--0:#F97583;--1:#BF3441">import</span><span style="--0:#E1E4E8;--1:#24292E">.</span><span style="--0:#79B8FF;--1:#005CC5">meta</span><span style="--0:#E1E4E8;--1:#24292E">.</span><span style="--0:#B392F0;--1:#6F42C1">resolve</span><span style="--0:#E1E4E8;--1:#24292E">(</span><span style="--0:#9ECBFF;--1:#032F62">"../src/themes/likes-mastodon.json"</span><span style="--0:#E1E4E8;--1:#24292E">)).pathname,</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">JSON</span><span style="--0:#E1E4E8;--1:#24292E">.</span><span style="--0:#B392F0;--1:#6F42C1">stringify</span><span style="--0:#E1E4E8;--1:#24292E">(</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">{</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">likes: likesByThemeIds,</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">},</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">null</span><span style="--0:#E1E4E8;--1:#24292E">,</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">2</span><span style="--0:#E1E4E8;--1:#24292E">,</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">),</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#9ECBFF;--1:#032F62">"utf-8"</span><span style="--0:#E1E4E8;--1:#24292E">,</span></div></div><div class="ec-line"><div class="code"><span style="--0:#E1E4E8;--1:#24292E">);</span></div></div></code></pre><div class="copy"><div aria-live="polite"></div><div></div></div></figure></div> <p>For Bluesky, I'm doing something that feels like it shouldn't work, but it does and is much less annoying to write than the "correct" way so I'll take it. I'm abusing the <a href="https://docs.bsky.app/blog/repo-export">AT Proto repo export</a> mechanism to get an entire archive of the bot's account, I parse it as a collection of records and fetch the corresponding posts from the Bluesky API to get the necessary metrics. It's a bit silly, but it feels more efficient than having to query multiple pages of posts to <em>maybe</em> find the right ones.</p> <div class="expressive-code"><figure class="frame"><figcaption class="header"></figcaption><pre data-language="ts"><code><div class="ec-line"><div class="code"><span style="--0:#F97583;--1:#BF3441">import</span><span style="--0:#E1E4E8;--1:#24292E"> { iterateAtpRepo } </span><span style="--0:#F97583;--1:#BF3441">from</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#9ECBFF;--1:#032F62">"@atcute/car"</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span style="--0:#F97583;--1:#BF3441">import</span><span style="--0:#E1E4E8;--1:#24292E"> { Client, CredentialManager } </span><span style="--0:#F97583;--1:#BF3441">from</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#9ECBFF;--1:#032F62">"@atcute/client"</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span style="--0:#F97583;--1:#BF3441">import</span><span style="--0:#E1E4E8;--1:#24292E"> fs </span><span style="--0:#F97583;--1:#BF3441">from</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#9ECBFF;--1:#032F62">"fs-extra"</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span style="--0:#F97583;--1:#BF3441">import</span><span style="--0:#E1E4E8;--1:#24292E"> { chunk } </span><span style="--0:#F97583;--1:#BF3441">from</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#9ECBFF;--1:#032F62">"lodash-es"</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span style="--0:#99A0A6;--1:#616972">// import lexicons</span></div></div><div class="ec-line"><div class="code"><span style="--0:#F97583;--1:#BF3441">import</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">type</span><span style="--0:#E1E4E8;--1:#24292E"> {} </span><span style="--0:#F97583;--1:#BF3441">from</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#9ECBFF;--1:#032F62">"@atcute/atproto"</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span style="--0:#F97583;--1:#BF3441">import</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">type</span><span style="--0:#E1E4E8;--1:#24292E"> {} </span><span style="--0:#F97583;--1:#BF3441">from</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#9ECBFF;--1:#032F62">"@atcute/bluesky"</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span style="--0:#F97583;--1:#BF3441">const</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">actor</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#9ECBFF;--1:#032F62">"did:plc:a5j6hkim467cvi4rzouh6aei"</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span style="--0:#F97583;--1:#BF3441">const</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">manager</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">new</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">CredentialManager</span><span style="--0:#E1E4E8;--1:#24292E">({ service: </span><span style="--0:#9ECBFF;--1:#032F62">"https://bsky.social"</span><span style="--0:#E1E4E8;--1:#24292E"> });</span></div></div><div class="ec-line"><div class="code"><span style="--0:#F97583;--1:#BF3441">const</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">rpc</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">new</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">Client</span><span style="--0:#E1E4E8;--1:#24292E">({ handler: manager });</span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span style="--0:#F97583;--1:#BF3441">await</span><span style="--0:#E1E4E8;--1:#24292E"> manager.</span><span style="--0:#B392F0;--1:#6F42C1">login</span><span style="--0:#E1E4E8;--1:#24292E">({</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">identifier: process.env.</span><span style="--0:#79B8FF;--1:#005CC5">BLUESKY_USERNAME</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">||</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#9ECBFF;--1:#032F62">""</span><span style="--0:#E1E4E8;--1:#24292E">,</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">password: process.env.</span><span style="--0:#79B8FF;--1:#005CC5">BLUESKY_PASSWORD</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">||</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#9ECBFF;--1:#032F62">""</span><span style="--0:#E1E4E8;--1:#24292E">,</span></div></div><div class="ec-line"><div class="code"><span style="--0:#E1E4E8;--1:#24292E">});</span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span style="--0:#F97583;--1:#BF3441">const</span><span style="--0:#E1E4E8;--1:#24292E"> { </span><span style="--0:#79B8FF;--1:#005CC5">data</span><span style="--0:#E1E4E8;--1:#24292E">, </span><span style="--0:#79B8FF;--1:#005CC5">ok</span><span style="--0:#E1E4E8;--1:#24292E"> } </span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">await</span><span style="--0:#E1E4E8;--1:#24292E"> rpc.</span><span style="--0:#B392F0;--1:#6F42C1">get</span><span style="--0:#E1E4E8;--1:#24292E">(</span><span style="--0:#9ECBFF;--1:#032F62">"com.atproto.sync.getRepo"</span><span style="--0:#E1E4E8;--1:#24292E">, {</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">as: </span><span style="--0:#9ECBFF;--1:#032F62">"bytes"</span><span style="--0:#E1E4E8;--1:#24292E">,</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">params: {</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">did: actor,</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">},</span></div></div><div class="ec-line"><div class="code"><span style="--0:#E1E4E8;--1:#24292E">});</span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span style="--0:#F97583;--1:#BF3441">if</span><span style="--0:#E1E4E8;--1:#24292E"> (</span><span style="--0:#F97583;--1:#BF3441">!</span><span style="--0:#E1E4E8;--1:#24292E">ok) {</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">process.</span><span style="--0:#B392F0;--1:#6F42C1">exit</span><span style="--0:#E1E4E8;--1:#24292E">(</span><span style="--0:#79B8FF;--1:#005CC5">1</span><span style="--0:#E1E4E8;--1:#24292E">);</span></div></div><div class="ec-line"><div class="code"><span style="--0:#E1E4E8;--1:#24292E">}</span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span style="--0:#F97583;--1:#BF3441">const</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">urlRegex</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">new</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">RegExp</span><span style="--0:#E1E4E8;--1:#24292E">(</span><span style="--0:#9ECBFF;--1:#032F62">"https://macthemes.garden/themes/([a-z0-9]+)"</span><span style="--0:#E1E4E8;--1:#24292E">, </span><span style="--0:#9ECBFF;--1:#032F62">"i"</span><span style="--0:#E1E4E8;--1:#24292E">);</span></div></div><div class="ec-line"><div class="code"><span style="--0:#F97583;--1:#BF3441">const</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">records</span><span style="--0:#F97583;--1:#BF3441">:</span><span style="--0:#E1E4E8;--1:#24292E"> { </span><span style="--0:#FFAB70;--1:#AE4B07">rkey</span><span style="--0:#F97583;--1:#BF3441">:</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">string</span><span style="--0:#E1E4E8;--1:#24292E">; </span><span style="--0:#FFAB70;--1:#AE4B07">themeId</span><span style="--0:#F97583;--1:#BF3441">:</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">string</span><span style="--0:#E1E4E8;--1:#24292E"> }[] </span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#E1E4E8;--1:#24292E"> [];</span></div></div><div class="ec-line"><div class="code"><span style="--0:#99A0A6;--1:#616972">// convenient iterator for reading through an AT Protocol CAR repository</span></div></div><div class="ec-line"><div class="code"><span style="--0:#F97583;--1:#BF3441">for</span><span style="--0:#E1E4E8;--1:#24292E"> (</span><span style="--0:#F97583;--1:#BF3441">const</span><span style="--0:#E1E4E8;--1:#24292E"> { </span><span style="--0:#79B8FF;--1:#005CC5">collection</span><span style="--0:#E1E4E8;--1:#24292E">, </span><span style="--0:#79B8FF;--1:#005CC5">rkey</span><span style="--0:#E1E4E8;--1:#24292E">, </span><span style="--0:#79B8FF;--1:#005CC5">record</span><span style="--0:#E1E4E8;--1:#24292E"> } </span><span style="--0:#F97583;--1:#BF3441">of</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">iterateAtpRepo</span><span style="--0:#E1E4E8;--1:#24292E">(data)) {</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#F97583;--1:#BF3441">if</span><span style="--0:#E1E4E8;--1:#24292E"> (collection </span><span style="--0:#F97583;--1:#BF3441">===</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#9ECBFF;--1:#032F62">"app.bsky.feed.post"</span><span style="--0:#E1E4E8;--1:#24292E">) {</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#F97583;--1:#BF3441">if</span><span style="--0:#E1E4E8;--1:#24292E"> (</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">(record </span><span style="--0:#F97583;--1:#BF3441">as</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">any</span><span style="--0:#E1E4E8;--1:#24292E">).facets?.[</span><span style="--0:#79B8FF;--1:#005CC5">0</span><span style="--0:#E1E4E8;--1:#24292E">].features?.[</span><span style="--0:#79B8FF;--1:#005CC5">0</span><span style="--0:#E1E4E8;--1:#24292E">].$type </span><span style="--0:#F97583;--1:#BF3441">===</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#9ECBFF;--1:#032F62">"app.bsky.richtext.facet#link"</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">) {</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#F97583;--1:#BF3441">if</span><span style="--0:#E1E4E8;--1:#24292E"> (</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">(record </span><span style="--0:#F97583;--1:#BF3441">as</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">any</span><span style="--0:#E1E4E8;--1:#24292E">).facets?.[</span><span style="--0:#79B8FF;--1:#005CC5">0</span><span style="--0:#E1E4E8;--1:#24292E">].features?.[</span><span style="--0:#79B8FF;--1:#005CC5">0</span><span style="--0:#E1E4E8;--1:#24292E">].uri.</span><span style="--0:#B392F0;--1:#6F42C1">startsWith</span><span style="--0:#E1E4E8;--1:#24292E">(</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#9ECBFF;--1:#032F62">"https://macthemes.garden/themes/"</span><span style="--0:#E1E4E8;--1:#24292E">,</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">)</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">) {</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#F97583;--1:#BF3441">const</span><span style="--0:#E1E4E8;--1:#24292E"> [, </span><span style="--0:#79B8FF;--1:#005CC5">themeId</span><span style="--0:#E1E4E8;--1:#24292E">] </span><span style="--0:#F97583;--1:#BF3441">=</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B392F0;--1:#6F42C1">String</span><span style="--0:#E1E4E8;--1:#24292E">((record </span><span style="--0:#F97583;--1:#BF3441">as</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">any</span><span style="--0:#E1E4E8;--1:#24292E">).facets?.[</span><span style="--0:#79B8FF;--1:#005CC5">0</span><span style="--0:#E1E4E8;--1:#24292E">].features?.[</span><span style="--0:#79B8FF;--1:#005CC5">0</span><span style="--0:#E1E4E8;--1:#24292E">].uri).</span><span style="--0:#B392F0;--1:#6F42C1">match</span><span style="--0:#E1E4E8;--1:#24292E">(</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">urlRegex,</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">) </span><span style="--0:#F97583;--1:#BF3441">||</span><span style="--0:#E1E4E8;--1:#24292E"> [];</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#F97583;--1:#BF3441">if</span><span style="--0:#E1E4E8;--1:#24292E"> (themeId) {</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">records.</span><span style="--0:#B392F0;--1:#6F42C1">push</span><span style="--0:#E1E4E8;--1:#24292E">({ themeId, rkey });</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">}</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">}</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">}</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">}</span></div></div><div class="ec-line"><div class="code"><span style="--0:#E1E4E8;--1:#24292E">}</span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span style="--0:#F97583;--1:#BF3441">let</span><span style="--0:#E1E4E8;--1:#24292E"> likesByThemeIds</span><span style="--0:#F97583;--1:#BF3441">:</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">Record</span><span style="--0:#E1E4E8;--1:#24292E">&lt;</span><span style="--0:#79B8FF;--1:#005CC5">string</span><span style="--0:#E1E4E8;--1:#24292E">, </span><span style="--0:#79B8FF;--1:#005CC5">number</span><span style="--0:#E1E4E8;--1:#24292E">&gt; </span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#E1E4E8;--1:#24292E"> {};</span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span style="--0:#F97583;--1:#BF3441">for</span><span style="--0:#E1E4E8;--1:#24292E"> (</span><span style="--0:#F97583;--1:#BF3441">const</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">recordsChunk</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">of</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">chunk</span><span style="--0:#E1E4E8;--1:#24292E">(records, </span><span style="--0:#79B8FF;--1:#005CC5">25</span><span style="--0:#E1E4E8;--1:#24292E">)) {</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#F97583;--1:#BF3441">const</span><span style="--0:#E1E4E8;--1:#24292E"> { </span><span style="--0:#79B8FF;--1:#005CC5">data</span><span style="--0:#E1E4E8;--1:#24292E">, </span><span style="--0:#79B8FF;--1:#005CC5">ok</span><span style="--0:#E1E4E8;--1:#24292E"> } </span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">await</span><span style="--0:#E1E4E8;--1:#24292E"> rpc.</span><span style="--0:#B392F0;--1:#6F42C1">get</span><span style="--0:#E1E4E8;--1:#24292E">(</span><span style="--0:#9ECBFF;--1:#032F62">"app.bsky.feed.getPosts"</span><span style="--0:#E1E4E8;--1:#24292E">, {</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">params: {</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">uris: recordsChunk.</span><span style="--0:#B392F0;--1:#6F42C1">map</span><span style="--0:#E1E4E8;--1:#24292E">((</span><span style="--0:#FFAB70;--1:#AE4B07">r</span><span style="--0:#E1E4E8;--1:#24292E">) </span><span style="--0:#F97583;--1:#BF3441">=&gt;</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">makeUri</span><span style="--0:#E1E4E8;--1:#24292E">(r.rkey)),</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">},</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">});</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#F97583;--1:#BF3441">if</span><span style="--0:#E1E4E8;--1:#24292E"> (ok) {</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">data.posts.</span><span style="--0:#B392F0;--1:#6F42C1">forEach</span><span style="--0:#E1E4E8;--1:#24292E">((</span><span style="--0:#FFAB70;--1:#AE4B07">post</span><span style="--0:#E1E4E8;--1:#24292E">) </span><span style="--0:#F97583;--1:#BF3441">=&gt;</span><span style="--0:#E1E4E8;--1:#24292E"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#F97583;--1:#BF3441">const</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">themeIdForPost</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#E1E4E8;--1:#24292E"> recordsChunk.</span><span style="--0:#B392F0;--1:#6F42C1">find</span><span style="--0:#E1E4E8;--1:#24292E">((</span><span style="--0:#FFAB70;--1:#AE4B07">r</span><span style="--0:#E1E4E8;--1:#24292E">) </span><span style="--0:#F97583;--1:#BF3441">=&gt;</span><span style="--0:#E1E4E8;--1:#24292E"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#F97583;--1:#BF3441">return</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">makeUri</span><span style="--0:#E1E4E8;--1:#24292E">(r.rkey) </span><span style="--0:#F97583;--1:#BF3441">===</span><span style="--0:#E1E4E8;--1:#24292E"> post.uri;</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">})?.themeId;</span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#F97583;--1:#BF3441">if</span><span style="--0:#E1E4E8;--1:#24292E"> (themeIdForPost) {</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">likesByThemeIds[themeIdForPost] </span><span style="--0:#F97583;--1:#BF3441">=</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">(likesByThemeIds[themeIdForPost] </span><span style="--0:#F97583;--1:#BF3441">||</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">0</span><span style="--0:#E1E4E8;--1:#24292E">) </span><span style="--0:#F97583;--1:#BF3441">+</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">(post.likeCount </span><span style="--0:#F97583;--1:#BF3441">||</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">0</span><span style="--0:#E1E4E8;--1:#24292E">) </span><span style="--0:#F97583;--1:#BF3441">+</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">(post.repostCount </span><span style="--0:#F97583;--1:#BF3441">||</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">0</span><span style="--0:#E1E4E8;--1:#24292E">);</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">}</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">});</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">}</span></div></div><div class="ec-line"><div class="code"><span style="--0:#E1E4E8;--1:#24292E">}</span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span style="--0:#F97583;--1:#BF3441">await</span><span style="--0:#E1E4E8;--1:#24292E"> fs.</span><span style="--0:#B392F0;--1:#6F42C1">writeFile</span><span style="--0:#E1E4E8;--1:#24292E">(</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#F97583;--1:#BF3441">new</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">URL</span><span style="--0:#E1E4E8;--1:#24292E">(</span><span style="--0:#F97583;--1:#BF3441">import</span><span style="--0:#E1E4E8;--1:#24292E">.</span><span style="--0:#79B8FF;--1:#005CC5">meta</span><span style="--0:#E1E4E8;--1:#24292E">.</span><span style="--0:#B392F0;--1:#6F42C1">resolve</span><span style="--0:#E1E4E8;--1:#24292E">(</span><span style="--0:#9ECBFF;--1:#032F62">"../src/themes/likes-bsky.json"</span><span style="--0:#E1E4E8;--1:#24292E">)).pathname,</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">JSON</span><span style="--0:#E1E4E8;--1:#24292E">.</span><span style="--0:#B392F0;--1:#6F42C1">stringify</span><span style="--0:#E1E4E8;--1:#24292E">(</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">{</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">likes: likesByThemeIds,</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">},</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">null</span><span style="--0:#E1E4E8;--1:#24292E">,</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">2</span><span style="--0:#E1E4E8;--1:#24292E">,</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">),</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#9ECBFF;--1:#032F62">"utf-8"</span><span style="--0:#E1E4E8;--1:#24292E">,</span></div></div><div class="ec-line"><div class="code"><span style="--0:#E1E4E8;--1:#24292E">);</span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span style="--0:#F97583;--1:#BF3441">function</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">makeUri</span><span style="--0:#E1E4E8;--1:#24292E">(</span><span style="--0:#FFAB70;--1:#AE4B07">rkey</span><span style="--0:#F97583;--1:#BF3441">:</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">string</span><span style="--0:#E1E4E8;--1:#24292E">)</span><span style="--0:#F97583;--1:#BF3441">:</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">any</span><span style="--0:#E1E4E8;--1:#24292E"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#F97583;--1:#BF3441">return</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#9ECBFF;--1:#032F62">`at://${</span><span style="--0:#E1E4E8;--1:#24292E">actor</span><span style="--0:#9ECBFF;--1:#032F62">}/app.bsky.feed.post/${</span><span style="--0:#E1E4E8;--1:#24292E">rkey</span><span style="--0:#9ECBFF;--1:#032F62">}`</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span style="--0:#E1E4E8;--1:#24292E">}</span></div></div></code></pre><div class="copy"><div aria-live="polite"></div><div></div></div></figure></div> <p>And just like the Mastodon script, it is running periodically in a GitHub action, so the data is refreshed at least once a day.</p> <h3 id="putting-all-this-together">Putting all this together</h3> <p>A few tweaks of the theme grid layout and some cute icons drawn by my friend <a href="https://wavebeem.com">Sage</a> later, I got myself a cute "likes" view on the theme grid!</p> <p></p><figure data-type="image"><a href="/img/blog/macthemes-garden-grid.png"><img src="https://damien.zone/img/blog/macthemes-garden-grid.png" alt="Robo-K2 really is one of the themes of all time" loading="lazy" decoding="async" width="auto" height="auto" /></a><figcaption>Robo-K2 really is one of the themes of all time</figcaption></figure><p></p> <p>And that's it for the updates! I got other ideas, but they will be a bit more involved so they might take some time to execute, so stay tuned! And keep sharing the good themes around ❤️</p> <p>Cheers,<br /> - Damien</p> <a href="https://damien.zone/mac-themes-garden-post-launch-updates">Permalink / Comments</a> https://damien.zone/introducing-mac-themes-garden 2025-05-06T03:12:50Z 2026-03-15T14:44:17Z Damien Erambert <p></p><figure data-type="image"><a href="/img/projects/macthemes-garden.webp"><img src="https://damien.zone/img/projects/macthemes-garden.webp" loading="lazy" decoding="async" width="auto" height="auto" /></a></figure><p></p> <h2 id="the-short-version">The short version</h2> <p>I've "launched" the <a href="https://macthemes.garden">Mac Themes Garden</a>! It is a website showcasing more than 3,000 (and counting) Kaleidoscope from the Classic Mac era, ready to be seen, downloaded and explored! Check it out! Oh, and there also is an <a href="https://macthemes.garden/feed.xml">RSS feed</a> you can subscribe to see themes as they are added/updated!</p> <p>And yes, there is a button that you can include on your website! <a href="https://macthemes.garden/about#buttons">Grab it here</a>! Isn't it cute?</p> <a href="https://macthemes.garden" title="Mac Themes Garden"><img src="https://macthemes.garden/buttons/88x31_macthemes.garden.png" alt="Mac Themes Garden" style="image-rendering:pixelated" /></a> <p><strong>Now, for the yapping.</strong> Note: if you're reading this in an RSS reader, you might want to open the article on my website directly as it contains a bunch of CSS demos and those won't work well in an RSS reader.</p> <h2 id="some-background">Some background</h2> <p>If you know me from Online, you may know that I've been running the Mac Themes Bot on <a href="https://bsky.app/profile/macthemes.garden">Bluesky</a>/<a href="https://social.erambert.me/@macthemes">Mastodon</a>/<a href="https://cohost.org/macthemes">Cohost</a> for a few years now.</p> <p>The idea of the bot was simple, showcasing custom themes from the Mac OS X and Classic Mac eras, on the rate of one an hour. Since I was inspired by <a href="https://web.archive.org/web/20191021204432/https://twitter.com/kaleidoscopemac">@kaleidoscopemac</a> on Twitter, I only started showcasing themes made for <a href="https://en.wikipedia.org/wiki/Unsanity">ShapeShifter by Unsanity</a>. A while later, that Twitter account got suspended.<br /> Since I already had the <a href="https://github.com/eramdam/shapeshifter-themes">tooling in place</a> to scrape and post themes for OS X, I figured I could add themes for Kaleidoscope (OS 7/8/9) into the mix. After trying (and failing) to get the original dataset from the author of the bot, I set on to scrape the Wayback Machine for records of the <a href="https://web.archive.org/web/20000823055322fw_/http://www.kaleidoscope.net/schemes/completelisting.shtml">Kaleidoscope Scheme Archive</a>.<br /> From that point on, my bot would post themes every hour, with a classic theme on even hours and an OS X theme on odd hours^{<a href="#user-content-fn-1" id="user-content-fnref-1" data-footnote-ref aria-describedby="footnote-label">1</a>}.</p> <p>The years passed, the bot carried on, made me and a bunch of other people smile on the various websites where I would run it. The <a href="https://cohost.org/macthemes">Cohost</a> incarnation in particular was really special because Cohost was a special site, but also it was full of nerds (complimentary) and people would go nuts for the random gems in there.</p> <p>Around maybe early 2023, I grew frustrated of the fact that the only images I had for the Kaleidoscope themes schemes were those <a href="https://github.com/eramdam/shapeshifter-themes/blob/master/assets/!.emperor.gif">tiny .gif files</a> from the late 90s.</p> <h3 id="recording-25-year-old-schemes">“Recording” 25-year-old schemes</h3> <p>So I did the reasonable thing: set up a terribly manual process to take screenshots and record the author information of the <a href="https://archive.org/details/kaleidoscope-scheme-archive">~4,000 themes available</a>, with the intention of making a website showcasing everything once I was done.</p> <p>Without going into details (which you can read <a href="https://web.archive.org/web/20250106111834/https://cohost.org/eramdam/post/5246796-replying-to-this-com">here</a>), the process looks like this:</p> <ul> <li>Open my Mac OS 9 VM in <a href="https://getutm.app/">UTM.app</a> (QEMU frontend)</li> <li>Go through the folder of schemes</li> <li>Select a given scheme, apply it</li> <li>Take 3 screenshots: <ol> <li>One of the scheme's about box.</li> <li>One of the scheme being used in the Finder/regular desktop situation.</li> <li>And finally, a screenshot of the application <a href="http://www.shurey.com/Soft/Share/KSA/index.html">KSA Sampler</a> in order to mimic the original screenshots from the Kaleidoscope Scheme Archive. That specific screenshot would get pasted into Photoshop to be cropped/trimmed of its opaque background using Photoshop Actions.</li> </ol> </li> <li>Write down the name, author and release year of the scheme</li> <li>Find the corresponding .sit archive file</li> <li>Record all of this in a record inside an Airtable database.</li> </ul> <p>Here's how it looks inside Airtable:</p> <p></p><figure data-type="image"><a href="/img/blog/airtable-macthemes.png"><img src="https://damien.zone/img/blog/airtable-macthemes.png" alt="6 rows inside an Airtable database, showing screenshots and scheme information" loading="lazy" decoding="async" width="auto" height="auto" /></a><figcaption>6 rows inside an Airtable database, showing screenshots and scheme information</figcaption></figure><p></p> <p>On a good day, I can maybe record, I don't know, a dozen or so themes an hour.</p> <blockquote> <p>But Damien, why didn't you automate this process?!</p> </blockquote> <p>I'm glad you asked! I tried! But I, at least until now, could not find a good way to reliably perform the actions I need to take. And that's not even touching on the fact that sometimes a scheme doesn't have any author or year information! Sometimes the author inside the Kaleidoscope scheme file is completely wrong, and the actual author is written in a separate "Read me" file. Sometimes there's barely any information to go by, sometimes the scheme is buggy and would crash my VM.</p> <p>At that point, the only automations I have are:</p> <ul> <li>a <a href="https://www.keyboardmaestro.com/main/">Keyboard Maestro</a> <a href="/img/blog/keyboard-mastro-macro.png">macro</a> that calls the <code>qemu-monitor</code> for the running VM, takes a lossless screenshot and puts it into my clipboard, ready to be pasted</li> <li>Photoshop actions to: <ul> <li>create a document from the clipboard</li> <li>after cropping, remove all pixels of a given color in a document and trim it to remove extra alpha pixels (for the KSA Sampler screenshots above)</li> </ul> </li> <li>A <a href="https://macintoshgarden.org/forum/startly-quickeys-5">Quickeys</a> shortcut to call "Hide Others" inside of Mac OS 9. Turns out this action didn't have a keyboard shortcut until Mac OS X? Didn't know that!</li> </ul> <p>Beyond that, I'm afraid it's all manual since I want to record data that isn't straight forwardly extracted by just looking at files 😔.</p> <p><em>At any rate</em>, I was and thought "I'll finish recording all these schemes, <strong>and then</strong> I'll make the website"...</p> <p>Dear reader, I am not done. By my own estimations, I am maybe halfway done. I do not know when I will be fully done, but my good friend <a href="https://wavebeem.com">Sage</a> pushed me to: make the damn website already.</p> <p>And they were right, I should have made the website earlier! It was a fun and challenging distraction, and <em>fuck me</em> I could use distractions these days.</p> <h2 id="making-da-website">Making Da Website</h2> <p>So, around January of this year, I've started work on the website.</p> <p>The first step was to interface with the <a href="https://airtable.com/">Airtable</a> API in order to download the data from my database and store all the assets into a folder in my repository. <a href="https://github.com/eramdam/macthemes.garden/blob/main/scripts/airtable.ts">Nothing too crazy</a>, but had to be done.<br /> I did need to be careful around caching and not re-downloading images I already had on disk. We're talking about like, ~2,500 rows each containing 3 images, and you don't want to re-download 7,500 PNG files every time the script needs to run.</p> <p>With the data on hand, the real fun began.</p> <p></p><figure data-type="image"><a href="/img/blog/macthemes-garden-v0.png"><img src="https://damien.zone/img/blog/macthemes-garden-v0.png" alt="Early version of the Mac Themes Garden site" loading="lazy" decoding="async" width="auto" height="auto" /></a><figcaption>Early version of the Mac Themes Garden site</figcaption></figure><p></p> <p>The proof-of-concept was using Eleventy which I chose purely because I had just finished remaking my website (you're reading it now!) using it, so I figured it would be a good fit because of its simplicity and speed.</p> <p>And it might have been if it wasn't for <a href="https://www.11ty.dev/docs/languages/webc/">WebC</a> being so wonky. You see, I knew I wanted to have multiple OS9-like "windows" in the website's layout. So I figured that, surely, WebC could let me make a "component" and make a UI that way and, I swear to god, I could not make it work that way.<br /> It seems WebC is purely for <strong>W</strong>eb <strong>C</strong>omponents and nothing else, which itself is fine, but that wasn't going to cut it.<br /> I briefly experimented with a <a href="https://www.11ty.dev/docs/languages/liquid/#paired-shortcode">paired short code</a>, but I wasn't going to write HTML inside a JavaScript string. I wanted to have fun on this project.</p> <h3 id="the-nitty-gritty">The nitty-gritty</h3> <p>So I switched to <a href="https://astro.build/">Astro</a> whose concept of <a href="https://docs.astro.build/en/basics/astro-components/">components</a> was closer to what I wanted to do here, and I already knew how to use it because <a href="https://erambert.me">erambert.me</a> uses it.</p> <p>I will not do a play-by-play of the making of the website, because once the ball was rolling, most of my time was spent playing with UI ideas and using Astro's <a href="https://docs.astro.build/en/guides/content-collections/">content collections</a> such that building the whole website as a bunch of static pages didn't take forever.<br /> Don't get me wrong, Astro is plenty fast as it is, not as fast as Eleventy but still fast!</p> <p>The "problem" is that I am playing with big numbers. Let's think about them:</p> <ul> <li>3,942 themes</li> <li>868 authors</li> </ul> <p>As it is, if we assume one page per scheme and one page per author (which would list all the themes for that author), we arrive at: <strong>3,942 + 868 = 4,810 pages</strong>. Which isn't terrible, but that's already a lot of pages, and we're not doing anything fancy with it.</p> <p>Let's start being fancy, let's add pagination and let's say we want to show 51 themes per page. Where:</p> <ul> <li><em>T</em> is the number of themes in the set (3,942)</li> <li><em>A</em> is the number of authors in the set (868)</li> <li><em>P</em> is the page size (51)</li> </ul> <div class="expressive-code"><figure class="frame"><figcaption class="header"></figcaption><pre data-language="js"><code><div class="ec-line"><div class="code"><span style="--0:#F97583;--1:#BF3441">const</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">totalPages</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#E1E4E8;--1:#24292E"> (</span><span style="--0:#79B8FF;--1:#005CC5">T</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">*</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">A</span><span style="--0:#E1E4E8;--1:#24292E">) </span><span style="--0:#F97583;--1:#BF3441">+</span><span style="--0:#E1E4E8;--1:#24292E"> Math.</span><span style="--0:#B392F0;--1:#6F42C1">ceil</span><span style="--0:#E1E4E8;--1:#24292E">(</span><span style="--0:#79B8FF;--1:#005CC5">T</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">/</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">P</span><span style="--0:#E1E4E8;--1:#24292E">)</span></div></div><div class="ec-line"><div class="code"><span style="--0:#99A0A6;--1:#616972">// 4,888 pages</span></div></div></code></pre><div class="copy"><div aria-live="polite"></div><div></div></div></figure></div> <p>That's <strong>4,888 pages</strong>! Except I then wanted to add some fancy things like an authors page <em>(A / 26 (for each letter in the alphabet))</em>, that's another ~33 pages. This gets us close to 5,000 pages. Which is fine, but it means every page better be really quick to generate in order for the build time to not balloon out-of-control.</p> <p>That's where I had to be careful. I wanted the author pages to show all the themes made by a given author, which I naively implemented like this:</p> <div class="expressive-code"><figure class="frame"><figcaption class="header"></figcaption><pre data-language="typescript"><code><div class="ec-line"><div class="code"><span style="--0:#F97583;--1:#BF3441">export</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">const</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">getStaticPaths</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#E1E4E8;--1:#24292E"> (</span><span style="--0:#F97583;--1:#BF3441">async</span><span style="--0:#E1E4E8;--1:#24292E"> () </span><span style="--0:#F97583;--1:#BF3441">=&gt;</span><span style="--0:#E1E4E8;--1:#24292E"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#F97583;--1:#BF3441">const</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">authors</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">await</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">getCollection</span><span style="--0:#E1E4E8;--1:#24292E">(</span><span style="--0:#9ECBFF;--1:#032F62">"authors"</span><span style="--0:#E1E4E8;--1:#24292E">);</span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#F97583;--1:#BF3441">return</span><span style="--0:#E1E4E8;--1:#24292E"> authors.</span><span style="--0:#B392F0;--1:#6F42C1">map</span><span style="--0:#E1E4E8;--1:#24292E">((</span><span style="--0:#FFAB70;--1:#AE4B07">a</span><span style="--0:#E1E4E8;--1:#24292E">) </span><span style="--0:#F97583;--1:#BF3441">=&gt;</span><span style="--0:#E1E4E8;--1:#24292E"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#F97583;--1:#BF3441">return</span><span style="--0:#E1E4E8;--1:#24292E"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">props: { author: a },</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">params: {</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">author: a.data.slug,</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">},</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">};</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">});</span></div></div><div class="ec-line"><div class="code"><span style="--0:#E1E4E8;--1:#24292E">}) </span><span style="--0:#F97583;--1:#BF3441">satisfies</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">GetStaticPaths</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span style="--0:#F97583;--1:#BF3441">const</span><span style="--0:#E1E4E8;--1:#24292E"> { </span><span style="--0:#79B8FF;--1:#005CC5">author</span><span style="--0:#E1E4E8;--1:#24292E"> } </span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#E1E4E8;--1:#24292E"> Astro.props;</span></div></div><div class="ec-line"><div class="code"><span style="--0:#F97583;--1:#BF3441">const</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">themesByAuthor</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#E1E4E8;--1:#24292E"> (</span><span style="--0:#F97583;--1:#BF3441">await</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">getCollection</span><span style="--0:#E1E4E8;--1:#24292E">(</span><span style="--0:#9ECBFF;--1:#032F62">"themes"</span><span style="--0:#E1E4E8;--1:#24292E">)).</span><span style="--0:#B392F0;--1:#6F42C1">filter</span><span style="--0:#E1E4E8;--1:#24292E">((</span><span style="--0:#FFAB70;--1:#AE4B07">t</span><span style="--0:#E1E4E8;--1:#24292E">) </span><span style="--0:#F97583;--1:#BF3441">=&gt;</span><span style="--0:#E1E4E8;--1:#24292E"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#F97583;--1:#BF3441">return</span><span style="--0:#E1E4E8;--1:#24292E"> t.data.authors.</span><span style="--0:#B392F0;--1:#6F42C1">some</span><span style="--0:#E1E4E8;--1:#24292E">((</span><span style="--0:#FFAB70;--1:#AE4B07">a</span><span style="--0:#E1E4E8;--1:#24292E">) </span><span style="--0:#F97583;--1:#BF3441">=&gt;</span><span style="--0:#E1E4E8;--1:#24292E"> a.id </span><span style="--0:#F97583;--1:#BF3441">===</span><span style="--0:#E1E4E8;--1:#24292E"> author.id);</span></div></div><div class="ec-line"><div class="code"><span style="--0:#E1E4E8;--1:#24292E">});</span></div></div></code></pre><div class="copy"><div aria-live="polite"></div><div></div></div></figure></div> <p>Sure, this seems fine as it is. After all, it "only" takes ~30ms to run in development! But running our math from earlier, this will run for every single author page. Suddenly we're looking at:</p> <p><strong>30ms × 868 = 26,040 ms (26s)</strong> 😱!</p> <p>After all, we're iterating over the 3,942 schemes 868 times, this isn't great!</p> <p>What's the fix then?</p> <p>As it is almost always the case when it comes to performance: doing less work and only doing the hard work once! I took advantage of <a href="https://docs.astro.build/en/guides/content-collections/#defining-collection-references">Astro's collection references</a>. I first declare a reference for authors inside my <code>themes</code> schema:</p> <div class="expressive-code"><figure class="frame"><figcaption class="header"></figcaption><pre data-language="ts"><code><div class="ec-line"><div class="code"><span style="--0:#F97583;--1:#BF3441">const</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">themes</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">defineCollection</span><span style="--0:#E1E4E8;--1:#24292E">({</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">loader: themesLoader,</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">schema: z.</span><span style="--0:#B392F0;--1:#6F42C1">object</span><span style="--0:#E1E4E8;--1:#24292E">({</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">name: z.</span><span style="--0:#B392F0;--1:#6F42C1">string</span><span style="--0:#E1E4E8;--1:#24292E">(),</span></div></div><div class="ec-line highlight ins"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">authors: z.</span><span style="--0:#c2a8f3;--1:#613aa9">array</span><span style="--0:#E1E4E8;--1:#24292E">(</span><span style="--0:#c2a8f3;--1:#613aa9">reference</span><span style="--0:#E1E4E8;--1:#24292E">(</span><span style="--0:#9ECBFF;--1:#032F62">"authors"</span><span style="--0:#E1E4E8;--1:#24292E">)),</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">year: z.</span><span style="--0:#B392F0;--1:#6F42C1">string</span><span style="--0:#E1E4E8;--1:#24292E">().</span><span style="--0:#B392F0;--1:#6F42C1">optional</span><span style="--0:#E1E4E8;--1:#24292E">(),</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">mainThumbnail: z.</span><span style="--0:#B392F0;--1:#6F42C1">string</span><span style="--0:#E1E4E8;--1:#24292E">(),</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">thumbnails: z.</span><span style="--0:#B392F0;--1:#6F42C1">array</span><span style="--0:#E1E4E8;--1:#24292E">(z.</span><span style="--0:#B392F0;--1:#6F42C1">string</span><span style="--0:#E1E4E8;--1:#24292E">()),</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">archiveFile: z.</span><span style="--0:#B392F0;--1:#6F42C1">string</span><span style="--0:#E1E4E8;--1:#24292E">(),</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#99A0A6;--1:#616972">// ...</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">}),</span></div></div><div class="ec-line"><div class="code"><span style="--0:#E1E4E8;--1:#24292E">});</span></div></div></code></pre><div class="copy"><div aria-live="polite"></div><div></div></div></figure></div> <p>Which mean that I could simply call the <a href="https://docs.astro.build/en/reference/modules/astro-content/#getentries">getEntries</a> method to get the authors of a given theme.</p> <div class="expressive-code"><figure class="frame"><figcaption class="header"></figcaption><pre data-language="ts"><code><div class="ec-line"><div class="code"><span style="--0:#F97583;--1:#BF3441">export</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">const</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">getStaticPaths</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#E1E4E8;--1:#24292E"> (</span><span style="--0:#F97583;--1:#BF3441">async</span><span style="--0:#E1E4E8;--1:#24292E"> () </span><span style="--0:#F97583;--1:#BF3441">=&gt;</span><span style="--0:#E1E4E8;--1:#24292E"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#F97583;--1:#BF3441">const</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">authors</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">await</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">getCollection</span><span style="--0:#E1E4E8;--1:#24292E">(</span><span style="--0:#9ECBFF;--1:#032F62">"authors"</span><span style="--0:#E1E4E8;--1:#24292E">);</span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#F97583;--1:#BF3441">return</span><span style="--0:#E1E4E8;--1:#24292E"> authors.</span><span style="--0:#B392F0;--1:#6F42C1">map</span><span style="--0:#E1E4E8;--1:#24292E">((</span><span style="--0:#FFAB70;--1:#AE4B07">a</span><span style="--0:#E1E4E8;--1:#24292E">) </span><span style="--0:#F97583;--1:#BF3441">=&gt;</span><span style="--0:#E1E4E8;--1:#24292E"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#F97583;--1:#BF3441">return</span><span style="--0:#E1E4E8;--1:#24292E"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">props: { author: a },</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">params: {</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">author: a.data.slug,</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">},</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">};</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">});</span></div></div><div class="ec-line"><div class="code"><span style="--0:#E1E4E8;--1:#24292E">}) </span><span style="--0:#F97583;--1:#BF3441">satisfies</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">GetStaticPaths</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span style="--0:#F97583;--1:#BF3441">const</span><span style="--0:#E1E4E8;--1:#24292E"> { </span><span style="--0:#79B8FF;--1:#005CC5">author</span><span style="--0:#E1E4E8;--1:#24292E"> } </span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#E1E4E8;--1:#24292E"> Astro.props;</span></div></div><div class="ec-line"><div class="code"><span style="--0:#F97583;--1:#BF3441">const</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">themesByAuthor</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">await</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">getEntries</span><span style="--0:#E1E4E8;--1:#24292E">(author.data.themes);</span></div></div></code></pre><div class="copy"><div aria-live="polite"></div><div></div></div></figure></div> <p>Which, depending on the number of themes, takes ~10ms <em>at most</em>, for most pages it takes less than 5ms! That is much better.</p> <p>By applying this technique, I managed to keep the build time of the site under control and Astro builds almost 5,000 pages with various queries between each other in less than 16s!</p> <p></p><figure data-type="image"><a href="/img/blog/macthemes-build-time.png"><img src="https://damien.zone/img/blog/macthemes-build-time.png" alt="&quot;Astro's CLI showing it built 4920 pages in 15.54s&quot;" loading="lazy" decoding="async" width="auto" height="auto" /></a><figcaption>"Astro's CLI showing it built 4920 pages in 15.54s"</figcaption></figure><p></p> <h3 id="getting-cute-with-it">Getting cute with it</h3> <p>Like mentioned above, I knew I wanted to mimic a Mac OS 9 UI for the website. Now, I <em>could</em> have just used images to make the UI... but where's the fun in that?</p> <p>So of course I've used every CSS trick in the book to achieve the look. Let me go through some of the pieces of UI and explain how I re-created them.</p> <h3 id="the-window-frame">The window frame</h3> <p></p><figure data-type="image"><a href="/img/blog/macthemes-garden-window.png"><img src="https://damien.zone/img/blog/macthemes-garden-window.png" loading="lazy" decoding="async" width="auto" height="auto" /></a></figure><p></p> <p>This is, obviously, a big part of the UI, so I wanted to be as close to the actual look of OS 9 as possible. Let's take a simple, empty example:</p> <div class="sandbox"> <div class="macos9-window"> <div class="macos9-window-titlebar"> <span class="button-dots"></span> <span class="filler"></span> <span class="title-text">Welcome!</span> <span class="filler"></span> <span class="button-dots"></span> </div> <div class="macos9-window-body">   </div> </div> </div> <p>A lot of the styles involve using multiple box shadows to achieve the "broken border" effects in the different areas of the main UI chrome. Here is the style for the main window body (in white in the preview above):</p> <div class="expressive-code"><figure class="frame"><figcaption class="header"></figcaption><pre data-language="css"><code><div class="ec-line"><div class="code"><span style="--0:#B392F0;--1:#6F42C1">.macos9-window-body</span><span style="--0:#E1E4E8;--1:#24292E"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">border</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#79B8FF;--1:#005CC5">1</span><span style="--0:#F97583;--1:#BF3441">px</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">solid</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">var</span><span style="--0:#E1E4E8;--1:#24292E">(</span><span style="--0:#FFAB70;--1:#AE4B07">--primary-black</span><span style="--0:#E1E4E8;--1:#24292E">);</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">box-shadow</span><span style="--0:#E1E4E8;--1:#24292E">:</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">-1</span><span style="--0:#F97583;--1:#BF3441">px</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">-1</span><span style="--0:#F97583;--1:#BF3441">px</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">0</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">rgb</span><span style="--0:#E1E4E8;--1:#24292E">(from </span><span style="--0:#79B8FF;--1:#005CC5">var</span><span style="--0:#E1E4E8;--1:#24292E">(</span><span style="--0:#FFAB70;--1:#AE4B07">--primary-black</span><span style="--0:#E1E4E8;--1:#24292E">) r g b / </span><span style="--0:#79B8FF;--1:#005CC5">40</span><span style="--0:#F97583;--1:#BF3441">%</span><span style="--0:#E1E4E8;--1:#24292E">),</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">1</span><span style="--0:#F97583;--1:#BF3441">px</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">1</span><span style="--0:#F97583;--1:#BF3441">px</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">0</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">var</span><span style="--0:#E1E4E8;--1:#24292E">(</span><span style="--0:#FFAB70;--1:#AE4B07">--primary-white</span><span style="--0:#E1E4E8;--1:#24292E">);</span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#FFAB70;--1:#AE4B07">--top-left-shadow</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#79B8FF;--1:#005CC5">var</span><span style="--0:#E1E4E8;--1:#24292E">(</span><span style="--0:#FFAB70;--1:#AE4B07">--grays-600</span><span style="--0:#E1E4E8;--1:#24292E">);</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#FFAB70;--1:#AE4B07">--bottom-right-shadow</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#79B8FF;--1:#005CC5">var</span><span style="--0:#E1E4E8;--1:#24292E">(</span><span style="--0:#FFAB70;--1:#AE4B07">--primary-white</span><span style="--0:#E1E4E8;--1:#24292E">);</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">box-shadow</span><span style="--0:#E1E4E8;--1:#24292E">:</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">-1</span><span style="--0:#F97583;--1:#BF3441">px</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">-1</span><span style="--0:#F97583;--1:#BF3441">px</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">0</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">var</span><span style="--0:#E1E4E8;--1:#24292E">(</span><span style="--0:#FFAB70;--1:#AE4B07">--top-left-shadow</span><span style="--0:#E1E4E8;--1:#24292E">),</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">-1</span><span style="--0:#F97583;--1:#BF3441">px</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">0</span><span style="--0:#F97583;--1:#BF3441">px</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">0</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">var</span><span style="--0:#E1E4E8;--1:#24292E">(</span><span style="--0:#FFAB70;--1:#AE4B07">--top-left-shadow</span><span style="--0:#E1E4E8;--1:#24292E">),</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">0</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">-1</span><span style="--0:#F97583;--1:#BF3441">px</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">0</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">var</span><span style="--0:#E1E4E8;--1:#24292E">(</span><span style="--0:#FFAB70;--1:#AE4B07">--top-left-shadow</span><span style="--0:#E1E4E8;--1:#24292E">),</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">1</span><span style="--0:#F97583;--1:#BF3441">px</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">1</span><span style="--0:#F97583;--1:#BF3441">px</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">0</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">var</span><span style="--0:#E1E4E8;--1:#24292E">(</span><span style="--0:#FFAB70;--1:#AE4B07">--bottom-right-shadow</span><span style="--0:#E1E4E8;--1:#24292E">),</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">1</span><span style="--0:#F97583;--1:#BF3441">px</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">0</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">0</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">var</span><span style="--0:#E1E4E8;--1:#24292E">(</span><span style="--0:#FFAB70;--1:#AE4B07">--bottom-right-shadow</span><span style="--0:#E1E4E8;--1:#24292E">),</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">0</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">1</span><span style="--0:#F97583;--1:#BF3441">px</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">0</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">var</span><span style="--0:#E1E4E8;--1:#24292E">(</span><span style="--0:#FFAB70;--1:#AE4B07">--bottom-right-shadow</span><span style="--0:#E1E4E8;--1:#24292E">);</span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">background-color</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#79B8FF;--1:#005CC5">var</span><span style="--0:#E1E4E8;--1:#24292E">(</span><span style="--0:#FFAB70;--1:#AE4B07">--primary-white</span><span style="--0:#E1E4E8;--1:#24292E">);</span></div></div><div class="ec-line"><div class="code"><span style="--0:#E1E4E8;--1:#24292E">}</span></div></div></code></pre><div class="copy"><div aria-live="polite"></div><div></div></div></figure></div> <h3 id="the-title-bar">The title bar</h3> <p>That part was fun, there's a lot going on so let's take a look step by step. Here's how it looks and the HTML markup:</p> <div class="sandbox"> <div class="macos9-window"> <div class="macos9-window-titlebar"> <span class="button-dots"></span> <span class="filler"></span> <span class="title-text">Welcome!</span> <span class="filler"></span> <span class="button-dots"></span> <span class="button-dots"></span> </div> </div> </div> <div class="expressive-code"><figure class="frame"><figcaption class="header"></figcaption><pre data-language="html"><code><div class="ec-line"><div class="code"><span style="--0:#E1E4E8;--1:#24292E">&lt;</span><span style="--0:#85E89D;--1:#1E7734">div</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">class</span><span style="--0:#E1E4E8;--1:#24292E">=</span><span style="--0:#9ECBFF;--1:#032F62">"macos9-window-titlebar"</span><span style="--0:#E1E4E8;--1:#24292E">&gt;</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">&lt;</span><span style="--0:#85E89D;--1:#1E7734">button</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">class</span><span style="--0:#E1E4E8;--1:#24292E">=</span><span style="--0:#9ECBFF;--1:#032F62">"button close"</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">data-action</span><span style="--0:#E1E4E8;--1:#24292E">=</span><span style="--0:#9ECBFF;--1:#032F62">"close"</span><span style="--0:#E1E4E8;--1:#24292E">&gt;</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">&lt;</span><span style="--0:#85E89D;--1:#1E7734">span</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">class</span><span style="--0:#E1E4E8;--1:#24292E">=</span><span style="--0:#9ECBFF;--1:#032F62">"button-dots"</span><span style="--0:#E1E4E8;--1:#24292E">&gt;&lt;/</span><span style="--0:#85E89D;--1:#1E7734">span</span><span style="--0:#E1E4E8;--1:#24292E">&gt;</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">&lt;/</span><span style="--0:#85E89D;--1:#1E7734">button</span><span style="--0:#E1E4E8;--1:#24292E">&gt;</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">&lt;</span><span style="--0:#85E89D;--1:#1E7734">span</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">class</span><span style="--0:#E1E4E8;--1:#24292E">=</span><span style="--0:#9ECBFF;--1:#032F62">"filler"</span><span style="--0:#E1E4E8;--1:#24292E">&gt;&lt;/</span><span style="--0:#85E89D;--1:#1E7734">span</span><span style="--0:#E1E4E8;--1:#24292E">&gt;</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">&lt;</span><span style="--0:#85E89D;--1:#1E7734">span</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">class</span><span style="--0:#E1E4E8;--1:#24292E">=</span><span style="--0:#9ECBFF;--1:#032F62">"title-text"</span><span style="--0:#E1E4E8;--1:#24292E">&gt;Welcome!&lt;/</span><span style="--0:#85E89D;--1:#1E7734">span</span><span style="--0:#E1E4E8;--1:#24292E">&gt;</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">&lt;</span><span style="--0:#85E89D;--1:#1E7734">span</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">class</span><span style="--0:#E1E4E8;--1:#24292E">=</span><span style="--0:#9ECBFF;--1:#032F62">"filler"</span><span style="--0:#E1E4E8;--1:#24292E">&gt;&lt;/</span><span style="--0:#85E89D;--1:#1E7734">span</span><span style="--0:#E1E4E8;--1:#24292E">&gt;</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">&lt;</span><span style="--0:#85E89D;--1:#1E7734">button</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">class</span><span style="--0:#E1E4E8;--1:#24292E">=</span><span style="--0:#9ECBFF;--1:#032F62">"button zoom"</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">data-action</span><span style="--0:#E1E4E8;--1:#24292E">=</span><span style="--0:#9ECBFF;--1:#032F62">"zoom"</span><span style="--0:#E1E4E8;--1:#24292E">&gt;</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">&lt;</span><span style="--0:#85E89D;--1:#1E7734">span</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">class</span><span style="--0:#E1E4E8;--1:#24292E">=</span><span style="--0:#9ECBFF;--1:#032F62">"button-dots"</span><span style="--0:#E1E4E8;--1:#24292E">&gt;&lt;/</span><span style="--0:#85E89D;--1:#1E7734">span</span><span style="--0:#E1E4E8;--1:#24292E">&gt;</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">&lt;/</span><span style="--0:#85E89D;--1:#1E7734">button</span><span style="--0:#E1E4E8;--1:#24292E">&gt;</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">&lt;</span><span style="--0:#85E89D;--1:#1E7734">button</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">class</span><span style="--0:#E1E4E8;--1:#24292E">=</span><span style="--0:#9ECBFF;--1:#032F62">"button collapse"</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">data-action</span><span style="--0:#E1E4E8;--1:#24292E">=</span><span style="--0:#9ECBFF;--1:#032F62">"collapse"</span><span style="--0:#E1E4E8;--1:#24292E">&gt;</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">&lt;</span><span style="--0:#85E89D;--1:#1E7734">span</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">class</span><span style="--0:#E1E4E8;--1:#24292E">=</span><span style="--0:#9ECBFF;--1:#032F62">"button-dots"</span><span style="--0:#E1E4E8;--1:#24292E">&gt;&lt;/</span><span style="--0:#85E89D;--1:#1E7734">span</span><span style="--0:#E1E4E8;--1:#24292E">&gt;</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">&lt;/</span><span style="--0:#85E89D;--1:#1E7734">button</span><span style="--0:#E1E4E8;--1:#24292E">&gt;</span></div></div><div class="ec-line"><div class="code"><span style="--0:#E1E4E8;--1:#24292E">&lt;/</span><span style="--0:#85E89D;--1:#1E7734">div</span><span style="--0:#E1E4E8;--1:#24292E">&gt;</span></div></div></code></pre><div class="copy"><div aria-live="polite"></div><div></div></div></figure></div> <p>The "stripes" pattern is done using a repeating CSS gradient and two pseudo-elements on each side with a slightly different gradient:</p> <div class="expressive-code"><figure class="frame"><figcaption class="header"></figcaption><pre data-language="css"><code><div class="ec-line"><div class="code"><span style="--0:#B392F0;--1:#6F42C1">.macos9-window-titlebar</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">&gt;</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#85E89D;--1:#1E7734">span</span><span style="--0:#B392F0;--1:#6F42C1">.filler</span><span style="--0:#E1E4E8;--1:#24292E"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">flex</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#79B8FF;--1:#005CC5">1</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">background-color</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#79B8FF;--1:#005CC5">#dddddd</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">background-image</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#79B8FF;--1:#005CC5">linear-gradient</span><span style="--0:#E1E4E8;--1:#24292E">(</span><span style="--0:#79B8FF;--1:#005CC5">#ffffff</span><span style="--0:#E1E4E8;--1:#24292E">, </span><span style="--0:#79B8FF;--1:#005CC5">#ffffff</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">50</span><span style="--0:#F97583;--1:#BF3441">%</span><span style="--0:#E1E4E8;--1:#24292E">, </span><span style="--0:#79B8FF;--1:#005CC5">#777777</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">50</span><span style="--0:#F97583;--1:#BF3441">%</span><span style="--0:#E1E4E8;--1:#24292E">, </span><span style="--0:#79B8FF;--1:#005CC5">#777777</span><span style="--0:#E1E4E8;--1:#24292E">);</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">background-repeat</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#79B8FF;--1:#005CC5">repeat</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">background-size</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#79B8FF;--1:#005CC5">100</span><span style="--0:#F97583;--1:#BF3441">%</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">2</span><span style="--0:#F97583;--1:#BF3441">px</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">height</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#79B8FF;--1:#005CC5">12</span><span style="--0:#F97583;--1:#BF3441">px</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">position</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#79B8FF;--1:#005CC5">relative</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">&amp;::before,</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">&amp;::after {</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">content</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#9ECBFF;--1:#032F62">""</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">position</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#79B8FF;--1:#005CC5">absolute</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">width</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#79B8FF;--1:#005CC5">1</span><span style="--0:#F97583;--1:#BF3441">px</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">background-size</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#79B8FF;--1:#005CC5">100</span><span style="--0:#F97583;--1:#BF3441">%</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">2</span><span style="--0:#F97583;--1:#BF3441">px</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">display</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#79B8FF;--1:#005CC5">block</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">}</span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">&amp;</span><span style="--0:#B392F0;--1:#6F42C1">::before</span><span style="--0:#E1E4E8;--1:#24292E"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">left</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#79B8FF;--1:#005CC5">0</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">top</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#79B8FF;--1:#005CC5">0</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">bottom</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#79B8FF;--1:#005CC5">0</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">background-image</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#79B8FF;--1:#005CC5">linear-gradient</span><span style="--0:#E1E4E8;--1:#24292E">(</span><span style="--0:#79B8FF;--1:#005CC5">#fff</span><span style="--0:#E1E4E8;--1:#24292E">, </span><span style="--0:#79B8FF;--1:#005CC5">#fff</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">50</span><span style="--0:#F97583;--1:#BF3441">%</span><span style="--0:#E1E4E8;--1:#24292E">, </span><span style="--0:#79B8FF;--1:#005CC5">#cccccc</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">50</span><span style="--0:#F97583;--1:#BF3441">%</span><span style="--0:#E1E4E8;--1:#24292E">, </span><span style="--0:#79B8FF;--1:#005CC5">#cccccc</span><span style="--0:#E1E4E8;--1:#24292E">);</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">border-bottom</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#79B8FF;--1:#005CC5">1</span><span style="--0:#F97583;--1:#BF3441">px</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">solid</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">#cccccc</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">}</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">&amp;</span><span style="--0:#B392F0;--1:#6F42C1">::after</span><span style="--0:#E1E4E8;--1:#24292E"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">right</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#79B8FF;--1:#005CC5">0</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">top</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#79B8FF;--1:#005CC5">0</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">bottom</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#79B8FF;--1:#005CC5">0</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">background-image</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#79B8FF;--1:#005CC5">linear-gradient</span><span style="--0:#E1E4E8;--1:#24292E">(</span><span style="--0:#79B8FF;--1:#005CC5">#ccc</span><span style="--0:#E1E4E8;--1:#24292E">, </span><span style="--0:#79B8FF;--1:#005CC5">#ccc</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">50</span><span style="--0:#F97583;--1:#BF3441">%</span><span style="--0:#E1E4E8;--1:#24292E">, </span><span style="--0:#79B8FF;--1:#005CC5">#777777</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">50</span><span style="--0:#F97583;--1:#BF3441">%</span><span style="--0:#E1E4E8;--1:#24292E">, </span><span style="--0:#79B8FF;--1:#005CC5">#777777</span><span style="--0:#E1E4E8;--1:#24292E">);</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">}</span></div></div><div class="ec-line"><div class="code"><span style="--0:#E1E4E8;--1:#24292E">}</span></div></div></code></pre><div class="copy"><div aria-live="polite"></div><div></div></div></figure></div> <p>We then have the window buttons which are...you guessed it, a lot of box-shadows and borders put together:</p> <div class="sandbox"> <div class="macos9-window"> <div class="macos9-window-titlebar"> <span class="button-dots"></span> <span class="button-dots"></span> <span class="button-dots"></span> </div> </div> </div> <div class="expressive-code"><figure class="frame"><figcaption class="header"></figcaption><pre data-language="css"><code><div class="ec-line"><div class="code"><span style="--0:#B392F0;--1:#6F42C1">.macos9-window-titlebar</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">&gt;</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#85E89D;--1:#1E7734">button</span><span style="--0:#E1E4E8;--1:#24292E"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">appearance</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#79B8FF;--1:#005CC5">none</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">border</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#79B8FF;--1:#005CC5">none</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">height</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#79B8FF;--1:#005CC5">13</span><span style="--0:#F97583;--1:#BF3441">px</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">width</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#79B8FF;--1:#005CC5">13</span><span style="--0:#F97583;--1:#BF3441">px</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">background</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#79B8FF;--1:#005CC5">transparent</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">background-image</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#79B8FF;--1:#005CC5">linear-gradient</span><span style="--0:#E1E4E8;--1:#24292E">(</span><span style="--0:#79B8FF;--1:#005CC5">135</span><span style="--0:#F97583;--1:#BF3441">deg</span><span style="--0:#E1E4E8;--1:#24292E">, </span><span style="--0:#79B8FF;--1:#005CC5">#9a9a9a</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">0</span><span style="--0:#F97583;--1:#BF3441">%</span><span style="--0:#E1E4E8;--1:#24292E">, </span><span style="--0:#79B8FF;--1:#005CC5">#f1f1f1</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">100</span><span style="--0:#F97583;--1:#BF3441">%</span><span style="--0:#E1E4E8;--1:#24292E">);</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">background-size</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#79B8FF;--1:#005CC5">9</span><span style="--0:#F97583;--1:#BF3441">px</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">9</span><span style="--0:#F97583;--1:#BF3441">px</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">background-position</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#79B8FF;--1:#005CC5">center</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">box-shadow</span><span style="--0:#E1E4E8;--1:#24292E">:</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">inset</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">1</span><span style="--0:#F97583;--1:#BF3441">px</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">1</span><span style="--0:#F97583;--1:#BF3441">px</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">0</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">var</span><span style="--0:#E1E4E8;--1:#24292E">(</span><span style="--0:#FFAB70;--1:#AE4B07">--grays-700</span><span style="--0:#E1E4E8;--1:#24292E">),</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">inset</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">-1</span><span style="--0:#F97583;--1:#BF3441">px</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">-1</span><span style="--0:#F97583;--1:#BF3441">px</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">0</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">var</span><span style="--0:#E1E4E8;--1:#24292E">(</span><span style="--0:#FFAB70;--1:#AE4B07">--primary-white</span><span style="--0:#E1E4E8;--1:#24292E">),</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">inset</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">0</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">0</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">0</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">2</span><span style="--0:#F97583;--1:#BF3441">px</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">var</span><span style="--0:#E1E4E8;--1:#24292E">(</span><span style="--0:#FFAB70;--1:#AE4B07">--primary-black</span><span style="--0:#E1E4E8;--1:#24292E">),</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">inset</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">3</span><span style="--0:#F97583;--1:#BF3441">px</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">3</span><span style="--0:#F97583;--1:#BF3441">px</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">0</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">var</span><span style="--0:#E1E4E8;--1:#24292E">(</span><span style="--0:#FFAB70;--1:#AE4B07">--primary-white</span><span style="--0:#E1E4E8;--1:#24292E">),</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">inset</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">-3</span><span style="--0:#F97583;--1:#BF3441">px</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">-3</span><span style="--0:#F97583;--1:#BF3441">px</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">0</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">var</span><span style="--0:#E1E4E8;--1:#24292E">(</span><span style="--0:#FFAB70;--1:#AE4B07">--grays-700</span><span style="--0:#E1E4E8;--1:#24292E">);</span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">position</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#79B8FF;--1:#005CC5">relative</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">z-index</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#79B8FF;--1:#005CC5">0</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">&amp;:</span><span style="--0:#79B8FF;--1:#005CC5">active</span><span style="--0:#E1E4E8;--1:#24292E">::before {</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">content</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#9ECBFF;--1:#032F62">""</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">inset</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#79B8FF;--1:#005CC5">2</span><span style="--0:#F97583;--1:#BF3441">px</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">background-image</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#79B8FF;--1:#005CC5">linear-gradient</span><span style="--0:#E1E4E8;--1:#24292E">(</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">135</span><span style="--0:#F97583;--1:#BF3441">deg</span><span style="--0:#E1E4E8;--1:#24292E">,</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">rgba</span><span style="--0:#E1E4E8;--1:#24292E">(</span><span style="--0:#79B8FF;--1:#005CC5">53</span><span style="--0:#E1E4E8;--1:#24292E">, </span><span style="--0:#79B8FF;--1:#005CC5">53</span><span style="--0:#E1E4E8;--1:#24292E">, </span><span style="--0:#79B8FF;--1:#005CC5">53</span><span style="--0:#E1E4E8;--1:#24292E">, </span><span style="--0:#79B8FF;--1:#005CC5">0.8</span><span style="--0:#E1E4E8;--1:#24292E">) </span><span style="--0:#79B8FF;--1:#005CC5">0</span><span style="--0:#F97583;--1:#BF3441">%</span><span style="--0:#E1E4E8;--1:#24292E">,</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">rgba</span><span style="--0:#E1E4E8;--1:#24292E">(</span><span style="--0:#79B8FF;--1:#005CC5">156</span><span style="--0:#E1E4E8;--1:#24292E">, </span><span style="--0:#79B8FF;--1:#005CC5">156</span><span style="--0:#E1E4E8;--1:#24292E">, </span><span style="--0:#79B8FF;--1:#005CC5">156</span><span style="--0:#E1E4E8;--1:#24292E">, </span><span style="--0:#79B8FF;--1:#005CC5">0.8</span><span style="--0:#E1E4E8;--1:#24292E">) </span><span style="--0:#79B8FF;--1:#005CC5">100</span><span style="--0:#F97583;--1:#BF3441">%</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">);</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">display</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#79B8FF;--1:#005CC5">block</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">position</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#79B8FF;--1:#005CC5">absolute</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">z-index</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#79B8FF;--1:#005CC5">1</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">}</span></div></div><div class="ec-line"><div class="code"><span style="--0:#E1E4E8;--1:#24292E">}</span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span style="--0:#B392F0;--1:#6F42C1">.macos9-window-titlebar</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">&gt;</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#85E89D;--1:#1E7734">button</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">.button-dots</span><span style="--0:#E1E4E8;--1:#24292E"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">position</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#79B8FF;--1:#005CC5">absolute</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">inset</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#79B8FF;--1:#005CC5">0</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">display</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#79B8FF;--1:#005CC5">block</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">&amp;::before {</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">content</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#9ECBFF;--1:#032F62">""</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">position</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#79B8FF;--1:#005CC5">absolute</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">top</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#79B8FF;--1:#005CC5">0</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">right</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#79B8FF;--1:#005CC5">0</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">width</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#79B8FF;--1:#005CC5">1</span><span style="--0:#F97583;--1:#BF3441">px</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">height</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#79B8FF;--1:#005CC5">1</span><span style="--0:#F97583;--1:#BF3441">px</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">background-color</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#79B8FF;--1:#005CC5">#cccccc</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">}</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">&amp;</span><span style="--0:#B392F0;--1:#6F42C1">::after</span><span style="--0:#E1E4E8;--1:#24292E"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">content</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#9ECBFF;--1:#032F62">""</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">position</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#79B8FF;--1:#005CC5">absolute</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">bottom</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#79B8FF;--1:#005CC5">0</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">left</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#79B8FF;--1:#005CC5">0</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">width</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#79B8FF;--1:#005CC5">1</span><span style="--0:#F97583;--1:#BF3441">px</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">height</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#79B8FF;--1:#005CC5">1</span><span style="--0:#F97583;--1:#BF3441">px</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">background-color</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#79B8FF;--1:#005CC5">#cccccc</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">}</span></div></div><div class="ec-line"><div class="code"><span style="--0:#E1E4E8;--1:#24292E">}</span></div></div></code></pre><div class="copy"><div aria-live="polite"></div><div></div></div></figure></div> <p>Oh, and there is also a neat trick: I'm using <code>:has()</code> to sometimes re-align the title so it's actually visually centered when there is an uneven number of buttons on each side:</p> <div class="expressive-code"><figure class="frame"><figcaption class="header"></figcaption><pre data-language="css"><code><div class="ec-line"><div class="code"><span style="--0:#B392F0;--1:#6F42C1">.macos9-window-titlebar:has</span><span style="--0:#E1E4E8;--1:#24292E">(</span><span style="--0:#B392F0;--1:#6F42C1">.button.close</span><span style="--0:#E1E4E8;--1:#24292E">, </span><span style="--0:#B392F0;--1:#6F42C1">.button.zoom</span><span style="--0:#E1E4E8;--1:#24292E">, </span><span style="--0:#B392F0;--1:#6F42C1">.button.close</span><span style="--0:#E1E4E8;--1:#24292E">)</span></div></div><div class="ec-line"><div class="code"><span style="--0:#B392F0;--1:#6F42C1">.button.close</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">+</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">.filler</span><span style="--0:#E1E4E8;--1:#24292E"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">padding-left</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#79B8FF;--1:#005CC5">calc</span><span style="--0:#E1E4E8;--1:#24292E">(</span><span style="--0:#79B8FF;--1:#005CC5">13</span><span style="--0:#F97583;--1:#BF3441">px</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">+</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">var</span><span style="--0:#E1E4E8;--1:#24292E">(</span><span style="--0:#FFAB70;--1:#AE4B07">--macos9-window-titlebar-gap</span><span style="--0:#E1E4E8;--1:#24292E">));</span></div></div><div class="ec-line"><div class="code"><span style="--0:#E1E4E8;--1:#24292E">}</span></div></div></code></pre><div class="copy"><div aria-live="polite"></div><div></div></div></figure></div> <h3 id="buttons">Buttons</h3> <p>This is the part of the design that made me question my sanity and my commitment to the bit. Let's take a look at a simple button:</p> <div class="sandbox sandbox-button"> <a class="os9-button" asbutton type="submit"><div class="grid"><div class="shadow" data-n="01"></div><div class="shadow" data-n="02"></div><div class="shadow" data-n="03"></div><div class="shadow" data-n="04"></div><div class="shadow" data-n="05"></div><div class="shadow" data-n="06"></div><div class="shadow" data-n="07"></div><div class="shadow" data-n="08"></div><div class="shadow" data-n="09"></div><div class="shadow" data-n="10"></div><div class="shadow" data-n="11"></div><div class="shadow" data-n="12"></div><div class="shadow" data-n="13"></div><div class="shadow" data-n="14"></div><div class="shadow" data-n="15"></div><div class="shadow" data-n="16"></div><div class="shadow" data-n="17"></div><div class="shadow" data-n="18"></div><div class="shadow" data-n="19"></div><div class="shadow" data-n="20"></div><div class="shadow" data-n="21"></div><div class="shadow" data-n="22"></div><div class="shadow" data-n="23"></div><div class="shadow" data-n="24"></div><div class="shadow" data-n="25"></div><div class="shadow" data-n="26"></div><div class="shadow" data-n="27"></div><div class="shadow" data-n="28"></div><div class="shadow" data-n="29"></div><div class="shadow" data-n="30"></div><div class="shadow" data-n="31"></div><div class="shadow" data-n="32"></div><div class="shadow" data-n="33"></div><div class="shadow" data-n="34"></div><div class="shadow" data-n="35"></div><div class="shadow" data-n="36"></div><div class="shadow" data-n="37"></div><div class="shadow" data-n="38"></div><div class="bgd" data-n="1"></div><div class="bgd" data-n="2"></div><div class="bgd" data-n="3"></div><div class="bgd" data-n="4"></div><div class="label">Press me!</div></div></a> </div> <p>Looks simple enough, right? Well. How do you preserve the pixelated look in CSS without using images? Why, you go insane and draw the pixels yourself using CSS Grid areas of course! This was a <a href="https://codepen.io/wavebeem/pen/VYYLqJv?editors=1100">suggestion</a> from <a href="https://wavebeem.com">Sage</a>.</p> <p>This requires some planning because CSS Grid areas have to be rectangular. That's when I went to Photoshop and drew a bunch of colored rectangles for each area with unique colors:</p> <p></p><figure data-type="image"><a href="/img/blog/macthemes-button-grid.png"><img src="https://damien.zone/img/blog/macthemes-button-grid.png" loading="lazy" decoding="async" width="auto" height="auto" /></a></figure><p></p> <p>That's 38 areas for the inner/outer shadows to cover, as well as 4 areas for the plain background! It's easy enough to just generate that using JSX, we take care to add a <code>data-n</code> attribute which will help us target the areas in CSS:</p> <div class="expressive-code"><figure class="frame"><figcaption class="header"></figcaption><pre data-language="tsx"><code><div class="ec-line"><div class="code"><span style="--0:#E1E4E8;--1:#24292E">&lt;</span><span style="--0:#85E89D;--1:#1E7734">a</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">className</span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#9ECBFF;--1:#032F62">"os9-button"</span><span style="--0:#E1E4E8;--1:#24292E">&gt;</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">&lt;</span><span style="--0:#85E89D;--1:#1E7734">div</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">className</span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#9ECBFF;--1:#032F62">"grid"</span><span style="--0:#E1E4E8;--1:#24292E">&gt;</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">{Array.</span><span style="--0:#B392F0;--1:#6F42C1">from</span><span style="--0:#E1E4E8;--1:#24292E">({ length: </span><span style="--0:#79B8FF;--1:#005CC5">38</span><span style="--0:#E1E4E8;--1:#24292E"> }).</span><span style="--0:#B392F0;--1:#6F42C1">map</span><span style="--0:#E1E4E8;--1:#24292E">((</span><span style="--0:#FFAB70;--1:#AE4B07">_</span><span style="--0:#E1E4E8;--1:#24292E">, </span><span style="--0:#FFAB70;--1:#AE4B07">index</span><span style="--0:#E1E4E8;--1:#24292E">) </span><span style="--0:#F97583;--1:#BF3441">=&gt;</span><span style="--0:#E1E4E8;--1:#24292E"> (</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">&lt;</span><span style="--0:#85E89D;--1:#1E7734">div</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B392F0;--1:#6F42C1">key</span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#E1E4E8;--1:#24292E">{index}</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B392F0;--1:#6F42C1">className</span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#9ECBFF;--1:#032F62">"shadow"</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B392F0;--1:#6F42C1">data-n</span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#E1E4E8;--1:#24292E">{</span><span style="--0:#B392F0;--1:#6F42C1">String</span><span style="--0:#E1E4E8;--1:#24292E">(index </span><span style="--0:#F97583;--1:#BF3441">+</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">1</span><span style="--0:#E1E4E8;--1:#24292E">).</span><span style="--0:#B392F0;--1:#6F42C1">padStart</span><span style="--0:#E1E4E8;--1:#24292E">(</span><span style="--0:#79B8FF;--1:#005CC5">2</span><span style="--0:#E1E4E8;--1:#24292E">, </span><span style="--0:#9ECBFF;--1:#032F62">"0"</span><span style="--0:#E1E4E8;--1:#24292E">)}</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">/&gt;</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">))}</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">&lt;</span><span style="--0:#85E89D;--1:#1E7734">div</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">className</span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#9ECBFF;--1:#032F62">"bgd"</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">data-n</span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#9ECBFF;--1:#032F62">"1"</span><span style="--0:#E1E4E8;--1:#24292E">&gt;&lt;/</span><span style="--0:#85E89D;--1:#1E7734">div</span><span style="--0:#E1E4E8;--1:#24292E">&gt;</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">&lt;</span><span style="--0:#85E89D;--1:#1E7734">div</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">className</span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#9ECBFF;--1:#032F62">"bgd"</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">data-n</span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#9ECBFF;--1:#032F62">"2"</span><span style="--0:#E1E4E8;--1:#24292E">&gt;&lt;/</span><span style="--0:#85E89D;--1:#1E7734">div</span><span style="--0:#E1E4E8;--1:#24292E">&gt;</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">&lt;</span><span style="--0:#85E89D;--1:#1E7734">div</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">className</span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#9ECBFF;--1:#032F62">"bgd"</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">data-n</span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#9ECBFF;--1:#032F62">"3"</span><span style="--0:#E1E4E8;--1:#24292E">&gt;&lt;/</span><span style="--0:#85E89D;--1:#1E7734">div</span><span style="--0:#E1E4E8;--1:#24292E">&gt;</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">&lt;</span><span style="--0:#85E89D;--1:#1E7734">div</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">className</span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#9ECBFF;--1:#032F62">"bgd"</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">data-n</span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#9ECBFF;--1:#032F62">"4"</span><span style="--0:#E1E4E8;--1:#24292E">&gt;&lt;/</span><span style="--0:#85E89D;--1:#1E7734">div</span><span style="--0:#E1E4E8;--1:#24292E">&gt;</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">&lt;</span><span style="--0:#85E89D;--1:#1E7734">div</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">className</span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#9ECBFF;--1:#032F62">"label"</span><span style="--0:#E1E4E8;--1:#24292E">&gt;{children}&lt;/</span><span style="--0:#85E89D;--1:#1E7734">div</span><span style="--0:#E1E4E8;--1:#24292E">&gt;</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">&lt;/</span><span style="--0:#85E89D;--1:#1E7734">div</span><span style="--0:#E1E4E8;--1:#24292E">&gt;</span></div></div><div class="ec-line"><div class="code"><span style="--0:#E1E4E8;--1:#24292E">&lt;/</span><span style="--0:#85E89D;--1:#1E7734">a</span><span style="--0:#E1E4E8;--1:#24292E">&gt;</span></div></div></code></pre><div class="copy"><div aria-live="polite"></div><div></div></div></figure></div> <p>Then, we have to use Sass to create the necessary selectors:</p> <div class="expressive-code"><figure class="frame"><figcaption class="header"></figcaption><pre data-language="scss"><code><div class="ec-line"><div class="code"><span style="--0:#F97583;--1:#BF3441">@use</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#9ECBFF;--1:#032F62">"sass:math"</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span style="--0:#F97583;--1:#BF3441">@for</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#FFAB70;--1:#AE4B07">$i</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">from</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">1</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">through</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">38</span><span style="--0:#E1E4E8;--1:#24292E"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#FFAB70;--1:#AE4B07">$n</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#FFAB70;--1:#AE4B07">$i</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#F97583;--1:#BF3441">@if</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#FFAB70;--1:#AE4B07">$n</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">&lt;</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">10</span><span style="--0:#E1E4E8;--1:#24292E"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#FFAB70;--1:#AE4B07">$n</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#9ECBFF;--1:#032F62">"0</span><span style="--0:#79B8FF;--1:#005CC5">#{$n}</span><span style="--0:#9ECBFF;--1:#032F62">"</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">}</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B392F0;--1:#6F42C1">.shadow</span><span style="--0:#E1E4E8;--1:#24292E">[</span><span style="--0:#B392F0;--1:#6F42C1">data-n</span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#9ECBFF;--1:#032F62">"</span><span style="--0:#FFAB70;--1:#AE4B07">#{$n}</span><span style="--0:#9ECBFF;--1:#032F62">"</span><span style="--0:#E1E4E8;--1:#24292E">] {</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">grid-area</span><span style="--0:#E1E4E8;--1:#24292E">: s</span><span style="--0:#FFAB70;--1:#AE4B07">#{$n}</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">}</span></div></div><div class="ec-line"><div class="code"><span style="--0:#E1E4E8;--1:#24292E">}</span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span style="--0:#F97583;--1:#BF3441">@for</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#FFAB70;--1:#AE4B07">$i</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">from</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">1</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">through</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">4</span><span style="--0:#E1E4E8;--1:#24292E"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B392F0;--1:#6F42C1">.bgd</span><span style="--0:#E1E4E8;--1:#24292E">[</span><span style="--0:#B392F0;--1:#6F42C1">data-n</span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#9ECBFF;--1:#032F62">"</span><span style="--0:#FFAB70;--1:#AE4B07">#{$i}</span><span style="--0:#9ECBFF;--1:#032F62">"</span><span style="--0:#E1E4E8;--1:#24292E">] {</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">grid-area</span><span style="--0:#E1E4E8;--1:#24292E">: bg</span><span style="--0:#FFAB70;--1:#AE4B07">#{$i}</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">}</span></div></div><div class="ec-line"><div class="code"><span style="--0:#E1E4E8;--1:#24292E">}</span></div></div></code></pre><div class="copy"><div aria-live="polite"></div><div></div></div></figure></div> <p>Then...we "draw" our CSS areas with code:</p> <div class="expressive-code"><figure class="frame"><figcaption class="header"></figcaption><pre data-language="scss"><code><div class="ec-line"><div class="code"><span style="--0:#B392F0;--1:#6F42C1">.grid</span><span style="--0:#E1E4E8;--1:#24292E"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">display</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#79B8FF;--1:#005CC5">grid</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">grid-template-areas</span><span style="--0:#E1E4E8;--1:#24292E">:</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#9ECBFF;--1:#032F62">"... ... s01 s02 s02 s02 s03 ... ..."</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#9ECBFF;--1:#032F62">"... s04 s05 s06 s06 s06 s07 s08 ..."</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#9ECBFF;--1:#032F62">"s09 s10 s38 s11 s11 s11 s12 s13 s14"</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#9ECBFF;--1:#032F62">"s15 s16 s17 s17 bg1 bg1 s18 s19 s20"</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#9ECBFF;--1:#032F62">"s15 s16 s37 bg2 txt bg3 s18 s19 s20"</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#9ECBFF;--1:#032F62">"s15 s16 s37 bg2 bg4 s21 s18 s19 s20"</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#9ECBFF;--1:#032F62">"s22 s23 s24 s25 s26 s26 s27 s28 s29"</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#9ECBFF;--1:#032F62">"... s30 s31 s32 s32 s32 s32 s33 ..."</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#9ECBFF;--1:#032F62">"... ... s34 s35 s35 s35 s36 ... ..."</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">grid-template-columns</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#79B8FF;--1:#005CC5">repeat</span><span style="--0:#E1E4E8;--1:#24292E">(</span><span style="--0:#79B8FF;--1:#005CC5">4</span><span style="--0:#E1E4E8;--1:#24292E">, </span><span style="--0:#79B8FF;--1:#005CC5">max-content</span><span style="--0:#E1E4E8;--1:#24292E">) </span><span style="--0:#79B8FF;--1:#005CC5">1</span><span style="--0:#F97583;--1:#BF3441">fr</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">repeat</span><span style="--0:#E1E4E8;--1:#24292E">(</span><span style="--0:#79B8FF;--1:#005CC5">5</span><span style="--0:#E1E4E8;--1:#24292E">, </span><span style="--0:#79B8FF;--1:#005CC5">max-content</span><span style="--0:#E1E4E8;--1:#24292E">);</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">grid-template-rows</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#79B8FF;--1:#005CC5">repeat</span><span style="--0:#E1E4E8;--1:#24292E">(</span><span style="--0:#79B8FF;--1:#005CC5">4</span><span style="--0:#E1E4E8;--1:#24292E">, </span><span style="--0:#79B8FF;--1:#005CC5">max-content</span><span style="--0:#E1E4E8;--1:#24292E">) </span><span style="--0:#79B8FF;--1:#005CC5">1</span><span style="--0:#F97583;--1:#BF3441">fr</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">repeat</span><span style="--0:#E1E4E8;--1:#24292E">(</span><span style="--0:#79B8FF;--1:#005CC5">4</span><span style="--0:#E1E4E8;--1:#24292E">, </span><span style="--0:#79B8FF;--1:#005CC5">max-content</span><span style="--0:#E1E4E8;--1:#24292E">);</span></div></div><div class="ec-line"><div class="code"><span style="--0:#E1E4E8;--1:#24292E">}</span></div></div></code></pre><div class="copy"><div aria-live="polite"></div><div></div></div></figure></div> <p>Yes, this took a while and multiple tries to get right LMAO. The full <a href="https://github.com/eramdam/macthemes.garden/blob/main/src/components/OS9Button.scss">stylesheet is here</a> if you're curious.</p> <h3 id="random-tidbits">Random tidbits</h3> <h3 id="window-controls">Window controls</h3> <p>The windows are actually interactive! You can "zoom" (expand) the main window and collapse it by clicking the right button/double-clicking the title bar!</p> <div class="sandbox"> <div class="macos9-window" id="demo-window"> <div class="macos9-window-titlebar"> <span class="button-dots"></span> <span class="filler"></span> <span class="title-text">Welcome!</span> <span class="filler"></span> <span class="button-dots"></span><span class="button-dots"></span> </div> <div class="macos9-window-body"> Play with the buttons! </div> </div> </div> <div class="expressive-code"><figure class="frame"><figcaption class="header"></figcaption><pre data-language="js"><code><div class="ec-line"><div class="code"><span style="--0:#F97583;--1:#BF3441">const</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">windowElement</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#E1E4E8;--1:#24292E"> document.</span><span style="--0:#B392F0;--1:#6F42C1">querySelector</span><span style="--0:#E1E4E8;--1:#24292E">(</span><span style="--0:#9ECBFF;--1:#032F62">'#demo-window'</span><span style="--0:#E1E4E8;--1:#24292E">);</span></div></div><div class="ec-line"><div class="code"><span style="--0:#E1E4E8;--1:#24292E">windowElement.</span><span style="--0:#B392F0;--1:#6F42C1">querySelectorAll</span><span style="--0:#E1E4E8;--1:#24292E">(</span><span style="--0:#9ECBFF;--1:#032F62">"button"</span><span style="--0:#E1E4E8;--1:#24292E">).</span><span style="--0:#B392F0;--1:#6F42C1">forEach</span><span style="--0:#E1E4E8;--1:#24292E">((</span><span style="--0:#FFAB70;--1:#AE4B07">button</span><span style="--0:#E1E4E8;--1:#24292E">) </span><span style="--0:#F97583;--1:#BF3441">=&gt;</span><span style="--0:#E1E4E8;--1:#24292E"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#F97583;--1:#BF3441">if</span><span style="--0:#E1E4E8;--1:#24292E"> (button.dataset.action </span><span style="--0:#F97583;--1:#BF3441">===</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#9ECBFF;--1:#032F62">"collapse"</span><span style="--0:#E1E4E8;--1:#24292E">) {</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#F97583;--1:#BF3441">const</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">titlebar</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#E1E4E8;--1:#24292E"> windowElement.</span><span style="--0:#B392F0;--1:#6F42C1">querySelector</span><span style="--0:#E1E4E8;--1:#24292E">(</span><span style="--0:#9ECBFF;--1:#032F62">".macos9-window-titlebar"</span><span style="--0:#E1E4E8;--1:#24292E">);</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#F97583;--1:#BF3441">if</span><span style="--0:#E1E4E8;--1:#24292E"> (titlebar) {</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">titlebar.</span><span style="--0:#B392F0;--1:#6F42C1">addEventListener</span><span style="--0:#E1E4E8;--1:#24292E">(</span><span style="--0:#9ECBFF;--1:#032F62">"dblclick"</span><span style="--0:#E1E4E8;--1:#24292E">, (</span><span style="--0:#FFAB70;--1:#AE4B07">e</span><span style="--0:#E1E4E8;--1:#24292E">) </span><span style="--0:#F97583;--1:#BF3441">=&gt;</span><span style="--0:#E1E4E8;--1:#24292E"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#F97583;--1:#BF3441">if</span><span style="--0:#E1E4E8;--1:#24292E"> (e.target </span><span style="--0:#F97583;--1:#BF3441">instanceof</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">HTMLButtonElement</span><span style="--0:#E1E4E8;--1:#24292E">) {</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#F97583;--1:#BF3441">return</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">}</span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">windowElement.classList.</span><span style="--0:#B392F0;--1:#6F42C1">toggle</span><span style="--0:#E1E4E8;--1:#24292E">(</span><span style="--0:#9ECBFF;--1:#032F62">"collapsed"</span><span style="--0:#E1E4E8;--1:#24292E">);</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">window.</span><span style="--0:#B392F0;--1:#6F42C1">getSelection</span><span style="--0:#E1E4E8;--1:#24292E">()?.</span><span style="--0:#B392F0;--1:#6F42C1">empty</span><span style="--0:#E1E4E8;--1:#24292E">();</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">});</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">}</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">}</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">button.</span><span style="--0:#B392F0;--1:#6F42C1">addEventListener</span><span style="--0:#E1E4E8;--1:#24292E">(</span><span style="--0:#9ECBFF;--1:#032F62">"click"</span><span style="--0:#E1E4E8;--1:#24292E">, () </span><span style="--0:#F97583;--1:#BF3441">=&gt;</span><span style="--0:#E1E4E8;--1:#24292E"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#F97583;--1:#BF3441">const</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">action</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#E1E4E8;--1:#24292E"> button.dataset.action;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#F97583;--1:#BF3441">if</span><span style="--0:#E1E4E8;--1:#24292E"> (action </span><span style="--0:#F97583;--1:#BF3441">===</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#9ECBFF;--1:#032F62">"collapse"</span><span style="--0:#E1E4E8;--1:#24292E">) {</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">windowElement.classList.</span><span style="--0:#B392F0;--1:#6F42C1">toggle</span><span style="--0:#E1E4E8;--1:#24292E">(</span><span style="--0:#9ECBFF;--1:#032F62">"collapsed"</span><span style="--0:#E1E4E8;--1:#24292E">);</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">} </span><span style="--0:#F97583;--1:#BF3441">else</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">if</span><span style="--0:#E1E4E8;--1:#24292E"> (action </span><span style="--0:#F97583;--1:#BF3441">===</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#9ECBFF;--1:#032F62">"zoom"</span><span style="--0:#E1E4E8;--1:#24292E">) {</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">windowElement.classList.</span><span style="--0:#B392F0;--1:#6F42C1">toggle</span><span style="--0:#E1E4E8;--1:#24292E">(</span><span style="--0:#9ECBFF;--1:#032F62">"zoomed"</span><span style="--0:#E1E4E8;--1:#24292E">);</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">}</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">});</span></div></div><div class="ec-line"><div class="code"><span style="--0:#E1E4E8;--1:#24292E">});</span></div></div></code></pre><div class="copy"><div aria-live="polite"></div><div></div></div></figure></div> <h3 id="open-graph-images">Open Graph images</h3> <p>I could have taken the easy route when making the open graph images for each theme and simply dropped a PNG of the main window, something like this:</p> <figure data-type="image"> <picture> <source srcset="https://damien.zone/img/blog/macthemes-embed-v1-dark.png" media="(prefers-color-scheme: dark)" type="image/png"></source> <source srcset="https://damien.zone/img/blog/macthemes-embed-v1-light.png" type="image/png"></source> <img src="https://damien.zone/img/blog/macthemes-embed-v1-light.png" alt="Discord embed with a simple window without any background" loading="lazy" decoding="async" width="437" /> </picture> </figure> <p>This is very cute in apps like Discord, but looks terrible about everywhere else because of the wrong aspect ratio and the non-support of alpha channels.</p> <figure data-type="image"> <picture> <source srcset="https://damien.zone/img/blog/macthemes-embed-v1-bsky-dark.png" media="(prefers-color-scheme: dark)" type="image/png"></source> <source srcset="https://damien.zone/img/blog/macthemes-embed-v1-bsky-light.png" type="image/png"></source> <img src="https://damien.zone/img/blog/macthemes-embed-v1-bsky-light.png" alt="Bluesky embed with a simple window without any background" loading="lazy" decoding="async" width="437" /> </picture> </figure> <p>So I took another approach:</p> <p></p><figure data-type="image"><a href="https://macthemes.garden/themes-opengraph/13d46b4752aa-Monkey-Paradise.png"><img src="https://macthemes.garden/themes-opengraph/13d46b4752aa-Monkey-Paradise.png" loading="lazy" decoding="async" width="auto" height="auto" /></a></figure><p></p> <p>But, obviously, doing that kind of compositing manually would be a terrible idea, and I'm not good enough with ImageMagick, so I ended up using Vercel's <a href="https://github.com/vercel/satori">satori</a> to lay the two images out and generate an image for every single theme:</p> <div class="expressive-code"><figure class="frame"><figcaption class="header"></figcaption><pre data-language="tsx"><code><div class="ec-line"><div class="code"><span style="--0:#F97583;--1:#BF3441">import</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">type</span><span style="--0:#E1E4E8;--1:#24292E"> { InferEntrySchema } </span><span style="--0:#F97583;--1:#BF3441">from</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#9ECBFF;--1:#032F62">"astro:content"</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span style="--0:#F97583;--1:#BF3441">import</span><span style="--0:#E1E4E8;--1:#24292E"> satori </span><span style="--0:#F97583;--1:#BF3441">from</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#9ECBFF;--1:#032F62">"satori"</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span style="--0:#F97583;--1:#BF3441">import</span><span style="--0:#E1E4E8;--1:#24292E"> sharp </span><span style="--0:#F97583;--1:#BF3441">from</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#9ECBFF;--1:#032F62">"sharp"</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span style="--0:#F97583;--1:#BF3441">export</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">async</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">function</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">generateOpenGraphImageForTheme</span><span style="--0:#E1E4E8;--1:#24292E">(</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#FFAB70;--1:#AE4B07">theme</span><span style="--0:#F97583;--1:#BF3441">:</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">InferEntrySchema</span><span style="--0:#E1E4E8;--1:#24292E">&lt;</span><span style="--0:#9ECBFF;--1:#032F62">"themes"</span><span style="--0:#E1E4E8;--1:#24292E">&gt;,</span></div></div><div class="ec-line"><div class="code"><span style="--0:#E1E4E8;--1:#24292E">) {</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#F97583;--1:#BF3441">let</span><span style="--0:#E1E4E8;--1:#24292E"> blurredImageData</span><span style="--0:#F97583;--1:#BF3441">:</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">Buffer</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">|</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">undefined</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#F97583;--1:#BF3441">const</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">margin</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">20</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#F97583;--1:#BF3441">const</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">imageDimension</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#E1E4E8;--1:#24292E"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">width: </span><span style="--0:#79B8FF;--1:#005CC5">1200</span><span style="--0:#E1E4E8;--1:#24292E">,</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">height: </span><span style="--0:#79B8FF;--1:#005CC5">630</span><span style="--0:#E1E4E8;--1:#24292E">,</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">};</span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#F97583;--1:#BF3441">if</span><span style="--0:#E1E4E8;--1:#24292E"> (theme.thumbnails.</span><span style="--0:#79B8FF;--1:#005CC5">length</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">&gt;</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">1</span><span style="--0:#E1E4E8;--1:#24292E">) {</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">blurredImageData </span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">await</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">sharp</span><span style="--0:#E1E4E8;--1:#24292E">(</span><span style="--0:#9ECBFF;--1:#032F62">"public/"</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">+</span><span style="--0:#E1E4E8;--1:#24292E"> theme.thumbnails[</span><span style="--0:#79B8FF;--1:#005CC5">1</span><span style="--0:#E1E4E8;--1:#24292E">])</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">.</span><span style="--0:#B392F0;--1:#6F42C1">resize</span><span style="--0:#E1E4E8;--1:#24292E">(imageDimension.width, imageDimension.height, {</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">fit: </span><span style="--0:#9ECBFF;--1:#032F62">"cover"</span><span style="--0:#E1E4E8;--1:#24292E">,</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">position: </span><span style="--0:#9ECBFF;--1:#032F62">"top"</span><span style="--0:#E1E4E8;--1:#24292E">,</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">})</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">.</span><span style="--0:#B392F0;--1:#6F42C1">blur</span><span style="--0:#E1E4E8;--1:#24292E">(</span><span style="--0:#79B8FF;--1:#005CC5">5</span><span style="--0:#E1E4E8;--1:#24292E">)</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">.</span><span style="--0:#B392F0;--1:#6F42C1">toBuffer</span><span style="--0:#E1E4E8;--1:#24292E">();</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">}</span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#F97583;--1:#BF3441">const</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">mainThumbnailSharp</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">sharp</span><span style="--0:#E1E4E8;--1:#24292E">(</span><span style="--0:#9ECBFF;--1:#032F62">"public"</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">+</span><span style="--0:#E1E4E8;--1:#24292E"> theme.mainThumbnail);</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#F97583;--1:#BF3441">const</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">mainThumbnail</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">await</span><span style="--0:#E1E4E8;--1:#24292E"> mainThumbnailSharp.</span><span style="--0:#B392F0;--1:#6F42C1">png</span><span style="--0:#E1E4E8;--1:#24292E">().</span><span style="--0:#B392F0;--1:#6F42C1">toBuffer</span><span style="--0:#E1E4E8;--1:#24292E">();</span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#F97583;--1:#BF3441">const</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">svg</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">await</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">satori</span><span style="--0:#E1E4E8;--1:#24292E">(</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">&lt;</span><span style="--0:#85E89D;--1:#1E7734">div</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B392F0;--1:#6F42C1">style</span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#E1E4E8;--1:#24292E">{{</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">display: </span><span style="--0:#9ECBFF;--1:#032F62">"flex"</span><span style="--0:#E1E4E8;--1:#24292E">,</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">alignItems: </span><span style="--0:#9ECBFF;--1:#032F62">"center"</span><span style="--0:#E1E4E8;--1:#24292E">,</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">justifyItems: </span><span style="--0:#9ECBFF;--1:#032F62">"center"</span><span style="--0:#E1E4E8;--1:#24292E">,</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">width: </span><span style="--0:#9ECBFF;--1:#032F62">"100%"</span><span style="--0:#E1E4E8;--1:#24292E">,</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">height: </span><span style="--0:#9ECBFF;--1:#032F62">"100%"</span><span style="--0:#E1E4E8;--1:#24292E">,</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">position: </span><span style="--0:#9ECBFF;--1:#032F62">"relative"</span><span style="--0:#E1E4E8;--1:#24292E">,</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">backgroundColor: </span><span style="--0:#9ECBFF;--1:#032F62">"white"</span><span style="--0:#E1E4E8;--1:#24292E">,</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">}}</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">&gt;</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">{blurredImageData </span><span style="--0:#F97583;--1:#BF3441">&amp;&amp;</span><span style="--0:#E1E4E8;--1:#24292E"> (</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">&lt;</span><span style="--0:#85E89D;--1:#1E7734">img</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B392F0;--1:#6F42C1">src</span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#E1E4E8;--1:#24292E">{</span><span style="--0:#B392F0;--1:#6F42C1">toArrayBuffer</span><span style="--0:#E1E4E8;--1:#24292E">(blurredImageData)}</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B392F0;--1:#6F42C1">style</span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#E1E4E8;--1:#24292E">{{</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">position: </span><span style="--0:#9ECBFF;--1:#032F62">"absolute"</span><span style="--0:#E1E4E8;--1:#24292E">,</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">filter: </span><span style="--0:#9ECBFF;--1:#032F62">"brightness(40%)"</span><span style="--0:#E1E4E8;--1:#24292E">,</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">inset: </span><span style="--0:#79B8FF;--1:#005CC5">0</span><span style="--0:#E1E4E8;--1:#24292E">,</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">}}</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">/&gt;</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">)}</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">&lt;</span><span style="--0:#85E89D;--1:#1E7734">img</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B392F0;--1:#6F42C1">src</span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#E1E4E8;--1:#24292E">{</span><span style="--0:#B392F0;--1:#6F42C1">toArrayBuffer</span><span style="--0:#E1E4E8;--1:#24292E">(mainThumbnail)}</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B392F0;--1:#6F42C1">style</span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#E1E4E8;--1:#24292E">{{</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">padding: margin,</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">width: </span><span style="--0:#9ECBFF;--1:#032F62">"100%"</span><span style="--0:#E1E4E8;--1:#24292E">,</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">height: </span><span style="--0:#9ECBFF;--1:#032F62">"100%"</span><span style="--0:#E1E4E8;--1:#24292E">,</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">boxSizing: </span><span style="--0:#9ECBFF;--1:#032F62">"border-box"</span><span style="--0:#E1E4E8;--1:#24292E">,</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">objectFit: </span><span style="--0:#9ECBFF;--1:#032F62">"contain"</span><span style="--0:#E1E4E8;--1:#24292E">,</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">objectPosition: </span><span style="--0:#9ECBFF;--1:#032F62">"center center"</span><span style="--0:#E1E4E8;--1:#24292E">,</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">}}</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">/&gt;</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">&lt;/</span><span style="--0:#85E89D;--1:#1E7734">div</span><span style="--0:#E1E4E8;--1:#24292E">&gt;,</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">{</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">width: imageDimension.width,</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">height: imageDimension.height,</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">fonts: [],</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">},</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">);</span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#F97583;--1:#BF3441">return</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">sharp</span><span style="--0:#E1E4E8;--1:#24292E">(Buffer.</span><span style="--0:#B392F0;--1:#6F42C1">from</span><span style="--0:#E1E4E8;--1:#24292E">(svg));</span></div></div><div class="ec-line"><div class="code"><span style="--0:#E1E4E8;--1:#24292E">}</span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span style="--0:#F97583;--1:#BF3441">function</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">toArrayBuffer</span><span style="--0:#E1E4E8;--1:#24292E">(</span><span style="--0:#FFAB70;--1:#AE4B07">buffer</span><span style="--0:#F97583;--1:#BF3441">:</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">Buffer</span><span style="--0:#E1E4E8;--1:#24292E">) {</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#F97583;--1:#BF3441">const</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">arrayBuffer</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">new</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">ArrayBuffer</span><span style="--0:#E1E4E8;--1:#24292E">(buffer.</span><span style="--0:#79B8FF;--1:#005CC5">length</span><span style="--0:#E1E4E8;--1:#24292E">);</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#F97583;--1:#BF3441">const</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">view</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">new</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">Uint8Array</span><span style="--0:#E1E4E8;--1:#24292E">(arrayBuffer);</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#F97583;--1:#BF3441">for</span><span style="--0:#E1E4E8;--1:#24292E"> (</span><span style="--0:#F97583;--1:#BF3441">let</span><span style="--0:#E1E4E8;--1:#24292E"> i </span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">0</span><span style="--0:#E1E4E8;--1:#24292E">; i </span><span style="--0:#F97583;--1:#BF3441">&lt;</span><span style="--0:#E1E4E8;--1:#24292E"> buffer.</span><span style="--0:#79B8FF;--1:#005CC5">length</span><span style="--0:#E1E4E8;--1:#24292E">; </span><span style="--0:#F97583;--1:#BF3441">++</span><span style="--0:#E1E4E8;--1:#24292E">i) {</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">view[i] </span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#E1E4E8;--1:#24292E"> buffer[i];</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">}</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#F97583;--1:#BF3441">return</span><span style="--0:#E1E4E8;--1:#24292E"> arrayBuffer;</span></div></div><div class="ec-line"><div class="code"><span style="--0:#E1E4E8;--1:#24292E">}</span></div></div></code></pre><div class="copy"><div aria-live="polite"></div><div></div></div></figure></div> <p>I then put together a <a href="https://github.com/eramdam/macthemes.garden/blob/7a8983b64114d6305eb906169aaf64b6005321a5/scripts/opengraph-images.ts">script</a> to process all the images by spawning multiple process, the whole script takes ~2min30 to run on my M1 Max Mac Studio and generate ~3900 images.</p> <p>As a bonus, these images will also be used by the Mac Themes Bot when available going forward.</p> <h2 id="whats-next">What's next</h2> <p>I don't know how long it will take, but I want to continue/finish "recording" the schemes I have access to. Hopefully I am done before next year lolsob. You should subscribe to the <a href="https://macthemes.garden/feed.xml">RSS feed</a> to see those as I update them!</p> <p>Apart from that, I have a bunch of ideas:</p> <ul> <li>a "search by color" feature</li> <li>a way to see/showcase the custom icons contained in each scheme when applicable. There are some gems in there, trust me!</li> <li>Somehow, find a way to hook the site into <a href="https://infinitemac.org/">InfiniteMac</a> to quickly view a scheme "live"</li> <li>a user-submitted gallery of old Macs running the schemes from the site. Hit me up if this is something you'd want to participate in :)</li> </ul> <p>That's all, folks, have a good life.<br /> - damien</p> <section data-footnotes class="footnotes"><h2 class="sr-only" id="footnote-label">Footnotes</h2> <ol> <li id="user-content-fn-1"> <p>or vice versa, I honestly do not remember nor do I care to check the Git history. <a href="#user-content-fnref-1" data-footnote-backref aria-label="Back to reference 1" class="data-footnote-backref">↩</a></p> </li> </ol> </section> <a href="https://damien.zone/introducing-mac-themes-garden">Permalink / Comments</a> https://damien.zone/modding-balatro-on-pc-to-add-touch-controls 2025-03-02T03:06:14Z 2025-05-21T06:08:43Z Damien Erambert <p></p><figure data-type="image"><a href="/img/blog/balatro-touch/sticky-fingers-hero.webp"><img src="https://damien.zone/img/blog/balatro-touch/sticky-fingers-hero.webp" loading="lazy" decoding="async" width="auto" height="auto" /></a></figure><p></p> <p><em>TL;DR: I've made a Balatro mod that adds the touch controls of the iOS version on PC. It's called "Sticky Fingers" and is available to <a href="https://github.com/eramdam/sticky-fingers">download on GitHub</a>! This post will is mostly about the process of making the mod itself.</em></p> <h2 id="how-i-got-here">How I got here</h2> <p>If you're reading this, I probably do not need to explain <a href="https://www.playbalatro.com/">Balatro</a> to you. To say I got <em>into</em> this game would be an understatement. According to Steam, I've spent <strong>210 hours</strong> playing it last year and I expect to spend half of that amount playing it in the next year. The game's good, turns out.</p> <p>Balatro released on PC in February 2024, Mac in March, and got an official mobile port in September of the same year.<br /> And that mobile port is great! Great use of the haptic engine and most importantly… great touch controls!</p> <p>If you don't know what I'm talking about, here's a little recording showing them off:</p> <figure data-type="video"> <video src="https://damien.zone/img/blog/balatro-touch/balatro-touch-ios.mp4" poster="https://damien.zone/img/blog/balatro-touch/balatro-touch-ios-poster.webp?v=a2e286656790" playsinline controls preload="none"></video> <figcaption> Balatro on iOS and its touch controls to buy/sell/use cards </figcaption> </figure> <p>After playing the game on iOS a bunch, I've come to really like those controls and would often miss them when playing on my Mac.</p> <p>So I did the reasonable thing… Hoping that <em>someone</em> ported those controls to the desktop version of Balatro.</p> <p>Until I got fed up with waiting and asked myself: ✨ "How hard could it be, really?" ✨</p> <p>Not <em>that</em> hard, but not easy either, it turns out!</p> <h2 id="background">Background</h2> <p>If you are unaware, Balatro is a game written using the <a href="https://love2d.org/">LÖVE</a> framework in <a href="https://www.lua.org/">Lua</a> and more importantly… the code of the game is available on the file system when you buy it! All of it, neither obfuscated nor minified! This is, obviously, very convenient when it comes to making mods (<a href="https://github.com/jie65535/awesome-balatro">of which there are many</a>), and it greatly simplified what I wanted to do.</p> <p>The plan was "simple":</p> <ol> <li>get the Balatro PC/Mac source code</li> <li>get the Balatro iOS source code</li> <li>compare the two file-by-file and figure out what pieces of code I needed to "transplant" into the PC version to get the drag'n'drop controls working.</li> </ol> <h2 id="getting-the-balatro-pcmac-source-code">Getting the Balatro PC/Mac source code</h2> <p>This is pretty easy, just open the local folder of the game on Steam, open Balatro.exe/Balatro.app and the <code>Balatro.love</code> file is an archive that can be extracted/recompressed pretty easily!</p> <p></p><figure data-type="image"><a href="/img/blog/balatro-touch/balatro-folder-dark.webp"><img src="https://damien.zone/img/blog/balatro-touch/balatro-folder-dark.webp" alt="A Finder window on macOS showing the content of Balatro.love" loading="lazy" decoding="async" width="auto" height="auto" /></a><figcaption>A Finder window on macOS showing the content of Balatro.love</figcaption></figure><p></p> <h2 id="getting-the-balatro-ios-source-code">Getting the Balatro iOS source code</h2> <p>This proved more difficult…but only because I accidentally made my life harder 😅</p> <h3 id="what-i-should-have-done">What I should have done</h3> <p>I <em>should</em> have realized that <a href="https://apps.apple.com/us/app/balatro/id6502451661">Balatro+</a> (Apple Arcade version of the game) is a universal macOS/iPadOS/iOS app. Meaning that I could just download the game on my Mac and…open the <code>.app</code> package and <em>voilà</em>! The iOS source code, easily accessible!</p> <p></p><figure data-type="image"><a href="/img/blog/balatro-touch/balatro-ios-apple-arcade.webp"><img src="https://damien.zone/img/blog/balatro-touch/balatro-ios-apple-arcade.webp" alt="A Finder window on macOS showing the content of Balatro+ (Balatro.app)" loading="lazy" decoding="async" width="auto" height="auto" /></a><figcaption>A Finder window on macOS showing the content of Balatro+ (Balatro.app)</figcaption></figure><p></p> <h3 id="what-i-did-instead-because-i-didnt-know-any-better">What I did instead because I didn't know any better</h3> <p>So here's how I managed to grab the source of the iOS port, which required getting the <code>.ipa</code> file for the app onto my Mac:</p> <ol> <li>Install <a href="https://imazing.com/">iMazing</a></li> <li>Plug my iPhone to my Mac</li> <li>Click <em>Manage Apps</em></li> </ol> <p></p><figure data-type="image"><a href="/img/blog/balatro-touch/balatro-imazing.webp"><img src="https://damien.zone/img/blog/balatro-touch/balatro-imazing.webp" loading="lazy" decoding="async" width="auto" height="auto" /></a></figure><p></p> <ol start="4"> <li>Go to the <em>Library</em> tab</li> <li>Find Balatro in the list</li> <li>Select "Export .IPA"</li> </ol> <p></p><figure data-type="image"><a href="/img/blog/balatro-touch/balatro-imazing-library.webp"><img src="https://damien.zone/img/blog/balatro-touch/balatro-imazing-library.webp" loading="lazy" decoding="async" width="auto" height="auto" /></a></figure><p></p> <ol start="7"> <li>Decompress the <code>.ipa</code> file, since <code>.ipa</code> files are just fancy archives</li> <li>Go to <code>Payload/Balatro.app/game</code> and…</li> </ol> <p>Tada! The files are there!</p> <p></p><figure data-type="image"><a href="/img/blog/balatro-touch/balatro-ios-folder.webp"><img src="https://damien.zone/img/blog/balatro-touch/balatro-ios-folder.webp" loading="lazy" decoding="async" width="auto" height="auto" /></a></figure><p></p> <h2 id="comparing-the-two-codebases">Comparing the two codebases</h2> <p>This part wasn't complicated in itself, it just took a long time.</p> <p>I opened the two folders in a Visual Studio Code workspace and went through most of the files that seemed relevant and compared them against their iOS counterpart.<br /> Then, every time I found a bit of code that seemed useful, I would copy it over the desktop file and launch the game until I got what I wanted.</p> <strong> Special trick that helped me a lot with this </strong> <p>So you know how I said earlier that the source code of Balatro is just <em>there</em> in an "archive"? Well, on macOS, you can abuse symlinks to have <code>Balatro.love</code> point to a modified copy of the code, which makes it easy to quickly test changes!</p> <p></p><figure data-type="image"><a href="/img/blog/balatro-touch/balatro-mac-symlink.webp"><img src="https://damien.zone/img/blog/balatro-touch/balatro-mac-symlink.webp" alt="A Finder window inside the Balatro game files with `Balatro.love` being a symlink" loading="lazy" decoding="async" width="auto" height="auto" /></a><figcaption>A Finder window inside the Balatro game files with `Balatro.love` being a symlink</figcaption></figure><p></p> <p>And I did get what I wanted!</p> <blockquote class="mastodon-embed" data-embed-url="https://social.erambert.me/@eramdam/113813401719828118/embed" style="background:#FCF8FF;border-radius:8px;border:1px solid #C9C4DA;margin:0;max-width:540px;min-width:270px;overflow:hidden;padding:0"> <a href="https://social.erambert.me/@eramdam/113813401719828118" target="_blank" style="align-items:center;color:#1C1A25;display:flex;flex-direction:column;font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Roboto, sans-serif;font-size:14px;justify-content:center;letter-spacing:0.25px;line-height:20px;padding:24px;text-decoration:none"> <div style="color:#787588;margin-top:16px">Post by @eramdam@erambert.me</div> <div style="font-weight:500">View on Mastodon</div> </a> </blockquote> <h2 id="actually-turn-this-into-a-mod">Actually turn this into a mod</h2> <p>After a while, I had a local-only Git repo called <code>balatro-touch-desktop</code> which house the desktop files that I modified by hand. This was very convenient to quickly iterate/see what I actually changed between the original code and my "mod" but, well, it wasn't exactly a real Balatro mod. The best I could do was generate a <code>.patch</code> file that could be applied to the vanilla game.</p> <p>I do not intend for this article to be a "how to make a Balatro mod" tutorial^{<a href="#user-content-fn-1" id="user-content-fnref-1" data-footnote-ref aria-describedby="footnote-label">1</a>} but, at the very high level, I needed a way to turn my <a href="https://github.com/eramdam/sticky-fingers/blob/main/touch-mode/touch-mode.patch">Git patch</a> into a proper mod that used <a href="https://github.com/ethangreen-dev/lovely-injector">lovely-injector</a> to modify the games' files.</p> <p>If you're unfamiliar, Lovely's README file has <a href="https://github.com/ethangreen-dev/lovely-injector?tab=readme-ov-file#patches">examples of patches</a> that can be applied.</p> <p>On paper, this seemed simple enough, the problem was that my changes were precise/small enough that it was very tricky to write a patch by hand. Adding new functions entirely is straightforward, but adding and extra <code>elseif</code> clause 3 levels deep? That drove me nuts, and it wouldn't even work because I kept generating invalid Lua files 🫠.</p> <p>This is when <a href="https://github.com/a-e-m">Amy</a> essentially saved my butt and wrote a <a href="https://github.com/a-e-m/lovely-differ">tool</a> that did exactly what I wanted! Turn my Git diff into a <code>lovely.toml</code> patch file!</p> <p>From that point on, putting the mod together was relatively simple, and there I had it! My mod in the <code>Mods</code> section.</p> <p></p><figure data-type="image"><a href="/img/blog/balatro-touch/balatro-touch-mods-list.webp"><img src="https://damien.zone/img/blog/balatro-touch/balatro-touch-mods-list.webp" alt="The Steamodded 'Mods' window with my mod in there" loading="lazy" decoding="async" width="auto" height="auto" /></a><figcaption>The Steamodded 'Mods' window with my mod in there</figcaption></figure><p></p> <h2 id="improving-on-it">Improving on it</h2> <p>After that, I had the perfect excuse to play Balatro had to test the mod to make sure nothing crashed or behaved weirdly. Thankfully, everything worked just fine! The only "issue" was that the "Sell" target for jokers was <em>way</em> too close to the main joker area, which made it too easy to accidentally sell a joker when re-arranging them quickly (ask me how I know).</p> <p></p><figure data-type="image"><a href="/img/blog/balatro-touch/balatro-touch-og-sell-zone.webp"><img src="https://damien.zone/img/blog/balatro-touch/balatro-touch-og-sell-zone.webp" alt="Balatro with the touch control mod, showing the default sell zone for jokers (in the top right of the game's UI)" loading="lazy" decoding="async" width="auto" height="auto" /></a><figcaption>Balatro with the touch control mod, showing the default sell zone for jokers (in the top right of the game's UI)</figcaption></figure><p></p> <p>Thankfully, smods provides <a href="https://github.com/Steamodded/smods/wiki/Mod-functions#modconfig_tab">a built-in way to make a mod configurable</a> so after an hour or two, I managed to <a href="https://github.com/eramdam/sticky-fingers/commit/b6c2bf5590470a30b36d66ad35d08a899b984a11">make an option</a> (turned on by default) that moved the sell target further to prevent this from happening again.</p> <p></p><figure data-type="image"><a href="/img/blog/balatro-touch/balatro-mod-option.webp"><img src="https://damien.zone/img/blog/balatro-touch/balatro-mod-option.webp" alt="The options tab of the mod, with &quot;Harder Joker sell target&quot; checked." loading="lazy" decoding="async" width="auto" height="auto" /></a><figcaption>The options tab of the mod, with "Harder Joker sell target" checked.</figcaption></figure><p></p> <p></p><figure data-type="image"><a href="/img/blog/balatro-touch/balatro-harder-sell.webp"><img src="https://damien.zone/img/blog/balatro-touch/balatro-harder-sell.webp" alt="Balatro with the touch control mod, showing the 'harder' sell zone for jokers (in the middle right of the game's UI)" loading="lazy" decoding="async" width="auto" height="auto" /></a><figcaption>Balatro with the touch control mod, showing the 'harder' sell zone for jokers (in the middle right of the game's UI)</figcaption></figure><p></p> <h2 id="releasing-the-mod">Releasing the mod</h2> <p>And there you have it! The mod is available on GitHub, as I'm writing this, I just updated it for compatibility with Balatro 1.0.1o.</p> <p><a href="https://github.com/eramdam/sticky-fingers">https://github.com/eramdam/sticky-fingers</a></p> <p>Let me know if you enjoy it and/or have any issues with it!</p> <p>Bye!<br /> - damien</p> <section data-footnotes class="footnotes"><h2 class="sr-only" id="footnote-label">Footnotes</h2> <ol> <li id="user-content-fn-1"> <p>the <a href="https://github.com/Steamodded/smods/wiki/Your-First-Mod">smods wiki</a> is better for this <a href="#user-content-fnref-1" data-footnote-backref aria-label="Back to reference 1" class="data-footnote-backref">↩</a></p> </li> </ol> </section> <a href="https://damien.zone/modding-balatro-on-pc-to-add-touch-controls">Permalink / Comments</a> https://damien.zone/site-update-january-2025 2025-01-20T09:50:43Z Damien Erambert <p>I've done some tweaks to the layout of the site around <a href="https://damien.zone">links</a>, <code>code bits</code> and other things I'm probably forgetting. The <a href="/blog">/blog</a> page looks a bit more feed-like now as well.</p> <p>Oh, yeah, and the blog has <a href="https://nex-3.com/blog/a-non-technical-intro-to-webmentions/">Webmentions</a> support now! Meaning that if you mention my blog from your website or on social media (Bluesky, Mastodon), it should appear alongside comments on the blog.</p> <p><strong>Also</strong>, if you had my button on your website, and you included the direct link, please update it like so, replacing <code>https://files.damien.zone/88x31_damien.png</code> with <code>https://damien.zone/public/88x31_damien.png</code>. I have set up a redirection on my server, so existing buttons don't break, but ideally that'd be temporary 😅</p> <p>That's all!<br /> - damien</p> <a href="https://damien.zone/site-update-january-2025">Permalink / Comments</a> https://damien.zone/website-creatures 2025-01-11T03:01:47Z Damien Erambert <p></p><figure data-type="image"><a href="/img/blog/websitecreatures/IMG_8615.webp"><img src="https://damien.zone/img/blog/websitecreatures/IMG_8615.webp" loading="lazy" decoding="async" width="auto" height="auto" /></a></figure><p></p> <p>A good creature in plush form is the mark of a, if not good, fine website imo</p> <a href="https://damien.zone/website-creatures">Permalink / Comments</a> https://damien.zone/new-year-new-site 2025-01-07T02:07:13Z Damien Erambert <figure data-type="image"> <picture> <source srcset="https://damien.zone/img/blog/damienzone25/damien-zone-2025-dark.webp" media="(prefers-color-scheme: dark)"></source> <img srcset="https://damien.zone/img/blog/damienzone25/damien-zone-2025.webp" /> </picture> </figure> <p>Here it is, the new year! I can't say I'm especially overjoyed about it, but I'm also fine with leaving 2024 behind, so... you know.</p> <p>At any rate, as you (maybe) can see, this website got a bit of an overhaul!<br /> I spent a few days during my winter break re-implementing it using <a href="https://www.11ty.dev/">Eleventy</a>.</p> <p><a href="https://bearblog.dev/">Bearblog</a> served me well for the past few months, but I knew that, at some point, I'd want to control everything... so here we are.</p> <p>While the goal of this migration was to make a 1:1 copy of the way the site looked on Bear, I couldn't help myself and made a few tweaks here and there.</p> <h2 id="damienzone-january-2025-release-notes">damien.zone January 2025 Release Notes</h2> <h3 id="new-favicon--avatar">new favicon / avatar</h3> <img src="https://damien.zone/avatar/avatar-border.png" alt="A black cat with a red bandana, holding a baguette and looking to the left" /> <p><a href="https://www.wavebeem.com/">Sage</a> drew a lovely pixel-art version of my avatar! We spent a lot of time making sure it looks <em>sharp as hell</em> everywhere. The favicon shows up fine in RSS readers as well. I'll try to make a post documenting how all of this was done because some of the tricks I used are a little bit silly.</p> <h3 id="color-palette-changes">color palette changes</h3> <p>I also changed several aspects of the main design regarding contrast and colors. There are too many to list, so enjoy a comparison below:</p> <p></p><figure data-type="image"><a href="/img/blog/damienzone25/damienzone2025-before-dark.webp"><img src="https://damien.zone/img/blog/damienzone25/damienzone2025-before-dark.webp" alt="Before, in dark mode" loading="lazy" decoding="async" width="auto" height="auto" /></a><figcaption>Before, in dark mode</figcaption></figure><p></p> <p></p><figure data-type="image"><a href="/img/blog/damienzone25/damienzone2025-after-dark.webp"><img src="https://damien.zone/img/blog/damienzone25/damienzone2025-after-dark.webp" alt="After, in dark mode" loading="lazy" decoding="async" width="auto" height="auto" /></a><figcaption>After, in dark mode</figcaption></figure><p></p> <p></p><figure data-type="image"><a href="/img/blog/damienzone25/damienzone2025-before-light.webp"><img src="https://damien.zone/img/blog/damienzone25/damienzone2025-before-light.webp" alt="Before, in light mode" loading="lazy" decoding="async" width="auto" height="auto" /></a><figcaption>Before, in light mode</figcaption></figure><p></p> <p></p><figure data-type="image"><a href="/img/blog/damienzone25/damienzone2025-after-light.webp"><img src="https://damien.zone/img/blog/damienzone25/damienzone2025-after-light.webp" alt="After, in light mode" loading="lazy" decoding="async" width="auto" height="auto" /></a><figcaption>After, in light mode</figcaption></figure><p></p> <p>Hopefully, these changes make the site a bit nicer to look at and read. I will continue iterating on it over time because these things are never finished.</p> <h3 id="layout--content-changes">layout / content changes</h3> <p>The layout is still very much based on the "Terminal" theme that Bearblog provides, but I tweaked the layout of a few pages:</p> <ul> <li>The homepage now has a shorter description, the list of recent posts, and that's it.</li> <li>I might experiment with the homepage a bit more; at some point, I'd like to retire <a href="https://erambert.me/">erambert.me</a> in favor of this current site.</li> <li>The links page has been reorganized and redesigned.</li> <li>The footer is now minimal, with only links to the <a href="/links">links</a> and <a href="/credits">credits</a> pages. The webring widget now lives on the links page.</li> </ul> <h3 id="other-changes">other changes</h3> <p>The <a href="/feed.xml">feed</a> is now an Atom feed instead of being either Atom or RSS. The actual feed is available at <a href="/feed.xml">/feed.xml</a>, but I have redirects set up to ensure that RSS clients querying <code>/feed</code> still receive something. As far as I can tell, RSS readers seem to be fine with a given feed changing format like that... so hopefully nothing breaks? We'll see!</p> <p>The code is/will be available on <a href="https://github.com/eramdam/damien.zone">GitHub</a>.</p> <h2 id="happy-new-year-everyone">happy new year, everyone!</h2> <p>And that's it. I hope and wish for 2025 to serve you and all of us well.</p> <p>See ya,<br /> - damien</p> <a href="https://damien.zone/new-year-new-site">Permalink / Comments</a> https://damien.zone/justice-live-in-paris-2024 2024-12-21T23:00:00Z 2024-12-22T09:06:33Z Damien Erambert <p>Saw Justice two times in Paris last week, which makes it four times this year^{<a href="#user-content-fn-1" id="user-content-fnref-1" data-footnote-ref aria-describedby="footnote-label">1</a>}. While my spot for the first Paris show was not great (literally the highest, furthest from the stage), I had a much better spot the night after.</p> <p>Like in <a href="https://damien.zone/justice-at-portola-2024/">September at Portola</a>, I managed to get a pretty good spot on the floor, which netted me some pretty good shots, despite not taking nearly as many as I did back then. I also lucked out and managed to get high-fives from both Xavier and Gaspard (I missed both last time lol) so I still feel pretty good about that lmao.</p> <p>Like last time, all of these are shot on my iPhone 13 Pro using <a href="https://halide.cam/">Halide</a> in <a href="https://www.lux.camera/introducing-process-zero-for-iphone/">"Process Zero RAW"</a> with only exposure and contrasts being adjusted after the fact.<br /> The pictures below are thumbnails, but you can/should click on them to get the full-size JPEGs if you want to pixel peep and taste that sweet-sweet noise 😄</p> <hr /> <p>Apart from that, I'm on a Christmas break for the next couple of weeks. I have a bunch of stuff I wanna watch, read and play, I also want to start exploring ways of migrating this blog to <a href="https://www.11ty.dev/">Eleventy</a> (or something else, who knows). I don't know if I'll get to even half of that <em>but</em> it will be nice to spend some time away from work and Online a bit.<br /> Oh and also, I renamed this blog to "damien's zone". It's not super creative, but it feels a bit nicer than having my full legal name in there lmao.</p> <p>See y'all in the new year ❤️,<br /> - damien</p> <figure><a href="https://damiensfiles.b-cdn.net/justice-paris-2024/DMN_20241218212945.jpg"><img src="https://damiensfiles.b-cdn.net/justice-paris-2024/DMN_INSTA_20241218212945.jpg" loading="lazy" decoding="async" alt="" /></a></figure> <figure><a href="https://damiensfiles.b-cdn.net/justice-paris-2024/DMN_20241218214206.jpg"><img src="https://damiensfiles.b-cdn.net/justice-paris-2024/DMN_INSTA_20241218214206.jpg" loading="lazy" decoding="async" alt="" /></a></figure> <figure><a href="https://damiensfiles.b-cdn.net/justice-paris-2024/DMN_20241218215830.jpg"><img src="https://damiensfiles.b-cdn.net/justice-paris-2024/DMN_INSTA_20241218215830.jpg" loading="lazy" decoding="async" alt="" /></a></figure> <figure><a href="https://damiensfiles.b-cdn.net/justice-paris-2024/DMN_20241218222617.jpg"><img src="https://damiensfiles.b-cdn.net/justice-paris-2024/DMN_INSTA_20241218222617.jpg" loading="lazy" decoding="async" alt="" /></a></figure> <figure><a href="https://damiensfiles.b-cdn.net/justice-paris-2024/DMN_20241218222629.jpg"><img src="https://damiensfiles.b-cdn.net/justice-paris-2024/DMN_INSTA_20241218222629.jpg" loading="lazy" decoding="async" alt="" /></a></figure> <figure><a href="https://damiensfiles.b-cdn.net/justice-paris-2024/DMN_20241218223033.jpg"><img src="https://damiensfiles.b-cdn.net/justice-paris-2024/DMN_INSTA_20241218223033.jpg" loading="lazy" decoding="async" alt="" /></a></figure> <figure><a href="https://damiensfiles.b-cdn.net/justice-paris-2024/DMN_20241218223039.jpg"><img src="https://damiensfiles.b-cdn.net/justice-paris-2024/DMN_INSTA_20241218223039.jpg" loading="lazy" decoding="async" alt="" /></a></figure> <figure><a href="https://damiensfiles.b-cdn.net/justice-paris-2024/DMN_20241218223450.jpg"><img src="https://damiensfiles.b-cdn.net/justice-paris-2024/DMN_INSTA_20241218223450.jpg" loading="lazy" decoding="async" alt="" /></a></figure> <section data-footnotes class="footnotes"><h2 class="sr-only" id="footnote-label">Footnotes</h2> <ol> <li id="user-content-fn-1"> <p>Boston, San Francisco, and now Paris. <a href="#user-content-fnref-1" data-footnote-backref aria-label="Back to reference 1" class="data-footnote-backref">↩</a></p> </li> </ol> </section> <a href="https://damien.zone/justice-live-in-paris-2024">Permalink / Comments</a> https://damien.zone/audio-in-space 2024-12-13T06:02:00Z 2024-12-13T06:03:01Z Damien Erambert <p>Ever since I first tried it shortly after its introduction, Dolby Atmos on Apple Music felt, to me, gimmicky at best and counterproductive at worst? It's like, either the effect is <em>too</em> noticeable and it's distracting <em>or</em> it just doesn't add anything when it just doesn't make a whole song fall flat? If that makes sense?</p> <p>At any rate, I was having a normal evening and randomly decided to give it a try again, and boy do I have thoughts.</p> <p>A little setup note: all my listening is being done on Apple Music on macOS 15.1.1, with AirPods Max, with the "Lossless (ALAC up to 24-bit/48kHz)" preset, "Dolby Atmos" set to "Always On" <a href="/img/blog/442x.webp">like so</a> and "Spatial Audio" set to "Fixed" in macOS.<br /> I also used the <a href="https://dodoapps.io/music-library-tracker/">"Music Library Tracker"</a> app on iOS to even <em>find</em> which tracks in my library were available in Spatial Audio! Truly bonkers that I need a 3rd party app to do that, but whatever.<br /> Also, I'm putting embed codes for each track. I'm going to assume Dolby Atmos is <em>not</em> available when playing them from the web, but at least it'll be easy to open them in a native Apple Music app if you have that.</p> <p>Anyway, here are my thoughts gathered after listening to a few Spatial Audio tracks from the ~630 available in my library. I will try to gather a relatively broad range of genres, but it's my own library, so there will be a clear bias lmao.</p> <h2 id="kraftwerk---trans-europa-express--metall-auf-metall--abzug"><a href="https://music.apple.com/us/album/trans-europa-express-metall-auf-metall-abzug-live/1572524711?i=1572525066">Kraftwerk - Trans-Europa Express / Metall Auf Metall / Abzug</a></h2> <p>I could write a poem about <a href="https://en.wikipedia.org/wiki/Trans-Europe_Express_(album)">Kraftwerk's Trans-Europa Express</a>, it is genuinely one of my favorite electronic music albums of all time, I think. And to be clear, I do <em>not</em> mean Trans-<em>Europe</em> Express, Kraftwerk shall be listened to in German or shan't be listened to, in my humble opinion.</p> <p>At any rate, this Spatial Audio... edition? Mastering? Of the 3-track medley is honestly a pretty great example of Spatial Audio when it actually <em>works</em>. The lossless version is already great because this track is a banger among Kraftwerk's bangers, but the minimal(ist) production and industrial sound design really works well when "mapped" into space. The <em>Metall Auf Metall</em> section (around the 4min mark) is <em>a trip</em> in the best way. It's like you <em>are</em> in the Trans-Europa Express, it rules.</p> <p>Good times, recommend, if Kraftwerk's is your jam.</p> <h2 id="hikaru-utada---michi"><a href="https://music.apple.com/us/album/michi/1428766398?i=1428767651">Hikaru Utada - Michi</a></h2> <p>I feel this one is a good example of a great track whose Spatial Audio master falls on its face and ruins it. The drums stand out because they sound, somehow, tinny, it's honestly pretty distracting! The vocals sometimes sound a bit "muffled" but mostly fine <em>but</em> are completely overpowered by the strings/rest of the backing instrumentals during the chorus. The whole thing ends up sounding like you accidentally turned out a bad EQ preset on the track. A damn shame.</p> <h2 id="michael-jackson---thriller"><a href="https://music.apple.com/us/album/thriller/273048762?i=273048787">Michael Jackson - Thriller</a></h2> <p>I probably don't need to introduce this track. It's a classic. You know it, I know it, we all know it.<br /> The original already feels "immersive" due to its cinematic ambiance and impeccable mastering. I think it's one of the first tracks I've listened to that "rewarded me" for paying attention to things like "that one tiny guitar playing a few chords in the background of the chorus", good stuff.</p> <p>The Spatial Audio master is...perplexing? Don't get me wrong, it's well-made! The vibe of the stereo version is intact, the door is creaky, the wolves' howls are spooky, the groove is <em><em>chef's kiss</em></em> and Vincent Price's evil laugh gives me both the goosebumps and a massive grin on my face. It's fucking Thriller!</p> <p><strong>But</strong>. They fucked with it! I do not know if it was intentional or if someone fucked up, but they messed with it! From the very intro, it's noticeable, the creaky door sounds different, almost as if it had a "record scratch" sound effect applied to it? There are a few piano chords added here and there, maybe a few more wolves howling in the background, shit like that.</p> <p>And it's like, yeah, the effect is sold, and you can't miss the "spatialness" of it but... man it's distracting!! Perhaps I'm just obsessive enough that any tiny change would have 'triggered' me, but it's a bit of a bummer in my opinion because I do not think this Atmos master needed any extra "fluff" like that. At least the outro with Vincent Prince is (mostly) unscathed, thank god.</p> <p>Not a bad time, but given the source material, I'm peeved.</p> <h2 id="kendrick-lamar---gnx"><a href="https://music.apple.com/us/album/gnx/1781270319">Kendrick Lamar - GNX</a></h2> <p>I'm cheating and including the whole album because I cannot choose and also because, frankly, GNX is a no-skip-album. The Atmos master is not perfect, but it's pretty damn close!</p> <p>I wanted to write a "highlights" section, but I quickly realized I would just say that every track slaps in Spatial Audio because, well, they do in specific ways because GNX is a good album.</p> <p>Give it a listen if you liked the album.</p> <h2 id="green-day---american-idiot"><a href="https://music.apple.com/us/album/american-idiot/1161539183?i=1161539471">Green Day - American Idiot</a></h2> <p>What a mess, dude. The whole thing sounds so "small" and tinny in Spatial Audio compared to the (remastered?) stereo lossless version. Unclear to me if this is just a thing with "rock" songs in Atmos or just this particular master but <em>man</em>, what a waste.</p> <p>Keep to the stereo version on this one.</p> <h2 id="justice---hyperdrama"><a href="https://music.apple.com/us/album/hyperdrama/1724935208">Justice - Hyperdrama</a></h2> <p>Another album, you can't stop me! ... And I don't know, man, the Spatial Audio just sounds mid on this one? Hyperdrama is a banger of an album, but it 100% sounds better in stereo than in Atmos. It's not even a contest.</p> <h2 id="bo-burnham---welcome-to-the-internet"><a href="https://music.apple.com/us/album/welcome-to-the-internet/1571419211?i=1571419368">Bo Burnham - Welcome to The Internet</a></h2> <p>Remember this song? Anyway, I wanted to end on a good note because I think here the Spatial Audio works here! I wonder if the mastering work from the Netflix special (who, I assume, had surround sound?) was used as a base here? Either way, it's great here.</p> <h2 id="conclusion-spatial-audio-is-still-sort-of-a-mixed-bag">Conclusion: Spatial Audio is still sort of a mixed bag*</h2> <p>* In my experience.</p> <p>I would be tempted to say that Spatial Audio only really works on specific genres or very specific types of tracks/records, but even in the same genre... the results vary wildly?<br /> Perhaps Spatial Audio only works when the master is treated as its own thing and just not a checkbox on a to-do list.</p> <p>I don't know, I'm not an audio engineer, just a guy who listens to music perhaps a bit too much and who has opinions.</p> <p>Thank you for coming to my TED talk,<br /> - damien</p> <p>​</p> <a href="https://damien.zone/audio-in-space">Permalink / Comments</a> https://damien.zone/cool-selection-of-stuff-early-december-2024 2024-12-07T23:20:11Z 2024-12-07T23:20:11Z Damien Erambert <p>Last month definitely has been something, huh? Globally and also personally because, <em>man</em>, time has been <em>flying</em> these past few weeks. What started as a small list of links at the beginning of November morphed into whatever will happen in this post, welp!</p> <h3 id="playing">playing</h3> <ul> <li><a href="https://store.steampowered.com/app/3146520/WEBFISHING/">Webfishing</a>!! What a lovely little game.</li> <li><a href="https://50games.fun/">UFO 50</a>, which has been made <em>so</em> much more enjoyable by my recent purchase of an <a href="https://www.8bitdo.com/pro2/">8bitdo Pro 2 controller</a></li> <li><a href="https://store.steampowered.com/app/2702490/TETRACHROMA/">Tetrachroma</a>.</li> </ul> <p>I think I want to use my upcoming Christmas break to play more video games, especially ones I've had on my "backlog" for a hot minute 😤</p> <h3 id="listening">listening</h3> <p>November was great for music, at least!</p> <ul> <li>The new <a href="https://my-gnx.com/">Kendrick Lamar album</a> has been on heavy rotation for me. I need to dig into more West Coast rap...</li> <li>I finally found what the fuss was all about and checked out <a href="https://magdalenabay.bandcamp.com/album/mercurial-world">Mercurial World</a> and <a href="https://magdalenabay.bandcamp.com/album/imaginal-disk">Imaginal Disk</a> by Magdalena Bay and, man, music rules, y'all.</li> <li>The year is 2024, and I only now found out about Together's (Thomas Bangalter and DJ Falcon) version of "Call On Me" and watched <a href="https://www.youtube.com/watch?v=wyYAiU4DKUY">this excellent documentary</a> about the whole situation about this track.</li> <li>I also listened to a lot of <a href="https://etjusticepourtous.bandcamp.com/album/hyperdrama">Justice</a> and <a href="https://gesaffelstein.lnk.to/GAMMA">Gesaffelstein</a> because they both released banger albums this year, so I'm allowed to be normal about both. It will happen again.</li> </ul> <p>And now, the links.</p> <hr /> <h2 id="politics-oof">politics (oof)</h2> <h3 id="consolations-of-the-damned-and-its-the-end-of-the-world-as-we-know-it"><a href="https://aevangeline.substack.com/p/consolations-of-the-damned">Consolations of the Damned</a>, and <a href="https://offb.substack.com/p/its-the-end-of-the-world-as-we-know">It's the End of the World As We Know It.</a></h3> <blockquote> <p>It's one of the triumphantly insipid parts of humanity - that some of us never can quite give up, even when all signs point to our personal immiseration. For some fool reason, even when sinking into mire, some humans try to plant seeds.</p> </blockquote> <blockquote> <p>For many white left-libs and rad-libs across the USA, it was the end of the world as they knew it. For me, someone who hasn’t stopped seeing the face of every martyr I held in my arms ‘til they died in Gaza, it was another fucking Wednesday.</p> </blockquote> <p>These two posts have been resonating in my head for a minute, I think you could see them as polar opposites, but I feel they're two sides of the same coin?</p> <p>I think it's fair to say that: shit sucks, shit <em>will</em> suck, but hope is necessary. I know I'll try to keep this in mind for the next few years as I try to do whatever I can at my own level.</p> <h3 id="the-pervocracy-resistance-is-not-an-emotion">The Pervocracy: <a href="https://pervocracy.com/essays/resistance-is-not-an-emotion/">Resistance is not an emotion</a></h3> <blockquote> <p>Bottom line was, I <em>cared</em> about the things happening in this country. And the angrier I got, the more the anger itself felt like caring. They say “if you’re not outraged, you’re not paying attention,” right? Well, I sure was paying attention! I was paying so much attention I couldn’t sleep and I couldn’t enjoy anything!</p> </blockquote> <p><em>Yup</em>, felt that one. The first set of Trump years were maddening as an immigrant who had (at this point) "just arrived" in the U.S., it was very easy to fall into the "god I need to at least pay attention because who knows what that bozo will do/say" trap and drive myself insane over things I had no control over.<br /> Not doing that again!<br /> I'm still pissed, and I doubt I'll be less so anytime soon, but it feels healthier to try to channel that into actions that actually help people around me. Like Natalie said: <a href="https://nex-3.com/blog/the-thing-about-making-the/">"There's so much that needs doing, and even if you just do a bit of it you're helping."</a>.</p> <h2 id="that-nerd-shit">that nerd shit</h2> <h3 id="cathode-ray-dude-linux-on-the-steamdeck-lol">cathode ray dude: <a href="https://blog.cathoderaydude.com/doku.php?id=blog:linux_on_the_steamdeck_lol">linux on the steamdeck lol</a></h3> <blockquote> <p>one of the great things about humans is our ability to communicate, to share experiences so that we don't all have to learn things “the hard way.” why people online, particularly linux people, are so quick to discard that basic tenet of our existence is beyond me. all you have to do is say “yep, it works,” without the “obviously” at the end - or just say nothing at all. that one's incredibly easy. possibly the easiest choice</p> </blockquote> <p>The Steam Deck part of this post isn't really what I'm interested in, hehe.</p> <h3 id="ben-mini-img_0416">ben-mini: <a href="https://ben-mini.github.io/2024/img-0416">IMG_0416</a></h3> <p>That the iPhone had a "Send to YouTube" feature is one of these things that I knew about because I remember it being announced at the time, but reading this article felt like digging a core memory, in a good way.</p> <h3 id="ai-3-there-is-no-road-from-here-to-there"><a href="https://discourse.suttacentral.net/t/ai-3-there-is-no-road-from-here-to-there/33426">AI-3: There is no road from here to there</a></h3> <blockquote> <p>AI is doing the same thing, except we are bewitched by a simulacrum. Human attention worldwide has been transfixed, our thoughts and fears and hopes and fantasies magnetized by the appearance of something so alien that seems somehow like us. We want it to be real. We want to be it. In doing so we long for the erasure of our own subjectivity.</p> </blockquote> <p>It won't surprise you to learn that I never really believed in the "we will be able to make a superintelligence" claims from the AI industry, but this post tackling the question by using Buddhist texts as framing is fascinating.</p> <h3 id="tom-macwright-on-not-using-copilot">Tom MacWright: <a href="https://macwright.com/2024/11/20/not-using-copilot.html">On not using copilot</a></h3> <blockquote> <p>LLM assistants are chat interfaces. You beg the computer to do something, it does something wrong, you ask it to fix the problem. You’re managing. You’re acting as a manager, and chatting.</p> <p>Sometimes that’s a useful arrangement. Heck, <a href="https://en.wikipedia.org/wiki/ELIZA">ELIZA</a> was occasionally useful even though it was a tiny, scripted experience. Talk therapy can be good, and chat interfaces can be productive. But at least for some of us, the need to keep asking for something, trying to define the outputs we want and clarify and re-clarify: this is managing, and sometimes it’s nicer to write in solitude than to beg the computer like an micromanager.</p> </blockquote> <p>Big same.</p> <h3 id="mathew-duggan-self-hosting-isnt-a-solution-its-a-patch">Mathew Duggan: <a href="https://matduggan.com/self-hosting-isnt-a-solution-its-a-patch/">Self-Hosting Isn't a Solution; It's A Patch</a></h3> <blockquote> <p>What people actually need are laws. Regulations like the GDPR must become the international standard for platforms handling personal data. These laws ensure a basic level of privacy and data rights, independent of whether a judge forces a bored billionaire to buy your favorite social network. Suggesting self-hosting as a solution in the absence of such legal protections is as naive as believing encrypted messaging platforms alone can protect you from government or employer overreach.</p> </blockquote> <p>I self-host probably more than the average person, and I'm thinking about ways to self-host/control more stuff in the future but this article raises a lot of good points.</p> <h3 id="arnoorg-on-the-origins-of-ds_store">arno.org: <a href="https://www.arno.org/on-the-origins-of-ds-store">On the origins of DS_store</a></h3> <p>Finishing this section with some extra nerd trivia.</p> <h2 id="miscellanea">miscellanea</h2> <h3 id="nat-clayton-someplace-elsewhere-almost-every-cat-i-met-this-year">Nat Clayton (someplace elsewhere): <a href="https://blog.someplace-else.xyz/almost-every-cat/">(Almost) Every Cat I Met This Year</a></h3> <p>Cats are good as hell.</p> <hr /> <p>That's what I have for you this time. I also recently rambled about <a href="https://damien.zone/thoughts-about-mastodon-and-the-new-twitter/">Websites™️</a>, maybe it might be interesting to you? Who knows.</p> <p>See you in the next one!<br /> - damien</p> <a href="https://damien.zone/cool-selection-of-stuff-early-december-2024">Permalink / Comments</a> https://damien.zone/thoughts-about-mastodon-and-the-new-twitter 2024-11-23T22:14:48Z 2024-11-23T22:14:48Z Damien Erambert <p>I keep telling myself I should stop thinking about social media so much, especially in the "current moment", but it keeps happening. This post started as a bunch of posts on Mastodon until I stopped myself and decided to Blog About It instead.</p> <h3 id="mastodon-is-fine">Mastodon is fine</h3> <p>Eugen being the <a href="https://en.wikipedia.org/wiki/Benevolent_dictator_for_life">BDFL</a> of Mastodon (the project) might have been beneficial in the early days, but it feels more and more like a liability at this point.<br /> If Mastodon is to survive for another 8 years, it cannot be run as a <a href="https://wxcafe.net/posts/when_a_toy_isnt_a_toy_anymore/">pet project</a> anymore. And it also should not be run as "just" a Twitter-like anymore because Bluesky is effectively winning that battle with more resources than the Mastodon project could ever get.</p> <p>A lot of the good ideas for the Fediverse aren't coming from Eugen or Mastodon at this point, and they rarely involve just "being another Twitter". Which leads me to my next point.</p> <h3 id="who-is-the-new-twitter-is-a-boring-question">"Who is the new Twitter?" is a boring question</h3> <p>I really do not like this question.^{<a href="#user-content-fn-1" id="user-content-fnref-1" data-footnote-ref aria-describedby="footnote-label">1</a>} This isn't me being salty about Bluesky "winning", by the way. I would be bothered the same if Mastodon was being declared a "winner" because:</p> <p><strong>Why should we have only one website, exactly?</strong></p> <p>Why is this all we care about? Why is this the focus? Why do we obsess over who has the most (active) users?</p> <p>Are we constantly arguing about decentralization, who does it and who doesn't, and complaining about monopolies only to want (effectively) a monopoly for our online spaces? Really?</p> <p>Sure, it's more annoying, but I think it's healthier to have different spaces for different people.<br /> I've been on Twitter since 2009, Mastodon since 2017, and Bluesky since early 2023 and at this point, I can say that all of these are true:</p> <ul> <li>I know people who only feel comfortable being on Mastodon and not Bluesky, <em>and vice versa</em>.</li> <li>I know people for whom Twitter is still Their Only Place. This list gets smaller by the day and is only really there because Bluesky doesn't have locked accounts (yet), but it exists.</li> <li>...and I know people who have withdrawn from social media altogether because the remaining options just feel terrible to them.</li> </ul> <p>This is the kind of thing I think about when I see people bicker about who is "winning the Twitter-like war". I really don't care about who is winning because I do not believe it is a conflict worth thinking about.</p> <p>See ya,<br /> - damien</p> <section data-footnotes class="footnotes"><h2 class="sr-only" id="footnote-label">Footnotes</h2> <ol> <li id="user-content-fn-1"> <p>I also roll my eyes at the fact that, most of the time, those asking it treat Mastodon as if it only "became a thing" in November 2022. It has been around for <em>eight years</em> at this point! A lot of social media websites don't even last half as long! But most people didn't care until Elon Musk bought Twitter and "made it bad" (as if it were perfect before). But whatever, I'm annoyed about it, but it's just because I'm clearly not neurotypical enough to hear someone getting details/a story wrong and moving on as if it didn't happen. <a href="#user-content-fnref-1" data-footnote-backref aria-label="Back to reference 1" class="data-footnote-backref">↩</a></p> </li> </ol> </section> <a href="https://damien.zone/thoughts-about-mastodon-and-the-new-twitter">Permalink / Comments</a> https://damien.zone/buttons 2024-11-05T03:46:00Z 2024-11-05T03:48:40Z Damien Erambert <p>You know, it always surprises me in the best way possible to see my <a href="https://damien.zone/links/">website's button</a> on other people's websites. I have literally no way of knowing who does it otherwise (because the file is hosted by GitHub so I don't have analytics, and I'm sure some folks re-host it themselves) so every time it happens it's a surprise. It's great.</p> <p>Always appreciate it &lt;3</p> <p>- damien</p> <a href="https://damien.zone/buttons">Permalink / Comments</a> https://damien.zone/cool-selection-of-stuff-end-of-october-2024 2024-11-03T07:00:00Z 2024-11-05T03:38:19Z Damien Erambert <p>Programming note: remember link roundups? Well, I'm deciding to call them by a different name now. Why? So I can make a silly pun. I wanted to go with "Cool Stuff Sunday" at first, but I'm not fooling myself in thinking I'll stick to posting these on Sundays.</p> <p>Let's get to it, there's a lot of stuff to talk about.</p> <h2 id="social-media-meta">Social Media meta</h2> <p>For better or worse, I still think probably far too much about social media, so I can't help but be into articles about it.</p> <h3 id="tom-date-em-ups-i-want-you-to-dream">Tom (Date 'em Ups): <a href="https://dateemups.com/cohost-finale/">I want you to dream</a></h3> <blockquote> <p>You can have dreams, Cohost. And when you're finally done making one come true, you can go on and have more. Dreams are why I'm here, why I've survived, and I want you, all of you to have them, too, more than anything else. Wherever the winds take us all after this, I hope you hold onto those dreams. Don't let go of them for anything. Anything. No matter how crushing the world gets, no matter how tall the barriers to entry are, nothing whatsoever. I had to hold onto mine tightly for over two whole decades, but damn it, I willed it into reality and I'm going to keep doing the exact same thing with what's in my sights now or die trying.</p> </blockquote> <p>Another cohost-related post, it will happen again, I'm not sorry.</p> <h3 id="luna-online-following-and-starter-packs">Luna: <a href="https://moonbase.lgbt/blog/online-following-starter-packs/">Online following and Starter Packs</a></h3> <blockquote> <p>I want people to follow me naturally because they enjoy my posts in particular, I don’t want a tech/demoscene/gamedev/etc audience showing up in bulk just because someone else decided to put me on a list without my prior consent.</p> </blockquote> <p>It is not a secret that I am not exactly fond of Bluesky. I use it, but I <em>tolerate</em> it. Bluesky's "starter packs", much like Twitter's "Follow all"^{<a href="#user-content-fn-1" id="user-content-fnref-1" data-footnote-ref aria-describedby="footnote-label">1</a>} feature, are... misguided? I see where they're coming from, it's hard to "build a feed" when you start on a Twitter-like website but, like Luna here, I can't help but feel this will produce Some Weird Results.</p> <p>I think following a starter pack is doing yourself a disservice because you're just injecting people into your feed without getting a feel of what their posts are like, and people who are added to them have little way of doing much about it. You can "just block the creator of a pack" but this isn't a great solution. Some people might prefer to never be put in the spotlight <em>at all</em>, sometime it might be awkward for people to block a starter pack's creator. The fact there isn't an "opt me out" button is <em>bonkers</em> to me, but ultimately doesn't surprise me coming from Bluesky. But I'm just a hater, so what do I know.</p> <p>Build your feed slowly but surely, mute and unfollow liberally, avoid accounts that are just glorified RSS feeds. It's not perfect, but I know I would <em>explode</em> if I followed dozens of new people at once, so that's what I do.</p> <h3 id="websites-meta">Websites meta</h3> <h3 id="margot-a-journal-your-website-doesnt-actually-have-to-have-everything">Margot (a journal): <a href="https://emaytch.neocities.org/journal#20241024">"your website doesn't actually have to have everything"</a></h3> <p><small>(Sorry, Margot, but I felt the date wasn't a good title, hope you forgive me)</small></p> <blockquote> <p>You don't have to recreate everything on the web, or even your favorite social media site! I recommend starting small, working on what you can or what you know, and plan to do more whenever you feel like you have the capacity to do so.</p> </blockquote> <p>This is something I have to keep telling myself. The reason I never posted on my blog when it was at <code>erambert.me/blog</code> was that I had built a stack^{<a href="#user-content-fn-3" id="user-content-fnref-3" data-footnote-ref aria-describedby="footnote-label">2</a>} that was just too distracting to me. I would end up just tinkering and adding yet-another-feature instead of just posting.<br /> I am starting to think about <em>maybe</em> migrating to something else in the coming months, but I've enjoyed Bearblog for its "limitations" that stop me in my tinker-instead-of-writing tracks. It's always a work in progress, and that's ok.</p> <h3 id="ian-having-a-website-used-to-be-fun">Ian: <a href="https://ianspence.com/blog/2024-10/websites-used-to-be-fun/">Having a Website Used to Be Fun</a></h3> <blockquote> <p>Kill the cop in your head that tells you to share the concerns that Google has. You're not Google. Websites should be fun. Enterprise tools like Cloudflare and managed containers aren't.</p> </blockquote> <p>I felt Ian's post in my bones because, like I said above, I painted myself into a similar corner. <em>Multiple times</em> in my past. You, dear reader, know about damien.zone and erambert.me, but my past is full of the corpses of dead blogs. Hopefully, this one won't join the graveyard anytime soon.</p> <h3 id="pyeri-robotstxt-pitfalls-what-i-learned-the-hard-way">pyeri: <a href="https://lobste.rs/s/s6zfxg/robots_txt_pitfalls_what_i_learned_hard">Robots.txt pitfalls: what I learned the hard way</a></h3> <p><small>Note: <code>robots.txt</code> is <a href="https://mastodon.social/@ecn/113397664191346898">merely a suggestion</a> these days, do not treat it as a silver bullet against scrapers and various bots.</small></p> <p>Interesting post about, IMO, easy mistakes to make with the <code>robots.txt</code> syntax.</p> <h2 id="general-tech-stuff">General tech stuff</h2> <h3 id="louie-mantia-nothing-left-to-solve">Louie Mantia: <a href="https://lmnt.me/blog/nothing-left-to-solve.html">Nothing Left to Solve</a></h3> <blockquote> <p>At some point, we solidified the layout of a calculator. If we change it too much, we diminish value rather than add to it. It might be time to recognize that we have solved some software problems, and the reason why all this stuff gets redesigned repeatedly is simply because companies don’t know what to do if these things have been solved already.</p> </blockquote> <p>Louie is specifically talking about <a href="https://www.theverge.com/2024/10/24/24279020/browser-company-ai-browser-arc">The Browser Company</a> building <em>another</em> browser that isn't Arc, but his article could apply to so many things in tech at this point. Maybe this isn't the first time it happened, but it really feels like the tech industry is eating its own tail trying to find the Next Big Thing. Welp.</p> <h3 id="jason-velazquez-any-technology-indistinguishable-from-magic-is-hiding-something">Jason Velazquez: <a href="https://www.fromjason.xyz/p/notebook/any-technology-indistinguishable-from-magic-is-hiding-something/">Any Technology Indistinguishable From Magic is Hiding Something</a></h3> <blockquote> <p>Listen, I know we want to believe that things are changing for the better. For the first time in a long while, there’s hope for the future of the web. There’s something in the air, something that feels like meaningful change. Things are happening. It’s lovely, actually.<br /> [...]<br /> And if you’re on Mastodon or some other decentralized social media, that’s great! Don’t be a dick about it. For some people, TikTok is their livelihood. For others, Instagram is the difference between speaking to someone that day or not. We’re all just doing the best we can. But we’re fighting each other when we could be working together to take these motherfuckers down a peg.</p> </blockquote> <p>A good essay about the threat of the ever-growing corporate control of the Web at large and what can be done to (hopefully) fix it.</p> <p>H/t to <a href="https://ewie.online/posts/20241012-some-links-you-might/#from-jason-any-technology-indistinguishable-from-magic-is-hiding-something">Ewie</a> and <a href="https://blog.dante.cool/link-roundup-11-the-middle-aged-web/#jason-velazquez-a-hrefhttpswwwfromjasonxyzpnotebookany-technology-indistinguishable-from-magic-is-hiding-somethingany-technology-indistinguishable-from-magic-is-hiding-somethinga">Dante</a> for this one.</p> <h3 id="cathode-ray-dude-why-am-i-interested-in-flip-phones">cathode ray dude: <a href="https://blog.cathoderaydude.com/doku.php?id=blog:why_am_i_interested_in_flip_phones">why am i interested in flip phones</a></h3> <p>Cathode Ray Dude has a <a href="https://blog.cathoderaydude.com/doku.php?id=start">blog</a> now! I've been a fan of his <a href="https://www.youtube.com/@CathodeRayDude">YouTube channel</a> for a while, and I always enjoyed his posting on cohost.</p> <p>Anyway, this is a good article about flip phones, go read it.</p> <h3 id="asthasr-generative-ai-and-the-programmer">asthasr: <a href="https://asthasr.github.io/posts/generative-ai/">Generative AI and the Programmer</a></h3> <blockquote> <p>In other words, as LLMs become more prominent and produce larger proportions of available technical content, the ability of new programmers to bootstrap themselves into competence diminishes because they lack the context necessary to judge the content that they are reading. In effect, only content that is free of LLM influence is suitable for beginner use.</p> <p>How many aspiring programmers will possess the caution and insight necessary to realize that, and the humility required to accept that older resources might be preferable?</p> <p>The answer to that question will determine the fate of the industry.</p> </blockquote> <p>I am more bullish than the author <em>against</em> LLM-based tools when used in programming tasks. Every time I tried them, they were genuinely distracting and fell on their face when asked to perform more complex tasks that would have been helpful. But this is a good post about the limits of these tools and how, if not used critically, they can be detrimental.</p> <p>I'm of the opinion that a programmer is better off learning how to like, make automations and snippets and learn their coding environment by heart rather than using a mediocre plagiarism machine, but that's my opinion.</p> <h2 id="music-stuff">Music stuff</h2> <h3 id="echosoul-new-post">echosoul: <a href="https://echosoul.bearblog.dev/new-post/">New post</a></h3> <blockquote> <p>our scenes will be better off if we support each other openly. sharing the names of the artists and tracks you are playing as a dj is a simple important step.</p> </blockquote> <p>I'm not a DJ but as a listener I can say that, DJ sets are such a useful discovery tool that it's saddening to see the practice of hiding your "sources" taking place. Besides, there will always be some sicko out there to figure out and post the track lists on dedicated websites, so what's the point?</p> <h3 id="morning-music-soichi-terada---sounds-from-the-far-east">Morning Music: <a href="https://morningmusic.bearblog.dev/soichi-terada-sounds-from-the-far-east/">Soichi Terada - Sounds from the Far East</a></h3> <p>Great musical recommendation from Misty on her (excellent) Morning Music blog. Love me some house music.</p> <h3 id="lynnedrum-normal-for-girls-vii-remixed---postmortem">lynnedrum: <a href="https://lynnedrum.bearblog.dev/nfgvii-postmortem/">NORMAL FOR GIRLS VII: REMIXED - postmortem</a></h3> <p>Normal for Girls is one of my favorite music events of the past few years. It's always a blast to virtually attend with my friend group in VR, and this edition was no exception. All the sets are great in their own way. Do check it out.</p> <h3 id="rebecca-black-boiler-room-dc">Rebecca Black: <a href="https://www.youtube.com/watch?v=vkcyXB08BBE">Boiler Room: DC</a></h3> <p>Not a post, but just a DJ set that surprised me. I only recently learned that A) Rebecca Black is still around and that B) she's fucking killing it. This set of hers is great and even funny at times. Highly recommend it.</p> <h2 id="other-things">Other things</h2> <h3 id="nat-clayton-someplace-elsewhere-drifting-through-the-empire-state-in-pictures">Nat Clayton (Someplace Elsewhere): <a href="https://blog.someplace-else.xyz/photo-mode-ii/">Drifting through the Empire State, in pictures</a></h3> <blockquote> <p>But that's the process, and it's a tremendously enjoyable process at that. It's been fun to get out of Edinburgh and try new things, to sneak out a few pics whenever the moment presented itself. I'm taking things as seriously as I need to right now - there's no pressure to post or monetize, this is just for me.</p> </blockquote> <p>Nat's post resonated a lot with me because, boy, I haven't taken pictures with my "big camera" in such a long time that the next time I do will absolutely feel like learning everything again. I should get back into it.</p> <h3 id="louie-mantia-the-most-famous-queen-song">Louie Mantia: <a href="https://lmnt.me/blog/the-most-famous-queen-song.html">The Most Famous Queen Song</a></h3> <blockquote> <p>Wondering how this possibly could be, I remembered we are from two very different parts of the world. [...]<br /> Some things are not as universal as you’d think.</p> </blockquote> <p>The same blog, twice in a link roundup? It's more likely than you think!<br /> Louie's post hit close to home because I feel like I have a similar experience dozens of times ever since moving to the U.S. And you could argue that France and the U.S. are much closer to each than Japan and the U.S. are!<br /> The world is both very small and very big, I just think it's neat.</p> <h3 id="priscilla-ghoulnoise-two-big-reasons-cats-follow-you-everywhere">Priscilla (ghoulnoise): <a href="https://ghoulnoise.com/two-big-reasons-cats-follow-you-everywhere/">Two BIG Reasons Cats Follow You Everywhere</a></h3> <p>I had to share this extremely important post.</p> <hr /> <p>That's all, folks.</p> <p>See ya in the next one,<br /> - damien</p> <section data-footnotes class="footnotes"><h2 class="sr-only" id="footnote-label">Footnotes</h2> <ol> <li id="user-content-fn-1"> <p>I cannot, for the life of me, find any coverage about this feature. But it exists and will show up if you follow someone with, I think, "a lot" of followers? It's basically a modal that shows a bunch of accounts' avatars and will prompt you to follow all of them. <a href="#user-content-fnref-1" data-footnote-backref aria-label="Back to reference 1" class="data-footnote-backref">↩</a></p> </li> <li id="user-content-fn-3"> <p>The stack itself isn't relevant, IMO. But if you have to know, it's using <a href="https://astro.build">Astro</a>, which I like! I just don't think I can trust myself (yet) to use it for a blog again, lol <a href="#user-content-fnref-3" data-footnote-backref aria-label="Back to reference 2" class="data-footnote-backref">↩</a></p> </li> </ol> </section> <a href="https://damien.zone/cool-selection-of-stuff-end-of-october-2024">Permalink / Comments</a> https://damien.zone/end-of-october-2024-update 2024-10-28T04:40:00Z 2024-10-29T00:55:41Z Damien Erambert <p>Hello, little blog, it's been a while! The past two weeks have been uncharacteristically busy for me so, huh, I didn't write much here, oops!</p> <p>I spent a week of vacation in Reno for definitely <a href="https://goblfc.org/">normal reasons</a>. Turns out, being mostly offline with your friends and other freaks (complimentary) for a whole week is good??? Someone should look into this.</p> <p>Then, as soon as I came back, my friend <a href="https://www.joannablackhart.com/">Joanna</a> was in town to visit the <a href="https://archive.org/">Internet Archive</a>, so I tagged along. I saw a bunch of very cool shit. Like, look at all this stuff!! Tell me this isn't cool as hell!! Excuse the shoddy photography job lmao.</p> <figure data-type="image"> <img src="https://damien.zone/img/blog/servers.webp" alt="three, multiple meters-all servers, all belonging to the Internet Archive" /> <figcaption>Servers!! A few of the many (I was told) servers that the Internet Archive HQ in San Francisco houses</figcaption> </figure> <figure data-type="image"> <img src="https://damien.zone/img/blog/petabox.webp" alt="A red-colored, older looking, computer server. The first 'one petabyte box'." /> <figcaption>A <a href="https://en.wikipedia.org/wiki/PetaBox">Petabox</a>!! I didn't know the Internet Archive had one of these so early (2004!) but it makes sense that they would, after all.</figcaption> </figure> <figure data-type="image"> <img src="https://damien.zone/img/blog/16mm-scanner.webp" alt="A 16mm film scanner. It's almost a meter tall and has one big reel on each of its sides" /> <figcaption> A 16mm film scanner! It was super impressive to see move in person, especially considering how "tiny" 16mm film is in comparison. </figcaption> </figure> <p>I had other pictures, but they were all of Just Old Stuff. This is also just Old Stuff, but at least it's Devices! I'm never beating the nerd allegations.</p> <p>Overall, meeting so many people and seeing so much stuff in the span of three nights was overwhelming but also great. The Internet Archive rules, man.</p> <p>Finally, literally last night, I met with <a href="https://nickyflowers.com/">Nicky</a> to give <a href="https://damien.zone/bay-area-cohost-wake/">cohost 2</a> back to them. We then hung out at the <a href="https://museemecanique.com/">Musée Mécanique</a>. Given the "touristy" status of the place, I feel like I should have heard about it a long time ago, but it was my first time there, and it was super neat! Digital stuff is cool, but there's something just <em>neat</em> about seeing mechanical contraptions, you know? Nicky took some cool pictures there, you should <a href="https://nickyflowers.com/blog/post_102724">check them out</a></p> <hr /> <p>On the nerd side of things, I spent some part of my weekend tinkering with fonts and color stuff on the site. The notable changes are:</p> <ul> <li>background/text colors are warmer, especially in light mode.</li> <li>the headings are now using <a href="https://fonts.google.com/specimen/Young+Serif">Young Serif</a> instead of Hack (a monospaced font) and, more importantly, are dark red anymore. As much as I like my deep-red accent color, it got old pretty quickly on the headings, in my opinion. I'm still keeping it for link underlines, at least for now.</li> <li>The Comentario buttons are also red now, yay.</li> <li>Other small details.</li> </ul> <p>I will most likely continue fucking around with the blog's theme because that's just how it goes, but this one felt significant enough to mention in a post.</p> <p>November should be much quieter, so hopefully I'll be able to post more on here.</p> <p>Have a good one!<br /> - damien</p> <a href="https://damien.zone/end-of-october-2024-update">Permalink / Comments</a> https://damien.zone/this-blog-has-comments-again 2024-10-12T08:01:00Z 2024-10-12T09:39:40Z Damien Erambert <p>Don't adjust your RSS reader, you're not seeing the same article twice. I just flip-flopped really hard with the whole comments thing. In my (now unpublished) previous article, I said I went with <a href="https://chirpy.dev">Chirpy</a> for comments... well, I'm not using them anymore! Oops! I am now using <a href="https://comentario.app/">Comentario</a>! Comments are enabled on all posts, feel free to leave some!!<br /> Sorry to those who already did 🙈 Read below for the details of what happened here.</p> <hr /> <p>It turns out Chirpy was pretty limiting in that commenters could not update their own avatar <em>at all</em> if they didn't sign in with GitHub/Twitter/Google... Which is extremely silly^{<a href="#user-content-fn-1" id="user-content-fnref-1" data-footnote-ref aria-describedby="footnote-label">1</a>}. I also wasn't happy with the fact that its widget rendered inside an <code>&lt;iframe&gt;</code> meaning customization options were limited to a few colors.</p> <p>This sent me down the path of finding alternatives. I had found a couple that seemed promising, but <a href="https://furry.engineer/@blaurascon">Blau</a> on Mastodon made me aware of <a href="https://comentario.app">Comentario</a> which... I think, is perfect for what I want?</p> <ul> <li>✅ Markdown formatting</li> <li>✅ Comment replies</li> <li>✅ Moderation UI/email notifications</li> <li>✅ Custom user avatars</li> <li>✅ Website field for authenticated users</li> <li>✅ Anonymous posting (albeit limited)</li> <li>✅ Authenticated posting <ul> <li>There are also options to set up login with Google/GitHub/GitLab/Twitter, but I didn't dig into that just yet</li> </ul> </li> <li>✅ Does <strong>not</strong> render within an <code>&lt;iframe&gt;</code> element so I can tweak everything with CSS to make it look good with my theme! I need to actually tweak that, but the default theme is Good Enough™️ for today.</li> <li>And a <a href="https://gitlab.com/comentario/comentario">bunch more features</a></li> </ul> <p>The only downside being that there isn't any way to set it up without hosting it yourself. This is fine for me because I know how to do it, but I know a bunch of people who would benefit from that solution who can't/don't want to self-host.</p> <p>Therefore, I think a "friends of damien eggbug" shared instance of Comentario could be a good idea? If we know each other, and you are interested (and/or would like to help share the costs of a VPS + domain name^{<a href="#user-content-fn-2" id="user-content-fnref-2" data-footnote-ref aria-describedby="footnote-label">2</a>}), let's get in touch.</p> <p>I will probably keep my own instance because I have no clue if it can be migrated from a machine to another without breaking everything, but I want people to have access to that thing because I feel it might just be It? Maybe? We will see.</p> <p>Oh, and also, if you're interested in self-hosting it, I detailed my <a href="/my-comentario-self-hosting-setup/">setup here</a>.</p> <p>See ya,<br /> - damien</p> <section data-footnotes class="footnotes"><h2 class="sr-only" id="footnote-label">Footnotes</h2> <ol> <li id="user-content-fn-1"> <p>Thanks to <a href="https://zandravandra.com/">Zandra</a> for the heads-up on this one, by the way. <a href="#user-content-fnref-1" data-footnote-backref aria-label="Back to reference 1" class="data-footnote-backref">↩</a></p> </li> <li id="user-content-fn-2"> <p>If you can think of a good domain name, I'm also open to suggestions lol <a href="#user-content-fnref-2" data-footnote-backref aria-label="Back to reference 2" class="data-footnote-backref">↩</a></p> </li> </ol> </section> <a href="https://damien.zone/this-blog-has-comments-again">Permalink / Comments</a> https://damien.zone/link-roundup-for-october-12th-2024 2024-10-12T07:00:00Z 2024-10-13T05:07:23Z Damien Erambert <p>Stealing the "link roundup" format from <a href="https://jkap.io/">Jae</a>, <a href="https://shelraphen.com/community-roundup-week-of-2024-09-22-28/">Shel</a> and <a href="https://blog.dante.cool/">Dante</a> and probably others I forget.</p> <p>I want to try to make this a regular thing. I don't expect the frequency to be consistent or anything, but still.</p> <h2 id="cohost-memoriams">Cohost memoriams</h2> <p>As I write this, it has been almost two weeks since cohost went read-only. I still have many feelings about it. I do feel slightly less sad about it after having gone to the <a href="https://damien.zone/bay-area-cohost-wake/">Bay Area wake</a>, though.</p> <p>I could link to a dozen cohost eulogies and retrospectives. I liked <a href="https://shelraphen.com/cohost-eulogy-retrospective/">Shel's</a> one, and anything from <a href="https://blog.dante.cool/hello-again-and-for-the-first-time/">Dante's roundup</a> was also good. But here are a couple that, I think, are neat.</p> <h3 id="bigg-building-a-house-of-cum">Bigg: <a href="https://www.bpgamesinc.com/building-a-house-of-cum/">Building A House Of Cum</a></h3> <blockquote> <p>The dissolution of a community is not value-neutral. I love my friends on Cohost’s staff and am glad that they get to move on to better-paying jobs where they will not be subjected to hideous amounts of stress daily. However, it upsets me when I think that the unique, joyous culture Cohost nurtured around porn might disappear when the site goes offline at the end of the year. It’s my dear, desperate hope that something about the experiences I’ve shared here will be useful to future porn community-builders.</p> </blockquote> <h3 id="cereza-a-farewell-to-cohostorg">cereza: <a href="https://cereza.bearblog.dev/a-farewell-to-cohostorg/">a farewell to cohost.org</a></h3> <blockquote> <p>i know i'm not the only one, i've seen a few artists who never posted online going on cohost and posted their art for the first time online. . i'm confident we're gonna see artists, writers, whathaveyou in the coming years who will point to cohost as where they started out.</p> </blockquote> <h3 id="msd-quailblog-closing-night-at-the-cohost-stage">msd (quailblog): <a href="https://blog.curiousquail.com/closing-night-at-the-cohost-stage/">Closing night at the Cohost Stage</a></h3> <blockquote> <p>Cohost meant a lot to a lot of people. To me, it meant this. A place I could see my friends art and not be bogged down with a lot of outside pressures. I don't know that I'll get that elsewhere online and it's honestly ok if I don't. I'm glad it existed. And if the closure results in tons of house shows (read: blogs and RSS renaissance) so be it.</p> </blockquote> <h3 id="lena-raine-been-thinking-about-tangible-reality">Lena Raine: <a href="https://blog.radicaldream.land/been-thinking-about-tangible-reality/">been thinking about tangible reality</a></h3> <blockquote> <p>sometimes it doesn't matter. sometimes it's good. for the better. moving on and into a better frame of mind. a different space. a better space.</p> <p>sometimes it's just sad.</p> <p>the people are the same, but the air is different. the imperceptible change in the intangible unreality makes everything feel slightly off. hairs raised just a bit. on edge. restless.</p> <p>we'll probably be okay.</p> <p>but i'll still miss it.</p> </blockquote> <h3 id="maddie-lets-do-laundry-together-goodbye-cohost">Maddie: <a href="https://ninecoffees.blog/lets-do-laundry-together-goodbye-cohost/">Let's Do Laundry Together (Goodbye Cohost)</a></h3> <blockquote> <p>You have to be kind and empathetic and you have to love. God, you have to love something. Be a pervert, if you have to, I certainly am. You have to find joy no matter how dire the circumstances because otherwise this world will break you. It is such a beautiful feeling to love and be loved, and there is no way to achieve that through force, no matter how many people delude themselves otherwise.</p> </blockquote> <h3 id="sapkaer-cohost-this-is-the-end-and-a-new-beginning">Sapkaer: <a href="https://tempest.bearblog.dev/the-end-of-cohost-or-is-it/">Cohost. This is the end, and, a new beginning.</a></h3> <blockquote> <p>Maybe the cohost spirit is not about the website, or eggbug, or the CSS crimes, or the memes, or the lack of metrics. Maybe the cohost spirit is simply about learning who you are, being true to yourself, and - most importantly, this is the part you should not skip - caring for others who are trying to do the same, so that you, them, all of us, can be a little more free to be ourselves. Be not afraid to care. You could mean the world to someone else.</p> </blockquote> <h2 id="cool-stuff-ive-seen-or-read">Cool stuff I've seen or read</h2> <h3 id="ticky-feed-buttons">Ticky: <a href="https://drac.at/posts/2024-10-04-feed-buttons/">Feed Buttons</a></h3> <p>Ticky made some lovely 88x31 buttons to advertise that your website has an RSS feed. They're great.</p> <h3 id="shel-raphen-on-content-warnings">Shel Raphen: <a href="https://shelraphen.com/on-content-warnings/">On Content Warnings</a></h3> <blockquote> <p>I am going to rotate content warnings around like an object, cast upon in different lights, and examine their various implementations, justifications, and effects on online spaces in particular. I hope to locate a balanced dialectic on content warning best practices.</p> </blockquote> <p>Excellent article from Shel about content warnings. Like other folks, I realized, after the fact, that cohost's implementation of that feature was smart and <em>man</em>, going back to Mastodon feels archaic in comparison.</p> <h3 id="yellowafterlife-some-of-the-css-crimes-of-all-time">yellowafterlife: <a href="https://yal.cc/cohost-css-crimes/">Some of the CSS crimes of all time</a></h3> <p>CSS crimes were one of these "features" that made cohost special in my heart. I hope other websites are implemented in a way that we might see this practice pop-up elsewhere, but in an age where customization and expression is limited on the Web, CSS crimes always felt like a breath of fresh air and a fantastic avenue for creativity.<br /> This is a wonderful collection of some of the best crimes that people posted on cohost. I expect I will come back to this_page often.</p> <h3 id="blackle-mori-interpolatable-colour-inversion">Blackle Mori: <a href="https://suricrasia.online/blog/interpolatable-colour-inversion/">Interpolatable Colour Inversion</a></h3> <p>Shaders are one of these things I tried to learn multiple times over the years, and failed to do so, so it's always fascinating to read about what they can do. Blackle's solution to this problem is super smart and interesting to read about.</p> <h3 id="misty-jingle-cats">Misty: <a href="http://cdrom.ca/games/2024/09/30/jingle-cats.html">Jingle Cats</a></h3> <p>Misty's CD-ROM Journal is great, you should read it. But obviously this article is great because, well, it's about a game that simulates cats somewhat accurately and it sounds delightful. Makes me wonder why we don't see those kinds of games as much anymore, you'd think we can simulate cats even better now!</p> <h3 id="erik-bernhardsson-its-hard-to-write-code-for-computers-but-its-even-harder-to-write-code-for-humans">Erik Bernhardsson: <a href="https://erikbern.com/2024/09/27/its-hard-to-write-code-for-humans">It's hard to write code for computers, but it's even harder to write code for humans</a></h3> <p>Excellent article about API design. It may sound daunting if you're not a programmer, but I think a lot of its points can be mapped to other fields, so I recommend reading it!</p> <hr /> <p>That's all folks!<br /> - damien</p> <a href="https://damien.zone/link-roundup-for-october-12th-2024">Permalink / Comments</a> https://damien.zone/new-thing-friends-of-eggbug-visualizer 2024-10-09T02:27:00Z 2024-10-11T01:44:29Z Damien Erambert <p></p><figure data-type="image"><a href="/img/blog/friends-of-eggbug/20-fullpage.webp"><img src="https://damien.zone/img/blog/friends-of-eggbug/20-fullpage.webp" loading="lazy" decoding="async" width="auto" height="auto" /></a></figure><p></p> <p>Cohost started to send data exports to users. As soon as I got mine last night, I went to look at my "find my friends" page. It's very convenient! But unfortunately, I don't really like looking at tables for that stuff...</p> <p>So, of course, I wrote a tool to scratch that itch. It's called "Friends of eggbug visualizer"^{<a href="#user-content-fn-1" id="user-content-fnref-1" data-footnote-ref aria-describedby="footnote-label">1</a>}, it works in the browser, no data is sent anywhere, and it keeps your list in your browser's own storage. This way you can import your <code>find-your-friends.json</code> file once, and keep coming back to the list later on to go through your list.</p> Check it out at <a href="https://friends-of-eggbug.vercel.app/">https://friends-of-eggbug.vercel.app/</a>! <p>The source code is available on <a href="https://github.com/eramdam/friends-of-eggbug/">GitHub</a>.</p> <p>Cheers,<br /> - damien</p> <section data-footnotes class="footnotes"><h2 class="sr-only" id="footnote-label">Footnotes</h2> <ol> <li id="user-content-fn-1"> <p>I still suck at finding names <a href="#user-content-fnref-1" data-footnote-backref aria-label="Back to reference 1" class="data-footnote-backref">↩</a></p> </li> </ol> </section> <a href="https://damien.zone/new-thing-friends-of-eggbug-visualizer">Permalink / Comments</a> https://damien.zone/bay-area-cohost-wake 2024-10-06T07:00:00Z 2024-10-07T04:42:50Z Damien Erambert <figure data-type="image"> <img src="https://damien.zone/img/blog/img_7694.webp" alt="A custom eggbug made by Beth out of foam clay, acrylic paint, mod podge and armature wire" /> <figcaption>A custom eggbug made by <a href="https://bsky.app/profile/bethposting.bsky.social">Bethposting</a> out of foam clay, acrylic paint, mod podge and armature wire</figcaption> </figure> <p>For the longest time, on cohost, I kept saying "man, I should try to organize <em>something</em> to meet up with the Bay Area folks".<br /> It almost became a running gag because I would post about it, and never act on it for many reasons. So when the shutdown of cohost was <a href="https://cohost.org/staff/post/7611443-cohost-to-shut-down">announced</a>, and after seeing the <a href="https://nex-3.com/blog/seattle-cohost-wake/">Seattle</a> and <a href="https://cohost.org/shel/post/7893527-at-the-philly-cohost">Philly</a> "cohost wakes" being planned, I went "fuck it, we ball".<br /> I posted about it, people said they'd be interested, <a href="https://nickyflowers.com/">Nicky</a> and <a href="https://cohost.org/diane?page=0">Diane</a> helped me actually find a spot and time, and I <a href="https://cohost.org/eramdam/post/7750903-yeah-sf-bay-area">announced it</a>. I was diligently keeping track of who had replied and how, to have an at least vague idea of how many people would show up.</p> <p>18 days later, earlier today as I write this: we had <strong>40 people</strong> show up!! I don't actually have a group picture to show because I wasn't the one who took them and not everyone wants to be visible publicly in such a picture, so you'll have to take my word for it.</p> <p>In fact, I barely had any time to take many pictures myself! The only ones I have are of <a href="/img/blog/img_7695-2.webp">Cohost 2</a>, a huge scroll of paper that Nicky brought so we could make posts by hand.<br /> It was a lot of fun, wish I took more pictures. But I feel chatting with people, recognizing folks from the website and having a good time was more important than taking pictures, you know?</p> <p>People hung out, some of them played a fighting game with specialized controllers^{<a href="#user-content-fn-1" id="user-content-fnref-1" data-footnote-ref aria-describedby="footnote-label">1</a>}, people talked about the website, nerd shit, linguistics, and a bunch of other things. Emails were gathered so people could organize and try to make this a more recurring thing, now that we know we can motivate at least <em>some</em> people to meet up.</p> <p>Cohost really was <a href="https://web.archive.org/web/20240916171700/https://cohost.org/lukedotorg/post/234549-it-s-like-a-website">like a website</a>, it was a website that somehow got us to actually touch grass and is making us think about touching more grass in the future. And I think that's really neat.</p> <p>Eggbug forever, - damien</p> <p>P.S: if you were there and have pictures you're willing to share with me, I'd love to see them! Email me at <a href="mailto:damien@erambert.me">damien@erambert.me</a>.</p> <section data-footnotes class="footnotes"><h2 class="sr-only" id="footnote-label">Footnotes</h2> <ol> <li id="user-content-fn-1"> <p>I know these weren't sticks, but I'm also a fighting game noob lmao <a href="#user-content-fnref-1" data-footnote-backref aria-label="Back to reference 1" class="data-footnote-backref">↩</a></p> </li> </ol> </section> <a href="https://damien.zone/bay-area-cohost-wake">Permalink / Comments</a> https://damien.zone/justice-at-portola-2024 2024-10-01T00:25:00Z 2024-10-01T00:48:10Z Damien Erambert <p>Well, it turns out I was pretty lucky because Justice's show last night (September 29th) was a very very good one in terms of pictures! I got literally as close as one could realistically be, even if I was slightly off center!</p> <p>As I got out of the show, I was pretty worried because Justice's light setup made it much, <em>much</em> harder to get consistently good shots. Don't get me wrong, those very quick color changes in the lights look amazing in person, but they are challenging to shoot with a smartphone.</p> <p>But I think I managed to get some pretty damn good pictures given the situation. Like those taken during <a href="/shot-on-iphone-with-halide-gesaffelstein-at-portola-2024/">Gesaffelstein's performance</a>, <strong>all of them</strong> were shot with Halide and in RAW with "Process Zero" enabled. The only adjustments I made (if any) are cropping and slight tweaks to the exposure/contrast.</p> <p>Everything else is straight out of the iPhone 13 Pro's camera system. Which, for some of them, is outstanding to see, honestly. As always, click the thumbnails to get the JPEG at 100% quality.</p> <figure><a href="https://damiensfiles.b-cdn.net/justice-2024/IMG_6962 1 Edited.jpg"><img loading="lazy" decoding="async" src="https://damiensfiles.b-cdn.net/justice-2024/thumbs/IMG_6962 1 Edited.jpg" alt="" /></a></figure> <div class="gallery"> <ul> <li><figure><a href="https://damiensfiles.b-cdn.net/justice-2024/IMG_7071 2 Edited.jpg"><img loading="lazy" decoding="async" src="https://damiensfiles.b-cdn.net/justice-2024/thumbs/IMG_7071 2 Edited.jpg" alt="" /></a></figure></li> <li><figure><a href="https://damiensfiles.b-cdn.net/justice-2024/IMG_7073 3 Edited.jpg"><img loading="lazy" decoding="async" src="https://damiensfiles.b-cdn.net/justice-2024/thumbs/IMG_7073 3 Edited.jpg" alt="" /></a></figure></li> <li><figure><a href="https://damiensfiles.b-cdn.net/justice-2024/IMG_7081 4 Edited.jpg"><img loading="lazy" decoding="async" src="https://damiensfiles.b-cdn.net/justice-2024/thumbs/IMG_7081 4 Edited.jpg" alt="" /></a></figure></li> <li><figure><a href="https://damiensfiles.b-cdn.net/justice-2024/IMG_7085 5 Edited.jpg"><img loading="lazy" decoding="async" src="https://damiensfiles.b-cdn.net/justice-2024/thumbs/IMG_7085 5 Edited.jpg" alt="" /></a></figure></li> <li><figure><a href="https://damiensfiles.b-cdn.net/justice-2024/IMG_7089 6 Edited.jpg"><img loading="lazy" decoding="async" src="https://damiensfiles.b-cdn.net/justice-2024/thumbs/IMG_7089 6 Edited.jpg" alt="" /></a></figure></li> <li><figure><a href="https://damiensfiles.b-cdn.net/justice-2024/IMG_7092 7 Edited.jpg"><img loading="lazy" decoding="async" src="https://damiensfiles.b-cdn.net/justice-2024/thumbs/IMG_7092 7 Edited.jpg" alt="" /></a></figure></li> <li><figure><a href="https://damiensfiles.b-cdn.net/justice-2024/IMG_7103 8 Edited.jpg"><img loading="lazy" decoding="async" src="https://damiensfiles.b-cdn.net/justice-2024/thumbs/IMG_7103 8 Edited.jpg" alt="" /></a></figure></li> <li><figure><a href="https://damiensfiles.b-cdn.net/justice-2024/IMG_7117 9 Edited.jpg"><img loading="lazy" decoding="async" src="https://damiensfiles.b-cdn.net/justice-2024/thumbs/IMG_7117 9 Edited.jpg" alt="" /></a></figure></li> <li><figure><a href="https://damiensfiles.b-cdn.net/justice-2024/IMG_7125 10 Edited.jpg"><img loading="lazy" decoding="async" src="https://damiensfiles.b-cdn.net/justice-2024/thumbs/IMG_7125 10 Edited.jpg" alt="" /></a></figure></li> <li><figure><a href="https://damiensfiles.b-cdn.net/justice-2024/IMG_7165 11 Edited.jpg"><img loading="lazy" decoding="async" src="https://damiensfiles.b-cdn.net/justice-2024/thumbs/IMG_7165 11 Edited.jpg" alt="" /></a></figure></li> <li><figure><a href="https://damiensfiles.b-cdn.net/justice-2024/IMG_7317 12 Edited.jpg"><img loading="lazy" decoding="async" src="https://damiensfiles.b-cdn.net/justice-2024/thumbs/IMG_7317 12 Edited.jpg" alt="" /></a></figure></li> <li><figure><a href="https://damiensfiles.b-cdn.net/justice-2024/IMG_7319 13 Edited.jpg"><img loading="lazy" decoding="async" src="https://damiensfiles.b-cdn.net/justice-2024/thumbs/IMG_7319 13 Edited.jpg" alt="" /></a></figure></li> <li><figure><a href="https://damiensfiles.b-cdn.net/justice-2024/IMG_7453 14 Edited.jpg"><img loading="lazy" decoding="async" src="https://damiensfiles.b-cdn.net/justice-2024/thumbs/IMG_7453 14 Edited.jpg" alt="" /></a></figure></li> <li><figure><a href="https://damiensfiles.b-cdn.net/justice-2024/IMG_7464 15 Edited.jpg"><img loading="lazy" decoding="async" src="https://damiensfiles.b-cdn.net/justice-2024/thumbs/IMG_7464 15 Edited.jpg" alt="" /></a></figure></li> <li><figure><a href="https://damiensfiles.b-cdn.net/justice-2024/IMG_7467 16 Edited.jpg"><img loading="lazy" decoding="async" src="https://damiensfiles.b-cdn.net/justice-2024/thumbs/IMG_7467 16 Edited.jpg" alt="" /></a></figure></li> <li><figure><a href="https://damiensfiles.b-cdn.net/justice-2024/IMG_7468 17 Edited.jpg"><img loading="lazy" decoding="async" src="https://damiensfiles.b-cdn.net/justice-2024/thumbs/IMG_7468 17 Edited.jpg" alt="" /></a></figure></li> <li><figure><a href="https://damiensfiles.b-cdn.net/justice-2024/IMG_7494 18 Edited.jpg"><img loading="lazy" decoding="async" src="https://damiensfiles.b-cdn.net/justice-2024/thumbs/IMG_7494 18 Edited.jpg" alt="" /></a></figure></li> <li><figure><a href="https://damiensfiles.b-cdn.net/justice-2024/IMG_7506 19 Edited.jpg"><img loading="lazy" decoding="async" src="https://damiensfiles.b-cdn.net/justice-2024/thumbs/IMG_7506 19 Edited.jpg" alt="" /></a></figure></li> <li><figure><a href="https://damiensfiles.b-cdn.net/justice-2024/IMG_7539 20 Edited.jpg"><img loading="lazy" decoding="async" src="https://damiensfiles.b-cdn.net/justice-2024/thumbs/IMG_7539 20 Edited.jpg" alt="" /></a></figure></li> </ul> </div> <a href="https://damien.zone/justice-at-portola-2024">Permalink / Comments</a> https://damien.zone/shot-on-iphone-with-halide-gesaffelstein-at-portola-2024 2024-09-29T20:01:00Z 2024-09-30T22:09:11Z Damien Erambert <p>I just saw Gesaffelstein last night at <a href="https://portolamusicfestival.com/">Portola</a> and <strong>boy</strong> that shit ripped. I had already watched his set from Coachella earlier this year, so I "knew" what to expect. But as always, watching a live performance is one thing, <strong>being</strong> there in person is another.</p> <p>A true banger of a show, the combination of the minimalist set design and the <a href="https://www.youtube.com/watch?v=4HnUmZOjsyU">hard hitting music</a> really really worked.</p> <p>As I often do in concerts, I took plenty of pictures/videos. It took me a few hours to triage everything (because Darkroom on macOS kind of sucks) but I managed to trim it down to a reasonable amount.</p> <p>All of these were taken on my iPhone 13 Pro using the 3x telephoto lens. The first three ones were taken with the stock iOS camera, all the others were shot using <a href="https://halide.cam/">Halide</a> in RAW with <a href="https://www.lux.camera/introducing-process-zero-for-iphone/">"Process Zero" mode</a> enabled.<br /> And honestly? It produced incredible results given that: this is a phone camera, at a music festival, taken by hand^{<a href="#user-content-fn-1" id="user-content-fnref-1" data-footnote-ref aria-describedby="footnote-label">1</a>} in a low-light environment.</p> <p>Halide (in RAW mode) was already a killer tool for concert photography in my experience but Process Zero really takes it to the next level. The capture speed was more than enough, turns out when your camera doesn't try to capture hundreds of frame for <em>one</em> shot, you can go pretty wild with it. The focus was a bit hit or miss but that's expected given the environment (the fog machines really didn't help haha).</p> <p>I only had to adjust the exposure/brightness on a handful of shots! It's incredible, really. I hope to be able to take good shots of Justice tonight 🤞</p> <p>At any rate, here are the pictures (click to load the full, uncompressed JPEGs):</p> <div class="gallery"> <ul> <li><figure><a href="https://damiensfiles.b-cdn.net/gesaffelstein-2024/IMG_6415 1 Edited.jpg"><img loading="lazy" decoding="async" src="https://damiensfiles.b-cdn.net/gesaffelstein-2024/thumbs/IMG_6415 1 Edited.jpg" alt="Gesaffelstein on stage at Portola" /></a></figure></li> <li><figure><a href="https://damiensfiles.b-cdn.net/gesaffelstein-2024/IMG_6447 2 Edited.jpg"><img loading="lazy" decoding="async" src="https://damiensfiles.b-cdn.net/gesaffelstein-2024/thumbs/IMG_6447 2 Edited.jpg" alt="Gesaffelstein on stage at Portola" /></a></figure></li> <li><figure><a href="https://damiensfiles.b-cdn.net/gesaffelstein-2024/IMG_6497 3 Edited.jpg"><img loading="lazy" decoding="async" src="https://damiensfiles.b-cdn.net/gesaffelstein-2024/thumbs/IMG_6497 3 Edited.jpg" alt="Gesaffelstein on stage at Portola" /></a></figure></li> <li><figure><a href="https://damiensfiles.b-cdn.net/gesaffelstein-2024/IMG_6535 4 Edited.jpg"><img loading="lazy" decoding="async" src="https://damiensfiles.b-cdn.net/gesaffelstein-2024/thumbs/IMG_6535 4 Edited.jpg" alt="Gesaffelstein on stage at Portola" /></a></figure></li> <li><figure><a href="https://damiensfiles.b-cdn.net/gesaffelstein-2024/IMG_6540 5 Edited.jpg"><img loading="lazy" decoding="async" src="https://damiensfiles.b-cdn.net/gesaffelstein-2024/thumbs/IMG_6540 5 Edited.jpg" alt="Gesaffelstein on stage at Portola" /></a></figure></li> <li><figure><a href="https://damiensfiles.b-cdn.net/gesaffelstein-2024/IMG_6546 6 Edited.jpg"><img loading="lazy" decoding="async" src="https://damiensfiles.b-cdn.net/gesaffelstein-2024/thumbs/IMG_6546 6 Edited.jpg" alt="Gesaffelstein on stage at Portola" /></a></figure></li> <li><figure><a href="https://damiensfiles.b-cdn.net/gesaffelstein-2024/IMG_6558 7 Edited.jpg"><img loading="lazy" decoding="async" src="https://damiensfiles.b-cdn.net/gesaffelstein-2024/thumbs/IMG_6558 7 Edited.jpg" alt="Gesaffelstein on stage at Portola" /></a></figure></li> <li><figure><a href="https://damiensfiles.b-cdn.net/gesaffelstein-2024/IMG_6568 8 Edited.jpg"><img loading="lazy" decoding="async" src="https://damiensfiles.b-cdn.net/gesaffelstein-2024/thumbs/IMG_6568 8 Edited.jpg" alt="Gesaffelstein on stage at Portola" /></a></figure></li> <li><figure><a href="https://damiensfiles.b-cdn.net/gesaffelstein-2024/IMG_6577 9 Edited.jpg"><img loading="lazy" decoding="async" src="https://damiensfiles.b-cdn.net/gesaffelstein-2024/thumbs/IMG_6577 9 Edited.jpg" alt="Gesaffelstein on stage at Portola" /></a></figure></li> <li><figure><a href="https://damiensfiles.b-cdn.net/gesaffelstein-2024/IMG_6578 10 Edited.jpg"><img loading="lazy" decoding="async" src="https://damiensfiles.b-cdn.net/gesaffelstein-2024/thumbs/IMG_6578 10 Edited.jpg" alt="Gesaffelstein on stage at Portola" /></a></figure></li> <li><figure><a href="https://damiensfiles.b-cdn.net/gesaffelstein-2024/IMG_6585 11 Edited.jpg"><img loading="lazy" decoding="async" src="https://damiensfiles.b-cdn.net/gesaffelstein-2024/thumbs/IMG_6585 11 Edited.jpg" alt="Gesaffelstein on stage at Portola" /></a></figure></li> <li><figure><a href="https://damiensfiles.b-cdn.net/gesaffelstein-2024/IMG_6589 12 Edited.jpg"><img loading="lazy" decoding="async" src="https://damiensfiles.b-cdn.net/gesaffelstein-2024/thumbs/IMG_6589 12 Edited.jpg" alt="Gesaffelstein on stage at Portola" /></a></figure></li> <li><figure><a href="https://damiensfiles.b-cdn.net/gesaffelstein-2024/IMG_6628 13 Edited.jpg"><img loading="lazy" decoding="async" src="https://damiensfiles.b-cdn.net/gesaffelstein-2024/thumbs/IMG_6628 13 Edited.jpg" alt="Gesaffelstein on stage at Portola" /></a></figure></li> <li><figure><a href="https://damiensfiles.b-cdn.net/gesaffelstein-2024/IMG_6644 14 Edited.jpg"><img loading="lazy" decoding="async" src="https://damiensfiles.b-cdn.net/gesaffelstein-2024/thumbs/IMG_6644 14 Edited.jpg" alt="Gesaffelstein on stage at Portola" /></a></figure></li> <li><figure><a href="https://damiensfiles.b-cdn.net/gesaffelstein-2024/IMG_6646 15 Edited.jpg"><img loading="lazy" decoding="async" src="https://damiensfiles.b-cdn.net/gesaffelstein-2024/thumbs/IMG_6646 15 Edited.jpg" alt="Gesaffelstein on stage at Portola" /></a></figure></li> <li><figure><a href="https://damiensfiles.b-cdn.net/gesaffelstein-2024/IMG_6686 16 Edited.jpg"><img loading="lazy" decoding="async" src="https://damiensfiles.b-cdn.net/gesaffelstein-2024/thumbs/IMG_6686 16 Edited.jpg" alt="Gesaffelstein on stage at Portola" /></a></figure></li> <li><figure><a href="https://damiensfiles.b-cdn.net/gesaffelstein-2024/IMG_6719 17 Edited.jpg"><img loading="lazy" decoding="async" src="https://damiensfiles.b-cdn.net/gesaffelstein-2024/thumbs/IMG_6719 17 Edited.jpg" alt="Gesaffelstein on stage at Portola" /></a></figure></li> </ul> </div> <section data-footnotes class="footnotes"><h2 class="sr-only" id="footnote-label">Footnotes</h2> <ol> <li id="user-content-fn-1"> <p>I had a fence to stabilize, but it wasn't much <a href="#user-content-fnref-1" data-footnote-backref aria-label="Back to reference 1" class="data-footnote-backref">↩</a></p> </li> </ol> </section> <a href="https://damien.zone/shot-on-iphone-with-halide-gesaffelstein-at-portola-2024">Permalink / Comments</a> https://damien.zone/my-online-life-and-cohost 2024-09-28T07:00:00Z 2024-10-02T06:44:14Z Damien Erambert <p><em>This post is mirrored on cohost as well and was written with it in mind. But also not? It's fine, don't worry about it.</em></p> <p>Like many people in my age group, I think it's fair to say that I grew up online.</p> <h3 id="the-pre-social-media-years">the pre-social media years</h3> <p>My "life online" really started in the mid-2000s when I joined the forums of <a href="https://web.archive.org/web/20060314072844/http://www.crystalxp.net/">Crystal XP</a>. This name probably won't mean anything to you, but if you used Windows XP at the time, you might have seen their "<a href="https://web.archive.org/web/20060314073432/http://www.crystalxp.net/bricopack/en.htm">BricoPacks</a>". These were 1-click installers that reskinned your entire Windows installation. Their most successful one was the <a href="https://web.archive.org/web/20060314073432/http://www.crystalxp.net/bricopack/en.htm">Vista Inspirat</a> one. Pretty wild stuff. Oh, and also CrystalXP was "responsible" for <a href="https://web.archive.org/web/20060314081445/http://www.crystalxp.net/tuto/en19-make-a-g2-tux-with-adobe-photoshop.html">that one Tux</a> and its myriad of variations you might see on every other Linux fanboy's profile.</p> <p>But like I said, they had forums. I joined those forums after reading CrystalXP's Photoshop tutorials and wanting to share my progress and get advice. I met a bunch of people, some of whom I am still friends with to this day, learned a ton about graphic and UI design.</p> <p>I drew icons, wallpapers, all of varying quality that I would post to my DeviantArt profile.<br /> I went <em>hard</em> into the Windows customization bit. At first, it was simple stuff, but around 2006-2007, I got enamored by Mac OS X's UI from watching a friend's Mac screenshots.<br /> From this point on, my goal was to make Windows XP look like Mac OS X (Tiger and then Leopard). I wish I still had those "desks" screenshots because <em>man</em>, I was good at that shit. I made skins for iTunes, a skin for <a href="https://www.stardock.com/blog/499789/remember-objectbar-i-tried-it-on-windows-10">ObjectBar</a> that mimicked the Leopard menubar, skins for <a href="https://en.wikipedia.org/wiki/Miranda_NG">Miranda IM</a> that copied <a href="https://adium.im/">Adium</a> skins.</p> <p>A year later, I would get my first Mac. A 24" Aluminum iMac, running Mac OS X Leopard. That computer and its software felt like a candy store to me. So many good details, so much whimsy, and... dude the customization options were bonkers.<br /> Sadly, <a href="https://www.macintoshrepository.org/11531-shapeshifter-osx-theming-">ShapeShifter</a> was already defunct. Even then, apps like <a href="https://en.wikipedia.org/wiki/CandyBar">CandyBar</a> and websites like the <a href="https://iconfactory.com/">IconFactory</a> and their amazing icons, wallpapers and skins were incredible resources.<br /> Obviously, like any Mac user of that era, I ended up on forums like <a href="https://web.archive.org/web/20100304153810/http://macthemes.net/">MacThemes.net</a>. I was still messing around with Photoshop, so I kept learning a lot.</p> <p>But at that point, I was more into UI and web design than anything else. I made skins for apps like <a href="http://bowtieapp.com/">Bowtie</a> and <a href="https://en.wikipedia.org/wiki/Ecoute">Ecoute</a>, I made a theme for Leopard I can't find traces of ("Disinmaso for Leopard", if someone finds it), I made a <a href="https://www.macstories.net/mac/want-itunes-9-look-back-theres-a-mod-for-that/">mod for iTunes 10 that brought back the iTunes 9 colors back</a>, and a skin for <a href="/img/blog/vlc-better-by-default.jpg">VLC media player</a>. More on that bit later.</p> <h3 id="the-twitter-years">the twitter years</h3> <p>In parallel, I would join Twitter in like? 2009? Early enough that Twitter still:</p> <ul> <li>had a global timeline</li> <li>had no retweets</li> <li>had background images and personal accent colors for profiles</li> </ul> <p>So whatever year it was, it was pretty early. It was early enough that I probably was around the first few thousands of French users on the site. Twitter was really nerdy and niche at the time. And it ruled.</p> <p>I probably was too young (~16) to be visible on Twitter, but I was, at a tiny level but still. I got involved enough to personally be blocked by a semi-famous French tech blogger, I made tons of friends by just posting-way-too-much. Likewise, I also made enemies by just being a stupid teenager on Twitter.</p> <p>Twitter also got me a ton of work. I got close with one of the friends I met on CrystalXP, and we ended up making a tiny structure to take web design jobs/projects from folks. I met and "networked" with many older folks in the design/tech space. Some of whom I admired, some of whom became friends, some of whom helped me get my current job.</p> <p>Without Twitter, I wouldn't have met some of my closest friends.<br /> Without Twitter, I wouldn't have worked with VideoLAN on <a href="https://www.macstories.net/news/vlc-2-0-for-mac-final-design-previewed-coming-this-week/">VLC 2 for Mac OS X</a> and <a href="https://www.macstories.net/news/vlc-for-ios-returns-to-the-app-store/">iOS</a>.<br /> Without Twitter, I literally would not be typing this blog post 9,000 kilometers away from the French city I was born in. And of course, without Twitter, TweetDeck wouldn’t exist and... I wouldn't have started <a href="https://better.tw">Better TweetDeck</a> in 2014.</p> <p>In the middle of 2015, I moved to San Francisco. A year later, Donald Trump would get elected president. Twitter died a first time on that day. Twitter suddenly became <em>serious</em> (derogatory), it was now the most powerful man on Earth's megaphone, and posting on it meant there was a non-zero chance of being noticed either by him or his army of bigoted fans. I would still use Twitter (and still do) for years to come, but a tone shift had happened. Twitter felt like it became a PVP zone.</p> <h3 id="mastodon-enters-the-chat">mastodon enters the chat</h3> <p>In the middle of 2017, a new social media platform called Mastodon started picking up steam. Its main selling point was "it's like Twitter but with decent moderation, open-source and decentralized".<br /> Being the nerd that I am, I joined it. I saw genuine promise in Mastodon. I would <a href="https://github.com/mastodon/mastodon/commits?author=eramdam">contribute</a> to the project's codebase, I was on the Discord/Patreon for a while, I briefly helped moderate mastodon.social. I would get kicked off the Patreon/Discord for basically shit talking Eugen's direction of the project. Which is fair, I was being a jerk!<br /> I still think that "well, you can fork the project" is an embarrassing answer to give to users who wanted to see Mastodon get better, but what do I know.</p> <p>I still think Mastodon is a good idea and is something that needs to exist, but I rapidly felt that... its approach was kind of flawed?<br /> Eugen will deny this, but I, and other folks, realized early on that his "Benevolent Dictator For Life" approach of managing the project pushed away <em>many</em> people who were willing to improve the software.</p> <p>But all the code in the world cannot fix what was (and still is), in my opinion, Mastodon/the Fediverse's biggest hurdle: community and moderation.</p> <p>Without rehashing how Mastodon works (thousands of articles do it better than I do): the main idea is that instances host their users and have their own moderation/content policies. On paper this sounds good because what may work for me moderation-wise may not work for you and vice versa. In practice? It was and still is a mixed bag at best and a fucking shitshow at worst.</p> <p>Turns out, the people who can run a web server are usually not fit to run a community and probably shouldn't be trusted to take moderation decisions. I have seen dozens of instances fall apart or get cut off the rest of the network because of interpersonal drama, laughable moderation practices, malicious actors, bigotry, racism, and a lot more.</p> <p>This whole structural issue and the fact that Mastodon has been, and still is, <em>complicated</em> to get for non-nerds meant that I had little hope that it would ever replace Twitter. This wouldn't be so annoying if Mastodon as a project wasn't so set on courting Twitter users and imitating Twitter. But that could be its own essay.</p> <p>I would still use Twitter in parallel, and it would be my main place. Having TweetDeck and Better TweetDeck meant that, despite everything, I could <em>shape</em> my experience on Twitter however I wanted (to a degree).</p> <p>If I didn't have that? Who knows, perhaps Mastodon would have become my "first website" instead of my "second website where most of the nerds are, and also everything is on fire every other week".</p> <p>Despite all the shit I talked about Mastodon in the previous paragraphs, I still used it a lot and met a lot of nice people there. Some of them were running (large) Mastodon instances, some of them even contributed in big ways to Mastodon's codebase. Most of them would agree with me that "Mastodon existing is a net good, but Mastodon as it stands is kind of a mess" (to be charitable).</p> <h3 id="here-comes-an-eggbug">here comes an eggbug</h3> <p>Some people I met on Mastodon became close friends. As it turned out, some of them were close to <a href="https://antisoftware.club/">ASSC</a>.<br /> In April 2022, I would get invited by <a href="https://jkap.io">jkap</a> to try <a href="https://cohost.org">cohost</a>. I'm genuinely grateful for that because <em>man</em>. I will miss that place.</p> <p>I would say I was "hooked" right away but, as much as some of cohost's design principles were very appealing, I… didn't really <em>"get"</em> it right away? I was still very much into microblogging for a while. And the limited beta meant that the user base was still small. The place would get progressively more interesting to me after launch onwards.</p> <p>But what really flipped a switch in my head was Elon Musk's acquisition of Twitter. We knew it was going to happen, but it still felt terrible. I didn't even particularly care about the website itself because it had been on a downhill trajectory for a while, but... seeing this fucking guy buy the company, fire 90% of the staff, and take the whole thing apart like a capricious toddler was disappointing.<br /> I was disappointed to realize we lived in a world where this kind of shit could even happen, you know?</p> <p>Suddenly, my <em>first</em> website was getting worse by the week, (some) people started flocking to Mastodon but... I had been on Mastodon for half a decade at that point, so I didn't have it in me to be starry-eyed about Mastodon again. I was happy people were leaving the <em>hellsite</em>, but still.</p> <p>So I started using cohost a lot more. And, man, I should have done it sooner. It is now clearer than ever in my head now but: cohost fixed something in my brain that Twitter/Mastodon broke.</p> <p>Cohost was the slow, relaxing, composed, and fun alternative to the "Player versus Player" environment of Mastodon, Twitter and Bluesky (when that became more of a thing a few months later).</p> <h3 id="the-bluesky-interlude">the bluesky interlude</h3> <p>In March 2023, I would end up getting an invite to Bluesky from a friend who was on there. I was curious to check it out. I knew I wasn't going to fall in love with it because the "decentralization" story didn't interest me anymore and because it sprung out of Jack Dorsey's Twitter.<br /> But man, I didn't expect Bluesky to disappoint me <em>so quickly</em>.</p> <p>I know I am going to piss off a bunch of "Bluesky elders" (ugh) by saying this, but: Bluesky walked on rakes early, and still to this day continues to walk on rakes.<br /> I have been on the website for longer than 99% of the user base, so I have <em>seen</em> some bullshit.<br /> The invite-only system led to, frankly, worrying levels of "crabs in the bucket" thinking and some unhealthy levels of parasocial relationships because "invite-only = private, right?".</p> <p>And I don't know, man, I refuse to fully trust a VC-backed social media company at this point. And my trust goes down every time they pretend that they "work for their users" and that they are "billionaire-proof". Your codebase/app being open-source doesn't mean a damn to me. It just makes it slightly easier for me to write a bot, but that's kind of it.</p> <p>If you got millions in the bank, hire people to improve the thing instead of relying on free labor to fill in your own gaps.</p> <p>I could go on about Bluesky's protocol (ATProto) or about how Bluesky's libertarian-you-do-it-yourself approach to moderation is appalling to me. I won't do it here because this post is already getting long but, yeah, I am not very enthusiastic about Bluesky.<br /> I'm still on there, and I might use it more once cohost goes read-only. But man, <a href="https://youtu.be/YhiJX9CzT30?si=rYKOSOGtnh8g6ik0&amp;t=23">I'm gonna complain the whole time</a>.</p> <h3 id="i-will-miss-a-fucking-website">i will miss a fucking website</h3> <p>I've said as much on my different socials already, but... dude, I cried so fucking much after the shutdown of cohost was announced. I don't cry that often! And yet! The week of September 9th saw me cry the most I've had ever cried in a very long time.</p> <p>At first, I cried from sadness because it was going away, then cried from anger because it couldn't exist in our current system. Then the overwhelming feelings from the user base of "I will miss cohost" made me cry again. I cried because of a <a href="https://cohost.org/astr-hal/post/7633384-i-m-considering-gett">cute, reassuring, sweet, piece of art</a>, I cried because of a <a href="https://cohost.org/curiousquail/post/7738599-what-we-leave-behind">"cohost meme song"</a> that made me realize how many good jokes/memes the users made. I cried listening to a <a href="https://cohost.org/zandravandra/post/7728342-compost-6-see-you">very bittersweet, yet beautiful song</a> about cohost ending.</p> <p>I cried a lot. For a <em>website</em>?!</p> <p>But obviously this wasn't only about the website. I cried because I felt like I was losing a place I called home online.</p> <p>I cried because I knew I was losing a truly special place in my heart, where I met wonderful new people, learned about so many interesting subjects, laughed at so many good jokes.</p> <p>cohost at times felt like my little "internet oasis", it was where I would go when my other 3 websites felt exhausting. It was where folks I looked up to would be able to just... post? In peace?</p> <p>cohost was a place where I saw artists, photographers, musicians, makers, and creatives in general able to just <em>share their craft</em> and usually get much better "return" on it than anywhere else!</p> <p>cohost felt much safer <strong>to me</strong> than the other websites I used. I felt much safer in opening up about personal matters, I felt safer writing long form posts about my special interests. I felt safer knowing that, if a post sounded a bit too spicy, I could just not make it shareable and/or lock comments on it, and it would just be a blip in people's feeds. And it was great!</p> <p>I know this wasn't a universal experience, I have met people who got driven off the site due to (racist) harassment. I wish it wouldn't have happened, I tried helping at my "level", but ultimately a lot of the issues were not for me to fix. And I'm sad about that because <strong>my</strong> experience of cohost was wonderful, and I wish it was for more people.</p> <p>I will miss the Posting energy of cohost, the camaraderie, the mascots (not just eggbug), the <a href="https://cohost.org/CoolTimesOnline/post/7640392-thank-you-cohost">"yes, and"</a> spirit that lead to so many good jokes.</p> <p>I will miss cohost's staff. I didn't agree with every decision they took, but I still have a massive amount of respect for them. It takes guts to stick to your vision, even if/when everybody tells you it's foolish or stupid to not build a social media platform that doesn't sell its users out while making them miserable.</p> <p>The way they're handling the shutdown is, frankly, embarrassing for everyone else in this industry.<br /> I know damn well that when the next Mastodon instance shuts down, when Twitter blows up or when Bluesky explodes that none of them will care as much for their users' content and <em>connections</em> as much as Cohost's staff cares about cohost users.</p> <p>I will miss a <em>fucking website</em>, but damn, what a website it was.</p> <h3 id="whats-next-for-me">what's next for me</h3> <p>Well. Chances are you might be reading this inside an RSS feed already, so this (<a href="https://damien.zone">https://damien.zone</a>) is what's next for me.<br /> My relationship to microblogging/social media in general is gonna change, I think.<br /> I am still going to use <a href="https://social.erambert.me/@eramdam">Mastodon</a> for the "tiny posts" stuff. I might try to use <a href="https://bsky.app/profile/damien.zone">Bluesky</a> more, especially since a bunch of cohost folks are following me there, but I am going to complain—I made that joke already.<br /> My <a href="https://twitter.com/Eramdam">Twitter account</a> is still up. I locked it a few weeks ago, and I don't think I will re-open it anytime soon, or maybe ever? Time will tell. Don't expect me to post there very much.</p> <p>I want to try to use social media less if I'm being honest. I've been using Discord and regular-ass instant messaging a lot more for the past few weeks. It's been great to just be able to talk to more people. I am seeing a bunch of people from cohost and beyond in person in the coming weeks and months, I am looking forward to that. I collected some of my cohost mutuals' information, added them on Discord and other places. I know I missed some of you, I will try to do an exhaustive "sweep" when my data export with the "find your friends" page is available.</p> <p>cohost reminded me that the best part about using a website was the people you meet on it, so even if the website goes away, hopefully the connections you made will stay around.</p> <p>Thank you, cohost, I will miss you a whole lot.</p> <p>Cheers, have a good life, wherever y'all go. I hope we meet again soon,</p> <p>- damien</p> <a href="https://damien.zone/my-online-life-and-cohost">Permalink / Comments</a> https://damien.zone/release-notes-end-of-september-2024 2024-09-27T01:00:00Z 2024-09-27T05:05:04Z Damien Erambert <p>A little post to tell the folks who are only reading the RSS feed about what I've been up to on damien.zone:</p> <p>I got a <a href="https://damien.zone/links">links</a> page with:</p> <ul> <li>my own links!</li> <li>nice buttons I keep seeing on people's websites! I'll try to collect more as time goes on</li> <li>I have a button too!! <a href="https://shadenexus.com/">Gwyn</a> absolutely killed it, you can grab it on there as well</li> <li>friends' links and just cool links in general</li> </ul> <p>I started a <a href="https://damien.zone/projects">projects</a> page. It has <em>almost</em> everything I would care about publicizing on here. The big thing missing are links for my Mac Themes bot that people enjoyed on cohost. I'll remedy that. In the meantime, you can find the bot on <a href="https://botsin.space/@osxthemes">Mastodon</a>, <a href="https://bsky.app/profile/macthemes.bsky.social">Bluesky</a> as well as <a href="https://x.com/macintoshthemes">Twitter</a>.</p> <p>I have a "final cohost post" ready to send on next Monday (September 30th). I might mirror it here, we will see.</p> <p>I have another, longer, "my online life" type post that I don't think will be ready before cohost's goes read-only. As luck would have it, I already had plans for this weekend, so I won't have much time to spend on a computer before Monday. But I hope it'll be at least slightly interesting when I'm done with it! The hardest part will be to edit myself to not write <em>too much</em>, haha.</p> <p>I also ported my old blog posts over to this blog. I don't think they showed up on the RSS feed (at least I hope they didn't) so, in case you weren't aware:</p> <ul> <li>Better TweetDeck post-mortem <a href="https://damien.zone/bettertweetdeck-post-mortem-part-1-faq/">part one</a> and <a href="https://damien.zone/bettertweetdeck-post-mortem-part-2/">part two</a>. Part two is probably the one you'll want to read in 2024.</li> <li><a href="https://damien.zone/intersection-of-liberal-arts-and-technology/">"The intersection of liberal arts and technology"</a>. Kind of a rant/thinking out loud post I wrote at like, 10pm on a weekday back then.. It's messy but I still stand by everything I said in there.</li> <li><a href="https://damien.zone/astro-and-mastodon-instance/">Running my own Mastodon instance "behind" Astro on Vercel</a>. Very specific/technical so idk, if you happen to run your own Mastodon/fediverse instance <em>and</em> also have a website hosted on Vercel, maybe you might find this useful? Who knows.</li> </ul> <p>Cheers,</p> <p>- damien</p> <a href="https://damien.zone/release-notes-end-of-september-2024">Permalink / Comments</a> https://damien.zone/hacking-together-a-local-css-editing-workflow-on-bear 2024-09-17T05:38:00Z 2024-09-21T08:33:17Z Damien Erambert <p>#now playing: <a href="https://memorexmemories.bandcamp.com/album/pictures-of-purple-skies">Pictures of Purple Skies by Memorex Memories</a></p> <p>I have been enjoying the "no frills" aspect of running a blog on bear so far. the one thing I am missing from my previous blog setup, however, is a way to quickly experiment with the CSS of my blog.</p> <p>while bear's dashboard has been pretty convenient to quickly edit some CSS variables, I feel if I want to do deeper edits the "tweak -&gt; publish -&gt; refresh" loop will feel like a slow to me.</p> <p>so I did what I usually do in those situations: I write some JavaScript^{<a href="#user-content-fn-1" id="user-content-fnref-1" data-footnote-ref aria-describedby="footnote-label">1</a>} about it.</p> <p>The code is on <a href="https://github.com/eramdam/files.damien.zone">https://github.com/eramdam/files.damien.zone</a> but the logic is pretty straightforward:</p> <ul> <li>run a web server running on <code>localhost:3000</code> (I'm using fastify but i'm sure any web server thing for Node would work)</li> <li>run an instance of <a href="https://github.com/tapio/live-server">live-server</a> in parallel (this one is key!)</li> <li>on every route, take the request's URL, transform the URL such that <code>localhost:3000/foobar</code> becomes <code>damien.zone/foobar</code></li> <li>download the HTML from <code>damien.zone/foobar</code>, parse it, remove every stylesheets from it, and inject my own from the repo</li> <li>and lastly, inject a modified version of the <a href="https://github.com/tapio/live-server/blob/master/injected.html">injected.html file</a> from the <a href="https://github.com/tapio/live-server/">live-server</a> repo, which will make the live reloading of stylesheets work</li> </ul> <p>then the whole thing runs with a simple <code>npm run start</code>, I open <code>localhost:3000</code> in my browser and.. it just works! I can edit my CSS freely and with instant feedback.</p> <p>it feels like a very stupid solution but as I often like to say: "If it's stupid and it works, it's not stupid".</p> <p>see ya,<br /> - damien</p> <section data-footnotes class="footnotes"><h2 class="sr-only" id="footnote-label">Footnotes</h2> <ol> <li id="user-content-fn-1"> <p>or rather, TypeScript these days, I'm not a fool <a href="#user-content-fnref-1" data-footnote-backref aria-label="Back to reference 1" class="data-footnote-backref">↩</a></p> </li> </ol> </section> <a href="https://damien.zone/hacking-together-a-local-css-editing-workflow-on-bear">Permalink / Comments</a> https://damien.zone/what-to-expect-on-damienzone 2024-09-16T05:24:00Z 2024-09-21T08:34:28Z Damien Erambert <p>#now playing: <a href="https://album.link/us/i/1739079974">BRAT by Charli XCX</a>_</p> <p>the past weekend, like the past week before it, has seen me go through a whole gamut of emotions.</p> <p>the good, the bad, and everything in between, I feel I've gone through it all.</p> <p>I keep telling myself that I feel very goofy for reacting so strongly about losing a <em>website</em>, and... I do still feel that way, but in the second part of the week, I realized that what I'm reacting to is losing the people I've interacted with, read and met on cohost. a space that truly felt special.</p> <p>like I said in my <a href="/hello-internet-again/">previous article</a>, cohost made me realize that I could just... do my little posts, be myself, cringe, sometimes annoying, loud, vocal about my interests and people would show up.^{<a href="#user-content-fn-1" id="user-content-fnref-1" data-footnote-ref aria-describedby="footnote-label">1</a>}</p> <p>I think it will warrant a whole section of the article I will write about my "story with cohost" and online in general but I've come to realize that microblogging really, really isn't for me any more dude. or at the very least, not the version of it that Twitter^{<a href="#user-content-fn-2" id="user-content-fnref-2" data-footnote-ref aria-describedby="footnote-label">2</a>} presents as the "default".</p> <p>for all its issues^{<a href="#user-content-fn-3" id="user-content-fnref-3" data-footnote-ref aria-describedby="footnote-label">3</a>}, Mastodon has always felt like a "quieter Twitter". but it still had Numbers™️ and was still very much trying to emulate Twitter, despite what its creator might say. so I will definitely keep using it. the fact that I'm now running my own instance is also helping me feel like I have more control over it. but it will be for the "I ate an apple today, it was very juicy" type posts.</p> <p>for everything else, I had cohost, and now I have damien.zone.</p> <p>at any rate! the "goals" or at least "guidelines" I want to set for myself in this space are:</p> <ul> <li>be cringe, be free</li> <li>don't worry too much about it. what are you gonna do if you don't like what you're seeing? not read it? big whoop.</li> <li>tinker and have fun with it</li> </ul> <p>Those past few days I have seen a bunch of my online friends and acquaintances mess around with their online presence. make blogs on Bear (that this blog runs on!), and just have fun with it.</p> <p>and I am excited to try this...for the first time? Despite being old enough (I think) to have known that era, I never actually experienced the "geocities and myspace" era of the Internet firsthand. and I think by the time <a href="https://neocities.org/">neocities</a> became a thing I was already tech-savvy enough to feel like it was a "baby's first website" tool, and I was A Big Boy Programmer who could do all of that shit himself.</p> <p>I was maybe a bit right, but what good did that do me if I never made anything out of it? so despite it being more "limited" than what I had <a href="https://erambert.me/">before</a>, Bear really feels "small but mighty" in a very liberating way.</p> <p>I am very excited about doing stuff I never got to do and that are coming back in fashion like buttons, have my site be on a webring, show off blogs I like in a blogroll. I am excited about maybe making a <a href="https://sive.rs/nowff">"now" page</a> for myself, tinkering with the theme of this blog.</p> <p>I know myself and there is a real chance I might do "too much too quickly" and burn myself out, but so far, Bear's defaults have been "sane" enough to only warrant tiny tweaks.</p> <p>I don't want to worry about everything being perfect, clean, right, or any combination of all three anymore.</p> <p>I just want my little space to make my little website and write my little posts on it. It feels both very nostalgic and new at the same time, and I think I will like it.</p> <p>love you,</p> <p>- damien</p> <section data-footnotes class="footnotes"><h2 class="sr-only" id="footnote-label">Footnotes</h2> <ol> <li id="user-content-fn-1"> <p>assuming you use the tools the site gives you in order to be "discovered" (which you might think would be a low bar and yet) <a href="#user-content-fnref-1" data-footnote-backref aria-label="Back to reference 1" class="data-footnote-backref">↩</a></p> </li> <li id="user-content-fn-2"> <p>and Bluesky, sorry not sorry if you're coming from there lol <a href="#user-content-fnref-2" data-footnote-backref aria-label="Back to reference 2" class="data-footnote-backref">↩</a></p> </li> <li id="user-content-fn-3"> <p>and trust me I <em>know</em> about those issues. more on that in a later blog post <a href="#user-content-fnref-3" data-footnote-backref aria-label="Back to reference 3" class="data-footnote-backref">↩</a></p> </li> </ol> </section> <a href="https://damien.zone/what-to-expect-on-damienzone">Permalink / Comments</a> https://damien.zone/hello-internet-again 2024-09-15T18:03:00Z 2024-09-16T04:45:35Z Damien Erambert <p>So. <a href="https://cohost.org/staff/post/7611443-cohost-to-shut-down">cohost</a>, huh?</p> <p>If you're reading this, you probably know me from that place (or at least have heard about it) so I don't think it's really useful to try to give you the "elevator pitch".</p> <p>what would a pitch be useful for anyway, right?</p> <p>I have <em>a lot</em> I want to say about cohost. but I think the shutdown announcement is still too recent for me to be able to form any coherent thoughts yet.</p> <p>the one thing that I will say about cohost is that it, as a site and "community"^{<a href="#user-content-fn-2" id="user-content-fnref-2" data-footnote-ref aria-describedby="footnote-label">1</a>}, taught me that I can "exist online"^{<a href="#user-content-fn-1" id="user-content-fnref-1" data-footnote-ref aria-describedby="footnote-label">2</a>} without worrying about being "clean" or "proper" or "right".</p> <p>most of my existence online was on micro-blogging platforms with short character limits and a high incentive to product the "One Good Take" about everything and anything. and I'm frankly done with that.</p> <p>or at least I'm done with it being my only outlet for Thoughts online. and I have cohost to thank for for letting me experiment and find this out about myself.</p> <p>I already have a <a href="https://erambert.me/">website</a> that I was planning on using as my new place for long/medium form writing but after trying (and failing) to get anything written there I came to a conclusion. my friend evie is right in that <a href="https://cohost.org/ewie/post/7707570-guys-who-are-moving">"you gotta make it easy to post"</a>.</p> <p>as far as I can tell bearblog seems to strike a right balance between making it easy and letting me tinker with things while not letting me fall into what some might call "the developer's blog curse". so here I am.</p> <p><a href="https://erambert.me">erambert.me</a> will still exist as "the website I give by default" both because I like the separation of "concerns" ('business card type site' versus 'just me writing') and also because <em>so much</em> is tied to this domain that I refuse to mess with it. anyway!</p> <p>this is <a href="https://damien.zone">damien.zone</a>.</p> <p>I'm nervous, I'm sad, I have thoughts, I'm excited to try this. let's go and post about it like it's 2007 again.</p> <p>pardon the mess, appreciate you &lt;3</p> <p>- damien</p> <section data-footnotes class="footnotes"><h2 class="sr-only" id="footnote-label">Footnotes</h2> <ol> <li id="user-content-fn-2"> <p>I don't like saying social media sites have "a community" because there's so many people on them but <em>I</em> definitely had something I would call a community on cohost <a href="#user-content-fnref-2" data-footnote-backref aria-label="Back to reference 1" class="data-footnote-backref">↩</a></p> </li> <li id="user-content-fn-1"> <p>whatever that means <a href="#user-content-fnref-1" data-footnote-backref aria-label="Back to reference 2" class="data-footnote-backref">↩</a></p> </li> </ol> </section> <a href="https://damien.zone/hello-internet-again">Permalink / Comments</a> https://damien.zone/astro-and-mastodon-instance 2024-08-11T07:00:00Z 2024-11-02T03:15:47Z Damien Erambert <picture> <source srcset="https://damien.zone/img/blog/mastodon-dark.png" media="(prefers-color-scheme: dark)" type="image/png"></source> <source srcset="https://damien.zone/img/blog/mastodon-light.png" type="image/png"></source><img src="https://damien.zone/img/blog/mastodon-light.png" alt="My profile on my Mastodon instance" loading="lazy" decoding="async" /> </picture> <p>The Mastodon instance I've been on for the past 7 years, <a href="https://octodon.social">octodon.social</a> is <a href="https://octodon.social/@CobaltVelvet/112897672123037837">shutting down next year</a>. So rather than try to find a replacement, I decided to run my own, single-user instance.</p> <p>The issue isn't that good, well-moderated instances don't exist, they do! But one of the big reasons why I stayed on Octodon was because I knew the moderation team personally so I trusted their decisions and agreed with most of them. I just frankly couldn't be bothered with having to find and vet a new instance and I like to tinker so, after some advices from my friend <a href="https://nileane.fr/">Niléane</a> I went and spun up my own!</p> <p>It's up at <a href="https://social.erambert.me">https://social.erambert.me</a> and you can find me on Mastodon by looking up <code>@eramdam@erambert.me</code>.</p> <p>The setup isn't anything too fancy:</p> <ul> <li>a dedicated server hosted by <a href="https://eco.ovhcloud.com/en/">OVH</a></li> <li>OVH's <a href="https://us.ovhcloud.com/public-cloud/object-storage/">object storage solution</a> for media files behind <a href="https://bunny.net/">Bunny</a></li> <li>running Mastodon 4.2.10 (current stable version at the time of writing)</li> </ul> <p>All set up while following the <a href="https://docs.joinmastodon.org/admin/prerequisites/">official documentation</a>.</p> <p>The only quirk of my setup might is that the "local domain" (domain the instance responds to) and the "web domain" (domain where the Web interface lives) are different. Meaning that people can find me by looking up @<a href="mailto:eramdam@erambert.me">eramdam@erambert.me</a> despite the actual instance running on <a href="https://social.erambert.me">https://social.erambert.me</a>. It's a behavior that is <a href="https://docs.joinmastodon.org/admin/config/#web_domain">well documented</a> by Mastodon and is usually trivial to implement when you host your website on your own server...</p> <p>Except I don't do that 😅 My website is, for now, running on <a href="https://astro.build">Astro</a> and hosted on <a href="https://vercel.com/">Vercel</a> so I can't just modify the web server configuration to set up the necessary redirection.</p> <p>Now, I'm not the only one that tried to do this with a similar setuip <a href="https://www.danillouz.dev/posts/mastodon-alias#using-my-custom-domain-as-an-alias">link</a> <a href="https://brandonrozek.com/blog/mastodon-webfinger-alias-using-redirects/">link</a> <a href="https://www.seanmcp.com/articles/use-your-domain-on-mastodon-with-astro/">link</a>. But none of those solutions were satisfactory for me because:</p> <ol> <li>they assume only <em>one</em> account as the "destination" OR</li> <li>they work by outputing a "dumb" JSON file.</li> </ol> <p>I want to have the options to maybe host more than one account on my instance so those limitations were deal-breaker. Thankfully <a href="https://www.seanmcp.com/articles/use-your-domain-on-mastodon-with-astro/">Sean McPherson's</a> article put me on the right track and I ended up implementing an <a href="https://docs.astro.build/en/guides/endpoints/">Astro endpoint</a>.</p> <p>All I had to was write this in a file under <code>src/pages/.well-known/webfinger.ts</code>, make sure my site was using the <a href="https://docs.astro.build/en/guides/integrations-guide/vercel/">Vercel adapter</a> to run in server mode instead of static mode and I was done!</p> <div class="expressive-code"><figure class="frame has-title"><figcaption class="header"><span class="title">src/pages/.well-known/webfinger.ts</span></figcaption><pre data-language="typescript"><code><div class="ec-line"><div class="code"><span style="--0:#F97583;--1:#BF3441">import</span><span style="--0:#E1E4E8;--1:#24292E"> { APIRoute } </span><span style="--0:#F97583;--1:#BF3441">from</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#9ECBFF;--1:#032F62">"astro"</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span style="--0:#F97583;--1:#BF3441">const</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">destinationInstance</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#9ECBFF;--1:#032F62">"https://social.erambert.me"</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span style="--0:#F97583;--1:#BF3441">export</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">const</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">GET</span><span style="--0:#F97583;--1:#BF3441">:</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">APIRoute</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">async</span><span style="--0:#E1E4E8;--1:#24292E"> ({ </span><span style="--0:#FFAB70;--1:#AE4B07">request</span><span style="--0:#E1E4E8;--1:#24292E"> }) </span><span style="--0:#F97583;--1:#BF3441">=&gt;</span><span style="--0:#E1E4E8;--1:#24292E"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#F97583;--1:#BF3441">const</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">url</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">new</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">URL</span><span style="--0:#E1E4E8;--1:#24292E">(request.url);</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#F97583;--1:#BF3441">const</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">newUrl</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">new</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">URL</span><span style="--0:#E1E4E8;--1:#24292E">(</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">url.</span><span style="--0:#B392F0;--1:#6F42C1">toString</span><span style="--0:#E1E4E8;--1:#24292E">().</span><span style="--0:#B392F0;--1:#6F42C1">replace</span><span style="--0:#E1E4E8;--1:#24292E">(url.origin, </span><span style="--0:#9ECBFF;--1:#032F62">""</span><span style="--0:#E1E4E8;--1:#24292E">),</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">destinationInstance,</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">);</span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#F97583;--1:#BF3441">const</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">response</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">await</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">fetch</span><span style="--0:#E1E4E8;--1:#24292E">(newUrl.</span><span style="--0:#B392F0;--1:#6F42C1">toString</span><span style="--0:#E1E4E8;--1:#24292E">());</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#F97583;--1:#BF3441">const</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">json</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">await</span><span style="--0:#E1E4E8;--1:#24292E"> response.</span><span style="--0:#B392F0;--1:#6F42C1">json</span><span style="--0:#E1E4E8;--1:#24292E">();</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#F97583;--1:#BF3441">return</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">new</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">Response</span><span style="--0:#E1E4E8;--1:#24292E">(</span><span style="--0:#79B8FF;--1:#005CC5">JSON</span><span style="--0:#E1E4E8;--1:#24292E">.</span><span style="--0:#B392F0;--1:#6F42C1">stringify</span><span style="--0:#E1E4E8;--1:#24292E">(json, </span><span style="--0:#79B8FF;--1:#005CC5">null</span><span style="--0:#E1E4E8;--1:#24292E">, </span><span style="--0:#79B8FF;--1:#005CC5">2</span><span style="--0:#E1E4E8;--1:#24292E">), {</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">headers: {</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#9ECBFF;--1:#032F62">"Content-Type"</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#9ECBFF;--1:#032F62">"application/jrd+json"</span><span style="--0:#E1E4E8;--1:#24292E">,</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#9ECBFF;--1:#032F62">"Access-Control-Allow-Origin"</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#9ECBFF;--1:#032F62">"*"</span><span style="--0:#E1E4E8;--1:#24292E">,</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">},</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">});</span></div></div><div class="ec-line"><div class="code"><span style="--0:#E1E4E8;--1:#24292E">};</span></div></div></code></pre><div class="copy"><div aria-live="polite"></div><div></div></div></figure></div> <p>Now people could query <code>@eramdam@erambert.me</code> and find me as if they queried <code>@eramdam@social.erambert.me</code>! Neat!</p> <p>After having written this post, <a href="https://mastodon.guerilla.studio/@tixie">Tixie</a> made me realize that I <em>could</em> use Astro's <code>redirect</code> method instead of doing a fetch in the endpoint code? Both seem to work but I am a bit worried about the potentially missing <code>Access-Control-Allow-Origin</code> header...</p> <div class="expressive-code"><figure class="frame has-title"><figcaption class="header"><span class="title">src/pages/.well-known/webfinger.ts</span></figcaption><pre data-language="typescript"><code><div class="ec-line"><div class="code"><span style="--0:#F97583;--1:#BF3441">import</span><span style="--0:#E1E4E8;--1:#24292E"> { APIRoute } </span><span style="--0:#F97583;--1:#BF3441">from</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#9ECBFF;--1:#032F62">"astro"</span><span style="--0:#E1E4E8;--1:#24292E">;</span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span style="--0:#F97583;--1:#BF3441">export</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">const</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">GET</span><span style="--0:#F97583;--1:#BF3441">:</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">APIRoute</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">async</span><span style="--0:#E1E4E8;--1:#24292E"> ({ </span><span style="--0:#FFAB70;--1:#AE4B07">request</span><span style="--0:#E1E4E8;--1:#24292E">, </span><span style="--0:#FFAB70;--1:#AE4B07">redirect</span><span style="--0:#E1E4E8;--1:#24292E"> }) </span><span style="--0:#F97583;--1:#BF3441">=&gt;</span><span style="--0:#E1E4E8;--1:#24292E"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#F97583;--1:#BF3441">const</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">url</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">new</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">URL</span><span style="--0:#E1E4E8;--1:#24292E">(request.url);</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#F97583;--1:#BF3441">const</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#79B8FF;--1:#005CC5">newUrl</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">=</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#F97583;--1:#BF3441">new</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">URL</span><span style="--0:#E1E4E8;--1:#24292E">(</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">url.</span><span style="--0:#B392F0;--1:#6F42C1">toString</span><span style="--0:#E1E4E8;--1:#24292E">().</span><span style="--0:#B392F0;--1:#6F42C1">replace</span><span style="--0:#E1E4E8;--1:#24292E">(url.origin, </span><span style="--0:#9ECBFF;--1:#032F62">""</span><span style="--0:#E1E4E8;--1:#24292E">),</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#9ECBFF;--1:#032F62">"https://social.erambert.me"</span><span style="--0:#E1E4E8;--1:#24292E">,</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">);</span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#F97583;--1:#BF3441">return</span><span style="--0:#E1E4E8;--1:#24292E"> </span><span style="--0:#B392F0;--1:#6F42C1">redirect</span><span style="--0:#E1E4E8;--1:#24292E">(newUrl.</span><span style="--0:#B392F0;--1:#6F42C1">toString</span><span style="--0:#E1E4E8;--1:#24292E">(), </span><span style="--0:#79B8FF;--1:#005CC5">301</span><span style="--0:#E1E4E8;--1:#24292E">);</span></div></div><div class="ec-line"><div class="code"><span style="--0:#E1E4E8;--1:#24292E">};</span></div></div></code></pre><div class="copy"><div aria-live="polite"></div><div></div></div></figure></div> <p>Update on September 3rd: It turns out, <a href="https://vercel.com/docs/edge-network/rewrites">Vercel rewrites</a> work just fine for this and I didn't realize 😄 I added the following file to my repo and I was done</p> <div class="expressive-code"><figure class="frame has-title"><figcaption class="header"><span class="title">vercel.json</span></figcaption><pre data-language="json"><code><div class="ec-line"><div class="code"><span style="--0:#E1E4E8;--1:#24292E">{</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">"rewrites"</span><span style="--0:#E1E4E8;--1:#24292E">: [</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">{</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">"source"</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#9ECBFF;--1:#032F62">"/.well-known/webfinger"</span><span style="--0:#E1E4E8;--1:#24292E">,</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#79B8FF;--1:#005CC5">"destination"</span><span style="--0:#E1E4E8;--1:#24292E">: </span><span style="--0:#9ECBFF;--1:#032F62">"https://social.erambert.me/.well-known/webfinger"</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">}</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">]</span></div></div><div class="ec-line"><div class="code"><span style="--0:#E1E4E8;--1:#24292E">}</span></div></div></code></pre><div class="copy"><div aria-live="polite"></div><div></div></div></figure></div> <a href="https://damien.zone/astro-and-mastodon-instance">Permalink / Comments</a> https://damien.zone/intersection-of-liberal-arts-and-technology 2024-03-27T07:00:00Z 2024-09-21T08:44:02Z Damien Erambert <p><small>Inspired by <a href="https://lmnt.me/blog/lack-of-vision.html">"Lack of Vision" by Louie Mantia</a>.</small></p> <blockquote> <p>It’s technology married with liberal arts, married with the humanities, that yields us the results that make our heart sing.</p> </blockquote> <p>I have been thinking about this quote recently.</p> <p>I've never really considered myself <em>an artist</em>. Sure, I've spent hours upon hours messing around in Photoshop as a teenager on the family computer, learning <em>graphic design</em> by following tutorials written by other amateurs. Does that make me an artist? I don't know.</p> <p>I've always been more into what we'd call web design and UI design. I've learned the ropes of all of this by just fiddling with existing things. It might feel "pointless" to an outsider, but I remember taking great joy in essentially doing "vector tracing" with Photoshop's Pen tool over various pictures of my favorite fictional characters, pieces of tech and such.</p> <p>All in service of figuring <em>how</em> to reproduce that <em>one</em> gradient, that <em>one</em> visual effect, etc. I distinctly remember doing that over a (I didn't know it was at the time) render of <a href="https://en.wikipedia.org/wiki/Apple_Cinema_Display?useskin=vector">Apple's iconic Cinema Display</a>.</p> <p>For fun, I was messing around.</p> <p>Around 2009 or so, I got my first iMac (the first aluminum one). I had been lusting for this computer for a long time before my parents got it as a birthday present. I browsed Apple's website, enamored by the design of the hardware <em>and</em> the software.</p> <p>I was so enamored by the visual, dare I say artistic, quality of the software (I couldn't judge anything else by that point) that I had gotten into the hobby of disguising my Windows XP installation into Mac OS X "Tiger" and later on, Mac OS X "Leopard".</p> <p>Even after getting my Mac, I didn't stop obsessing over that aspect of my computing life. I took any excuse I could to change my system or Dock icons by downloading a pack from <a href="https://iconfactory.com/">The Iconfactory</a>, MacThemes.net or DeviantArt.</p> <p>Later on, I would take an interest in web design. At this point (late 2000s), web design really was <a href="https://www.instagram.com/webdesignmuseum/"><em>unique</em></a>.</p> <p>Since I didn't have any technical knowledge, I was "only" designing. I remember growing frustrated when my one developer friend would take too long to implement something. But it was gratifying to see the things I "drew" become alive and interactive.</p> <p>Over time, I took it upon myself to learn HTML, CSS, and everything else. This was around the time when a little thing called <a href="https://wordpress.org/">WordPress</a> was the hot new thing on the block.</p> <p>I didn't have much of an "education" with these things. I would learn by breaking things. Not only that, but I would take an existing blog theme, tweak a few lines of CSS there a few HTML blocks here, and see what happens. And repeat, and repeat, and repeat.</p> <p>Later, a friend and I teamed up to do more "web design" work, not in any official capacity (we were still students) but as a hobby. I was still design-oriented, had opinions and would draw web designs, but he was always the one who would come up with crazy visual ideas that browsers of the time wouldn't be capable of reproducing accurately until 15 years later.</p> <p>Coming up with <em>a way</em> to convey the effect <em>somehow</em> was gratifying. It may sound corny, but I felt like an illusionist! An illusionist who made you believe that Safari or Firefox in 2010 could show you some crazy background with rounded corners and shadows.</p> <p>As time passed, I honed my skills, learned, and did more web design work for clients while I was studying.</p> <p>I would then get a job at my current <a href="https://front.com/">workplace</a> as the first front-end developer, or "the CSS guy," as the CTO would say back then.</p> <p>This was in 2014. Browsers had gotten better, but progress was still slow. Showing vector icons on a web page was a <em>new technique</em>. We used fonts with icons because it was the only "reliable" way of showing vector graphics! It was terrible for various reasons, but also awesome; we were tricking the machine into doing what we wanted.</p> <p>I'll always fondly remember the arguments I would have with <a href="http://areskub.com/">our designer</a> at the time. I had to be "that guy," explaining that, sadly, that cool-looking UI effect wasn't possible or not practically and then coming up with a way to make it work even if it is far from perfect. But yet, it felt magical.</p> <hr /> <p>Ten years later?</p> <p>I think we lost it.</p> <p>Art and technology don't intersect anymore.</p> <p>Tech sees Art as a liability. Not being an artist or a designer is now something that needs fixing, something that <em>you</em> can solve by buying <a href="https://www.canva.com/">someone</a> <a href="https://openai.com/dall-e-2">else's</a> <a href="https://openai.com/sora">product</a>.</p> <p>Art is a resource to be mined; art is an <a href="https://www.youtube.com/watch?v=YQ_xWvX1n9g">asset</a> and cannot exist on its own anymore.</p> <p>The <em>act</em> of making art, what makes art valuable as part of the human experience, is an inefficiency that needs to be optimized for some fucking reason.</p> <p>This sucks and makes my heart boil.</p> <p>I don't know how to fix it, I just know we lost the plot, and it makes me sad.</p> <a href="https://damien.zone/intersection-of-liberal-arts-and-technology">Permalink / Comments</a> https://damien.zone/bettertweetdeck-post-mortem-part-2 2024-01-29T08:00:00Z 2024-12-07T04:55:00Z Damien Erambert <p>This post will be the second —and last, I think— part of my "Better TweetDeck post-mortem" series. In this part, I will try to recount the history of Better TweetDeck as well as shout out people who have helped me with the project. You might learn a thing or two even if you used it for years!</p> <h2 id="a-timeline-of-better-tweetdeck">A timeline of Better TweetDeck</h2> <p>As it turns out, trying to recall and tell 9 years of history of a project without prior notes is kinda hard! Who knew! And I think most of it would be boring, as the bulk of my changelogs aren't particularly interesting. So, rather than go through every single release, I will try to do a "best highlights" retelling of what the project went through. If you want to follow along, I have put together a copy of the full changelog of (almost) every tagged version of Better TweetDeck <a href="/btd/btd-changelog">right here</a>.</p> <h3 id="a-bunch-of-js-and-css-put-together">A bunch of JS and CSS put together</h3> <p><small>December 2013</small></p> <p>I was a student at the time, finishing up my last year of university, living at my parents' place. Unfortunately, we lived in the countryside and that mean we had a <em>terribly</em> slow internet connection. I'm talking less than 1Mbps slow. It wasn't great! But it was manageable.</p> <p>While I can't remember what prompted me to start using TweetDeck specifically (this was after the acquisition by Twitter). I do remember being extremely annoyed at having to wait for <a href="https://t.co">t.co</a> (Twitter's URL shortener) when clicking on. Every. Single. Link. Somehow, this domain is still the slowest domain I regularly encounter, and it was slow at the time already!</p> <p>At that point, I had been learning web development for a few years, which made me think that <em>surely</em> there was a way to fix this with a userscript or browser extension, right? So I opened up my Chrome developer tools, looked around on my feed, and would you look at that!</p> <div class="expressive-code"><figure class="frame"><figcaption class="header"></figcaption><pre data-language="html"><code><div class="ec-line"><div class="code"><span style="--0:#E1E4E8;--1:#24292E">&lt;</span><span style="--0:#85E89D;--1:#1E7734">a</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B392F0;--1:#6F42C1">href</span><span style="--0:#E1E4E8;--1:#24292E">=</span><span style="--0:#9ECBFF;--1:#032F62">"https://t.co/1234"</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B392F0;--1:#6F42C1">target</span><span style="--0:#E1E4E8;--1:#24292E">=</span><span style="--0:#9ECBFF;--1:#032F62">"_blank"</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B392F0;--1:#6F42C1">class</span><span style="--0:#E1E4E8;--1:#24292E">=</span><span style="--0:#9ECBFF;--1:#032F62">"url-ext"</span></div></div><div class="ec-line highlight mark"><div class="code"><span class="indent"> </span><span style="--0:#c2a8f3;--1:#613aa9">data-full-url</span><span style="--0:#E1E4E8;--1:#24292E">=</span><span style="--0:#9ECBFF;--1:#032F62">"https://google.com"</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B392F0;--1:#6F42C1">rel</span><span style="--0:#E1E4E8;--1:#24292E">=</span><span style="--0:#9ECBFF;--1:#032F62">"url noopener noreferrer"</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B392F0;--1:#6F42C1">title</span><span style="--0:#E1E4E8;--1:#24292E">=</span><span style="--0:#9ECBFF;--1:#032F62">"https://google.com"</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#E1E4E8;--1:#24292E"> </span></span><span style="--0:#E1E4E8;--1:#24292E">&gt;google.com&lt;/</span><span style="--0:#85E89D;--1:#1E7734">a</span></div></div><div class="ec-line"><div class="code"><span style="--0:#E1E4E8;--1:#24292E">&gt;</span></div></div></code></pre><div class="copy"><div aria-live="polite"></div><div></div></div></figure></div> <p><code>data-full-url</code>! That's what I wanted! So off I went, putting together a first version of Better TweetDeck that added a "t.co removal" feature, alongside a few others, in <a href="https://github.com/eramdam/BetterTweetDeck/commit/a5e002f1">January 2014</a>.</p> <p>The extension wasn't public at this point: it didn't even have an icon or anything. But a few friends of mine were testing it to provide feedback (and make sure I didn't break anything in a catastrophic way).^{<a href="#user-content-fn-3" id="user-content-fnref-3" data-footnote-ref aria-describedby="footnote-label">1</a>}</p> <h3 id="1st-public-release">1st public release</h3> <p><small>29 January 2014</small></p> <p>On January 29th 2014, I released the first version of Better TweetDeck to the public. Funnily enough, it was <em>not</em> 1.0.0 but 0.0.7 😅</p> <p>It had the following features (taken from the <a href="https://github.com/eramdam/BetterTweetDeck/blob/4bb210d4be6cc14843ded5f590859126789974df/README.md">README file</a>):</p> <blockquote> <ul> <li>Thumbnails for Imgur and Droplr images links</li> <li>Allow to change the time formatting (Relative or Absolute)</li> <li>Allow to change the username/full name formatting (Username only, Full name only, both or inverted (Username Full name))</li> <li>Display fancy circled avatars (they're hipsters, but they're cute too!)</li> <li>Remove that god-damn useless t.co redirection on links</li> </ul> </blockquote> <p><small>I used to swear a bit (too much) when writing code</small><br /> And here it is running on modern Chrome on modern macOS 😄</p> <p></p><figure data-type="image"><a href="/img/blog/btd-post-mortem2/btd-0.0.8.jpg"><img src="https://damien.zone/img/blog/btd-post-mortem2/btd-0.0.8.jpg" alt="The first public version of Better TweetDeck running in Chrome on macOS in 2023" loading="lazy" decoding="async" width="auto" height="auto" /></a><figcaption>The first public version of Better TweetDeck running in Chrome on macOS in 2023</figcaption></figure><p></p> <h3 id="hitting-10">Hitting 1.0</h3> <p><small>February 2014</small></p> <p>A month later, Better TweetDeck hit 1.0! Yay! It now had a proper "welcome" screen banner and a <a href="/btd/btd-changelog#100">bunch of new features</a>. Most of them were tweaks and improvements of existing features, but the biggest part of that changelog was the addition of more "providers" for the thumbnails feature, which made it so links from websites with not-so-great Open Graph support could look nicer and have more functionality inside TweetDeck. I would love to show how it looked back then, but I couldn't find a screenshot of that specific feature running on that specific version of TweetDeck 🙃. So, instead, enjoy a <a href="/img/blog/btd-post-mortem2/btd-1.0.0.png">screenshot of the options page in modern Chrome</a>.</p> <p>The extension's user base was tiny at the time (around 200 weekly users), but it was fine by me. I was making this for myself <em>first</em> and for others second. It was mostly spreading through word of mouth at that point.</p> <h3 id="a-twist">A twist?!</h3> <p><small>February - April 2014</small></p> <p>But little did I know, the TweetDeck team had noticed it despite its small reach. That's when I got an email from <a href="https://twitter.com/jamesbroadhead">James Broadhead</a>, suggesting that I apply for a summer internship at Twitter UK in London!</p> <p></p><figure data-type="image"><a href="/img/blog/btd-post-mortem2/btd-email-james.png"><img src="https://damien.zone/img/blog/btd-post-mortem2/btd-email-james.png" alt="&quot;Hi Damien! I'm a Software Engineer on the TweetDeck team. We came across Better TweetDeck, which I've used for the past day or so -- you've got some really neat ideas in there. I wonder if you'd be interested in coming to London for the summer as an intern to work on TweetDeck? The title says 'Software Engineer', but if you're interested in working closely with our design team on UI/UX work, I'm sure that we can arrange that. It's a paid position, which should cover a summer in the UK :) Although we don't have any full-time roles advertised at the moment, getting a position after a good internship should be easy to arrange, if you're interested. I'm not a recruiter, but if you're interested, I can pass your details along (or just apply through the site directly). All the best - James Broadhead&quot;" loading="lazy" decoding="async" width="auto" height="auto" /></a><figcaption>"Hi Damien! I'm a Software Engineer on the TweetDeck team. We came across Better TweetDeck, which I've used for the past day or so -- you've got some really neat ideas in there. I wonder if you'd be interested in coming to London for the summer as an intern to work on TweetDeck? The title says 'Software Engineer', but if you're interested in working closely with our design team on UI/UX work, I'm sure that we can arrange that. It's a paid position, which should cover a summer in the UK :) Although we don't have any full-time roles advertised at the moment, getting a position after a good internship should be easy to arrange, if you're interested. I'm not a recruiter, but if you're interested, I can pass your details along (or just apply through the site directly). All the best - James Broadhead"</figcaption></figure><p></p> <p>Thus began a months-long application process for this internship. I remember having maybe half a dozen interviews with various Twitter employees trying to gauge my front-end dev skills at the time. Even though I didn't get the spot in the end, it was incredibly flattering and enriching to go through the process. I genuinely couldn't believe folks at Twitter found my dinky little extension useful! It was completely wild to me.</p> <h3 id="emoji">Emoji!</h3> <p><small>1.4.0, April 2014</small></p> <p>The project cruised along. I was pushing updates regularly, working on it on my spare time. One of the big features I was proud of was the support of emoji in 1.4.0! It may sound silly nowadays but, at the time, support of emoji outside of macOS/iOS was pretty much non-existent and, from my recollection, Twitter was one of the first websites to support them <em>and</em> have their own set of emoji.</p> <p>Now, if you know about the <a href="https://github.com/twitter/twemoji/">Twemoji project</a> (RIP), you might also know that Twitter didn't open-sourced it until <a href="https://blog.twitter.com/developer/en_us/a/2014/open-sourcing-twitter-emoji-for-everyone">November 2014</a>, so how did I support emoji before that?</p> <p>The hard way! Most of the logic lives in this <a href="https://github.com/eramdam/BetterTweetDeck/blob/eaf88f4775e74882b1de6c2ba3ff5ea6ed2a6075/source/js/emojiToImage.js">file</a>, and how I got to that implementation is kind of funny in retrospect. I remember asking around on an IRC channel I'd hang out on, and a <a href="https://github.com/Meroje">friend</a> came up with a way to <a href="https://gist.github.com/Meroje/9994612">list all the available URLs of Twitter's emoji</a>. Since the Gist contains a 20,000-line long text file, it will take a while to load, so I'm embedding a copy of the README file here, which details the process Meroje went through:</p> <blockquote> <h4 id="purpose">Purpose</h4> <p>This was used to find all possible URLs of twitter's emojis.<br /> The list is used for <a href="https://github.com/eramdam/BetterTweetDeck">BetterTweetDeck</a>'s emojis replacement script.</p> <h4 id="do-it-at-home">Do it at home</h4> <p>First we export all characters from <code>/System/Library/Input Methods/CharacterPalette.app/Contents/Resources/CharacterDB.sqlite3</code> (column <code>uchr</code> from table <code>unihan_dict</code>) as CSV (could have used SQLite from Node.js). This file contains all Unicode characters (54072).</p> <p>Then this CSV is parsed with Node.js, which outputs corresponding URLs.</p> <p>To find all emojis from there, you <em>just</em> have to test every URL (<a href="https://gist.github.com/eramdam/dc05745f977f3fa18dd5">example</a>, <a href="http://stackoverflow.com/a/22379949/1478202">another, with paralelism</a>) (be gentle, use HEAD) to remove those that return 404.</p> </blockquote> <p>From there, I had a final list of ~620 supported emoji^{<a href="#user-content-fn-6" id="user-content-fnref-6" data-footnote-ref aria-describedby="footnote-label">2</a>} and went on to replacing any emoji I'd find in tweets with their respective image file. The implementation was a bit crude but it worked! And, on top of that, it was completely immune to the <a href="https://www.youtube.com/watch?v=zv0kZKC6GAM">infamous XSS vulnerability</a> TweetDeck ran into when they rolled out their own support of emoji 😄</p> <p>After a few days, I had figured out how to inject an emoji picker. It was very <a href="https://github.com/eramdam/BetterTweetDeck/blob/40ad2b3585374677782a46888afcf5f16add2796/source/js/usefulFunctions.js/#L121-L173">basic</a>, but it did the job and was useful for anybody who wasn't on macOS (at the time it was the only desktop operating system with native emoji support).</p> <p>Eventually, TweetDeck rolled out a (safe) implementation of emoji support, so I removed mine around May 2014 while keeping the picker. I tried my best, over the years, to keep the list of supported emoji in the picker up to date, and even managed to monkey patch the built-in emoji replacement code to update more often when Twitter couldn't be bothered to update TweetDeck more than a few times a year.</p> <h3 id="reaching-20">Reaching 2.0</h3> <p><small>August 2014</small></p> <p>In August 2014, I released <a href="https://github.com/eramdam/BetterTweetDeck/tree/bacede58aaea3e86c44dbd74acc42e41a603f651">version 2.0</a> of Better TweetDeck. It had a lot of features!</p> <ul> <li>A translation and complete redesign of the settings</li> <li>A homemade emoji picker</li> <li>The ability to display thumbnails from a dozen services like Imgur, Instagram, SoundCloud, etc. <ul> <li>Some of those thumbnails relied on <a href="https://embed.ly/">Embed.ly</a>'s API, which was very convenient, but that convenience came at a cost (more on that later).</li> </ul> </li> <li>A "Share to TweetDeck" context menu (that couldn't be disabled, this came later as an external contribution)</li> <li>More granular control of the timestamp display</li> <li>And many more I forget</li> </ul> <p>Here are the settings in action, along with their "dynamic preview" system I was so proud of at the time!</p> <figure data-type="video"> <video src="https://damien.zone/img/blog/btd-post-mortem2/btd-2.0-settings.mp4" poster="https://damien.zone/img/blog/btd-post-mortem2/btd-2.0-settings.jpg" playsinline controls preload="none"></video> <figcaption> The settings from Better TweetDeck 2.0, running on modern Chrome </figcaption> </figure> <p>On the technical side it was also quite a big release:</p> <ul> <li>I had <em>actual</em> tooling instead of three JavaScript files that were ~700 lines long (although I was using some weird <a href="https://gulpjs.com/"><code>gulp</code></a> plugin to "import" files to and from each other, it still wasn't great)</li> <li>I was using <a href="https://sass-lang.com/">Sass</a> for styles, which let me get fancier with CSS customizations</li> </ul> <p>This might not seem like much, but it meant that it was much easier for <a href="https://github.com/eramdam/BetterTweetDeck/graphs/contributors?from=2014-08-03&amp;to=2017-12-23&amp;type=c">external contributors</a> to help on the project 😄</p> <h3 id="2x-and-other-things">2.x and other things</h3> <p><small>August 2014 - 2016</small></p> <p>I would love to go into lots of details on what I worked on and added to the project in that timespan, but it turns out I wasn't very smart and didn't write a single changelog between 2.0.0 and 3.0.0 🙃 Let this serve as a cautionary tale for anybody reading this: write changelogs!</p> <p>What I do remember is that:</p> <ul> <li>The project gained quite a bit of steam! Going from ~1700 weekly users after 2.0.0's release to ~20,000 right before 3.x's release!^{<a href="#user-content-fn-7" id="user-content-fnref-7" data-footnote-ref aria-describedby="footnote-label">3</a>}</li> <li>I started implementing localization for the settings, so people could translate BTD in their own language</li> <li>and surely other things I'm forgetting.</li> </ul> <p>On a personal level, <em>a lot</em> happened during that time!<br /> In summer of 2014, I was in the process of getting ready to start my two years at <a href="https://www.gobelins-school.com/">Gobelins</a> through an apprenticeship program, which meant I had to find a company to sponsor me. On the advice of a <a href="http://areskub.com/">friend</a>, I approached <a href="https://www.wikiwand.com/en/EFounders">eFounders</a>, who told me that they liked what they saw on my resume^{<a href="#user-content-fn-8" id="user-content-fnref-8" data-footnote-ref aria-describedby="footnote-label">4</a>} but only had full-time positions. To which I cheekily replied "but <em>what if</em> I applied for a full-time position?". One thing leading to another, I ran into <a href="https://github.com/lperrin">Front's CTO</a> with whom I had worked on a previous project. Front was looking for a front-end developer, so everything clicked into place.<br /> It was definitely a gamble because, if this didn't go through, I would have felt pretty silly, but it paid off and, 9 years —phew— later, I have zero regrets!</p> <p>The next summer, I followed the team to San Francisco, which was obviously quite the move! I didn't get much done on Better TweetDeck in 2015 because, as it turns out, moving all the way across the world keeps you busy for a while!</p> <p>In December 2015, I created a <a href="https://twitter.com/BetterTDeck">Twitter account for the project</a>. up until that point I did all support and communication through my personal account, which got old pretty quickly. From that moment on, most BTD-related communication was done there.</p> <p>I'm sure I did more on the project itself but again, my past self's poor changelog hygiene is costing me, as I can't gather anything useful from my Git history. So let's move onto the next milestone!</p> <h3 id="episode-3">Episode 3</h3> <p><small>3.0, August 2016</small></p> <p>As the title of this section suggests, I released v3 of BTD in August 2016. It was quite a big release! You can see the <a href="/btd/btd-changelog#300">full changelog here</a> but the highlights were:</p> <h4 id="complete-rewrite">Complete rewrite</h4> <p>Once again, I had rewritten the whole codebase and managed to get an even faster and leaner BTD out of it. I had switched from the weird gulp-based tooling to using Webpack and ES6 modules. This may sound funny in 2023 but, at the time, it was a very recent addition to ECMAScript!</p> <h4 id="ability-to-change-hearts-back-to-stars">Ability to change hearts back to stars.</h4> <p>Twitter had renamed "Favorites" (using a star icon) to "Likes" (using a heart icon). I'm sure some people wrote about it in greater detail, but this caused quite the turmoil among Twitter users, since "favorite" had a more "neutral" connotation as to why people were using it, whereas "like" was very opiniated. So people (and I, at the time) were glad to be able to change the hearts back to stars.</p> <p>Fun implementation trivia: when Twitter made that change on the main web app, TweetDeck simply added a <code>heart</code> class to the main <code>&lt;body&gt;</code> element of TweetDeck, which meant that switching back to stars was as easy as removing that class at runtime 😄 They eventually went with a more permanent solution, and I had to start embedding old PNGs into BTD's code, but that was a fun period.</p> <h4 id="a-lot-of-new-thumbnail-providers-supported">A <em>lot</em> of new thumbnail providers supported</h4> <p>At this point, I think the project was supporting maybe 15 different providers? I know the list grew even more when contributors started adding their own.</p> <p>Like I said earlier, those were using <a href="https://embed.ly/">Embed.ly</a>, which was great because it had a unified API that supported basically every URL under the sun and could extract a useful thumbnail/embed out of it. Problem was that, despite Embed.ly giving a "free quota"^{<a href="#user-content-fn-9" id="user-content-fnref-9" data-footnote-ref aria-describedby="footnote-label">5</a>}, I blew through it in a matter of <em>days</em> after the release of v3.<br /> This meant that I <a href="https://twitter.com/BetterTDeck/status/762319703419125761">suddenly owed Embed.ly around ~200$</a> after only a week or two, which was not money I could afford to spend on BTD, especially since it didn't make any significant income^{<a href="#user-content-fn-10" id="user-content-fnref-10" data-footnote-ref aria-describedby="footnote-label">6</a>}. I <a href="https://twitter.com/BetterTDeck/status/762320997429055488">called for donations/Patreon subscriptions at the time</a> but quickly pulled the plug when I realized the juice wasn't worth the squeeze.<br /> In retrospect, that was the right call since Twitter ended up implementing their <a href="https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards">cards</a> universally and supporting those in TweetDeck was a better/easier way to go.</p> <h4 id="verified-badges-in-columns">Verified badges in columns</h4> <p>This might seem like a small feature on paper but, without it, one of the funniest features of Better TweetDeck wouldn't have been possible years later. <em>~Foreshadowing~</em>.</p> <h3 id="opera-support">Opera support</h3> <p><small>3.0.17, September 2016</small></p> <p>3.0.17 in itself was fairly light on features, but it also marked the first instance of non-Chrome browser support: Opera! On a technical side, I remember it being easy enough to support, since Opera had recently(? I think) switched to Chromium/Blink, so extensions worked as-is.<br /> However, the Opera Add-ons Store was <em>a pain</em> to work with. I could never get reliable reviews in a reasonable time, meaning Opera users were always days, if not weeks, behind Chrome users.</p> <p><a href="https://twitter.com/BetterTDeck/status/1098087699993354240">Three years later</a>, I ended up removing the extension from Opera's store because of the review hassles. I could write a whole blog post about my experiences with different browser extension stores and platforms 😅</p> <h3 id="3x">3.x</h3> <p><small>2017</small></p> <p>Quite a bit had happened after 3.0:</p> <ul> <li>The messages in the Direct Messages column could be collapsed, a very neat and useful trick. One of many contributions by <a href="https://github.com/pixeldesu">pixeldesu</a></li> <li>A lot of thumbnail providers were contributed by folks! Mostly for Japanese-speaking sites. That might explain why BTD ended up being so popular with Japanese users. <ul> <li>For the curious, those providers were WorldCosplay, Photozou, Gyazo, TINAMI, Nicoseiga, Miil.me and... Google+.</li> </ul> </li> <li>Donald Trump had taken office a few months prior and, things were looking grim in the U.S., so I used my (albeit tiny) platform to promote some organizations doing the good work on my donation page. I never needed BTD to make money in order to work on it, so it felt like the right thing to do.</li> <li>A bunch of things around GIFs: <ul> <li>Ability to view GIFs in full-screen. A feature that I wish more social media sites copied, sometimes a GIF is actually a video, and it would be very useful to zoom in on it!</li> <li>GIF download! This one was useful but also a pain in the ass. It was based on a <a href="https://www.npmjs.com/package/gifshot">barely maintained library from Yahoo</a> and worked well about 80% of the time. Turns out converting MP4 files to GIF files is much harder than you might think. I ended up removing that feature a few years later because it was also <em>very slow</em> on some browsers.</li> </ul> </li> <li>Image pasting into the composer. A feature that's basically a given on any website these days, but TweetDeck never got that, for some reason, which is a shame because my implementation was <a href="https://github.com/eramdam/BetterTweetDeck/blob/3.1.0/src/js/inject.js#L335-L362">really simple</a>.</li> </ul> <h3 id="firefox-support">Firefox support!</h3> <p><small>3.3.4, May 2017</small></p> <p>Firefox support had been a common request ever since Better TweetDeck was released in 2014. But the fact was, Firefox had a completely different extension architecture, meaning I would need to accommodate both in a single codebase, somehow. That wasn't happening.<br /> Thankfully, Mozilla was working on implementing the <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions API</a> with the goal of reaching parity with Chrome. This was great news because it meant I could easily support both Chrome and Firefox with minimal platform-specific changes 😄</p> <p>After quite a bit of back and forth in initial reviews with the Mozilla Add-ons team, Better TweetDeck landed on Firefox in May 2017!</p> <p></p><figure data-type="image"><a href="/img/blog/btd-post-mortem2/btd-firefox.jpg"><img src="https://damien.zone/img/blog/btd-post-mortem2/btd-firefox.jpg" alt="Better TweetDeck 3.3.4 running on Firefox 52" loading="lazy" decoding="async" width="auto" height="auto" /></a><figcaption>Better TweetDeck 3.3.4 running on Firefox 52</figcaption></figure><p></p> <h3 id="the-one-with-the-edit-button">The one with the "Edit button"</h3> <p><small>3.4.6-3.4.7, October 2017</small></p> <p>One recurring theme of Better TweetDeck was that I wasn't very good at versioning, since, in hindsight these "patch" versions deserved to be more than that. After all, they brought fan-favorite features, all of which were contributed by <a href="https://github.com/EntranceJew">EntranceJew</a>. I wish I came up with at least <em>one</em> of these myself!</p> <h4 id="collapsible-columns-and-clear-button-in-columns-header">Collapsible columns and "clear" button in columns' header</h4> <ol> <li><a href="https://github.com/eramdam/BetterTweetDeck/pull/208">Collapsible columns</a>. This was a good alternative to deleting a column, because sometimes you wanted to just "hide" a column temporarily, or just needed to clean up your view.</li> <li><a href="https://github.com/eramdam/BetterTweetDeck/pull/224">"Clear" button in the columns' header</a>. On its own, it was a small improvement, but I built on top of it to add more actions in that area later.</li> </ol> <figure data-type="video"> <video src="https://damien.zone/img/blog/btd-post-mortem2/btd-collapsible-columns.mp4" poster="https://damien.zone/img/blog/btd-post-mortem2/btd-collapsible-columns.jpg" playsinline controls></video> <figcaption> A demo of Better TweetDeck's collapsible columns in action. Enjoy the "retro" Chrome UI as a bonus. </figcaption> </figure> <h4 id="the-edit-button">The "Edit" button</h4> <p>Honestly EntranceJew's best idea and the one that had the most impact for Better TweetDeck users and <a href="https://blog.joinmastodon.org/2018/06/if-you-could-edit-tweets/">everyone</a> <a href="https://www.theverge.com/2023/2/14/23600047/tweetbot-creators-mastodon-ivory-edit-button">else</a>. It was more of a "re-draft" feature more than anything else since it copied your tweet's text and media, deleted it and re-opened the composer with everything pre-filled.<br /> I probably should have changed the button's label to "Re-draft", but then I wouldn't have ended up in a <a href="https://www.buzzfeednews.com/article/janelytvynenko/twitter-is-not-testing-an-edit-button">BuzzFeed</a> story so who can say!</p> <h3 id="the-gif-and-emoji-update">The GIF and emoji update</h3> <p><small>3.5, December 2017</small></p> <p>This time, I had properly versioned the version since it added two pretty "big" features:</p> <h4 id="emoji-short-codes-in-the-composer">Emoji short codes in the composer</h4> <p>A long-time request and one of my favorite features. If you've used Slack, Discord or Mastodon, you know what this does, otherwise, look at the video below!</p> <figure data-type="video"> <video src="https://damien.zone/img/blog/btd-post-mortem2/btd-emoji-shortcodes.mp4" poster="https://damien.zone/img/blog/btd-post-mortem2/btd-emoji-shortcodes.jpg" playsinline controls></video> <figcaption> A demo of the emoji autocompletion feature </figcaption> </figure> <h4 id="gif-picker">GIF picker</h4> <p>Another long requested feature. It was a bit of a mess to implement at the time but was well worth it. It also let me introduce a subtle but <a href="https://twitter.com/search?q=%40Bettertdeck%20jif&amp;src=typed_query&amp;f=live">effective April Fools' joke</a> in Better TweetDeck 😄</p> <figure data-type="video"> <video src="https://damien.zone/img/blog/btd-post-mortem2/btd-gif-picker.mp4" poster="https://damien.zone/img/blog/btd-post-mortem2/btd-gif-picker.jpg" playsinline controls></video> <figcaption> A demo of the emoji autocompletion feature </figcaption> </figure> <h3 id="advanced-mute-engines-debut-and-the-old-dark-theme">Advanced Mute Engine's debut and the old dark theme.</h3> <p><small>3.6, February 2018</small></p> <p>Another big update with external contributions! This time, <a href="https://github.com/pixeldesu">pixeldesu</a> cooked up a feature that ended up being the backbone of many useful additions later on: the "Advanced Mute Engine". Without going into the technical details, it was a system running on top of TweetDeck's mute engine.<br /> This may sound weird nowadays, but TweetDeck had mute capabilities way before the rest of Twitter did! TweetDeck's system running entirely client-side (in a user's browser) meant that Better TweetDeck could plug into it to add extra functionality. In this first update you could:</p> <ul> <li>Mute tweets by keywords from a specific user</li> <li>Mute with regular expressions</li> <li>Mute people based on keywords in their bio</li> <li>Mute users with the default profile picture</li> <li>Mute users with less than <em>n</em> followers</li> </ul> <p>Those options showed up as options in the "Mute" tab of TweetDeck's settings:</p> <p></p><figure data-type="image"><a href="/img/blog/btd-post-mortem2/btd-advanced-mute.png"><img src="https://damien.zone/img/blog/btd-post-mortem2/btd-advanced-mute.png" alt="Better TweetDeck's Advanced Mute Engine additions" loading="lazy" decoding="async" width="auto" height="auto" /></a><figcaption>Better TweetDeck's Advanced Mute Engine additions</figcaption></figure><p></p> <p>Over time, pixeldesu and I ended up adding more specific/"niche" muting options to that menu.</p> <p>However, this release also happened at the same time that Twitter switched TweetDeck's dark "gray" theme to a more blueish dark theme palette. I personally didn't mind much, but <em>a lot</em> of people cared and preferred the old way things looked, so I pretty much embedded a copy of TweetDeck's old CSS file in Better TweetDeck to support that. It worked but was kind of a messy solution to a problem that —I imagine^{<a href="#user-content-fn-11" id="user-content-fnref-11" data-footnote-ref aria-describedby="footnote-label">7</a>}— only a fraction of my user base had 🙃</p> <h3 id="custom-css">Custom CSS</h3> <p><small>3.7, May 2018</small></p> <p>3.7.0 was a smaller update but saw support for another long-requested feature: Custom CSS! I avoided implementing this for a long time because extensions like <a href="https://add0n.com/stylus.html">Stylus</a> do the job better, but I guess not everybody wanted to install a whole other extension <em>just</em> to apply a few CSS tweaks.</p> <p>So I added that feature in, and took this as an opportunity to play around with <a href="https://microsoft.github.io/monaco-editor/">Monaco</a>, the code editor that powers <a href="https://code.visualstudio.com/">Visual Studio Code</a>.<br /> Users were also sharing <a href="https://github.com/eramdam/BetterTweetDeck/issues/546">their own personal tweaks</a> to TweetDeck's UI as well, which is always neat to see.</p> <h3 id="putting-a-one-face-behind-tweetdeck">Putting a (one) face behind TweetDeck</h3> <p><small>August 2018</small></p> <p>2018 wasn't a quiet year for me (more on that later), but one of the highlights was being able to finally put a (at least one) face behind TweetDeck! You see, in 2018, Twitter held a company-wide event called "#OneTeam", where most (all?) the teams would meet up at HQ in San Francisco. That's when I got to meet <a href="https://twitter.com/andrs">Andreas</a> who was TweetDeck's Tech Lead at the time.</p> <p>It has been 5 years, so I obviously don't remember every detail from our conversation, but I got the same feeling I had from my other interactions with him and other members of the TweetDeck team prior: it is was a small but mighty team who cared about their work and was very much aware of what I was doing with Better TweetDeck.<br /> It was all pie-in-the-sky thinking but I remember Andreas imagining an "add-ons" system that third parties (like me) could take advantage of to add functionality to TweetDeck. At this point I wasn't the only project extending TweetDeck anymore. <a href="https://github.com/dangeredwolf/ModernDeck">ModernDeck</a>, <a href="https://tweetduck.chylex.com/">TweetDuck</a>, <a href="https://tweetenapp.com/">Tweeten</a>, among others, were filling specific niches with different ideas for the app. It was an interesting time to build on top of TweetDeck!</p> <p>Those good relations and interactions were also the reason why I refrained from publicly venting/berating the TweetDeck team on behalf of Better TweetDeck. The team was small and, at this point, I knew a couple of people there, so, if I talked shit, they <em>would</em> know.</p> <h3 id="cleaning-up-and-adopting-typescript">Cleaning up and adopting TypeScript</h3> <p><small>4.0, April 2021</small></p> <p>2018 was a very busy (and stressful) year for me at work, since it was the year we decided to rewrite our entire frontend, switching from <a href="https://angularjs.org/">AngularJS</a> to <a href="https://react.dev/">React</a>. I won't go into the details of that transition in this post but, if you take a quick look at <a href="https://front.com">Front</a>'s website, you can imagine how big the effort was. However, despite the hardships and the large amount of work, I learned a lot about React (even though I had already used it in a previous project that served as a "proof of concept") and, more importantly, <a href="https://www.typescriptlang.org/">TypeScript</a>.</p> <p>As soon as the migration work was close to being done, I knew I wanted to rewrite Better TweetDeck in TypeScript. The advantages, safety and creature comforts it brought were 100% worth the learning curve, so I knew it would be a good fit for Better TweetDeck as well. I think I can't see myself writing any sizeable app without it. The safety and peace of mind it brings are just too good to pass up. When you've made a massive refactor with only its compiler running, and <em>nothing</em> breaks when you launch the app for the first time after days of work, it feels like magic.</p> <p>However, Better TweetDeck had become a bigger project than it was when I first rewrote it from 1.0 to 2.0, years earlier, which meant that a rewrite was no easy task!<br /> Or, now that I think about: no, rewriting the code itself was the easy part. Knowing <em>how</em>, <em>what</em> to change and <em>why</em> in a rewrite was the hard part. For a while I couldn't reach that point. I would always rewrite some core parts of Better TweetDeck's codebase, but it brought little to no benefits, so I would be spinning my wheels.</p> <p>The timeline is a bit hazy in my head, but I suppose things must have clicked in place around the end of 2020, since I ended up releasing 4.0.0 in April 2021.<br /> At any rate, 4.0.0 came with a <a href="https://github.com/eramdam/BetterTweetDeck/releases/tag/4.0.0"><em>bunch</em> of features</a> on top of the technical changes that made it faster and easier to maintain.</p> <p>I don't want to say the project's codebase was perfect because, looking back, there are things I wish I did differently, or that I probably shouldn't have done myself, but I was pretty happy with the results!</p> <h3 id="getting-silly-with-it">Getting silly with it</h3> <p><small>4.2.0, June 2021</small></p> <p>The switch to a TypeScript codebase really paid dividends, as it meant I could add features more easily and have fun with it. One of those features was the customization of the "logo" in the bottom left of TweetDeck's UI!</p> <p>This started with the fact that TweetDeck, for a few years prior that, had been replacing the <a href="/img/blog/btd-post-mortem2/tweetdeck-logo96.png">regular logo</a> with a <a href="/img/blog/btd-post-mortem2/tweetdeck-pride.2019.svg">Pride-themed variant</a> during <a href="https://en.wikipedia.org/wiki/Pride_in_London?useskin=vector">London Pride</a> in July. If you're wondering why London Pride in July and not June with Pride month like the US, that is because (most of) the TweetDeck team was based in London!</p> <p>Anyway, I thought it would be fun to riff on that and offer multiple variants in Better TweetDeck. It would only be visible to the user themselves, of course, but people liked it a lot, which made it worth it. It also made the weirdest, most annoying people mad, which is very funny.</p> <p></p><figure data-type="image"><a href="/img/blog/btd-post-mortem2/btd-pride-settings.png"><img src="https://damien.zone/img/blog/btd-post-mortem2/btd-pride-settings.png" alt="The list of different logos that the user could choose from in Better TweetDeck 4.2.0" loading="lazy" decoding="async" width="auto" height="auto" /></a><figcaption>The list of different logos that the user could choose from in Better TweetDeck 4.2.0</figcaption></figure><p></p> <h3 id="tweetdeck-beta">TweetDeck Beta</h3> <p><small>July 2021</small></p> <p>What is now sold behind a paywall as "XPro", used to be called <a href="https://www.theverge.com/2021/7/20/22585249/tweetdeck-redesign-twitter-column-deck">TweetDeck Beta</a>; the existence of which was <a href="https://www.theverge.com/2021/3/9/22321991/twitter-tweetdeck-overhaul-redesign-product-changes">hinted at</a> for quite a while before Twitter started making it available in July 2021. After being able to <a href="https://twitter.com/Eramdam/status/1417505836662853633">get in</a>, I got rolled in in order to try it in a more "official" manner. As mentioned before, the TweetDeck team knew I'd be curious to check it out and was actually curious to hear my thoughts! I had... a <a href="https://twitter.com/Eramdam/status/1417507455907426304">lot of them</a>. And in a funny way, most of them are still valid, because it has barely evolved since then!</p> <p>From July until the end of 2021, I was in communication with the TweetDeck team about:</p> <ul> <li>what I thought of the Beta itself. I still think it was promising and it could have been a worthy replacement if the team had been given time and resources to make it good, which didn't happen.</li> <li>what the Beta needed to be "competitive" with current TweetDeck. True multi-accounts was a must, at the very least. This wouldn't come until the middle of 2023, long after Elon Musk fired most of the TweetDeck team, leaving it down to a skeleton crew.</li> </ul> <p>During those conversations, I got the impression that the team really wanted to deliver their best work with this Beta. They seemed aware of what needed to improve to satisfy the userbase at the time. I was still on the fence about whether or not Better TweetDeck would try to support this Beta, should it become the main TweetDeck experience, and they even expressed the wish of making it easier for me to extend it later down the line! I was inclined to believe them, because it was consistent with the attitude I had seen towards Better TweetDeck from other team members in the past.</p> <p>It wouldn't be the last time I'd hear about TweetDeck Beta, but I'll touch on that later.</p> <h3 id="content-warnings-and-pronouns">Content warnings and pronouns</h3> <p><small>July - November 2021</small></p> <p>In a completely detached vein from the one Twitter would eventually follow, I added two of my (still) favorite features to Better TweetDeck.</p> <p>The first one being <a href="https://github.com/eramdam/BetterTweetDeck/pull/483">content warning detection</a>. It was another great idea by <a href="https://github.com/pixeldesu">pixeldesu</a> who contributed the basic idea/implementation, which I then ported over the v4 codebase. I would have merged it wholesale but it took me so long to work on v4 that his PR was impossible to merge quickly 😅<br /> If you are unaware, it was a workaround to the fact that Twitter still doesn't have any good way of marking the content of a tweet as sensitive, which led people to using a syntax like "cw // phobia" to indicate sensitive content. This PR interpreted the syntax and presented a Mastodon-like UI to toggle the display of the content in question, pretty good stuff!</p> <p></p><figure data-type="image"><a href="/img/blog/btd-post-mortem2/btd-content-warnings.png"><img src="https://damien.zone/img/blog/btd-post-mortem2/btd-content-warnings.png" alt="Screenshot showing the Content Warning detection in practice at an earlier stage of development" loading="lazy" decoding="async" width="auto" height="auto" /></a><figcaption>Screenshot showing the Content Warning detection in practice at an earlier stage of development</figcaption></figure><p></p> <p>The second one was <a href="https://twitter.com/BetterTDeck/status/1455252017996201984">pronoun extraction</a> (sic), which, like the name implies, grabbed pronouns from users' bio and location fields and displayed them above their tweets. It's the kind of feature whose <a href="https://github.com/eramdam/BetterTweetDeck/blob/main/src/features/pronounsDisplay.ts">implementation</a> is more complex than one may think but which looks very simple when used.</p> <p></p><figure data-type="image"><a href="/img/blog/btd-post-mortem2/btd-pronouns-display.png"><img src="https://damien.zone/img/blog/btd-post-mortem2/btd-pronouns-display.png" alt="Screenshot showing the pronouns display in practice" loading="lazy" decoding="async" width="auto" height="auto" /></a><figcaption>Screenshot showing the pronouns display in practice</figcaption></figure><p></p> <p>It's also another feature that I <em>knew</em> the TweetDeck/Twitter folks were aware of, because one engineer there told me they saw it, and Twitter ended up testing an <a href="https://twitter.com/uwukko/status/1515618844244590592">actual pronouns field</a> later on! But alas, I doubt this will ever materialize under Twitter's current administration.</p> <h3 id="no-fucking-thanks">No Fucking Thanks</h3> <p><small>November 2021</small></p> <p>2021 also saw the rise of cryptocurrencies and other blockchain bullshit. Despite the technology itself being pretty old at this point (Bitcoin was picking up steam when I was still a student in 2013, for crying out loud!), <a href="https://en.wikipedia.org/wiki/Non-fungible_token?useskin=vector">NFTs</a> were seemingly everywhere and poised to revolutionize everything that had to do with computers 🙄</p> <p>Thankfully, the whole crypto space is now recognized for the joke and fraud that it is but, back then, Twitter felt the need to jump onto the craze and <a href="https://twitter.com/TheSmarmyBum/status/1443259893411049475">allow users to use their NFTs as avatars</a>. I allowed Better TweetDeck users to mute those accounts as soon as <a href="https://twitter.com/BetterTDeck/status/1465505226044018700">technically possible</a>.</p> <p>Unsurprisingly, crypto people —who had otherwise never heard of me or my projects— took it upon themselves to decide I was enemy #1, and deemed it worthy of their time to harass me for implementing a silly little switch in my dinky little extension. Go figure 🤷‍♂️</p> <p>Sure, I could have been more diplomatic about the whole thing (I did kick the hornet's nest pretty hard on my first iteration of the feature), but it's still funny to me that a crowd who supposedly were pioneering a "new age of computing and finance" felt threatened by an open-source project with maybe 50,000 users tops.</p> <p>Clown stuff. Anyway, the harassment fortunately didn't last very long and was curbed pretty quickly thanks to <a href="https://www.blockpartyapp.com/">BlockParty</a>. And as I'm writing this, <a href="https://web3isgoinggreat.com/?id=twitter-removes-nft-profile-picture-support">Twitter dropped the feature entirely</a>, good riddance.</p> <p>Later on, I would add a UI that let users see what users the mute filters they set up "caught". A lot of folks wanted me to implement an auto-blocking mechanism, but I didn't want to work around Twitter's very strict rate limits around blocking, and also wanted to be able to sleep at night knowing I didn't ship a bug that made my code block a whole bunch of people by mistake. So this "mute catching" thing was the best compromise IMO since it would let people export the list of users to a format that tools like BlockParty could use to mass-block accounts.</p> <p></p><figure data-type="image"><a href="https://user-images.githubusercontent.com/1409924/147862067-416852b7-2f1c-483a-bbed-389972881765.png"><img src="https://user-images.githubusercontent.com/1409924/147862067-416852b7-2f1c-483a-bbed-389972881765.png" alt="Screenshot of the mute catches modal in Better TweetDeck 4.7.0" loading="lazy" decoding="async" width="auto" height="auto" /></a><figcaption>Screenshot of the mute catches modal in Better TweetDeck 4.7.0</figcaption></figure><p></p> <h3 id="dawn-of-the-final-year">Dawn of the Final Year</h3> <p><small>Most of 2022</small></p> <p>2022 was a lot. It was kind of overwhelming on a personal level due to uninteresting reasons (Immigration is fun and definitely not anxiety-inducing!) but as you may know if you used Twitter then, that was also the start of Elon's deranged arc that ended with him buying the company and killing it.</p> <p>Anyway, the first half of the year was pretty quiet on the Better TweetDeck side. I had started experimenting with making my own web-based Twitter client, obviously inspired by TweetDeck. The reasoning was that I understood pretty quickly that TweetDeck Beta would make Better TweetDeck impossible to use, so I preferred spending energy on creating something from scratch. It didn't really go anywhere because:</p> <ul> <li>Twitter's API was already in a bad enough shape that it would've been impossible to get to a satisfying point feature-wise.</li> <li>I also made things harder for myself by wanting to support Twitter <strong>and</strong> Mastodon.</li> <li>Making a whole-ass TweetDeck-like web app takes work! Who knew!</li> </ul> <p>At the very least, it was a good distraction amidst the <a href="https://twitter.com/MacRumors/status/1518664496138518528">madness</a>.</p> <p>The rest of 2022 was pretty uneventful on Better TweetDeck's side, until...</p> <h3 id="the-beginning-of-the-end">The beginning of the end</h3> <p><small>September - November 2022</small></p> <p>In early September 2022, I made peace with the fact that Better TweetDeck in its current form was going to die as soon as TweetDeck Beta dropped. I <a href="https://github.com/eramdam/BetterTweetDeck/issues/848">posted about it</a> and decided Better TweetDeck was in a "feature freeze" mode, where I would only fix the most pressing bugs until the very end.</p> <p>There was still uncertainty around whether or not Musk would end up buying Twitter. Alas it happened in November. With it came the first of many stupid changes, which was offering "verification" for an 8$/month subscription.</p> <p>This was a very silly decision, so I decided to make fun of it in what would be the last major feature update for Better TweetDeck.</p> <p></p><figure data-type="image"><a href="https://user-images.githubusercontent.com/1409924/201475115-71e23d45-63e7-416d-a993-ee5ec22aba1b.png"><img src="https://user-images.githubusercontent.com/1409924/201475115-71e23d45-63e7-416d-a993-ee5ec22aba1b.png" alt="Setting to change the checkmark icon for &quot;Blue verified&quot; users" loading="lazy" decoding="async" width="auto" height="auto" /></a><figcaption>Setting to change the checkmark icon for "Blue verified" users</figcaption></figure><p></p> <p>Unsurprisingly, this made some of the most boring people on Earth (those who want to pay 8 bucks to feel important online) very upset, so it was well worth it.</p> <h3 id="slow-death">Slow Death</h3> <p><small>2023</small></p> <p>And that brings us to the end of Better TweetDeck. Like I said above, Elon Musk took over, fired a bunch of Twitter's workforce, and killed third party clients, convincing me it wasn't worth my time to build on top of Twitter's service.</p> <p>The rest of the year was a mess as far as Twitter goes, but TweetDeck stayed, inexplicably, unaffected. Until July of 2023 when Twitter first <a href="https://www.theverge.com/2023/7/3/23782585/tweetdeck-broken-twitter-rate-limits-scraping-elon-musk">killed it by mistake</a> and then <a href="https://www.theverge.com/2023/7/3/23783092/twitter-tweetdeck-new-preview-force-legacy-apis">announced</a> the new version would be locked behind Twitter Blue, announcing that, 30 days later, TweetDeck Beta would be the <strong>only</strong> TweetDeck and would require a Twitter Blue subscription.</p> <p>In early August, after their stupid rebranding to X, <a href="https://www.theverge.com/2023/8/15/23833707/tweetdeck-xpro-paid-service-x-premium-twitter">Twitter would rename TweetDeck to XPro and force the new UI onto everyone willing to pay for a subscription</a>, killing Better TweetDeck for good.</p> <h2 id="parting-words">Parting words</h2> <p>And here we are, back to the present day (pretend this blog post didn't take me 5 months to write). If it weren't for all of this, Better TweetDeck would be ten years old at the end of January.<br /> It is completely mind-blowing to me that I spent that long working on, caring about and sharing this project with people!</p> <p>While I was the main contributor for a while, all of this wouldn't have been possible without the contributions of a lot people!</p> <ul> <li> <p><a href="https://synthetic.garden/">twilight sparkle</a> who wrote <a href="https://gist.github.com/twilight-sparkle-irl/cb63762000e606e50690911cac1bcead"><code>webcrack</code></a>, which allowed to modify TweetDeck's modules at runtime. Without that work, most of Better TweetDeck's most interesting features wouldn't have been possible at all.</p> </li> <li> <p><a href="https://github.com/pixeldesu">pixeldesu</a>, for helping, supporting and contributing some critical features, as well as creating and maintaining <a href="https://github.com/pixeldesu/moduleRaid">moduleRaid</a>, a successor to the aforementioned <code>webcrack</code>. moduleRaid was invaluable when digging through TweetDeck's code and made a lot of recent features possible. Andy also created <a href="https://github.com/deckhack">DeckHack</a> which was a small group of TweetDeck-focused developers where we'd discuss how to break mess around with TweetDeck.</p> </li> <li> <p><a href="https://github.com/dangeredwolf/">dangered wolf</a> for their work on <a href="https://github.com/DeckHack/TweetDeck-Decompiler">TweetDeck-Decompiler</a>. As the name implies, this let me quickly inspect TweetDeck's JavaScript code and figure out where to poke to do what I wanted to 😄</p> </li> <li> <p><a href="https://github.com/eramdam/BetterTweetDeck/commits?author=EntranceJew">EntranceJew</a> for the "edit" button feature and a whole lot more 🙏</p> </li> <li> <p><a href="https://github.com/eramdam/BetterTweetDeck/commits?author=shuuji3">shuuji3</a> for their help localizing Better TweetDeck into Japanese and early thumbnail provider support for Gyazo, Niceoseiga, TINAMI, WorldCosplay, Photozou, twipple and Pixiv.</p> </li> <li> <p><a href="https://github.com/apps/dependabot">dependabot</a>, for the pesky dependency upgrade reminders 😪</p> </li> <li> <p><a href="https://twitter.com/luciascarlet/status/1590462560515473409">lucia scarlet</a> for the "nerd emoji" badge.</p> </li> <li> <p><a href="https://twitter.com/JoshQuake/status/1590634793393614849">JoshQuake</a> for the clown badge.</p> </li> <li> <p>As well as the following people for smaller contributions to the codebase <a href="https://github.com/eramdam/BetterTweetDeck/commits?author=LeoColomb">LeoColomb</a>, <a href="https://github.com/eramdam/BetterTweetDeck/commits?author=hiroto7">hiroto7</a>, <a href="https://github.com/eramdam/BetterTweetDeck/commits?author=emadgh">emadgh</a>, <a href="https://github.com/eramdam/BetterTweetDeck/commits?author=outadoc">outadoc</a>, <a href="https://github.com/eramdam/BetterTweetDeck/commits?author=noriokun4649">noriokun4649</a>, <a href="https://github.com/eramdam/BetterTweetDeck/commits?author=chylex">chylex</a>, <a href="https://github.com/eramdam/BetterTweetDeck/commits?author=Sophia2329">Sophia2329</a>, <a href="https://github.com/eramdam/BetterTweetDeck/commits?author=d4rky-pl">d4rky-pl</a>, <a href="https://github.com/eramdam/BetterTweetDeck/commits?author=miestasmia">miestasmia</a>, <a href="https://github.com/eramdam/BetterTweetDeck/commits?author=knu">knu</a>, <a href="https://github.com/eramdam/BetterTweetDeck/commits?author=viki53">viki53</a>, <a href="https://github.com/eramdam/BetterTweetDeck/commits?author=katabame">katabame</a>, <a href="https://github.com/eramdam/BetterTweetDeck/commits?author=ngdio">ngdio</a>, <a href="https://github.com/eramdam/BetterTweetDeck/commits?author=Floppy012">Floppy012</a>, <a href="https://github.com/eramdam/BetterTweetDeck/commits?author=mika-f">mika-f</a>, <a href="https://github.com/eramdam/BetterTweetDeck/commits?author=zenmaibane">zenmaibane</a>, <a href="https://github.com/eramdam/BetterTweetDeck/commits?author=resir014">resir014</a>, <a href="https://github.com/eramdam/BetterTweetDeck/commits?author=babolivier">babolivier</a>, <a href="https://github.com/eramdam/BetterTweetDeck/commits?author=Jaid">Jaid</a>, <a href="https://github.com/eramdam/BetterTweetDeck/commits?author=Lycolia">Lycolia</a>, <a href="https://github.com/eramdam/BetterTweetDeck/commits?author=yaa">yaa</a>, <a href="https://github.com/eramdam/BetterTweetDeck/commits?author=CommanderRoot">CommanderRoot</a>, <a href="https://github.com/eramdam/BetterTweetDeck/commits?author=nullpixel">nullpixel</a>, <a href="https://github.com/eramdam/BetterTweetDeck/commits?author=Vogeslu">Vogeslu</a> and <a href="https://github.com/eramdam/BetterTweetDeck/commits?author=izzy">izzy</a>.</p> </li> </ul> <p>But also... you! This isn't just me being corny. For the longest time, Better TweetDeck had no real "marketing" and the most it got was banners in the Chrome Web Store. So, if you used Better TweetDeck and spread the word about it in any capacity, <strong>thank you</strong>! None of this would have been possible without you and I'm grateful for it ❤️</p> <p>I want to try to keep using this blog more regularly, so feel free to add it to your RSS reader (remember those?) or <a href="/links">find me online</a> to know when I post something!</p> <p>So long, and thanks for all the fish! 🐬</p> <section data-footnotes class="footnotes"><h2 class="sr-only" id="footnote-label">Footnotes</h2> <ol> <li id="user-content-fn-3"> <p>They will probably recognize themselves if they're reading this 😄 <a href="#user-content-fnref-3" data-footnote-backref aria-label="Back to reference 1" class="data-footnote-backref">↩</a></p> </li> <li id="user-content-fn-6"> <p>Typing this out is very funny when you think about the fact there are around 3,500 emoji now! <a href="#user-content-fnref-6" data-footnote-backref aria-label="Back to reference 2" class="data-footnote-backref">↩</a></p> </li> <li id="user-content-fn-7"> <p>Here's a <a href="/btd/btd-graph">link</a> to a chart showing that data. Surely there's a way to present it in a nicer way, but I don't know how 😅 <a href="#user-content-fnref-7" data-footnote-backref aria-label="Back to reference 3" class="data-footnote-backref">↩</a></p> </li> <li id="user-content-fn-8"> <p>Despite being fresh out of university at the time, I had already worked on a few freelance projects, as well as a project you <a href="https://dribbble.com/shots/176127-VLC-for-OS-X-Lion-style">may</a> <a href="https://dribbble.com/shots/196481-VLC-QuickTime-X-Like">know</a> <a href="https://dribbble.com/shots/1734291-VLC-on-Yosemite-dark-mode-and-sidebar-icons">about</a>. <a href="#user-content-fnref-8" data-footnote-backref aria-label="Back to reference 4" class="data-footnote-backref">↩</a></p> </li> <li id="user-content-fn-9"> <p>At least that's what I can remember from the few emails I sent them back then, I lost the emails they sent <em>me</em>, so I don't remember the details. <a href="#user-content-fnref-9" data-footnote-backref aria-label="Back to reference 5" class="data-footnote-backref">↩</a></p> </li> <li id="user-content-fn-10"> <p>Not that I really wanted it to. I always wanted to keep BTD free of charge and free of ads or anything. <a href="#user-content-fnref-10" data-footnote-backref aria-label="Back to reference 6" class="data-footnote-backref">↩</a></p> </li> <li id="user-content-fn-11"> <p>Analytics/telemetry would have been really useful during that time, but I never set that up by pure laziness. <a href="#user-content-fnref-11" data-footnote-backref aria-label="Back to reference 7" class="data-footnote-backref">↩</a></p> </li> </ol> </section> <a href="https://damien.zone/bettertweetdeck-post-mortem-part-2">Permalink / Comments</a> https://damien.zone/bettertweetdeck-post-mortem-part-1-faq 2023-07-12T07:00:00Z 2024-09-22T01:42:24Z Damien Erambert <p>Welp, here we are. As I write this, it seems TweetDeck is heading toward the paywall^{<a href="#user-content-fn-1" id="user-content-fnref-1" data-footnote-ref aria-describedby="footnote-label">1</a>}, so I decided to <a href="https://better.tw/">discontinue Better TweetDeck</a>.</p> <p>If you've been using it, I'm sure you have many questions on your mind. Some of which I've answered in the past already on my various accounts, but I feel they deserve to be all answered in the same place.</p> <h3 id="cant-you-support-the-new-tweetdeck">Can't you support the new TweetDeck?</h3> <p>Yes and no. I looked into supporting the new TweetDeck back in 2022 and found that the way it was built makes it very hard to build on top of it (more on that later). It's not impossible, of course, and maybe someone else would figure it out, but after spending 8 (at this point) years working on Better TweetDeck, I didn't want to start from scratch on top of a completely new base.</p> <p>That's also when I started entertaining the idea of making my own 3rd party web client for Twitter (and possibly Mastodon), which I believe could have been interesting. But then Elon Musk acquired Twitter and <a href="https://www.theverge.com/2023/3/30/23662832/twitter-api-tiers-free-bot-novelty-accounts-basic-enterprice-monthly-price">jacked up the API pricing</a>, which killed that idea in the nub 😬</p> <h4 id="but-why-cant-you-support-it">But <em>why</em> can't you support it?</h4> <p>This part is going to be kind of technical, so buckle up!</p> <p>If you ever used it, you probably noticed that New TweetDeck looks and feels <strong>a lot</strong> like Twitter Web. It isn't a coincidence. That is because, on a technical level, it IS Twitter Web But With Columns. From Twitter's point of view, this is a net positive because it means that features added to Twitter Web are easily ported to TweetDeck. For Better TweetDeck? Not so much. Like I said above, it would mean throwing everything I wrote and start again, which frankly is kind of depressing to think about.</p> <p>But even if I had the motivation, this is easier said than done^{<a href="#user-content-fn-2" id="user-content-fnref-2" data-footnote-ref aria-describedby="footnote-label">2</a>}. Let's look at why in details by inspecting their tech stack^{<a href="#user-content-fn-3" id="user-content-fnref-3" data-footnote-ref aria-describedby="footnote-label">3</a>}:</p> <ul> <li><a href="https://redux.js.org/">Redux</a> is used for state/data management. This is pretty common in big JS apps. Redux's state is fairly "easy" to look and poke at, but messing with data only gets you so far, unfortunately.</li> <li><a href="https://react.dev/">React</a> (UI framework) in conjunction with <a href="https://necolas.github.io/react-native-web/">react-native-web</a>^{<a href="#user-content-fn-4" id="user-content-fnref-4" data-footnote-ref aria-describedby="footnote-label">4</a>} make it very hard to mod anything in a reliable way because the component tree of the app is just a bunch of generic "views" that are indistinguishable from each other and they're all styled with machine-generated CSS classes that change depending on the underlying styles applied. All of this means that any UI or CSS mod is hard to make and maintain. Some projects like <a href="https://github.com/insin/control-panel-for-twitter">Control Panel for Twitter</a> do it, but I frankly don't have it in me to do that.</li> </ul> <p>That's for the technical side. The obvious elephant in the room is the upcoming paywall behind TweetDeck. When working on Better TweetDeck (or any side-project for that matter) I want to make sure that keeping it around/using it does <em>not</em> cost me money. Having to pay 8$ for Twitter Blue to use TweetDeck goes against that. Even if Elon Musk didn't buy Twitter, a lot of people would be reticent in doing that, so I would see Better TweetDeck's userbase shrink, which sucks.</p> <h3 id="okay-then-what-about-supporting-mastodonthreadsbluesky">Okay then, what about supporting Mastodon/Threads/Bluesky?</h3> <p>Oh boy. That one is a doozy so let's take it one at a time, shall we?</p> <h4 id="mastodon">Mastodon</h4> <p>I've been using Mastodon since April 2017. I shortly contributed to the project^{<a href="#user-content-fn-5" id="user-content-fnref-5" data-footnote-ref aria-describedby="footnote-label">5</a>} and helped moderate the main <a href="https://mastodon.social">mastodon.social</a> instance for a short while so I'm <em>a bit</em> familiar with it. While I like the project and the network despite its issues... the Web interface uses a similar stack as Twitter Web (not exactly the same, mind you), meaning building a "Better Mastodon" would also require a lot of work, maintenance AND also juggling with different instances which may or may not run forks/modifications of the software. So this is a no-go.</p> <p>But maybe I could make my own client? Maybe! This is also a lot of work and I haven't had the time/motivation to start such a project. The recent <a href="https://nolanlawson.com/2023/01/09/retiring-pinafore/">retirement of Pinafore</a> frankly discouraged me. Maintaining Better TweetDeck was already a lot of work, but a whole Mastodon client is something else entirely. Not worth it for me to do it at this time. Besides, the <a href="https://joinmastodon.org/apps">app ecosystem</a> of Mastodon is going very well and isn't going anywhere anytime soon because, unlike Twitter, Mastodon isn't headed by a billionaire who wants to make a quick buck on the back of developers^{<a href="#user-content-fn-6" id="user-content-fnref-6" data-footnote-ref aria-describedby="footnote-label">6</a>}.</p> <p>So at the time of writing this (July 2023), doing anything substantial with Mastodon is out of the question. I do have a smaller project called <a href="https://tokimeki-mastodon.vercel.app/">Tokimeki Mastodon</a> which is a clone of <a href="https://tokimeki-unfollow.glitch.me/">Tokimeki Unfollow</a> which lets you clean up your followings list, in case you're interested!</p> <h4 id="bluesky">Bluesky</h4> <p>Bluesky is...a lot, and not in a good way 🫠. The main web/mobile app is janky, the content moderation situation is <a href="https://techcrunch.com/2023/06/08/blueskys-growing-pains-strain-relationship-with-its-black-community-moderation/">embarassingly</a> <a href="https://techcrunch.com/2023/07/17/bluesky-racial-slurs-banned-list-usernames/">bad</a>, <a href="https://www.wikiwand.com/en/Bluesky_Social">Jack Dorsey</a> is still involved, the leadership has <a href="https://blueskyweb.xyz/blog/4-13-2023-moderation">questionable views on moderation</a>, it's frankly a mess. And it is still invite-only, so you can imagine how well things will be going when they open up/allow anyone to start an instance.</p> <p>The main web app is very similar to Twitter's in its tech stack, meaning that my only reasonable plan forward would be to either <a href="https://github.com/bluesky-social/social-app">contribute to the code</a> (which I'm not going to do. The project has millions of dollars in VC funding, I refuse to do free labor for them on principle) or <a href="https://atproto.com/docs">build my own web client</a>. The latter <em>would</em> be feasible, and others have done it already, but the aforementioned issues are too important for me to entertain the idea of doing anything with Bluesky.</p> <h4 id="threads">Threads</h4> <p>I am uninterested in Threads. Plain and simple. It is an Instagram/Facebook^{<a href="#user-content-fn-7" id="user-content-fnref-7" data-footnote-ref aria-describedby="footnote-label">7</a>} app, meaning it:</p> <ul> <li><a href="https://twitter.com/mehedih_/status/1676916689374420993">will have ads shoved in users' face</a></li> <li>doesn't have a chronological timeline, and everything Instagram did tells me they won't give a crap</li> <li>doesn't have any API to work on top of</li> <li>doesn't have and might never have a Web version</li> <li>already <a href="https://mashable.com/article/threads-hate-speech-disinformation">has a crappy moderation situation</a> and likely won't improve</li> <li>is owned by frigging Mark Zuckerberg. Come on! I hate Elon Musk and Jack Dorsey but I am <em>not</em> jumping on Zuckerberg's lap either, screw that.</li> </ul> <p>So anyway, no, I'm not building a "ThreadsDeck", "Better Threads" or anything, screw them.</p> <h3 id="is-there-a-future-where-the-project-would-be-revived-elon-leavingtweetdeck-becoming-free-againetc">Is there a future where the project would be revived? (Elon leaving/TweetDeck becoming free again/etc.)?</h3> <p>I honestly don't know? If Elon were to sell Twitter back and remove itself completely (which I doubt he will because his ego is in the way), or TweetDeck were to become free again...it wouldn't bring back the workers that <em>made</em> TweetDeck and allowed (and even encouraged!) Better TweetDeck to exist. Twitter is a shell of its former self and I think at this point it's healthier to accept that and let it go, unfortunately.</p> <h3 id="how-about-a-better-twitter-extension">How about a "Better Twitter" extension?</h3> <p>I have little interest in doing that, and to be honest <a href="https://github.com/insin/control-panel-for-twitter">Control Panel for Twitter</a> is already doing an amazing job in that department. I don't think I could do it better.</p> <h3 id="any-other-projects-youre-currently-working-on">Any other projects you’re currently working on?</h3> <p>Not really. As I'm writing this, my biggest project is finishing <a href="https://www.zelda.com/tears-of-the-kingdom/">Tears of the Kingdom</a> 😄</p> <h3 id="i-wanna-donate-to-thank-you-can-i-do-that">I wanna donate to thank you, can I do that?</h3> <p>Sure! That said... I'd rather you keep your money and give it to a friend in need, or a charity. I have a day job that pays well, I'm fine. That said if you really really want to do it, I have a <a href="https://paypal.me/Eramdam">Paypal</a> you can donate to.</p> <h2 id="conclusion">Conclusion</h2> <p>That's it! Thanks for reading, and see you later for the next part which will try to through Better TweetDeck's history and shout out the work of the folks that made the project special 😄</p> <section data-footnotes class="footnotes"><h2 class="sr-only" id="footnote-label">Footnotes</h2> <ol> <li id="user-content-fn-1"> <p>Who knows, by the time this post gets published, Twitter will reverse <a href="https://twitter.com/Support/status/1675990712297443330">their decision</a> because what happens there doesn't seem to make sense anymore. <a href="#user-content-fnref-1" data-footnote-backref aria-label="Back to reference 1" class="data-footnote-backref">↩</a></p> </li> <li id="user-content-fn-2"> <p>I'm sure someone, somewhere, will figure this out eventually but I frankly didn't have the will nor the energy to do it. The whole "management situation" at Twitter, in addition to the impending paywall killed the remains of motivation I had 😅 <a href="#user-content-fnref-2" data-footnote-backref aria-label="Back to reference 2" class="data-footnote-backref">↩</a></p> </li> <li id="user-content-fn-3"> <p>I'm not revealing some grand secrets or anything, all of this can be figured out by opening the DevTools in your favorite browser and knowing where to look. <a href="#user-content-fnref-3" data-footnote-backref aria-label="Back to reference 3" class="data-footnote-backref">↩</a></p> </li> <li id="user-content-fn-4"> <p>You may have heard of "React Native" as a thing that lets people write apps for iOS <em>and</em> Android with the same codebase. <code>react-native-web</code> allows to share code between an iOS/Android React Native app and its Web counterpart (it does a bit more but i'm simplifying here). <a href="#user-content-fnref-4" data-footnote-backref aria-label="Back to reference 4" class="data-footnote-backref">↩</a></p> </li> <li id="user-content-fn-5"> <p>Mostly in the form of French localization strings and very very tiny features. <a href="#user-content-fnref-5" data-footnote-backref aria-label="Back to reference 5" class="data-footnote-backref">↩</a></p> </li> <li id="user-content-fn-6"> <p>Please, <a href="https://en.wikipedia.org/wiki/Eugen_Rochko">Eugen</a>, don't make me regret saying this lol. <a href="#user-content-fnref-6" data-footnote-backref aria-label="Back to reference 6" class="data-footnote-backref">↩</a></p> </li> <li id="user-content-fn-7"> <p>I am not calling them Meta. Fuck this metaverse bullshit. <a href="#user-content-fnref-7" data-footnote-backref aria-label="Back to reference 7" class="data-footnote-backref">↩</a></p> </li> </ol> </section> <a href="https://damien.zone/bettertweetdeck-post-mortem-part-1-faq">Permalink / Comments</a>