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).
A GeoCities-inspired design.
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.
That CSS is trying to style elements that don’t exist!
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!
The newly revived website.
Enjoy
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:
Browser bookmarks for saving recipes, repair manuals, and design resources.
Day One for journaling about my work and personal life.
Notes.app for jotting down notes on meetings, books, and conference talks.
Monica for keeping track of social interactions with people.
Airtable for tracking TV shows, movies, and books that I’ve seen and read.
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:
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.
Notes
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:
The idea of [[Confirmation Bias]]
The book [[Design for Real Life]]
The webinar called [[Design for Cognitive Bias]]
An article online called [[The Cognitive Biases Tricking Your Brain]]
I’ve only started using TiddlyWiki, but I’m hoping that having interconnected notes would help me understand a topic more.
Next Steps
Using TiddlyWiki is still an experiment for me, but so far it’s been working well. The areas where it falls short are:
Collaborating: I can’t use TiddlyWiki if I wanted to collaborate with people.
Tasks: As far as I can tell, I can’t do recurring tasks or attach dates to them so I’m sticking with Reminders for my tasks.
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.
I recently noticed that my writing is a bit cold and impersonal in my reading and watching notes. Although these posts were meant to give a summary of the book/talk, I think adding in my thoughts or reflecting on how the content relates to my work would make a better blog post.
For example, I could write about how the book Design for Real Life has taught me how much of our everyday product decisions affect people’s lives. I could write about how it opened my eyes to the far-reaching effects of my own biases.
Increasing Frequency and Vulnerability
I don’t write as often as I’d like because I think of this blog as a medium for showcasing my work and my side projects. I want my posts to be polished because I see them as an extension of my CV. But because of this mindset, my posts end up lacking personality and vulnerability.
Contrast my writing here to my writing on personal.jagtalon.com. On that blog, I freely share my struggles (a recent surgery or my lack of productivity) and my personal goals (like my donation goals). I think this is because I’m not trying to perform or prove anything on that blog. I’m just writing to share.
So I think it would be good to adopt that mindset: focus on sharing instead of performing. In future posts, I’d like to share what I’ve been learning recently and the struggles that I run into when working on a project.
To me, the gist was about how we can make people feel smart and confident about their decisions. People see many inconsistencies in the world—from politicians who flip-flop on issues to companies who say one thing but do the exact opposite. As a result, people have become skeptical and even cynical. Inconsistency undermines trust, she says.
Because of this, people are starting to look inward: they’re making decisions based on what they believe in. Since people are looking inward for information, maybe we can meet them there, informing and persuading them on their terms. Here are the three tools that we can use to do that:
Voice
Champion familiarity over precision and consistency over novelty.
Example: When Mailchimp released a suite of e-commerce services, they didn’t want to alienate their long-time customers. They didn’t want people to worry and to feel like they would get lost in the shuffle. So they continued to make themselves vulnerable and open and fun, which was consistent with Mailchimp’s way of communicating. They went further and also opened up a store to tell people what they’re learning along the way while using their own e-commerce tools. This brand consistency made people more familiar and confident about the future of Mailchimp.
Volume
Offer enough detail to convey a complete story and make the user feel smart.
Example: America’s Test Kitchen creates a lot of content. They want to empower people whether they’re novices who are trying to get something right the first time, or experts who want to learn more about the history and chemistry of a dish. You can get the short, pithy version, or the long, deep read on a recipe.
Another example: Gov.uk has the opposite problem: too much content. So people end up going somewhere else online to understand gov’t services and information. (I do the same when I’m on IRS.gov. I feel like I need to search online to summarize things for me.) They since reduced the amount of content, getting people to stick around instead of shying away from the official sources.
Vulnerability
Compare, don’t exclude, and prototype in public to work with users, not for them.
Example: Buzzfeed opened themselves up to feedback when they were working on their newsletter. Similar to what Mailchimp did when they publicly dogfooded their own e-commerce product, they made themselves vulnerable to their audience and involved them in the process.
Fast is great for service-oriented designs. 80% of the time, we want to create designs that reduces friction and gets out of the way so that people can get things done.
This is especially important for transactions like donating to a charity or buying a product. The faster you can get a person from start to finish, the better.
Time = friction
When we need slow
The rest of the time when comprehension is involved, we have to slow things down.
We want to focus on absorption not conversion when it comes to comprehension.
Readability = it wants to be read
Legibility = it’s readable
Readability transcends legibility
Some history and observations
There was a service called Readability that made reading pleasant on the web. It removed “info junk” like banners and navigation so that you can focus on the content. The website has been discontinued since, but the open source code is alive in Safari’s Reader.
These days, you can use Mercury Reader if you use Chrome.
There’s an A List Apart article that talked about creating a simpler page on the web. It breaks reading distances into three categories:
Bed (Close to face): Reading a novel on your stomach, lying in bed with the iPad propped up on a pillow.
Knee (Medium distance from face): Sitting on the couch or perhaps the Eurostar on your way to Paris, the iPad on your knee, catching up on Instapaper.
Breakfast (Far from face): The iPad, propped up by the Apple case at a comfortable angle, behind your breakfast coffee and bagel, allowing for handsfree news reading as you wipe cream cheese from the corner of your mouth.
Jeffrey Zeldman wanted to create a more relaxed reading experience on the web. He wanted a web that can be read from afar (Breakfast category) and with a relaxed posture. He experimented on his personal website and wrote about it in 2012.
Medium.com came out and it focused on content. Big type. Lots of whitespace. (2012)
The New Yorker also came out with a redesign. “While before, reading the New Yorker on mobile was a tortuous experience of pinching screens and zooming in and out, the new mobile site is one long scrollable joyride. Sharp text at a good size and unfussy navigation make the site a vast improvement on what went before.” (2014)
It has to be branded. When all sites look the same, all content appears equal. Facebook posts are an example: A reputable news site looks the same in a post as a disreputable blog.
It should also be authoritative. It should convey that you put in a lot of time and effort into it.
I recently read the book called Design for Real Life, and I wanted to share some of the notes that I wrote down while reading the book.
Advocates for designing for the most vulnerable, distracted, and stressed-out users. If you make things for people at their worst, they’ll work that much better when people are at their best.
Edge cases = Stress cases. Instead of thinking about these things as edge cases, we should think about them as stress cases. These are scenarios where our design and content fail, and they should be treated like a failing unit test or integration test.
Make a list of potential user scenarios. Here’s an example from the book:
People who want to share
Had a great year
Had a horrible year
People who don’t want to share
But want to relive it
Great year
Horrible year
And don’t want to relive it
Great year
Horrible year
Find fractures in your design by challenging assumptions and finding stress cases.
Make space in your design and accept a broader range of answers to accommodate your users:
Names: “Juan Antonio Gabriel Ancajas Talon,” for example, doesn’t fit in most input fields. Also, what is a real name?
Race: Consider how a generic “Multiracial” field would make people feel.
Design to include: What if your period tracking app doesn’t support people outside of: “avoiding pregnancy,” “trying to conceive,” or “fertility treatments”?
Classic edge-case thinking: “We’re designing for the 90%, not the 10%” or “That’s a difficult use case that I don’t want to think about.”
“For now” can lead to “forever” for a busy team.
Everyday stress cases (this can be people in crisis or something mundane going wrong). Examples from the book:
A person who as received a threat from a previously unknown stalker, and needs to delete or make private every public account as quickly as possible.
A university student whose roommate has declared they intend to commit suicide, and needs information on what to do.
Someone who has discovered their mortgage’s auto-pay has failed two months in a row, and is afraid they’ll be foreclosed on.
A person working two jobs whose only car was damaged in an accident, and is trying to submit incident information to their insurance company late at night, after they’ve finally gotten off work.
Stress cases are also technical failures:
Low battery
Slow Internet
Create personas that are real: Instead of thinking about ideal people who are smiling and have ideal lives, think about people who are distracted, short on time, have bills to pay, has dinner to prepare, and have kids to take care of.
Just like mobile-first design, try stress-first design.
Add contexts in your user journey. Consider who goes to the hospital in the morning, late afternoon, and at midnight. You’d find out that people who visit the hospital at midnight are people who are in crisis because normal visiting hours are over.
A table that represents the time of day. It allows people to contextualize where each persona falls into.
Add intention to designs: Do you really need to ask income level, real name, mailing address, salutation, or level of education? Consider how people would feel: “Why do they need my postcode? Why do they need my gender?”
Touchy subjects: Things that are likely to cause stress or make the reader uncomfortable (not just money, religion, or politics):
Error messages
Warnings
System alerts
Financial and privacy-related updates
Legal agreements
Compassion is more than being nice. It’s accepting people as they come—in all their pain, with all their challenges—and not just feeling empathy towards them but doing something with that empathy. Compassion is not meant to soften bad news or coddling. It’s understanding and kindness.
The premortem: Evaluate the project before it happens to check our biases.
The question protocol: Ensure that every piece of information you ask is intentional and appropriate by asking:
Who within the organization uses the answer
What they use them for
Whether an answer is required or optional
If an answer is required, what happens if a user enters any old thing just to get them through the form
The designated dissenter: Assign someone in the project to assess every decision underlying the project, and asking how changes in context or assumptions might subvert those decisions.
Figma has a new-ish feature called Auto Layout that I’ve been trying to get the hang of lately. What it does is it lets you specify how your designs will adapt once you adjust the contents inside it.
That’s a bit abstract, so here’s a more concrete example: You can automatically set the height of a button to increase or decrease depending on the length of the text within it. This can be useful for making quick changes in the copy without worrying about text overflowing. Without Auto Layout, you would have had to adjust things by hand or install a plugin to get the same results.
As you can see, padding around the button is preserved, and the height of the button increased to accommodate the text.
It very much mimics how production environments like webpages actually work. In fact, they borrow some concepts from the CSS box model to make Auto Layout:
After trying many different approaches, including some rather non-conventional ones, we felt the best way to marry the two worlds was to add a few core concepts from the CSS box model (specifically flexbox) directly into Figma. And by introducing Auto Layout as a property, you have the flexibility and power to apply Auto Layout to any frame, whether it’s in a component or not.
It’s definitely useful for translations, too. Just copy paste the text and the design changes accordingly.
So if you’ve written CSS before, you might be familiar with some of the things that you can do in Auto Layout:
You can make an element take up the whole width or height of its parent.
You can specify the padding around a container and between the children nodes.
You can make a set of elements stack either horizontally or vertically. (Just like flexbox.)
And it doesn’t just work with text. Modifying, adding, or removing any sort of node in a Frame that has Auto Layout—whether that’s text, an image, or another Frame—will change the dimensions of the design.
Auto Layout demo: The design adapts when you change the button and lorem ipsum text.
The downside of Auto Layout is that it’s quite different from how I’m used to designing. It’s a bit hard to master and it’sdefinitelyfrustrating for me to use sometimes. Every so often I get stuck, and I find myself falling back into the warm embrace of constraints.
And because of that, I’m finding that it’s better for me to use Auto Layout in the later stages of the design process. I feel that it ends up slowing me down a lot when I’m using it in the exploration stage.
When I’m converting a design to Auto Layout, I find that it’s best to start from the deepest layers to minimize the issues that I run into. Then I work my way up.
But I hope that this changes in the future. I’d like to use Auto Layout sooner in the process so that I could take advantage of its features. But I guess that will come naturally as I become more familiar with it.
I love that we’re now able to describe behavior in UI designs, and I hope that more design tools follow this direction. I think what I’m looking forward to is how this will make playing around with real data easier. Imagine not having to worry about the design breaking because the text is too long.
I used to ignore anything that looked like responsibility. I didn’t read my mail, I often forgot about appointments, I didn’t plan ahead, and I could never tell where my money was going. Although my strategy surprisingly worked for a couple of years, I eventually reached a tipping point where I was spiraling with guilt and mounting obligations. I’m happy that I’ve gotten to work on my ostrich-like hangups on life admin since then, and I think—for me at least—having the right software tools have helped along the way.
I often see peoplewritingaboutthe tools that they use to get their work done, but it’s rare for me to see much of anything on how people manage their lives outside of work. I’ve been reassessing my setup recently, so I thought I could share the things that have been working well for me and the tools that I’m currently playing around with.
You Need A Budget
In the past, I would budget my money by adding up all my recurring expenses each month and subtracting the total from my income. I’d put down the result as money that I’m allowed to spend. I figured that whatever is left behind after that can turn into my savings. It seemed like a good system: it was simple, and I didn’t have to do it that often.
But reality was very different. It felt like there was always that one “emergency” that would throw a wrench into the whole thing: a doctor’s appointment, going out to dinner with friends, a subscription that I forgot about. So even though I had a great system in place (I didn’t), I still couldn’t manage to put money towards my savings or my credit card debt. So I gave up and figured that I was just bad with money.
I forget how, but I came across an app called You Need A Budget around two years ago. I had a hard time using it at first because I couldn’t wrap my head around the philosophy of only budgeting the money that I currently have. I also struggled because I didn’t understand that I needed to be proactive with budgeting. I didn’t know that I had to:
Actively look at what’s left of my budget to guide my decisions
Figure out what categories I needed to prioritize
Plan and set goals
But after a couple of failed attempts, I eventually joined their workshops and learned how to use the app. I’m not going to go into detail about its features (there’s a bunch), but the gist is that it’s super useful for life admin. Those “emergencies” that I talked about earlier? They’re basically things that YNAB helps me prepare for. If I know that I’ll be getting my wisdom teeth removed soon, I can start putting money towards a category called “Oral Surgery.”
I also have a thing called a “wish farm” to budget my discretionary money into categories like future travel or a pair of boots.
Fantastical
I couldn’t find a single calendar event before 2016, so I don’t really know how I managed to remember things before that year. I think I had this idea that calendars were only for very busy people. Normal people like me, I thought, don’t really have a use for it outside of work. Unfortunately, I wasn’t any good at keeping tabs on my appointments and get-togethers. I realized that computers were a lot better at remembering dates than I am.
I have my calendar hosted on Fastmail, and I started to use it a lot more when I found Fantastical. I think what got me to use it was how ridiculously easy it is to add an event in the calendar. Basically, you just type in “Water plants every other Friday” and it’ll automatically create a recurring event just for that. It suddenly made remembering events easy for me to do.
With YNAB, you can only budget the money that you already have.
One other feature that I love about Fantastical is that it lets me bundle calendars into different sets. This means I can switch between different contexts throughout the week:
A set that just shows my personal calendars. (Perfect for weekends or when on holiday.)
A set that just shows my work calendars. (This gives me an overview of my work.)
A set that combines personal & work calendars. (This is usually my view during the week because, naturally, I don’t want to miss any work meetings or personal appointments.)
Reminders
I don’t have any complex to-do list requirements, so I’ve found popular apps like Things and Todoist to be a bit too much for my personal needs. I didn’t think it was worth paying for features that I wasn’t going to use. Paper, on the other hand, is often inconvenient to carry around and to write in while I’m on the bus or train or at the grocery store.
I was doing some research on to-do lists, and it turns out that most calendars already support simple task management. I thought this would be great at first because the bulk of my tasks are basically events that I want to check off like “Take the trash outside at 9pm every Monday” or “Change out your contact lenses every two weeks.” The downside is that it the more tasks I made, the more cluttered my calendar looked.
The solution for me was to switch to Apple’s built-in Reminders app. It actually syncs with my calendar on Fastmail which meant that I didn’t have to migrate my tasks over to another system.
Reminders makes it easy to for me to create to-do lists that sync with my calendar.
To-do lists are at the heart of my life admin because I would forget a lot of things if I didn’t have it. It has a lot of those recurring items that I used to forget like paying off my credit card every month or taking the compost bin out. Since it’s also on my phone, it’s also really useful for remembering those responsibilities that bubble up when I’m commuting. “Oh yeah I need to get some onions for dinner later.”
Monica
In the past, Facebook was my contact list. I could message friends easily, I could hop on a video call with them, I knew what people were up to, and I knew if their birthdays were coming up. It worked pretty well up until I stopped using Facebook. And at that point, I didn’t realize just how much I relied on it for keeping in touch with friends.
Fortunately, a friend told me about this website called Monica. It’s basically a CRM but without all the business-y language around it. I managed to use it for a couple of months, but my motivation died out soon after.
I tried Airtable for a little bit, but that ended up being even more work. I just wanted something that didn’t require me to build the scaffolding so that I could get on with the actual work. So recently, I started using Monica again, but now I also have a reminder to update it every other day so that I don’t forget about it. I also made it into a “desktop app” using Fluid, so that I’m reminded of it whenever I’m on my computer.
It’s too early for me to say if it’s working for me, but I’m glad that there’s a way for me to keep track of when I last hung out with someone, the names of their pets, and the things that we talked about. It’s almost a complement to my journal. I also appreciate that I get reminders from Monica that basically says, “Hey, you should really keep in touch with this person.”
That’s it
You made it! The invisible work of life admin isn’t glamorous, but thanks for letting me geek out and reading all the way to the bottom. If you have tools that you use to manage your daily life, I’d be happy to hear about it.
There’s seemingly no limit to the number of wonderfulplugins that are already out there for Figma. It’s inspiring but also humbling because it meant that I probably have nothing else to add to that infinitely growing list. It seems that every plugin idea that I can think of already exists in some form.
As an alternative, I briefly thought about making something frivolous, like the Dad Jokes plugin for Sketch. It’s just like lorem ipsum but with dad jokes as placeholder text instead. But I did have a plugin idea for slightly improving copy-pasting content.
What it does is that it fetches all the text nodes within a selected element and organizes them into a table. This should take some tedium out of copy-pasting content since it automatically selects and copies the text for you as you click around. All you have to do is to make a selection and run the plugin.
I’m actually surprised by its simplicity: Under the hood, all it does is run document.execCommand('copy') whenever a table cell is selected, and that copies the selected text on to your clipboard. While it’s not exactly a must-have plugin, I did enjoy learning more about how Figma Plugins work. I’m also glad that writing plugins forced me into the world of Typescript from the very beginning. I admit that I haven’t dealt with explicit types in a long time, but I love that it makes web development so much more pleasant thanks to IntelliSense‘s autocomplete and API documentation.
There’s no need to search for API documentation when you already have it in your IDE.
There’s still a few refinements that I need to do and some edge cases that I need to fix before I could call it done, but you can follow the progress on Github.
Update
Fast Copy is available to everyone! There’s still a lot to do, but at least it’s out there in public.
