Matt Hackmann

MattHackmann

The thoughts and goings-on of some programmer dad.

The Watchings

I have nothing better to talk about than the things I am watching, either actively or are just stuck in the middle of. So, whatever.

Normal Shows

Breaking Bad - Currently somewhere in season 2. Everybody lost their shit over this show and, while I certainly think it's well written, it hasn't quite gotten to the "gripping" part for me yet. Also, the episodes are so long and deep that it's a hard one to marathon.

Parks and Rec - Basic sitcom, and a humorous one at that. Unlike Breaking Bad, I could watch this all day. Light and fluffy.

Star Trek (TOS) - I'm somewhere down at the end of the first season and it's been entertaining so far. Despite the rocky start it's had trying to flesh out that universe, the core stories feel very Trek.

Anime

The new season just started, and I don't want to give away too much of my opinions for the end-of-year reviews, so I'll keep this brief.

Kyoukai no Kanata - The new KyoAni show, so obviously I have to watch. They've been on kind of a fantasy/mystery kick lately and this falls right in line with that.

Golden Time - Some college harem show. The first episode was pretty abysmal, but I'll stick around for the second to see if it improves and where they go with the cliffhanger ending.

Little Busters Refrain - I enjoyed the first season enough to watch the second. It's Key, so generally that means emotionally manipulative stuff even if it's not being expertly executed by KyoAni.

Nagi no Asukara - Interesting show about fish humans. I have a super weak spot for oceany type things, and the visuals hit that spot with a jack hammer.

Kill la Kill - From the guys who brought you Gurren Lagann, another crazy ass, stylized action show.

So, yeah. There's my post for the day.

The Fates Conspired Against My Better Treadmill Entertainment

This evening, I went out to grab my mail and, as I was walking that way, noticed that the gym was empty. Having not done my biking the last couple days as should have happened, I decided that a quick jog on the treadmill would be beneficial (especially since the scale is tipping down again).

After quick journey back to the apartment to grab my iPad and shoes, I made my way back towards the gym where I would mooch off some wifi and catch some Parks and Rec courtesy of Netflix. Except that the wifi is either moles asses slow or just plain doesn't work, because I walked in place in front of a red screen loading for a couple minutes before giving up.

No matter, just about every machine in that room is wired up with cable. Flicking on the TV, I waited through a few commercials to see what channel I was on. Turns out it was the Food Network and it was showing Chopped, one of those god awful reality shows that the former cooking show channel likes to play these days. Because god forbid we're not entertained by shallow, scripted-through-editing shit TV instead of being educated on how to woo women with succulent dishes. Yes, I'm a little sore that every channel that had mildly educational stuff has gone over to this format (looking at you Discovery Channel, History Channel, The Learning Channel).

But, whatever. I could just change the channel. Except, the channel changing buttons wouldn't actually change anything. They clearly were doing something because the OSD would come up with the current station number, but it would actually change. At this point, I should have turned off the TV. But I didn't.

I walked/jogged as hippies tried to cook chickens feet for a Halloween themed dish.

Goddammit...

The Best Way to Hide Text in Favor of an Image

hashtag html5, hashtag css3!

I'm saddened that the red squigglies went away after correcting my spelling of "hashtag"...

Sometimes when you're coding a website, you'll have something in markup that is represented in text for accessibility, but needs to be graphical in presentation. Oftentimes, this will happen for a logo or an icon of some sort. The industry standard way of hiding the text but not the image is to use text-indent to move the text somewhere off the left side of the screen while setting a background.

That last part is fine, the other part is not.

When you text-indent something -9999px offscreen, you're really fucking up the internal render dimensions of the item for the browser. Some dude from Netflix explained more about this on a talk he gave about fixing performance issues on mobile, but I'll be damned if I can find it now. The short of it is, it's bad practice, bad for performance, and you shouldn't do it. But, there's a nifty, cross-browser friendly way to have your cake without resorting to ugly hacks like text-indent.

Disclaimer: I can't take any credit for any of this. I picked it up from my pal Mickael Lucchini during my first tenure at Griffin. However, I have yet to see this trick used or mentioned anywhere else on the internet, so it needs to be shared.

.image-text {
display: [block|inline-block];
height: 0;
padding-top: 10px;
width: 10px;
overflow: hidden;
background: url(BACKGROUND_IMAGE);
}

A quick description of what's going on:

Line 2 - obviously, seeing as we need to set a height and width, we need a block level element Line 3 - we zero out the height of the element to force the content out of the renderable area Line 4 - instead, we set our height on the padding which gives the element height and allows the background to show through Line 5 - width is set as normal Line 6 - because our element height is 0, setting the overflow to hidden will hide the text content within Line 7 - finally, set the background, probably a sprite or something

There you have it. Probably the best way to image replace text in a performant and browser friendly way (back to IE6, if I'm not mistaken). If you inspect the search icon up in the corner, you can see this code in action (not sure why the input box is off, but that's something for another day). Also, if you're into SASS, here's a handy mixin I made of the above:

@mixin image-text($background, $width, $height, $display: block) {
  overflow: hidden;
  width: $width;
  height: 0;
  padding-top: $height;
  display: $display;
  background: $background no-repeat;
}

Star Trek: 25th Anniversary - A Retro Game Review

Sometime in the mid 90s (I'm inclined to say 1996), garage sale-ing was a popular past time for middle class Americans. It might still be, but I haven't been in forever. Seems like it'd be fun. But, I digress.

As stated, somewhere in (probably) 1996, we hit up a garage sale a few blocks up from our house. To my kid mind, it was probably the greatest garage sale ever, for there was a veritable treasure trove of old NES games. We wound up leaving that garage sale with three games (and some extra cases), one was Gauntlet II, one was some other game I can't remember, and the third was Star Trek: 25th Anniversary. I grew up on a steady diet of Next Generation growing up, but somehow I was aware of what the original series was and the characters in it. Granted, anything with the name Star Trek in it had to be cool, so I was excited.

And enjoy it I did. It became one of the very few games I played to completion on our old machine, a fact that I was proud of at the time. So, as I've been slowly watching TOS at the behest of my boss boss boss, I remembered this game and the feeling of enjoying it quite much. A quick trip to eBay, and I found not only a copy, but a copy with box and manual. That's a big deal for one who has the tendencies of a collector. For once, though, I actually played the game instead of let it sit and collect dust. And now that I'm done with my long ass intro, the review.

Continue Reading