Category: #Web

Digital Spring Cleaning

A screenshot of this website.

I did some reorganizing on this website, and I think I’m pretty happy about it! The biggest thing I did was merging both personal.jagtalon.com and jagtalon.com. I’ve been maintaining separate WordPress sites for my professional and private blogs, but it was a pain because I had to make sure that I copy any plugin or theme changes from one server to the other.

I figured that it would be much easier to merge the two and simply label my personal updates as #personal. I think I like this more because the site is now a better representation of me now that it has both personal and professional content. It’s also easier to share with other people: just go to jagtalon.com to see what I’m up to.

Simplifying my website felt great and it gave me the energy to cut down on some of the hosting software and services that I no longer need:

  • I was able to downgrade Cloudron (a tool for self-hosting websites) to the free tier now that I got to remove an extra WordPress site. This will save me $180 per year.
  • I also cancelled my second Akismet subscription (a service that blocks spammy comments) since I’m only running one WordPress site. This saves me $18 per year.
  • I downgraded to a smaller server on Hetzner (a hosting company) as well and this saves me €132 or $160 per year.

That’s $358 of savings a year! It looks like reorganizing pays off.

File Sharing Setup

A drawing of a puffer fish floating in the sky.

When Firefox Send shutdown, I started running my own instance of NextCloud to send files to people. It worked as expected, but it also felt slow. It felt like I was using a website that just groggily woke up from a nap whenever I logged into it.

I figured that maybe I could replace it with something leanerespecially since I felt like I didn’t need a lot of the features that NextCloud offered. I’ve recently been learning how to set up static sites on OpenBSD and it occurred to me that I could use OpenBSD’s built-in HTTP server to send files to people.

Setting up the Server

I went through the same process that I listed in my notes on setting up an OpenBSD server using httpd. You can use any other web server, but I love how simple it is to setup httpd.

Changing Write Permissions

I wanted to be able to write in the /var/www/htdocs/send.jagtalon.com as a normal user, so I changed the permissions to be owned by my user instead of root:

$ doas chown -R jag:jag /var/www/htdocs/send.jagtalon.com

Easily Uploading Files

I don’t want to copy files manually to the remote server using the command line every time I wanted to send a file, so I set up Cyberduck to connect to my server using SFTP. I bet Transmit would work well too if you’re on macOS!

A screenshot of Cyberduck showing some of my remote files.

It was relatively easy to set up, but a bit intimidating. I needed my private SSH key, SSH password, my username, and the server’s IP address. Now I can drag and drop files into the server without touching the terminal.

I also added a few conveniences:

  • I set Cyberduck to go into /var/www/htdocs/send.jagtalon.com/ every time I connected to my server.
  • I added the URL of my server so that I could right click and copy the URL of any file.
A screenshot of my settings on Cyberduck showing the preferred path and web URL options.

And we’re done! Now I can send files and even host little “pens” for demos.

Update:

I ended up going with Tresorit instead since I already use that service for backups. It’s just cheaper to use that service for file sharing as well.

Tiny Generative Art Template

A screenshot of Windows Terminal that shows the directory structure of the project.

I’ve been using canvas-sketch ever since I started learning generative art back in November. It’s an incredibly useful tool for creating a new project, setting up a local server, and saving my artwork to disk. The only issue that I have with it is that it comes with a lot of dependencies that I don’t think are necessary for the kind of art that I do.

So I thought that I could take a stab at creating a minimal generative art template that only includes the things that I need. This is is how it works:

Screencast showing a demo of the project. You can try it out yourself here: ~jagtalon/generative-art-template

It’s not a zero-dependency template, but as long as you have CoffeeScript and Browsersync installed, you should be good to go. To start a new project, all you need to do is:

  1. Download or clone the template.
  2. Run ./build.sh (runs the CoffeeScript compiler)
  3. Run ./server.sh (runs the Browsersync server)

And you’re good to go! The two most important files in it are index.html and art.coffee:

  • 💻 index.html is a barebones HTML file that lets me view and save the artwork. It has a little bit of CSS that makes the Canvas responsive (I often work with large 3600×5400 images!) and a little bit of JavaScript that lets me download the art.
  • 🎨 art.coffee is where I draw. It’s written in CoffeeScript, and it’s compiled to JS. I’m using it as a JavaScript module so that I can easily import libraries that are both local (like my little Canvas API wrapper called tiny-canvas.coffee) and remote (like NPM modules on Skypack).
Screencast showing how short the index.html and art.coffee files are.

And that’s it! build.sh and server.sh are set up to watch the files for any changes, so there’s no reloading involved once these two are running.

Of course, I could get really lean by removing the dependency on CoffeeScript, but I personally enjoy working with this language so I decided to include it. If you’re interested in tweaking the setup, feel free to fork the project and modify the template to your needs! You can find the repository on Sourcehut.

Going from Browser to Paper

Prints of my art that looks like a fingerprint that I just took out of the box.

I recently had some of my generative art printed, and I’m stoked to finally have them in my hands! It feels surreal to see my creative coding projects on my wall, taking up space in the physical world instead of being mere pixels on the screen.

It’s surprisingly straightforward and affordable. I first adjusted <canvas> to be 3600×5400 pixels or 12×18 inches at 300 dpi. Whenever I see a piece that I like, canvas-sketch lets me quickly export the image by pressing Ctrl-S.

I didn’t know where to get it printed at first, so I had one printed at Staples. Unfortunately, the colors looked a bit dull, and they weren’t as vivid as I had hoped. It was also $10 a page, so it was a bit expensive. Fortunately, a friend of mine told me about a shop right here in Philadelphia called Fireball Printing.

They have a minimum of 5 pages per print job, but I was surprised that it only cost me $3.70 for all 5 prints! The colors also looked unbelievably accurate to me.

I’ve been hoping to sell physical prints on Etsy, but right now, I’m uncomfortable with picking up, packing, and mailing art when there’s a pandemic. So, for now, I have a 🛍 digital-only shop. Check it out!

Creative Coding: Making Noise

A sample of the noise art that I've been experimenting with. It looks a bit fuzzy and fur-like.

I love the wave-like patterns in these images. I recently made these using <canvas> (which I’m learning about in the Creative Coding workshop that I’m taking), and each shape that you see is a Unicode character.

Their positions are evenly distributed on a grid while their sizes and rotations are generated using the noise2D function. 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.

Creative Coding: Setting Up on Windows

A screenshot showing Windows Terminal

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.

Install Windows Subsystem for Linux

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.

See how quickly WSL boots up. It’s magic.

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!

Install Remote – WSL Extension on VSCode

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.

VSCode with the Remote – WSL extension.

Bonus: Install Windows Terminal

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!

Windows Terminal with vertical splitting.

Hello, Creative Coding

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!

Working on a new Figma Plugin

The interface of the plugin that accepts a link as the input and it shows a preview of the Open Graph media. In this case, it's the image and title from a New York Times article.

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.

Server Code

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 Figma plugin makes a request to the server. The server then scrapes the website for the meta tags.

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.

Plugin Code

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.

A demo of the Figma plugin.

It was fun!

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.

Reviving my first homepage

A screenshot of my first website. It shows my name, a photo in the middle, and some contact information.

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!

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.

Watching: Slow Design for an Anxious World

A screenshot from the video of Slow Design for an Anxious World

I’m currently going through videos from AEA DC 2019, and I wanted to share my notes on Jeffrey Zeldman’s talk called Slow Design for an Anxious World.

When we need fast

  • 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 York Times came out with a redesign that is “clean, quiet reading interface and a typographic style that’s increasingly visually connected to other incarnations of the Times” (2014)
  • 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)
  • Aside from big type, art direction can also be used
    • A bit difficult to have different art directions in each content because you need to have time and resources.
    • ProPublica and Fray are examples.
  • Whitespace is important
    • There’s macro whitespace: Whitespace between the major elements in a composition
    • There’s micro whitespace: The space between list items, between a caption and an image, or between words and letters. The itty-bitty stuff.
    • Adds legibility
    • Conveys luxury: Look at the whitespace around brands like Apple or Chanel.
    • Also see Jeffrey’s style guide for content.
  • 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.

Slow design toolkit:

  • Big type
  • Hierarchy
  • Minimalism
  • Art direction
  • Whitespace
  • Branded
  • Authoritative