Inside arun.is · Technology
6 min read Apr 24, 2020
Four facets define this site: design, technology, photography, and writing.
While design operates in pixels, technology works in bits. It’s all of the code, infrastructure, and tools behind the scenes. Together, these two facets create a foundation, a medium, just like a canvas for a painter.
I aim to polish the design and technology just enough so that they are invisible while the more essential facets, photography, and writing, take center stage.
Like the rest of us, I stand on the shoulders of giants, relying on a fantastic suite of tools, most at little to no cost. Of those tools, I use four the most.
Before this site
When I started my first blog a dozen years ago, I didn’t know much about design or technology, but I knew I wanted to own my site. I wanted complete control in a way blogging platforms don’t allow. I bought a domain, set up a “one-click install” of the free and open source Wordpress software.
In those years, I blogged regularly and even wrote for some technology blogs. My blog hit the front page of Reddit and Hacker News a few times. I had a lot of fun and was learning everything I could.
The beginnings of arun.is
Nine years later, I had this realization that I had outgrown that blog. It felt childish, with rough edges and limitations. In those years, it was nearly every other week that I saw a post on Hacker News about the latest static site generator.
The hype is understandable. Static site generators are incredibly powerful. They give the creator complete control over the structure of their content and how that content is presented. On top of that, they are incredibly cheap to run, fast, and secure.
I looked at a few, but most required quite a bit of upfront steps in the terminal to get started and even more to deploy to the cloud. I wanted to hit just one button to start creating a blog. Fortunately, I found Cactus, a static site generator from the creators of Framer. It was a simple Mac app that made it quick and easy to start a new project and deploy it to Amazon S3. Unfortunately, they discontinued work on years ago.
Enter Gatsby
Around that time, I started learning React and saw the potential for building a static site that functioned like a single-page app. In other words, where readers could navigate between pages without full page refreshes. I came across Gatsby, which was at that time a small side project and only at version 0.x. I migrate my site over to it.
Since then, Gatsby has evolved quite a bit, adding a GraphQL source system that can retrieve data from a variety of places, plugins, themes, and more.
Render
Initially, I was using Amazon S3 and Cloudfront to host the blog. That took a night of a few tutorials to get running. After some time, building locally and dragging files into the S3 web interface got tiring. Fortunately, a new breed of internet hosting services started to crop up. Render, and Netlify are two such examples. I use both and have had a great experience with each.
They are particularly powerful because they, like Cactus, get you started quickly. You simply connect a code repository from Github or Gitlab. Then, they can detect the tools being used and instantly start publishing your site every time you make a change. No more manually configuring SSL certificates, triggering builds, etc. They offer a lot of customizability, but their default path probably works for most people.
React, MDX, Tachyons
Gatsby is based on React, which is the most popular Javascript UI framework. The ideas of declarative programming and unidirectional data flow made it easy for me to understand how what I see on the screen gets displayed based on the underlying state. While a blog doesn’t have complex data like an application, I find React to be a powerful and easy way to build user interfaces.
While I initially wrote blog posts in Markdown, I’ve started to use MDX so that I can use React components within posts. MDX allows me to reuse components between posts and potentially, in the future, add interactive elements.
When it comes to styling, I chose Tachyons because I can quickly style new components and understand existing components without worrying about styles cascading like in traditional CSS. It also makes React components the source of truth for styling instead of keeping that in a separate stylesheet.
The editor
I’ve used a wide variety of code editors in the past from minimal ones like notepad and VIM to IDEs like Eclipse and IntelliJ. I have found over time that I prefer something in the middle. I want to incrementally add plugins and features as I need them and don’t want something slow.
I started using Visual Studio Code a few years back and haven’t looked back. It’s fast and is updated frequently. The selection of plugins is vast, and the community around it is very supportive.
With the Prettier plugin installed, Visual Studio Code is a pleasure to use. I don’t have to worry about indentation or whitespace. Have unneeded parentheses? Prettier will remove them. Accidentally used a mix of spaces and tabs? Prettier will fix it.
Little efficiencies
Over the years, when I notice myself doing something over and over, I find or build a tool that will automate that task. Here are a few that I’ve added to my quiver.
Slideshow image generator
In some posts, I use looping image slideshows. I used to make them by hand in Photoshop but learned of a much easier way using FFmpeg. I run the following command.
ffmpeg -framerate 2 -pattern_type glob -i '*.png' slideshow.mp4
It takes all of the .png images within the current directory and turns them into
a .mp4 movie. The -framerate flag is the framerate in seconds, and the
glob -i '\*.png' flag tells it to look for anything ending in .png.
Photo caption generator
Below every image in my photo essays (Example about Palma de Mallorca), I add a caption like “Leica Q - f/14 - 1/125 - ISO 100” that notes the camera settings used. I wrote these by hand, but that got tiring. I then wrote a small tool that automatically reads all images in a directory, reads the EXIF metadata in each image, and outputs some code for each photo that includes a caption.
 <span class="md-caption">Leica Q - f/14 - 1/125 - ISO
100</span>
Final words
In many ways, a blog is like a car or a watch. It marries design and engineering together into a cohesive whole. Unlike those two, though, this site is easily changed. This malleability is what draws me to software and why I love incrementally building this site.
Thanks to Q for reading drafts of this.