I’m Late To The 456 Berea Street Party

I’ve been reading Roger Johansson’s articles on 456 Berea Street for quite some time now. I think that I originally found his site when I was looking for a more graceful way to make transparent custom corners using CSS. I gratefully used his tips on the borders, and immediately subscribed to his feed.

Even though I have been reading Johansson’s newer stuff, I hadn’t taken the time to look back through his archives until last week. There is some really great stuff in there, I have to say.

CSS 2.1 Selectors

One of the first articles that I found was his 3-part review on CSS selectors. There’s not really any new information in this series, it is however a very elegant and concise review of them.

I don’t know about other people, but I’m constantly getting the Child (>) and Descendant (+) selectors confused. And as far as remembering the syntax for Attribute selectors, forget it.

Also, for the bleeding edge folk, there’s another article on CSS 3 selectors as well:

Document Titles

The next article I found that was extremely useful was about document titles.

I’ve actually been trying to decide how to do the document titles on this website for awhile now. Well, at least, every time I remembered to think about it I thought to myself, “Oh yeah, I hate the way that looks. I should do something else. Hmmm.” I would then promptly forget to do something else.

The default style for WordPress blog titles goes something like this:

Blog Title » Blog Archive » Post Title

I didn’t take me very long to realize that I hated this format. First of all, it’s way too wordy. Second of all, the most important information, the post title, is left all the way at the end.

For instance, this post would end up looking like this in a search engine:

NerdStarGamer » Blog Archive » I'm Late To The 456 Berea Street Party

Yuck. Every single hit on a search engine will start “NerdStarGamer » Blog Archive”. Even worse, monthly archives look like this:

NerdStarGamer » 2007 » May

Changing the document title tags requires editing small bit of PHP and using the WordPress template tags If you want to serve up anything other than a static message. At first I took the advice in a Pearsonified article, The Simplest, Most Effective SEO Move You Can Make, which conveniently provides you with the appropriate PHP code.

Unfortunately, I wasn’t quite satisfied with the solution. It was better, but I had lost my website name in most of my titles. After reading Johansson’s article on the subject, I decided I liked his solution the best. So, now I’m sporting the 456 Berea Street-style document titles. Here is the code that I used, if you’re interested:

<title><?php if (is_single() || is_page() || is_archive()) { wp_title('',true); echo ' | '; bloginfo('name'); } else { bloginfo('name'); echo ': '; bloginfo('description'); } ?></title>

Final Note

There’s all sorts great stuff on 456 Berea Street. I have a lot more left to read. One of the best features on the site has got to be the “Best of Feature”. It’s easy access to Johansson’s own list of “most useful, interesting and/or thought provoking” articles.


Mac Browsers and Non-Native UI

Jeff Atwood’s most recent post from Coding Horror has really hit the nail on the head in my mind.

Atwood’s article starts by pointing out that many Mac users prefer Safari to Firefox as their primary browser. While I’m not sure if this claim is totally true, since I know many Mac users that prefer Firefox, I can say that in my personal case it’s definitely true.

For me, when I’m using a Mac, Safari is the only browser that gets it right. Don’t mistake me, Safari definitely1 has it’s flaws (more on that later), but it still wins.

Safari is the only Mac-compatible browser that really looks and feels like it belongs on a Mac. It’s made by Apple and bundled with OS X, so this shouldn’t come as much of a surprise. Call me superficial, or *gasp*, a designer, but this point is excruciatingly important on a Mac. Mac users care what their applications look like. They care about good user interfaces, even if they don’t know what that means or have never heard the term. If pressed to explain why most average Mac users prefer Macs, they would probably give reasons like, “It makes sense” and “It just works.” At least the first reason can be attributed to clean and consistent user interface design.

Did I mention that Safari is blazingly fast? It starts up consistently in less time than it takes to sip my coffee.

Safari does have it’s pitfalls though. It tends to choke up a little bit on some more intensive Java or AJAX based pages. There are also those crappy sites that don’t even allow Safari (not Safari’s fault).

I’ve also noticed when developing websites with HTML/CSS/JavaScript, Safari tends to be a little bit more forgiving with errors than other browsers. While on the surface this might seem like a good thing, it’s actually a very bad one. Pages that work perfectly on Safari will inexplicably fail miserably in Firefox. After hours of wasted time debugging (did I mention the debugging in Safari sucks?) I usually find out that the culprit is a piece of invalid code. Firefox does that right thing and chokes on it, letting me know that there’s an actual error. Safari (although give him credit for trying cover up my mistakes for me) ended up making it worse by rendering my page anyway.

For the most part, Safari renders like a good little standards-compliant browser, but every now and then, there are the infuriating bugs. Take this blog for instance. Images that are wider than the content column, are set to automatically scale down. This works great in Firefox (and probably all of it’s cousins). For IE users, the graphic just gets pushed below the sidebar and displayed at full size. But Safari, infuriatingly, almost gets it right. About half of the time, Safari squishes the width down to fit the image, but not the height. This makes for some pretty ugly images, but at least it doesn’t break the page. The other have of the time, it doesn’t resize the image at all. I’m really not kidding here; I opened one of these pages in Safari and pressed the reload button about twenty times. For no explainable reason, Safari kept rendering the image differently. If you’re using Safari, check out this post and try reloading the page several times:

I ended having to add an overflow:hidden tag to keep Safari from breaking the page. I didn’t want to get rid of the image resizing feature just for Safari and the WebKit builds didn’t have the same problem. So, hopefully things will be different in the next version of Safari.

For development work, I end up using Firefox more. I’ll usually start with Safari, but when it comes down to the design details or debugging, there is no replacement for Firefox and it’s extension buddies. That leads me into another serious lack in Safari, extensions. Now, I know that it does have a few, but these simply don’t compare the the wealth of Firefox’s extensions. We can discuss this again when Safari gets its own version of Firebug and Web Developer.

I’ve tried most of the other Mac browsers. Firefox is a fantastic browser. It’s the only browser I use on a PC, but on a Mac, it falls short. It takes longer to load than Safari, sometimes even an explicably long time. Subjectively, it feels sluggish. Then there’s the user interface. The mac is not a Windows machine (except for when it is) and what works in Windows doesn’t in OS X. Despite all of it’s greatness, I can’t use Firefox as my default Mac browser.

For all of the reasons I don’t like Firefox on a Mac, there’s Camino. It’s a lot like it’s cousin Firefox, but faster, sleeker and fits in with the rest of my OS X applications. Unfortunately, I just don’t think that Camino is ready for prime time. In some ways it seems too lightweight. It’s just not robust enough to do everything I want. It has basically the same pitfalls as Safari, except that Safari has been around longer to iron out many of the wrinkles. But give it some time, and it may come around.

Then there’s Flock. Now this is a very cool browser that is very innovative. It caters to the Web 2.0 crowd and does a pretty good job. I even put Safari out in the cold for this one. That lasted about a month. In the end, Flock is still very new and untested. There were too many times it broke on those nice interactive pages, (like say, WordPress Admin). And sometimes, it was very, very slow. Basically, Flock was a nice fling. (Ouch. That hurt to write. Sorry.)

So in the end, Safari wins for me. It’s not perfect, but it finishes with the fewest bruises.

  1. I have a problem spelling the word definitely. When I was writing this post, my spell checker corrected the spelling for me to: defiantly. But in a funny way, I think that works too. Safari defiantly has it’s flaws.


So here it is. My blog, on WordPress, finally. So far, things are kind of rough. I’ve recently found out the a couple of months ago when I moved my Blogger blog over to the new Blogger Beta, that it was actually a really bad idea. Blogger Beta is fine, but apparently nobody has gotten around to writing anything to import a Blogger Beta blog to WordPress. Yikes, a total disaster. My blog isn’t even that big either.

Luckily, I’m not the only one having this problem. I found this great post on WebbleYou that explains how to hack your way around the old Blogger import and get it to work.

Everything worked great for me until I got to the part where I had to import my mysql dump into my WordPress database. The query failed for some reason I couldn’t understand (I understand very little mysql). I tried twice with no luck and then gave up. It turned out to be okay that I couldn’t figure it out because my WordPress database was actually empty, so I was able to just replace the whole damn thing without going through that funky import thing.

The import was great, but it left a lot of work to be done still.

  • Finish formatting of posts: A lot of the formatting on the posts got really messed up during the import so I have to backtrack that and fix it. I’m also kind of trying to standardize the style of my posts (if you look back, I’ve tried quite a few different things over the last couple of months).
  • Fix broken links for photos and videos: None of the links for the photos or videos transferred, so I’ve been working through those as well. I’m also moving them all over to my new web space as well.
  • Format Comments and get rid of some of those Anonymous comments: I want to check all of the comments to make sure they look good as well. I’m also going to add in the names (or something that identifies) of most of the commentors. I know who you are.
  • Categories: I was really excited about finally being able to do categories (in a non-hackish way) on my blogs. Then I realized that that means I have to created them and tag all my posts. Yuck.
  • Add muchas plugins: I’ve already started this, but I want to get all of the cool plugins set up of course.
  • Design Descisions: For now, while I get all of the basics up to snuff, I’m sticking with the default template with only a few changes. I plan on brining back something very similar to my design on Blogger, but that’s gonna be a whole new project. It will take me some time to work through developing a template for WordPress. I can modify things pretty easilty, but I think that I want to do a complete overhaul.

I’m sure there are a few other things that I’m missing here, but that’s a good start. As you may have noticed, the url has changed for my blog. Please update any bookmarks to the new url:

The old url, www.nerdstargamer.com, will still work for a little while. Eventually though, I will be putting up a different site at that address.