all posts tagged 'timbornholdt.com'

Some small tweaks to this site

originally shared here on

It's been a while since I used my own website as much as I did during this year's WeblogPoMo. The daily posting routine revealed some small annoyances which made visiting this site a little less fun.

For starters, I haven't redesigned this site since I got COVID back in 2021. 13 year old Tim would have been mortified at how long we've gone without a big redesign.

That's not to say I didn't try! I experimented with (and coded out) nearly a dozen different potential layouts.

The one I had the most fun with was a 90s Memphis style layout where the background elements were independent SVGs that were subtly animated.1

The problem I'm realizing2 is that I'm not a particularly skilled designer. I know what good design feels like, but I haven't taken the time to articulate what good design feels like.

The other problem? Building websites isn't fun for me anymore.

The tools you use to build websites are all essentially the same. There is functionally zero difference between a monolith Rails app running Postgres, a monolith Laravel app running MySQL, a static site generator powered by a Rube Goldberg-ian series of GitHub actions, or a GraphQL-powered React app.

The biggest casualty of choosing to build software professionally is my desire to learn new web technologies.

Instead of forcing myself to sit down and spoon-feed myself a puree in the form of a Next.JS tutorial, I'm leaning into other areas that interest me more.

Offline, that includes fixing up my house and lawn, writing, and being a better parent/husband.

Online, that includes playing with generative AI and sharing more of my thoughts on this blog and in my newsletter.

But even while I'm exploring other interests, that doesn't mean I can just let this site deteriorate and fill up with prickly weeds.

So over the last couple days, I made a couple small changes to this page that subtly improve the user experience. Most of these changes come in the form of discoverability.

When I launched this version of my site, I decided to lean into the linked list style of posting.

This was a great move because it's allowed me to (1) share interesting webpages with y'all, but also (2) make an archive of thoughts and ideas that inspire me.

Earlier this year, I added tags to all my posts. That process is what first made me realize that once I posted something on this site, it was next to impossible to find it again without jumping into a Rails console and searching for it.

Now that all of my posts have tags, I wanted a way to better visualize what topics I tended to think about and navigate through them.

If you visit the main page of this blog, you'll see a section at the top that explains what I tend to write about along with some groups of tags.3

I also made some slight CSS tweaks so the site looks even better on mobile.4

The main page is another source of stress for me over the past couple years.

As previously mentioned, my blog is mostly linked posts, but I do occasionally post longer essays and these shorter posts.

My main page had two separate sections to display my longer posts and my recent links, but these sorts of posts vanished into the ether.

My solution was to display a stream of all the posts along with their tags and an indication if it's a link post.

Like I said: these are small tweaks.

But small tweaks are sometimes all you need. It's important to maintain our virtual spaces.

Just because I'm not inspired to build new websites doesn't relieve me from the obligation to keep it functioning the best I possibly can.

And a positive consequence of these changes? You can expect more shorter posts from me like these!


  1. The problem I ran into was how inefficient these animations were. One of my main goals with this site is to be as energy efficient as possible. I should probably get off Rails and switch to a static site generator to be even more efficient, but this is good enough for now. And I at least didn't make it worse by deploying a big energy vampire that just made some squiggly lines wiggle up and down.  

  2. Maybe "realized" is the wrong word, because I've known I'm a mediocre designer for the past 20 years. "Accepted" is probably more accurate. 

  3. It was a fun exercise to print out the list of 448 tags and pick out the key ones. 

  4. For some reason, I didn't realize that if you have a parent element that honors the dimensions of the screen, but then you have a child element with a max-width tag set that's bigger than that, mobile Safari will just stretch the content of that child beyond the bounds of the parent, causing it to cut off the content on the sides. That is a 💩 experience. 


Adding tagging to timbornholdt.com

originally shared here on

I just released a feature to this site where blog posts can now be tagged with any number of tags.

You can then read all the posts that are tagged as confidence or music or programming or whatever.

I was extremely inspired by kottke.org's recent redesign. The idea of turning your blog into your own social media stream-looking thing strikes me as one of those design decisions that feels revolutionary and obvious at the same time. I will no doubt try to do something similar to this site right here.

But as I think through the best place to start, I'm resisting my urge to just blanket redesign the site without a plan. And the first step of that plan is to do the tedious work of going through my archives and adding tags to the old posts.

Tags aren't exactly a revolutionary new feature. It took me about a half hour to implement the basics, and then another day or so of tweaking the process of adding them to each post so I can do it quickly.

The reason I wanted to share this as a post is because one unintended consequence of going through this process was [pause for sarcastic and dramatic effect] ... anxiety!

Because of course the creation of a a feature for my site that is read by an exceptionally low number of people must result in getting way into my head about it.

Yesterday, I spent about an hour going through my old posts and adding some tags to them.

As I got deeper into the archives, I kept thinking of tags that would've been great to add to posts I had already added tags earlier.

I found myself getting mad at myself for not being optimized up front and just having a tag list to choose from.

Well guess what, Tim? There’s no way you’ll know what tags you want to add until you’ve added all the tags!

Just do your best, man. Even getting half way is an amazing leap forward. Just keep moving forward.

It's proving to be surprisingly hard for me to not beat myself up over this tag system, which again, is supposed to be fun, you goober!

Here's the best case scenario from doing all this work: maybe these tags will help me articulate the overall themes I cover on my site, to identify the topics I’ve been interested in throughout the last fifteen-ish years.

Here's the worst case scenario from doing all this work: complete and total indifference from the universe.

Note to self: just enjoy getting a chance to go through the clutter of your site and clean it up. It’s fun! Add whatever tags you think will help, and if you get an idea about a better tag later, go back and look it up then!

As you can see, I'm still working on not letting anxiety cripple me from starting and completing a project.

Why am I even stressing about this?

Just go have some fun with your tag thing.

It makes you happy.

That should be enough.


timbornholdt.com Strikes Back

originally shared here on

A few weeks ago, I got an email from Google saying that I had an "unusual number of 404 errors" on my site. I looked into it, and a very helpful script kiddy exploited my Wordpress site and took over the admin account.

It didn't look like there was much in there in terms of damage done, but they basically changed my admin password, bricked my template, and moved on.

After years of neglecting this blog (yet again) and after years of dealing with an annoying CMS, I had the same thought that every web developer has: "Nuts to this, I'm just gonna build this site myself from scratch."

So here we are: timbornholdt.com version whatever!

After reading back from my old posts in 2012, I realized that I really should start blogging again. I really enjoy seeing how much has changed in the past 6 years, and I know that if I start blogging about my life now that I'll look back in another 6 years and have the same feelings.

So without further ado, welcome to the blog, and we'll see you in another 6 years!


How to detect and replace YouTube links by extending the Redcarpet gem

originally shared here on

As I'll explain in a future post, I had an old Wordpress blog that I got sick of maintaining and updating, so I did what any red-blooded developer would do: build my own blog engine.

In doing so, however, I needed to import all my old posts from Wordpress over to my own Rails form. This worked nearly flawlessly, with the exception of my YouTube videos, which looked something like this (without the space inside the tag):

[youtube]nFZZxOHHZlo[/youtube ]

Because I am using the Redcarpet gem, I thought I'd extend its parsing capabilities to detect anything like this and wrap it in a responsive frame.

Here's how I did it (with extreme thanks to this SO post):

Step 1: Create a folder called app/services, and then create a file called custom_markdown.rb:

class CustomMarkdown < Redcarpet::Render::HTML
  def preprocess(text)
    format_youtube(text)
  end

  def format_youtube(text)
    text.gsub! /\[youtube](.*?)\[\/youtube]/ do
      "<div class='embed-container'><iframe src='https://www.youtube.com/embed/#{$1}' frameborder='0' allowfullscreen></iframe></div>"
    end
    text
  end

end

This code will perform a regular expression to find anything wrapped in [youtube] tags and replace it with a <div> that we can now style with CSS.

Step 2: Add the following SCSS somewhere in your project where it makes sense:

.embed-container { 
  position: relative; 
  padding-bottom: 56.25%; 
  height: 0; 
  overflow: hidden; 
  max-width: 100%; 
  iframe, object, embed { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
  }
} 

Step 3: Use the custom parser when including Redcarpet in your project:

require './app/services/custom_markdown.rb' # This was necessary for me, might not be necessary for you
@blogs = Blog.all.order("published_at desc")
renderer = CustomMarkdown.new()
@markdown = Redcarpet::Markdown.new(renderer, extensions = {})

Now, anywhere you use those [youtube] tags, you'll get this fancy rendering instead:


New Front Page Design

originally shared here on

It was around this same time last year that I updated timbornholdt.com, and I figured I was due for a bit of a redesign as well.

This time, I went a bit more simplistic: just one page with a short biography and links to some choice projects.

I'd love to hear what you think. Holler at me on Twitter.


Welcome

originally shared here on

I've had the motivation for the last few months now to start my own blog, and after listening to this week's superb episode of The Talk Show, I decided it's time to just get it going.

This blog will be a smorgasbord of links, long-form posts and shameless, shameless self-promotion. I'll likely link to lots of stuff about Apple, photography, podcasting, running and other general geeky topics. And don't be surprised if I change the design six thousand times and leave this site stagnant for months on end.

So, without further ado, here we go.