I love the wave-like patterns that are generated by adding noise to the <canvas>. I played around with the different variables (rotation, frequency, amplitude, size, and the number of elements), and it made these wonderful works of art.
I’d love to be able to print some of these so that I could hang them up on my wall.
The Canvas and WebGL workshop that I’m taking right now is taught using macOS, so the course assumes that I can access some Unix tools and commands in the dev environment. Since Windows isn’t built on top of BSD or Linux, I have to do a bit more work to get up and running.
Windows Subsystem for Linux or WSL is the best way to get a Linux environment running on Windows. It’s a lightweight virtual machine that runs unmodified Linux binaries on top of Windows. It’s so fast that it doesn’t feel like I’m using a VM at all.
There are two versions of WSL, so I made sure to get WSL 2 because it’s 2-5x faster when it comes to IO operations like git clone and npm install—commands that I’ll often be using!
The Remote – WSL extension on VSCode forces all the commands to run in the Linux VM. It makes sure that I’m interacting with Linux all the time while I’m in VSCode. So even though the editor is running on Windows, programs like Git or Node are all running in Linux.
I’m a fan of good-looking terminals, and the built-in terminal on macOS is beautiful. It looks modern, and it supports tabs and theme customization. The built-in Command Prompt on Windows, on the other hand, looks quite ancient.
Fortunately, Windows Terminal is available in the Microsoft Store, and it supports tabs, vertical splitting, and even emojis. I don’t know why this isn’t included in the OS in the first place!
I’m learning how to draw randomized shapes using the Canvas API right now and love that I can create beautiful images by simply randomizing the xy-coordinates, the radius, and the color (nice-color-palettes is an excellent source of pleasing colors).
I can imagine this being useful for infographics, too. The color could represent a data point (like an app), the size could represent a property (like how often it tracked you or how much data it uses), and the xy-coordinates would be randomized in the image.
Now that I’m a full-time designer, most of my days are either spent planning projects in Asana or working on them on Figma. I hardly ever do any programming nowadays, and I miss the feeling of writing code and bringing websites to life.
I’ve been thinking about small programming projects that I could do in my spare time, and I recently ran into a creative coding course on Frontend Masters. I’ve spent a lot of time making websites and creating user interfaces, but I never thought about using programming to create art. The visual aspect of it is enticing, and I love the fact that it’s can be a creative outlet for me.
I’m early in the course, and right now, I’m going through the Canvas API. We’re on the topic of creating grids at the moment, and I’m excited about the idea of creating digital art that I can actually hang on the wall.
I’m enjoying it so far, and I’m thrilled to continue making art through code. I’ll make an effort to blog as I go through the course!
Repairability has become a big part of my decision making when I buy new devices these days. I don’t know much about electronics, but learning to make minor repairs on my iPhone, Android, and Roomba made me realize that I could easily give new life to old and hobbling tech. It felt good to keep something going, and I’m hoping that this will help save me money and reduce my e-waste in the long run. So, when it came time for me to find a new laptop, I wanted to make sure that there was a chance for me to at least swap out a few components if I needed to.Â
I’ve been a Mac user for many years now, so I thought it made sense for me to do some research on the latest MacBook Pro laptops first. I was hoping that the newest MacBooks would be just a little bit modular, but I wouldn’t be writing this if it did, would I?
I found out that the new MacBook Pros only scored an abysmal 1 out of 10 on iFixit’s reparability rating. I had a feeling because the MacBook that I have right now also scored a 1 out of 10! Apparently, they’ve all had terrible scores since 2012. They have everything soldered and glued together which meant that I wouldn’t even be able to upgrade the drive or RAM if I wanted to. It was clear that I was going to have to leave macOS if I’m adamant about getting a repairable laptop. (There are repairable Macs out there, but they’re desktops and not laptops. The Mac Mini scored a 6 out of 10, and the Mac Pro scored an amazing 9 out of 10! But even if I wanted a desktop, a Mac Mini is too underpowered for work, and the Mac Pro is almost too excessive.)
I wasn’t sure if I could even pull off moving to another OS. I knew that I wouldn’t be able to use Linux for work, but could I move to Windows? I didn’t have fond memories of Windows growing up. I remember spending a lot of my time on Windows XP defragging the hard drive and removing malware that I downloaded from LimeWire. (I learned that Dani California.mp3.exe wasn’t actually a song.)
I thought that the best way to know was to try it out. So, I committed to using Windows 10 on Bootcamp for a week to see if it was any good. I told myself that if it didn’t work out, I could just get a Mac like I always did.
After a week, I was surprised at how good Windows actually was. A lot of the things that I enjoy on the Mac are now on Windows like virtual desktops, Do-Not-Disturb mode, Spotlight-like search, a screenshot annotation tool, an emoji picker, and even a Unix environment! Past Me would have laughed at the ridiculous idea of Microsoft creating a Linux compatibility layer on Windows.
Most of the apps I use are fortunately cross platform. Figma Desktop, Krisp.ai, Arq, TiddlyWiki, VSCode, and Zoom all work the same way on Windows. For everything else, I had to do some work to find alternatives. Here’s where I moved to:
I’m sad that nothing really comes close to a Fantastical alternative on Windows. The built-in calendar is fine to manage both my personal and work calendars, but it’s missing a lot of the features that I use. It doesn’t have calendar groups/sets, and it doesn’t understand natural language. Typing in “Order chicken wings every Friday at 7pm” just won’t work on Windows.
I was convinced that Windows was good enough for my day-to-day work, so I went ahead and got a Dell XPS 17. Its slightly smaller counterpart got a 9 out of 10 on iFixit, and it’s got some good reviews online, too. I’ve been using it for a week now as I’m writing this, and I’m loving it.
I’ll still have my old MacBook Pro around to use from time to time (looking at you, Principle and Rotato), so I won’t be 100% on Windows. There’s also a lot to look forward to on the Apple side. They recently released their environmental progress report, and they talk about making it easy for people to repair their devices. I hope to one day see more repairable laptops from them.
During Hack Days last month, Robert and I thought it would be fun to make a Figma plugin that we could use while designing. We had many ideas, but we ended up settling on the idea of a plugin that fetches website metadata. We wanted a plugin that could fetch Open Graph information about a podcast, a song, or a news article, and we wanted to make it easy for people to import that data into Figma.
Since Figma only runs on web browsers (even though it’s written in C++!), the plugins have to behave like any other website. For us, this meant that the plugin we’d have to follow restrictions like the same-origin policy. It means that we can’t just fetch and scrape the website’s metadata from Figma since they likely won’t have the right CORS headers set.
For the Open Graph plugin to work, I had to set up an intermediary server that would scrape the website on behalf of the plugin. I’m not good at writing backend code, but I managed to write a simple server that was good enough for me to work with. You can find the server code on GitHub.
The server is far from done, and there are definitely many edge cases that I haven’t come across yet. What happens when a website blocks me? How long should I cache the page? What if there are no meta tags on the page? Are there any security implications for the Figma user?
There’s also the problem of actually running this server. I don’t think I’d want to run and maintain a VPS, so I’m thinking of exploring the possibility of converting it into serverless code. I’m thinking of looking into Cloudflare Workers soon.
I expected the UI for this plugin to have a fair amount of re-rendering, so I wanted to learn React before jumping into this project. Unfortunately, I couldn’t find the time to learn React, but I did find a wonderful templating library called lit-html. It was easy for me to understand, and it got me up and running immediately.
The plugin code is at the point where it can fetch data from the server and import images into the Figma document. It was a big win for me, especially since working with images is a bit complicated in Figma because of its architecture. I think the next step for me is to make this plugin more robust. What should it do when the server or network is down? Will this run on all major browsers? What kinds of errors will the plugin encounter? I have to address all of these before releasing this to everyone. You can find the code on GitHub, too.
It felt good to take a short break from design and do some frontend work. I’ve been feeling a bit rusty, but it was good to know that I can still write programs from time to time. I only got to work on it for a week, but hopefully, I can find the time to get this to the finish line.
I’ve been using TiddlyWiki for two months now, and I’m amazed at how versatile this piece of software is. Since it’s able to weave together all the disparate parts of my life, it’s become my go-to notebook for almost anything. I’ve become dependent on it for documenting and understanding my life.
But if TiddlyWiki is going to be my notebook for everything, I have to get it to work on my phone, too. I’ve been hesitant about it because I assumed that it would be a pain to work on WikiText without a keyboard, but it didn’t end up being as bad as I thought it would be. I also like that I get to look things up on my wiki while I’m away from my computer.
The first thing that I needed to do to get set up on my phone was to get an app called Quine. Even though TiddlyWiki is just an HTML file (there’s no server component here), saving can be a bit of a pain because browsers don’t allow websites to write directly into files. Quine is a modified browser specific for TiddlyWiki that lets you bypass that restriction.
Next, I needed to figure out how to sync the wiki between my computer and my phone. The simplest solution is to drop the wiki into a service like iCloud, Dropbox, or Resilio and call it a day. Any changes that I make on my phone would automatically sync with my computer and vise versa. If you’re thinking of doing this yourself, this might be good enough for you! Dropbox even lets you recover old versions of the file if you ever needed to revert back to them.
But I wanted more control over my backups. I want to have the freedom to tweak the code and try out new themes and plugins without worrying about breaking my wiki. I wanted version control. I wanted Git on my phone.
I didn’t know if it was even possible to use Git on iOS, but I did a quick search and found Working Copy. All I had to was to link my GitHub account and point it to the right repository. GitHub now offers unlimited private repos for free, so I’ve taken advantage of that for backing up my wiki. Working Copy downloads the repo to my phone, and it makes the files available to third-party apps like Quine.
While this is not as convenient as using Dropbox, it makes me feel more confident about my wiki’s integrity in the long run. I’m excited about this setup, and I hope I can keep this going in the years to come.
The other day I learned that there’s an archive of my very first homepage on the Wayback Machine!
I never thought I’d see this page again, and I don’t think 2006 me ever expected it to survive this long either. I just wish that it got to archive the Flickr photos, too. I was 15 at the time, and I was learning about Linux on a free shell account on anapnea.net. They happened to offer static web hosting as well, so I thought that it would be the coolest thing ever if I built my own homepage—especially since everyone else seemed to be on Friendster (the Myspace of Asia).
The auto-playing music is obnoxious and the multi-colored text is childish, but I was proud of this website. It was a way of showcasing my interests and I loved that I could do it outside the constraints of social media platforms. I learned how to use the command line, SSH into a server, and write some HTML to make this into a reality.
So I thought I could commemorate it by reviving it and giving it a proper place to live online.
I couldn’t find a clear way of downloading Wayback Machine archives, but I found this gem called Wayback Machine Downloader which did all of the work for me.
Most of the markup was generated by a tool called Nvu which was an open source clone of Adobe Dreamweaver. Back then I was big into open source software and I absolutely refused to use anything that’s proprietary. I also didn’t have the money to spend on software anyway.
But because the markup was automatically generated, things were smushed and hard to read. I thought I could at least clean it up before I uploaded the code to GitHub. Fortunately on VSCode you can easily fix it by pressing ⇧⌥F.
Wayback Machine wasn’t able to archive the Flickr photos that I embedded on the page so I had to swap them out with ones that I had taken recently. I hosted those on my Backblaze B2 bucket.
For hosting, I wanted the code to live on GitHub so the easiest way to host it was through GitHub Pages. I simply made a CNAME record on my DNS provider to point jagtalon.github.io to 2006.jagtalon.com. Done!
Fair warning that music might automatically play when you visit 2006.jagtalon.com. Embedded music was all the rage back then, so 15-year-old me thought he’d embed some MP3s in there, too.
I’m starting to love the process of journaling and note-taking on TiddlyWiki. Being able to weave my ideas, notes, and experiences together easily has been a bit of a game-changer for me. Who knew that a wiki would be so useful in my day-to-day life? The downside of using TiddlyWiki is that it’s not exactly what I wanted out of the box. I had to put in some effort and tinker to get it to work well for me because it felt like it was missing some of the features that I needed. Here are the plugins and tools that I’m currently using that make TiddlyWiki more of a joy to use:
1. Stroll. As I mentioned in “Hello, TiddlyWiki,” the cool thing about Stroll is that it adds bi-directional links to my documents. It means that if I make a “Nintendo” link in a document called “Animal Crossing,” “Animal Crossing” will end up creating a link back to “Nintendo,” too. This lets me see all the relationships between my documents. For example, it can tell me when I played Animal Crossing and the people that I played with on that day.
2. TiddlyDesktop. TiddlyWiki is a single HTML file that somehow has everything it needs inside of it. I’m not just talking about the JS and CSS—it has all my documents and images inside of it, too. There’s no database, there’s no server, and there’s no use of browser storage either. Each document that you make ends up being a part of the HTML itself. It’s a crazy yet brilliant way of creating a self-contained program. It pulls this off by being a quine. This means that TiddlyWiki’s source code and data can be viewed and modified within TiddlyWiki itself. However, the downside of being an HTML file is that you can’t write to the local filesystem directly. People have created different solutions for getting around this, but I think my favorite is TiddlyDesktop. It’s a specialized browser that makes saving wikis less awkward and more natural for people.
3. Whitespace Theme. The default theme that comes with TiddlyWiki is a bit too spartan for me, so finding a nicer coat of paint on an app that I use all day makes a difference. You can find a few more themes here.
4. Favorites. I have documents that I frequently go back to, and the Favorites plugin is perfect for pinning them on the side.
5. Project Manager. I’ve been using TiddlyWiki to track my article reading list, book reading list, and some of the ideas that I have for my blog, and the Project Manager plugin has been perfect for that.
I’m still learning as I go, but I’m pretty content with my current setup. The only thing that I’m anxious about is performance: since everything is in a single HTML file, are things going to get slower in a few months or years? In this video, the creator says that 100MB wikis are still fast, but I’m curious about the limits of large web apps. I guess we’ll find out!
I’ve used a lot of apps throughout my life to help me remember things, collect ideas, and generally make sense of the world. Most recently, I’ve been using:
But because the information is stored in a lot of different places, I find myself copy-pasting content between each of them. Whenever I call a friend, I’d find myself writing the same entry in both Day One and Monica. Whenever I’m doing some research, I’d find myself both bookmarking websites and pasting the same URLs in either Notion or Notes.
It often bothered me that I had duplicates of the same thing in different tools, but I assumed that it’s just how things are. Fast forward to last week when I heard about Roam from my coworker. I thought it was a tool for academics, and I didn’t understand how it would be useful for me. I did some more research on how other people use it, and it convinced me that this is the tool that I could use for all my journaling, note-taking, researching, and list-tracking needs!
I was excited, so I signed up for an invite. I waited for a couple days, but I grew impatient. Fortunately, my restlessness took me to an open-source alternative to Roam that’s been around for 15 years: TiddlyWiki. It’s a whole wiki in a single HTML file. There are no servers to set up, and there’s nothing to pay for either.
It isn’t quite like Roam, but I did find Stroll (formerly TiddlyBlink) through Ness Labs. It’s a version of TiddlyWiki that’s more Roam-like, and I think it suits me perfectly. It can be a bit clunky at times, but it gets the job done. Here are my current use cases:
Journaling is already built-in, and it’s central to the whole philosophy of Roam and Stroll. Each date is a journal entry, and you sort of branch off of that to link to other pages. For example, I can write about making sautĂ©ed sardines in the morning and then link that to a [[SautĂ©ed Sardines]] article which can house the recipe itself or a link to it.
My journal entries eventually end up having people in them, so I’ve found that it’s also an easy way to build a list of people that I care about. I simply put people’s names in [[*]], and their pages will get made on the fly. Since it’s just a file on my computer, I feel at ease about the privacy implications of writing about my social interactions.
I’m starting to see the value of having everything in one place. I could make a document in TiddlyWiki called [[Cognitive Bias]] and link all the other documents that have a relation to that topic:
I’ve only started using TiddlyWiki, but I’m hoping that having interconnected notes would help me understand a topic more.
Using TiddlyWiki is still an experiment for me, but so far it’s been working well. The areas where it falls short are:
Other than that, it has the potential to combine browser bookmarks, Day One, Notes, Airtable, Notion, and Monica so the upside looks good if it does end up working.
If you’d like to try out TiddlyWiki, I found this tutorial to be a good start.
