On Problem Solving and Deck Repair

One of the things I love about my job – probably the thing I love most about it – is that it provides me interesting problems to solve.

Yes, I like writing code, and writing clean code probably prevents having to solve problems in the future, but the code itself is just a tool to solve a problem.  Over the Memorial Day weekend I spent some time working with a completely different set of tools to problem solve and it was a ton of fun.

Back in mid-November there was a pretty violent wind storm that came through our area.  Lots of trees and power lines down and we were among the many who lost power.  With a baby at home and no way to heat her food, we decided to evacuate for the night.

When we got back in the morning, I saw this on our deck.

A look at our damaged deck, with the railing broken, a post cap missing, and balusters strewn around.
A look at our damaged deck, with the railing broken, a post cap missing, and balusters strewn around.

We didn’t see what caused it but given that our neighbor’s trampoline went missing in the storm and debris from it was stretched across four yards, our working theory is that it got picked up, carried across one yard, slammed into our deck and snapped the railing, and then continued on.

A couple more looks at the damage, after a little bit of cleanup:

I managed to recover all of the balusters and the missing post cap was found cracked in half.  The screws holding in the missing side of the railing were sheared off, still stuck in the post.

Now, I’m extremely proud of this deck.  My dad, uncle, and I built it ourselves a few years ago and even though I can point out every tiny flaw in it, it’s something I look at and say “Holy crap, we made that.”  So it being damaged was unacceptable to me but I figured this was something that wouldn’t be hard to fix.  The pieces that were broken could be replaced, no big deal.  I figured I’d wait until Spring to take care of it in good weather.

Of course, it couldn’t be as easy as that.

Solution #1
Spring rolled around and I headed over to Home Depot to order another rail kit and post cap.  They managed to find my original order in their system and got the part numbers but it turned out that none of that is actually made anymore.  You can’t order those parts.  So that’s one option gone.

Solution #2
It was suggested that I just buy whatever rail kit came closest and live with the fact that it wouldn’t match perfectly.  As I said, I’m proud of this deck, so that was unacceptable to me.

Solution #3
Similar to the above, it was suggested that I have a piece of wood milled to match the design of the existing composite railing, then paint it to match.  This was also rejected out of hand because there’s a reason we went with composite in the first place, we didn’t want anything we’d have to re-paint every couple years.

At this point, I went back to the two pieces of railing I had and started looking at them more closely to see what could be made of them.

Solution #4
Glue the two pieces back together.  Construction adhesive isn’t strong enough to hold up enough for it to actually be a functional railing, so this one was out.

Solution #5
The rail kit is hollow.  Run a piece of wood through that gap to provide strength and then glue it back together.  I still think if I knew more this would have been the right solution but I couldn’t find anything that fit that space properly and was still strong enough to hold.

Solution #6
Run a piece of metal through the hollow rail.  Unfortunately, the screws from the studs that the balusters are held in place by go into the hollow space, so filling that area with metal was out.

Solution #7
Is there some kind of concrete foam I can spray in that gap?  Something that will harden and give me the strength I’m looking for but can be sprayed in to work around the odd shape of the opening and the existing screws going into it?

At this point I’m clearly grasping at straws, walking up and down aisles at Lowe’s looking for something I can use when it hits me:

Solution #8
Epoxy.  I’d been thinking in terms of tools I had used before, like construction adhesive.  Where construction adhesive is too weak, this particular epoxy can (supposedly) handle 4400 PSI.

I ended up running a thin piece of wood through the gap in the rail and screwing the baluster studs into it, then slathering a ton of epoxy onto the rail at the point of the break and joining it back together.  After drying, it has no give.

With the epoxy having worked so well, I used a little more of it to piece the post cap back together.

The broken screws and bracket were easy enough to replace (though I had to spray paint them to match the existing ones a little more closely) and now everything is back together.

The crack is still visible and there’s a bit of a stain where excess epoxy got out but I’m thrilled with the result.  From more than a couple feet away, you can’t tell it was ever broken.

Of course, I’ll see it every time I walk past it, but at least now I’ll look at it with pride in having found an acceptable solution instead of disdain for having had to settle.

ClarkRasmussen.com Header Redesign

I redesigned the header of this site earlier this week entirely because I was bored. I couldn’t focus on what I should have been writing and I decided a design project would help. What I came up with worked, though, so I went with it.

The gradients in my previous header were dated when I launched them and I was getting to be unhappy with the dark grey navigation bar, especially the way the white social media icons looked on it. Fixing that only took a couple small changes.

The blue field at the top of the page remained the same, save for the removal of the gradient. My logo shifted over to the left side of the page, leaving room to the right for the nav menu to move up. In its new space, the nav items were shrunk down a little to fit better.

The grey nav bar was replaced by a thin piece of grey trim on the header, having the effect of shrinking down the overall size of the header by about 30 pixels.

The May 2014 design of ClarkRasmussen.com, featuring an updated header.
The May 2014 design of ClarkRasmussen.com, featuring an updated header.

Since it’s been over ten years, here’s the progression of the design of this site (excluding the lost-forever first design):

It was because of this change and the need to write it up to add to my portfolio that I also removed the portfolio section of the site (and its related administration tools) and moved everything to this blog.

On Blogging My Portfolio

A couple weeks ago I briefly mentioned that it seemed like it made more sense to post about newly-completed projects to this blog rather than have a separate “Portfolio” section of the site.

The idea is much the same as my thinking on code samples; it should be less about the outcome and more about the steps taken to reach that point.  I already had some posts about random design work I’ve done and those would have gone into the portfolio back before I had a blog, clearly the blog had already replaced the portfolio in my mind.

I did go back and pull all my old portfolio content into the blog.  That clutters things up a bit because I have stuff I wrote in 2003 with a 2014 timestamp on it but I’m not that worried about it.  I did flag each one as having been pulled directly from the old portfolio and included the original publication date if it wasn’t evident from the text.

Anyway, the “Portfolio” category is now in use.  We’ll see if I change my mind later.

Retro Portfolio: HockeyBird.com 16th Season Logo

Six years after I doodled a 10th season logo for HockeyBird.com, I was contacted about doing another logo for the site.

HockeyBird.com had undergone many changes in the six years since I last did a logo for them and were looking for “a still here after all these years kinda thing.” We had missed the site’s 15th anniversary but I decided to work around those words and do a 16th season logo.

As with the 10th season logo, I based my ideas around the alternate jersey of the New York Rangers. The navy, red and silver look that the 10th season logo had been abandoned by the team and replaced with a simplified “vintage” look, which I adopted.

The number 16 in a basic block font, red with a “vintage white” border on a blue background, is based on the jersey numbers of the Rangers’ alternate sweater. The HockeyBird.com logo appears to the bottom of the number, slighly overlapping both the number and the circle bounding these elements, its colors modified to match.

These elements are contained in a navy ring outlined in vintage white, containing vintage white text in a block font, “Sixteen Years and We’re Still Here” and the “HockeyBird.com” site name.

The HockeyBird.com Sixteenth Season logo. Designed based on the New York Rangers' "vintage" alternate jersey and featuring a recolored version of the HockeyBird.com logo.
The HockeyBird.com Sixteenth Season logo. Designed based on the New York Rangers’ “vintage” alternate jersey and featuring a recolored version of the HockeyBird.com logo.

The above text and images were copied directly from my original portfolio as I imported it over to the blog. It was not updated for re-publishing. This project launched in September 2013.

Retro Portfolio: ClarkRasmussen.com Redevelopment

After completing my Spring 2013 redevelopment of ClarkAndCathy.net (which included a code-consolidation effort that touched on ClarkRasmussen.com), I was able to move on to a redesign of my personal site.

I realized it had been five years since the last time I had done the design on ClarkRasmussen.com so I wanted to take the time to give it a bit of a facelift. The content was all still (mostly) good and with the admin tools having been offloaded to ClarkAndCathy.net, it should have just been a simple redesign of the template. I had to get difficult, though, and add a blog into the mix, as I wanted to add a place where I could write about things other than hockey, for which I already had DetroitHockey.Net.

The design started off with a new logo. I didn’t like that I had been stuck with a simple text treatment as the header of my previous design so I went back to the idea I had when I first created the site in 2003, my initials in an oval. This time, rather than oversizing and skewing the oval, I kept it smaller, almost a background element to the initials. I also kept it monochrome so it could be used in multiple environments.

With the logo done, I moved on to the page template. I kept the basic elements of the existing site but changed each up a little bit. The header remained blue but rather than having a striped texture it had a simple gradient. The new logo was placed in the middle of this bar, with the gradient applied to it as well. The navigation bar was kept gray with white text but was made larger, with a similar gradient applied to it. Links to ways to connect with me via social media were added to the right side of the bar, represented by a white version of each service’s logo. The footer was simply white text on a gray background.

The ClarkRasmussen.com home page, featuring content pulled in from the blog.
The ClarkRasmussen.com home page, featuring content pulled in from the blog.

The blog became difficult because I wanted to use the same WordPress installation as was used by the blog on ClarkAndCathy.net. I ended up having to map my blog subdomain onto the existing blog installation and hack the WordPress code a little bit to get it to understand which blog requests to that subdomain were meant for.

With the blog working, I redesigned the content of the ClarkRasmussen.com home to feature a blog excerpt and a pair of my recent Tweets. A paragraph of welcome text and links to my other projects were retained from the previous design.


The above text and images were copied directly from my original portfolio as I imported it over to the blog. It was not updated for re-publishing.

Retro Portfolio: ClarkAndCathy.net Redevelopment

The Spring 2013 redevelopment of ClarkAndCathy.net wasn’t supposed to happen.

The site was a placeholder. We didn’t use it for anything except for a couple tools that were built into a password-protected administration system. We had a WordPress blog that was shared only to family members (security through obscurity, true, but really we were just going for privacy anyway).

What I really wanted to do was redesign my personal site, ClarkRasmussen.com. When I started looking into that, though, I realized that most of the admin tools on ClarkRasmussen.com were also on ClarkAndCathy.net, with each version just pointing to a different (but structurally identical) set of database tables. On top of that, my wife’s site had the same setup.

I decided to redevelop ClarkAndCathy.net as a massive code cleanup, which would make my redesign of ClarkRasmussen.com easier.

I created a new design for ClarkAndCathy.net, featuring a large photo as the banner with a text header over the top of it. The banner was built in such a way that the photo could be automatically swapped out but it launched with only one photo available.

Because the public site is just a placeholder, it contains only links to other sites, so if anyone ever actually went there they might be able to find something useful.

The same design was applied to the blog.

The placeholder home page of ClarkAndCathy.net, with links to site we actually use.
The placeholder home page of ClarkAndCathy.net, with links to site we actually use.

Needing a good favicon for the newly-redesigned site, I put together a quick logo consisting of a pair of different-colored interlocking Cs.

On the back-end, I replaced the custom user-management system for our admin tools with the WordPress one. This meant that rather than having a blog login, a shared site login, and logins to each of our individual sites, we were down to one login for everything.

Tools that related to ClarkRasmussen.com specifically were ported over to the ClarkAndCathy.net admin system and ClarkRasmussen.com was updated to read from that database, which consolidated three databases down to one.

In the end, what resulted was a new ClarkAndCathy.net that had a single login to manage the blog and a set of admin tools that controlled content on multiple sites.


The above text and images were copied directly from my original portfolio as I imported it over to the blog. It was not updated for re-publishing.

Retro Portfolio: DRWTrivia Stat Tracker

The DRWTrivia Stat Tracker was a project I put together to give myself a chance to play with the Twitter API a little bit.

Every week, the official Twitter account of the Detroit Red Wings would run a trivia contest using the #DRWTrivia hashtag. Their system was to tweet a question, then a few miutes later they would tweet the answer and the name of the person who won that question. The winner would be the first person to reply to @DetroitRedWings with the correct answer and the #DRWTrivia hashtag.

I used the Twitter API to find all tweets from @DetroitRedWings with the #DRWTrivia hashtag. Then I filtered further for ones that had “Question 1” or “Question No. 1” (or any number through five). Sorted chronologically, the first one with #1 would be the question and the second would be the declaration of a winner and the correct answer.

In the tweet declaring a winner, I looked for anything that looked like a Twitter username to flag as the winning user.

Taking it a step further, I then used the general search API to find all tweets to @DetroitRedWings with the #DRWTrivia hashtag in between the question and answer tweet from the official account. This let me see each response to the question and determine how quickly each respondent replied.

One caveat is that the search API only goes back one week, so I could only get the response history for the contests that took place after I started developing this site. Had I been able to get more complete data, I would have set up more stat tracking.


The above text and images were copied directly from my original portfolio as I imported it over to the blog. It was not updated for re-publishing. This project launched in December 2012.

Retro Portfolio: The Games That Weren’t

The Games That Weren’t is a project I developed for the 2012 NHL lockout, partially as a joke.

As the league began to cancel games, several of the Detroit Red Wings fan bloggers were discussing what they would write about with no hockey. The idea of writing about fake games came up, at which point I realized my experience with simulated hockey through the DetroitHockey.Net Fantasy Hockey League would allow me to simulate all of the games that were cancelled in reality.

I took the codebase I’d created for the DFHL and pulled it into its own site. Because there would be no need for a human general manager / owner for each team, those interaction points were removed and several pages were consolidated.

The home page was updated to feature the game results more prominently, rather than news items (which wouldn’t exist for TGTW).

The home page for The Games That Weren't, showing the final scores of games more prominently than the DetroitHockey.Net Fantasy Hockey League home page that it was based on.
The home page for The Games That Weren’t, showing the final scores of games more prominently than the DetroitHockey.Net Fantasy Hockey League home page that it was based on.

Finally, the system for actually importing the simulated data was updated to run off of a cronjob rather than a manual process, so that games would be added to the site at the same time each day, rather than whenever I got to it.


The above text and image were copied directly from my original portfolio as I imported it over to the blog. It was not updated for re-publishing. This project launched in October 2012.

Retro Portfolio: DFHL 20th Season Logo

The logo for the DetroitHockey.Net Fantasy Hockey League’s 20th season was heavily based on the National Hockey League’s Stanley Cup Finals logo from the second half of the 1990s.

It started with a circle with a ribbon covering the bottom portion. Along the edge of the circle were the words “DetroitHockey.Net Fantasy Hockey League” and inside the ribbon read “Twentieth Season.”

In the middle of the circle was the DFHL’s league logo. The background of the circle was a radial pattern of white and gray stripes.

The DetroitHockey.Net Fantasy Hockey League's 20th season logo, based on the Stanley Cup Finals logos of the late 1990s.
The DetroitHockey.Net Fantasy Hockey League’s 20th season logo, based on the Stanley Cup Finals logos of the late 1990s.

The above text and image were copied directly from my original portfolio as I imported it over to the blog. It was not updated for re-publishing. This project launched in July 2012.

Retro Portfolio: DetroitHockey.Net Redesign

The April 2012 updates to DetroitHockey.Net were the culmination of several months of tweaks to the home page and site template intended to make content easier to find for a user who had never been to the site before.

The home page was updated to include three featured stories, rather than one. A primary story would be represented by a photo, headline, and introductory text while two additional stories would be represented by a photo and a headline.

Three lists of other types of headlines were consolidated into one, with stories from DetroitHockey.Net itself bolded in that list to make them more visible.

To better embrace social media, a spot for important tweets from the site’s official account was created. A floating box with links to the site’s Facebook and Twitter pages, as well as available RSS feeds was also added to the site’s template.

The header was updated to reduce clutter. Rather than including the site’s wordmark on the left and logo on the right, the new header had the “promotional logo” featuring the site’s name on the left. This left more room for a list of recent discussions from the site’s forums to be featured, and room for a much more visible search box.

The redesigned DetroitHockey.Net home page. More photos are featured and there are fewer lists of headlines. The header has been cleaned up, with important items more visible.
The redesigned DetroitHockey.Net home page. More photos are featured and there are fewer lists of headlines. The header has been cleaned up, with important items more visible.

The site’s navigation was updated to be slightly larger and the related drop-down menus were updated to no longer need to be just lists of links.

The DetroitHockey.Net navigation system was updated to allow for drop-down menus with additional styling.
The DetroitHockey.Net navigation system was updated to allow for drop-down menus with additional styling.

The above text and images were copied directly from my original portfolio as I imported it over to the blog. It was not updated for re-publishing.