| dev, general | 3 comments

The very first obligatory "first post" blog post. In here I'll share a little bit about my blogging history, the goals for this blog, and where I got my inspiration for its design. I threw in a little surprise bonus at the end, too. So now would be a good time to add this site to your RSS reader!

This will be my third blog if you count my last one, Blip Dip, which was not so much a blog but rather more of a music recommendation site. My first blog slowly fell into ruin when I ran out of ideas and began to write meta stuff about how I don't write enough. I eventually abandoned Blip Dip because nobody cared about it I didn't find it to be as rewarding as I thought it would be. My main goal with this one is to avoid feeling pressured to write. Even if that means I only publish something new every few months or even less, although I have several ideas lined up for now.

You probably won't read much about web development here—in fact this might be one of the few posts about it—but rather more about what I'm doing offline. I mostly wanted a place to show off some of the vintage audio gear I find and what I did to restore it. My only regret is that I've already sold a bunch of old gear before I had a chance to document it.

Moving on

As for this design, I was very much inspired by this blog by Trent Walton, but more specifically, his post on fluid type. I haven't called myself a web designer in years, so that's my justification for kind of copying his design. Imitation is the most sincere form of flattery, and all that, right? I tried to make it my own anyway.

I've been a little behind the curve lately with CSS tricks and I've been wanting to make a mobile friendly site for a long time, so that's what I did. Go ahead and resize your browser window and watch the magic. At the smallest size, all of the icons get swapped to high-res retina display compatible ones. It works great on the iPhone 4 and 4s, but the viewport on a retina display iPad or Macbook obviously isn't small enough to trigger the switch. Maybe somebody can give me some tips on how to fix that.

I used rem units for the sizing of all elements and text which works amazing when you want to scale your entire site up or down, but IE only supports them in version 9 and up. So the site might look a little janky in IE8 or lower. I also changed the box-model for certain elements, which is super handy if you want to make something have width: 100%; but also apply a border or padding—to an image, for example—and not have it extend outside of your layout. I found that changing the box model works great if you restrict its use to specific elements, but if you apply it to your entire site it will most definitely break just about every jQuery plugin you try to use (like lightbox), as well as the 960 grid.

While I think I did a pretty okay job, Trent's entire approach is probably a million times more elegant. His whole site is kind of amazing actually; the heading for each blog post he writes is done entirely with plain text and CSS (a few images are used, but not where you'd think). It makes me immensely jealous.

In conclusion, here is a picture of a cat yawning in the sun:

Scratch

3 comments

Woohoo, it's about time you were online and writing again. How else do you expect me to learn new words like "janky"? Also, that is not "a" cat... that is YOUR cat!

Just testing out something

Jeff, you have great site here, and i am happy to came across it.
I just had some luck to get Harman Kardon 430 paired whith some Grundig speakers. After just a day listening it, i can tell it is a wonderfull, magical audio piece.
And all gear you renewed and documented is well done. Pictures are great too. I wish you a many more articles and a lot of enthusiasm and happines.