Here’s how it looks.

So, to recap the markup of the h1 is:

<h1>Adam Darowski</h1>


And the CSS is:

h1 { font-size: 450%; line-height: 1.2; font-weight: normal; font-style: italic; margin: 0 20px 20px 40px; text-indent: -55px; }
h1:before { content: '<h1>'; font-size: 50%; }
h1:after { content: '</h1>'; font-size: 50%; }


The good news is Internet Explorer 8 is the first version of IE that will actually will show the content contained in the pseudo-elements.

The Problem

The bad news is it looks like this:

Wait, why is it so tiny? The problem seems to lie in the h1:before, h1:after { font-size: 50%; }. If you remember, I took my h1 and boosted the size to 450%. Then, for the “exposed markup”, I dropped the font-size to 50% of that. Looks like the difference is:

• Firefox, Safari, and Opera treat the content generated by the :before and :after pseudo-elements as part of the h1. Because of this, the font-size: 50% is adjusts the font-size: 450%, making the “exposed markup” render at 225%.
• Internet Explorer 8 treats then content generated by the :before and :after as outside of the h1. In this case, the font-size: 50% is instead applied to the base text size (which in my case is font-size: large). This is why it looks so tiny.
• Internet Explorer versions 7 and older are still reading HTML for Dummies and haven’t caught up.

The Solution

Once I figured out what was happening, the fix was super easy. I created an IE8 style sheet an used a conditional comment to add it to my page. You target IE8 the same way you did older versions:

<!--[if IE 8]>
  <link href="style-ie8.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->

Then in that style sheet, I simply added a pixel-based font-size for the pseudo-elements.

h1:before, h1:after { font-size: 30px; }

Why pixel-based? Simply because IE8 won’t screw it up. It’s not ideal, but neither is Internet Explorer. Here’s how it looks:

So, if you ever generate content with :before and :after and resize it with percentages (I mean, who doesn’t do that every day?), that’s your solution.

Fluid.app allows you to make site-specific browsers (SSBs) that contain just a single web page. This way you can take any web apps that you use all day every day (for example Gmail, Campfire, or Twitter) and pull them out of the browser. This way they always stay open, are easy to command+tab to (like a regular app), and aren’t lost in the browser tab shuffle. It’s a little productivity booster.

Fluid also allows you do do things like make the app into a overlay window (sits on top of all other apps) or even be semi-transparent. That’s what we’re going to use for this example. So, let’s fire up Fluid.app.

Here, we’re creating an app called “Transparent Window”. As for the URL field… you can really pick any URL. In many cases you’ll probably be dragging an image to the window anyway. Now create and launch your app. From your new app, open the Appearance preferences.

Oooooh, Window Opacity! Yup, that’s what you want. Set it about halfway. Then open the Advanced preferences.

Here, choose “Allow browsing to any URL”. By default, Fluid apps don’t let you navigate away from the main site you named when building the app. This is to keep the app focused on not turn it into another browser. But this will allow us to open mockups from any site or even drag images to the window. You’re done!

You can use this app for overlaying mockups or comparing Webkit rendering to lesser browsers.

Here’s a screen shot of my sidebar in Transparent Window (WebKit) sitting on top of the sidebar in Internet Explorer 7.

(Yeah, IE7 doesn’t like pseudo-elements.)

Enjoy!

The Problem

Here’s what the homepage looks like. I can dig it.

The header, sidebar, and footer are pretty straight forward. That large graphics-and-text element in the main column is a bit different. So, how would I go about marking this up? First of all, the photos and screenshots are presentational, so we’d handle that with a background image. For the text (which is not presentational, so we want it in the markup), I tend to size using keywords and percentages. But in a case like this, I’d use some pretty pixel-specific font sizing, padding, and line breaks to get the markup to render like the mockup. Of course, I’d have to use some sort of image replacement on the “Patients + Data” title since that’s a non-standard font.

But Wait!

Here’s the thing. The page is actually somewhat fluid. It has a min-width of 1000 pixels and a max-width of 1200 pixels. So, even if I wanted to use that approach, I have no way of knowing exactly where the text should go because the image behind it doesn’t have a static size.

So… now what?

Well, we’re gonna rock it like it’s 1999 and just use one big honkin’ image for the main column. It’s not the most elegant solution, but it will work the best. To ensure the text-based content is still available of the user turns images off, we’ll put the text in the markup. Like so:

<div id="image">
  <h2>Patients Data = Insight</h2>
  <p>Patients are no longer just health care consumers. They are healthcare customers. <strong>PatientsLikeMe</strong> provides deep insight into your target patients&rsquo; attitudes, beliefs, behaviors, and outcomes.</p>
  <p><a title="Learn more about our Products &amp; Services." href="products/">Learn More&nbsp;&raquo;</a></p>
  <a title="Learn more about our Products &amp; Services." href="products/"><img src="images/home1.jpg" alt="Home page artwork" width="864" height="735" /></a>
</div>


You see I have the text and the image present. I’ll use CSS to offset the text while keeping the image visible. That CSS looks like:

div#image h2, div#image p {
  position: absolute;
  left: -1000px;
  width: 100px;
}


Why use this instead of display: none;? Setting display: none; on an element will completely remove it, even for users with assistive devices such as screen readers. The offset technique will just push the content out of the viewport. It’s still actually there, just not visible. Users with CSS and images enabled will see the image and no text. Users with screen readers will simply read the text (and alt text of the image). Users with CSS AND images turned off will see just the text. The rare folks that have CSS turned off but images turned on will get both the image and the photo. I believe that’s a small enough population to make this an acceptable approach.

But Wait Again!

We’d actually like this image to fill the main column, whether the screen is at 1000 pixels wide, 1200 pixels wide, or somewhere in between. How do we do that?

div#image img { max-width: 100%; height: auto; }


In the markup, hard-code the image’s width to fill the maximum width of the area. In the case above, it was 864 pixels. Then, the max-width: 100%; ensures that if the width of the div shrinks, the image will shrink along with it. The height: auto; simply will adjust the height of the image to correspond with the new width.

Awesome, right?

Oh, the IE Horror!

The good news is that all the markup and CSS above works fine with Internet Explorer. Yes, even IE6. However, it’s the godawful way that IE resizes images that causes the problem.

Luckily, through a bit of hunting I found that by simply adding some weird proprietary Microsoft thingie to your CSS, you can fix it. I just added this line to my IE stylesheet:

div#image img { -ms-interpolation-mode: bicubic; }


You can see the before and after below. Pretty remarkable difference. It becomes really noticable when there is text in the image.

One caveat: I tried to use this technique on a PNG file. It didn’t work. However, I re-saved the image as a high quality JPG and it worked. So I suppose Microsoft assumed you would only want to do this for photos or something?

One more caveat: If you have many images on the page with -ms-interpolation-mode: bicubic added to them and do any window resizing, things can get slow really quickly. Ethan Marcotte wrote a more complicated but higher performance method for handling this. If you’re talking one or two images on a page though, you’re fine with this approach.

And there you have it. Your image will stretch to your desired max- and min-width, and even look nice in Internet Explorer 6 and 7 (IE8 actually resizes images like a real web browser).

Last night, my blog post hit the BatchBlue Blog where I announced I’ll be moving on from BatchBlue Software and joining PatientsLikeMe.

Here’s the intro, but I ask you to read the entire post…

After nearly two and a half years, this week was my last at BatchBlue. This is a decision that I couldn’t have imagined making just a few weeks ago. My awesome co-workers have been incredibly understanding and supportive…and I think a big reason is that the decision really has nothing to do with BatchBlue at all.

I mentioned in the post that there are personal reasons for this move that are incredibly important to me—the type of thing that can convince you to move from what is already a great professional situation. I really can’t say enough great things about BatchBlue and the entire BatchBlue team.

Almost two and a half years ago, I was a wee lad working 70 miles away from my wife and little girl (and baby boy on the way). I was with Aptima, another fantastic company that really catered to my inner entrepreneur by essentially allowing me to dynamically define my position as I explored my interests. Unfortunately, it came to a point where I was reaching the limits Aptima could provide. They are an R&D think tank-type organization, and being able to work and collaborate with users during the development process was something I wasn’t able to do and really wanted to try.

Along came BatchBlue. I was able to work from home, eliminating the commute issue. I was able to work with a very small and tight group. I was able to work on a web app at the beginning of the development phase. I was able to work closely with users as we went from alpha to beta to 1.0. I was able to be home for the arrival of my third child. I was able to be around for doctors appointments, preschool performances, and even more serious events like an 11-day hospital stay with our infant. Basically, BatchBlue gave me everything I ever could have asked for.

I actually first talked to PatientsLikeMe while I was still at Aptima. I was blown away by what they were doing. I started talking about them on this blog and on other blogs. I was kind of smitten.

Over the last couple of years, I’ve done a little bit of side work for PatientsLikeMe (that reminds me, I gotta update my portfolio!). In doing that work, I not only gained some insight into what PatientsLikeMe is trying to accomplish, but also met quite a few members of the team. That helped a lot since I know I’m not heading into the unknown on this. I can thank Twitter for cultivating the relationships of some of the folks I met while also giving me some insight into the folks I haven’t met yet.

I’m incredibly proud of the work I’ve done at BatchBlue—on BatchBlue.com, BatchBook, on The Small Business Web and also the work done with our users. I’m also thrilled I got the chance to work with Pam, Michelle, Sean, Keri, Stephanie, Matt, Adam and Melony.

Next week will mark a huge change for me, but it’s time for me to get over that. I have a lot I want to accomplish.

People of Twitter, there are douchebags among us.

Gone are the days when Twitter’s own description of the service was accurate:

Twitter is a service for friends, family, and co–workers to communicate and stay connected through the exchange of quick, frequent answers to one simple question: What are you doing?

Now everybody is flocking to Twitter in hopes of answering the questions “How can I sell my product to you?”, “How can I get you to follow me?”, and “OMG Plz RT?”. Yes, we’ve gone from Twitter being a virtual unknown outside the geek circles to hearing Billy Bush, Ashton Kutcher, and (this one opened the floodgates) Oprah gush about our beloved microblogging service.

Once all these newbies flock to Twitter, they immediately have a few questions. Specifically, they want to know (a) how they are supposed to make all this money on Twitter, (b) how they, too, can have 1 million followers, and—this one probably bugs me the most—(c) hey, why can’t the up the character limit? 140 is too small! If not helped, these folks will turn into social media douchebags (or worse, social media sleestacks!).

My goal here is to provide some tips you can point these misguided folks to. Help them avoid becoming douchebags.

1. It’s not all about you. If you’re going to get anything out of Twitter at all, you need to immediately check your ego at the door, listen to people, and build relationships. Talking about the things your or your company are doing will only get you anywhere once you’ve already joined the conversation.
2. Don’t tweet about your number of followers. It’s technically impossible to do that without sounding like a douchebag.
3. Don’t ask for x many more followers so you can reach a “milestone”. Double douchey. You’re better off saying something interesting (so people will retweet it) than asking THE PEOPLE ALREADY FOLLOWING YOU if you can get a few more followers.
4. Don’t retweet Oprah*. Just don’t. She has eleven bajillion followers. We’re all aware she has a Twitter account. If we want to see her tweets, we’ll follow her. By retweeting Oprah, you’re exposing Oprah’s tweets to the millions of people who purposely have avoided them at all costs. (* This also applies for Ashton Kutcher, Mashable, TechCrunch, Robert Scoble, Guy Kawasaki, etc.)
5. Don’t ask for retweets. If something is interesting, it will be retweeted. People already retweet WAY too much anyway. Please don’t encourage them.
6. Don’t break the system. I get it. You’re annoyed that Twitter changed the way @replies work. But don’t go putting extra characters in front of your replies, forcing EVERYONE to see your @replies to EVERYONE. I know some people really liked that feature. But for a lot of us, if we had that feature turned on, Twitter would have been unusable. Don’t ruin Twitter for the rest of us.
7. This ain’t no RSS feed. My stance used to be that you shouldn’t tweet about every single blog post you write. My reasoning was that if people wanted to see every blog post, they’d subcribe to the feed. Well, for many Twitter is replacing the RSS reader. So, my new stance is that it’s fine to tweet about each blog post—as long as that’s not the only thing you’re using Twitter for. Mix them in with actual conversations. While you’re at it, don’t just tweet “[title] [link]“. Give us a teenie bit of context, or at least just make them sound friendlier. I know I’m more apt to click on something if the tweet gives me a little incentive as opposed to just looking like an auto-published tweet.
8. Learn how to @reply. By default (and as of this writing, the only setting) is that people will only see @replies from people they follow ONLY when they’re directed to other people they also follow. I love this default setting. So, here are some ways to use it right:

   • @adarowski wrote this awesome post about CSS. http://tinyurl.com/6×9add

     The problem with this tweet is that it would only be seen by people who follow both you and @adarowski. People who follow @adarowski likely saw him tweet it already. I’m guessing you want this to go to your whole network. @adarowski would appreciate that, too.

   • Check out this awesome post about CSS by @adarowski. http://tinyurl.com/6×9add

     Now this would go to your entire network. Win for you. Win for @adarowski.

   • @mattgillooly Heading to Providence Geeks? I’ll be there in about 30 mins.

     At first glance, you might think this should be a direct message. But for an event like Providence Geeks, the folks that follow both you and @mattgillooly probably would be happy to know you’re arriving soon (unless, of course, you’re a douchebag). What I like about this is that it doesn’t go to your entire network—just the folks that know both of you (and therefore actually care).

   • @adarowski See you soon!

     Something like this is probably best as a direct message. There’s no event context and it’s clearly just for one person to see.

9. Do not—under any circumstances—send an automatic direct message to new followers. Sending an automatic direct message says one of two things:
   • You don’t know me yet, but I feel comfortable enough to send you some spam.
   • I do know you, but I’m the type of douchebag who sends auto-DMs to EVERYONE, so you get the same generic response as everyone else. Feel special?

   Don’t be a douchebag. If you want to DM them, send them a real DM, typed with your own fingers.

10. Fill out your profile. A laundry list of ways to NOT get followed on Twitter:
    • By not using your real name. I’m talking to you, socmed14413 and flygrrl182.
    • By not using an actual photo of you (like your logo or something). Or worse, by not adding a photo at all.
    • By not providing a link. We’re not convinced. We want to find out a bit more about you before following. If you don’t have another link to provide, write a blog or join LinkedIn and come back later.
    • By not providing a “one line bio”. Think of this as your answer to the question “why am I interesting?”. Leaving it blank gives people no reason to follow you back.
    • By calling yourself a “social media expert”. Even if you are one. Everybody on Twitter calls themselves a social media export. After all, they do have a Twitter account.

Let’s help these folks out. What else you got?

BatchBook

First was the refresh of BatchBook. We had a few goals in mind that I wrote about on the BatchBlue Blog post. Among them:

• Making the primary column stand out a bit more. The two columns had too similar a look before and lacked visual hierarchy.
• Removing some redundant headers and other extraneous markup.
• Creating a more useful footer with a context-sensitive help section (FAQs and Screencasts depending on where you are in the app).
• Moving the search to the header, allowing us to bring up the sidebar content some.
• Making it less blue—there was a lot of it. The colors are toned down a ton.
• Getting a bit more of “me” in there—make the full transition to a Georgia/Lucida Grande font deck and getting some serious gray action in there.

And the results. Here’s the contacts page:

(full size image)

And here’s what an individual contact page looks like:

(full size image)

If you haven’t noticed how cool that social media integration is, I encourage you to look hard. Or, sign up even.

BatchBlue.com

And while I’m on the redesign kick, why stop with the app? Off to the marketing site I went. Here I worked with some great design concepts by the lovely and talented Mikey Hougland to do a home page/footer refresh. Again, a goals list:

• Getting a screen shot front and center. If you’ve got it, flaunt it.
• Getting the screencasts more publicity. Despite the fact that the screencasts lived on the third level navigation, people were finding them like crazy. The people want it, so we bubbled them up to the top. Of course, now I gotta do a new set post-refresh!
• Removing the sidebar to let the design breathe a bit better.
• Building out the footer (similar to BatchBook) and reducing some navigation into footer links.
• Getting rid of what I affectionately call “the goddamn starburst” and replacing it with the client login.
• Going full-out Georgia/Lucida Grande.

And the results:

(full size image)

And there we have it. I’m curious to hear what you think!

(The MacBook on the right, silly.)

So, after the initial WOW! and then the disorientation caused from the multi-touch trackpad, it’s time to move the data. I was a little worried, because I don’t just have data on my computer anymore. There’s Rails, PostgreSQL, SVN… things that are far more complex and I have no idea how they all work together. Surely these won’t migrate seamlessly, right? Au contraire!, Sean tells me. It worked for his white-to-black MacBook migration.

So, last night, I finally set up to migrate. I pull out my FireWire cable and… look… and look… and… whaaaa? As a loyal Mac user since I wore Superman underoos, I’m used to Apple’s “port Russian roulette”. But I thought Firewire was here to stay. I mean, I’ve got a Firewire camcorder, Firewire hard drive… I thought I was safe.

So, I’m not writing this post to mourn the death of Firewire. I had some data to transfer. Apple’s Migration Assistant recommends I transfer the data over wi-fi. ORLY? 60 or so gigabytes over wireless fidelity. I try it. After a couple hours, the progress bar has filled up exactly one pixel. That ain’t gonna work.

So, I dig out my Ethernet cable (remember those!) and connect the two machines. With an actual cable! I try Migration Assistant and it finds the other computer. It tells me to install something on the old machine—DVD or CD Sharing Setup Update. It came on the Mac OS install DVD that came with the new MacBook. Here’s what the installer says it’s for:

This software is recommended for all users and provides enhanced customization capabilities and improved performance for migration over FireWire, ethernet, and wireless networks.

So, I tried this. It took about four hours to migrate. But when it was done, I opened Coda, it refreshed my SVN status (yay!) and I updated our code without configuring anything at all.

That’d be a win.

So, long story short—don’t try the wifi. Tether those Macs!

I figured I’d share some markup & style for a couple of page elements. Hopefully you’ll find it useful.

“Tweet this page” button

In this day and age, “Tweet it” buttons are becoming more and more important. Not only does a Tweet it button give users the ability to quickly post a page to Twitter, it reminds them to do so. There are online services out there that will make Tweet it buttons for you. Might as well roll your own. Here, clicking the “Tweet this page” button will send you to Twitter (if you’re logged in) and prepare a message that says “Small businesses are taking over the Internet! The Small Business Web is here. http://thesmallbusinessweb.com”. That’s actually super easy to do. The markup:

<p id="tweet-it"><a href="http://twitter.com/home?status=
  Small+businesses+are+taking+over+the+Internet!+The+Small+Business+Web+is+here.+
  http://thesmallbusinessweb.com">Tweet this page</a></p>

(I’ve added line breaks for cleanliness.) Basically, the hardest part is typing a “+” instead of a space.

Here’s how I styled it:

p#tweet-it a { display: block; position: absolute; top: 0; left: 20px; background: #004A8D url(logos/tweet-it.png) no-repeat 4px 50%; color: #FFF; margin: 0; padding: 3px 10px 5px 44px; text-decoration: none; }
p#tweet-it a:hover { background-color: #333; }

I wanted the whole blue box to be a link instead of just the text. So, I applied display:block to the link. Next, I absolutely positioned the link to it sticks to the top of the page. That’s where the top: 0 comes in. I added some space to the left, hence the left: 20px.

Next is the background. This encompasses the color (#004A8D), the birdie graphic [url(logos/tweet-it.png)] and the positioning (4px from the right of the box, 50% vertical positioning within the box). And of course, we don’t want the bird to repeat, so no-repeat. Then, I set text color and padding and yanked the underline from the link. The hover state simply changes the background from blue to gray. Pow, yer done.

“Business card” footer

Seriously, aren’t they cute? Here’s the markup on one of those little guys:

<dl id="shah" class="vcard">
  <dt class="fn">Sunir Shah</dt>
  <dd class="title">Chief Handshaker</dd>
  <dd><a class="url org" href="http://freshbooks.com">FreshBooks</a></dd>
  <dd><a class="email" href="mailto:sunir@freshbooks.com">sunir@freshbooks.com</a></dd>
</dl>

Yes, Microformats! This is the perfect case to use hCard—and it’s so easy. Each business card gets it’s own “vcard” class (that’s the class that says “hey, everything inside this element is one set of contact information”).

If you’re not familiar building an hCard, it’s all about applying the right class names to certain bits of data. Definition lists are great for this because you can basically throw a class on any single definition. The “fn” class means “full name”. The “title” class means “job title” while “org” means “organization”, or company that the person works for. I doubled up “org” and “url”, applying both classes to a link. That’s because the text that is hyperlinked is the org and the href is the url for that org. A two-fer!

Finally, the “email” applies to “email address”. I could have hyperlinked Sunir’s name with his email address using the same process above (<a class="fn email" href="mailto:sunir@freshbooks.com">Sunir Shah</a>), but in this case I wanted the email address visible (like a business card!).

That was fun. Let’s style it:

div#contacts dl { border-top: 1px solid #CCC; border-left: 2px solid #CCC; border-right: 2px solid #CCC; border-bottom: 6px solid #CCC; float: left; padding: 5px 5px 5px 52px; margin: 0 1% 0 0; }
div#contacts dt { font-weight: bold; }
div#contacts dd { font-size: 85%; margin: 0; padding-top: 2px; }
div#contacts dl#shah { width: 11%; background: #FFF url(photos/shah.jpg) no-repeat 5px 7px; }

Each definition list (each business card) gets these fancy borders set, is floated left (so they all line up nicely), and gets some internal padding. The padding-left is set to 52px to accommodate our 40px thumbnail images. There’s a 1% margin-right to give them a bit of breathing room.

Next, we simply bold the definition term (in this case the person’s name). Each definition (bit of contact info) is set to 85% with a bit of padding on top. Finally, each definition list is given it’s own thumbnail image thanks to the unique ID. I also gave each list a unique width (since some names are short and others are much longer).

So, there you have it—a new portfolio piece and a couple little markup & style examples. I’m curious what you think of the page.

However, this auto-detection is a bit overzealous. In addition to phone numbers, I’ve seen it link date ranges (1978-2008), specific dates (3/9/2009), and—for us baseball stat geeks—offensive rate statistics (.312/.418/.515… and I’ll send a BatchBlue tee shirt to the first person to identify that sweet career line).

Tonight, I was building a page and tested it in iPhone. It incorrectly linked some dates. This was problematic because in that specific section, I had all anchors set to display: block;. So, adding these extra links broke the design.

I could have added some extraneous markup and worked around it, but I was curious if there was a way to turn off this auto-detection. Turns out, there is.

In your <head>, add this line:

<meta name="format-detection" content="telephone=no" />

That will turn off ALL phone number auto-detection on that page. Enjoy!

Earlier this month, our family welcomed our third child into the world—Mae Juliana Darowski. We’ve been adjusting to life with a now-larger-than-normal family, but you know me. This meant I also had some online profiles to update.

Because of my anal retentiveness, I like to fill in my “About Me” section of all of my online profiles with the same text. It’s all part of the “brand”. For the last 21 months, that text had been:

A daddy of two and a User Experience Designer for BatchBlue Software.

Yep, that’s pretty much me in a nutshell, sans the baseball geekdom.

My incredibly predictable updated short bio now reads:

A daddy of three and a User Experience Designer for BatchBlue Software.

One minor difference. The problem is, I needed to make this change EVERYWHERE. Specifically:

• Darowski.com meta info, sidebar, about page, etc.
• Twitter
• Last.fm
• Facebook
• Slideshare
• Brightkite
• Chi.mp
• Get Satisfaction
• DandyID
• Plurk
• Flickr
• Upcoming
• LinkedIn
• RINexus
• YouTube

There’s gotta be a better way, right? I ran into this same problem when I updated my profile photo. In a couple places, I was able to simply use my updated Gravatar. That’s the holy grail right there. If you don’t know what Gravatar is, it is a service that provides “globally recognizable avatars”. Basically, you update your image. Other services, instead of asking you to upload a photo, just use your email address to fetch your image. They pull whatever size image they need. If you update your Gravatar, those sites update your image. Everyone is happy.

Many blogs use Gravatar, but the social networking sites don’t. So, that’s the first problem—lack of widespread Gravatar use.

That led me to a desire for globally recognizable bios. Ideally, this could just be part of Gravatar. You provide two bios—a short one-liner and a more expanded bio. Kind of like what I have on my About page. That way, any time I update my globally recognizable bio, my online profiles get updated.

Who’s with me?

I tweeted:

When you place strong emphasis on a link, do you put the <strong> inside the <a> or the <a> inside the <strong>? I think I’m inconsistent.

I had been putting the the <a> outside of the <strong>. Like this:

<a href="http://mailchimp.com/"><strong>MailChimp</strong></a>

My reasoning was that if you take away the link, I would still want the phrase to be emphasized.

However, Matt brought up some good points. His first was that I’m linking the phrase, not the emphasis. I can buy that. Also, he brought up the point that putting the <strong> outside is cleaner for semantic web scraping stuff.

I assumed this was minor and no big deal. But I’m happy to see that there are others who also care about this stuff. So, what do you do? What’s your reasoning?

I love CSS. But I also have always loved markup. With the new redesign here, I’m trying to give plain ol’ semantic HTML (POSH) the recognition it deserves.

Step 1 was the redesign.

Step 2 was the purchase of MarkupIsBeautiful.com.

Step 3 is a new category on the blog—appropriately named Markup.

Step 4… some new content. I look forward to it.

Photo by Steve Ganz. Steve also sees the beauty in markup.

Turns out, the problem is that my friends on Facebook were basically my friends on Twitter. So, by the time I checked out Facebook, everything I was seeing was old news.

Time passed, and something happened. More people joined Facebook. And I’m using it more and more.

The people I’m finding on Facebook now are people from high school… people from college… people from old jobs. As it goes more mainstream (and the early, core users probably hate this), more and more people sign up. And those are the folks that weren’t already on Twitter, Flickr, or FriendFeed.

So, suddenly my Facebook news feed is no longer a list of tweets I’ve already read. It’s updates from people I’ve only recently connected with after (sometimes ten) years of silence.

Some Facebook (re)connections:

• Guy from high school who showed me this band called “Nirvana” about a month before Nevermind was released.
• Girl from college who I ran into outside of Build-a-Bear with our respective batches of children. She still looks the same as in college.
• Guy from a couple jobs ago who felt bad that he kept his job while the rest of us were laid off, so he meticulously edited everyone’s resumes (he was a kickass editor).
• My sister’s friend who asked me to her junior prom. I went and we had a great time. But Facebook is the first time we connected since then.
• Bass player of the band I was in circa 1995ish. He was a huge Toadies fan and had a pet squirrel that just walked in his house one day and decided to hang.
• Girl from high school who I traded mix tapes with. She gave me showtunes and I gave her indie rock. Neither of us changed the others’ taste, but I like to think we enlightened each other a bit.
• Girl from high school who was super cute and… I never told her that.
• Ex-girlfriend of my friend (my friend who I was in a band with for a while, is my wife Erin’s cousin, and is the person who introduced me to Erin). I’ll always remember her “X-Ray Techs Do It in the Dark” bumper sticker.
• Guy from college who’s doing simple, standards-based web design in Providence. Basically, he’s me. But we hadn’t spoken in about eight years until recently meeting up.
• Intern from a couple jobs ago who’s lasting effect on my life is introducing me to The Appleseed Cast.
• Best friend from grade school to high school, who’s house I would ride my bike to every day and we’d play baseball until it was dark. If it was raining, we played computer baseball.
• That guy’s little brother, who I have a hard time picturing older than 12 or so years old.
• Girl I worked at the grocery store with… I tried, but failed. But now we’re Facebook buds, so it’s cool.
• Ooops, another girl I worked with at the grocery store with. Tried. Failed. Was kind of the story of my life in 1996.

I know it’s cool for us “open web” advocates to openly complain about Facebook. But you know what? Without it, these people wouldn’t be in my life at all right now.

So, who have you reconnected with?

What was I trying to do?

I have a full-time gig as the User Experience Designer for BatchBlue. That affords me the ability to be a little creative with my portfoio—it isn’t my source of income. However, I do believe that all full-time designers should do a little freelance to stay fresh. So, I’d still like to show what I’m about.

The design traits I want to convey to prospective clients and readers are simplicity, elegance, cleanliness, and a sharp attention to detail. I also want to communicate that markup and style are at the heart of what I do. I do a lot of different things, but I’m always happiest with a text editor, a web browser, and a refresh button.

Given all this background, my goal was to work the underlying markup into the visual design.

How’d I do it?

Since the “exposed markup” is merely presentational, I wanted to keep it out of the “real” markup. Basically, when you “View Source”, I don’t want you to see <h1>&lt;h1&gt;Portfolio&lt;/h1&gt;<h1>. I wanted the nice, clean <h1>Portfolio<h1>. The best way I could come up with to pull this off was with the :before and :after CSS pseudo-elements.

Huh, pseudo-elements? Pseudo-elements are added to CSS selectors to give you a bit more selection control. The four pseudo-elements are :first-letter (allows you to style the first letter of the content contained within that tag), :first-line (allows you to style the first line), :before (allows you to add content before the tag), and :after (content after the tag).

The :before and :after pseudo-elements are great—except for one problem. You guessed it. IE. But not just IE6. IE7 still doesn’t support them. The additional content just doesn’t show up. For my portfolio, I decided that was a fine tradeoff. I’m really not targeting the type of users who would surf the web with IE (present company excluded, of course!). Besides, this approach actually well. If you use IE, you just don’t get the “exposed markup” tags.

Here’s how it looks in IE7:

The markup

The pseudo-elements allow me to use a pretty standard definition list:

<dl id="active-projects">
  <dt><a href="http://www.darowski.com/tracesofinspiration/portfolio/batchbook/">BatchBook</a></dt>
    <dd>Small Business <abbr title="customer relationship manager">CRM</abbr></dd>
    <dd>For <a href="http://batchblue.com/">BatchBlue Software</a></dd>
    <dd>May 2007&ndash;Present</dd>
  <dt><a href="http://www.darowski.com/tracesofinspiration/portfolio/batchblue/">BatchBlue.com</a></dt>
    <dd>Corporate Website &amp; Weblog</dd>
    <dd>For <a href="http://batchblue.com/">BatchBlue Software</a></dd>
    <dd>May 2007&ndash;Present</dd>
  <dt><a href="http://www.darowski.com/tracesofinspiration/portfolio/tabigail/">Tabigail</a></dt>
    <dd>A simple, gray, one-column, socially savvy WordPress theme</dd>
    <dd>For the WordPress community</dd>
    <dd>December 2008&ndash;Present</dd>
  <dt><a href="http://www.darowski.com/tracesofinspiration/portfolio/baseballtwit/">BaseballTwit</a></dt>
    <dd>Blog posts and Twitter tweets about baseball stats and history</dd>
    <dd>For the sabermetric community</dd>
    <dd>December 2008&ndash;Present</dd>
</dl>

The CSS

First, we know we want the :before and :after content to always appear italicized and (my favorite color) gray. So, let’s use the global selector with the pseudo-elements. This way we don’t have to reapply the color and style over and over again.

*:before, *:after { color: #CECECE; font-style: italic; }

First, we’ll expose the opening and closing <dl> tags.

dl#active-projects:before { content: '<dl id="active-projects">'; }
dl#active-projects:after { content: '</dl> <!-- close #active-projects -->'; }

For the content property, you can either use a string (like I did), an image (via url(image.png)), or any of the following: open-quote, close-quote, no-open-quote, or no-close-quote.

Update: For some reason, this wasn’t rendering properly in Safari. The closing </dl> was appearing after the first <dt>. So, instead, I needed to wrap the <dl> in a <div> (giving the <div> the id of “active-projects” instead). This tricked Safari into putting the closing </dl> at the end of the <dl> where it belongs. If you know why Safari does this, please let me know!

Here’s the CSS for the <dt>:

dt { margin: 10px 0 10px 24px; font-size: 125%; }
dt a { font-weight: bold; }
dt:before { content: '<dt>'; font-size: 80%; }
dt:after { content: '</dt>'; font-size: 80%; }

In the first line, the margin gives a little space on the top and bottom, plus a proper indenting for our markup. Since the <dt> is used for the project name, I bumped the size up a bit. I also made the links bold to stand out a bit more. Then, of course, comes the :before and :after. In this case, I also dropped the font size for the tags a bit (to offset the increase in size of the links).

And now, the <dd>:

dd { text-indent: -38px; margin-bottom: 4px; padding-left: 56px; }
dd:before { content: '<dd>'; }
dd:after { content: '</dd>'; }

In addition to a little bit of a margin, I added a bunch of padding on the left and then used a negative text-indent. In the event that the <dd> goes to two lines, this will cause it to indent quite nicely.

And there you have it… pretty bits of markup used as a design element without muddying your “real” markup.

Things look a little different around here today.

In December, when I launched the Tabigail theme, I wrote:

Since [March 2007], I’ve tweaked and refined [this site] endlessly, but still kept the basic feel of that design I did in a day over twenty months ago. While I really like the design, it’s time for a change. So, what better way to archive the design than releasing it as a WordPress theme?

So, I had publicly tasked myself with a redesign. Today, I’m launching it. I dig it. So, what do I want to talk about?

1. Markup is beautiful: I love markup. Like, a lot. I love it so much that I wanted to work it into the redesign. It serves many purposes. Markup is beautiful, so I think it looks good. Also, there’s a new portfolio that takes the markup-as-design-element to a new level. Not only does exposing markup on my portfolio show what’s important to me and shows I know what I’m talking about, it also weeds out prospective clients that just don’t “get it”.
2. Finally, a portfolio: I’ve been told that I’m a rare designer that doesn’t have a portfolio. Now I do. I’ve only got the most recent/current projects on there right now (as you can tell by the class of the <dl>!), but I do love the design.
3. Ignores IE6. Well, and IE7, too: Would you believe that IE7 still doesn’t support the :before and :after pseudo-elements? The markup in the design relies heavily on this (look carefully, it’s not in the source). The design degrades well in IE, of course. They just don’t get the markup at all.
4. A sidebar!: The Tabigail theme had no sidebar. What I love about the sidebar in the new design is that it essentially contains a Microformats tutorial.
5. Non-web fonts: I’m into Georgia. It’s very pretty, for a web font. But I wanted to reward the folks that may have nicer fonts installed. If you’ve got Garamond, you’ll get Garamond. If you’ve got Baskerville, you’ll get Baskerville. If you’ve got nothing, you still get Georgia.
6. Gray: Yeah. I can’t help it. At least I used red for the first time!

Please let me know what you think. I’m sure it’ll keep getting tweaked. So, this is far from final. It’s just a first release.

Last year, I gave a presentation called “Introduction to Web Standards“. This time, I went a bit more hands-on workshoppy. The presentation was called Turning Your Design into a WordPress Theme. I started with a few slides (embedded below) and then spent the rest of the time (which only ended up being about 15 minutes!) live-building a WordPress theme from an XHTML/CSS one-pager and a Save As from my Tabigail theme.

That was kind of fun. Basically, I duplicated the theme, activated it, and started migrating the markup and combining it with the theme code. I explained what I was doing it all along and fielded a variety of questions about WordPress, design, and CMSs in general. Due to time constraints, I was only able to build the main blog page—header, footer, sidebar, and index.php. The single post, page, archives, search results, and 404 will have to wait a little bit, but it was nice to get the front page working in that short amount of time.

I’m looking forward finishing up the theme—because it’s a brand new design for Darowski.com. I’ve been chipping away at it for a little over a month… just little bits here and there. It’s at a good place now and I look forward to pushing it live soon.

But in the meantime, here are the slides from today…

1. Recording the screencasts
2. Encoding and embedding the screencasts
3. Turning your screencasts into a podcast

In those tutorials, I cover everything from my hardware setup …

… to the software that I use to record …

… to encoding tools …

… to RSS editors …

… to publishing on iTunes.

So, if you’re about to record some screencasts, take a look and see what worked for me. If you have any other techniques, by all means let me know!

Last year’s presentation was Introduction to Web Standards. I talked about (X)HTML, CSS, Microformats, and URL as UI. Now, I need to come up with another idea.

I’ve got a couple I’d like to throw out there. Any feedback would be appreciated. Thanks! Here they are:

Turn Your Design into a WordPress Theme

Turns out, I’ve done a crapload of WordPress themes. I’ve only released one publicly (that’d be Tabigail), but I’ve done a lot of ‘em for folks. It’s almost a game… once I get the design, I try to see how quickly I can turn it into a fully-functional theme. With this presentation, I’d take a very simple one page design (properly built with web standards, of course), break it up, and turn it into a theme.

My Favorite CSS Techniques

Based on the blog post of the same name, this would take some of these examples and actually walk through them, explaining the whats and the whys. Seeing how each CSS declaration affects the rendering could be useful, I think.

Any feedback on which I should do? Thanks!

The Ones with Legs

These three posts seemed to resonate with some and generated the most views…

URL as UI (3/16)
This was the biggest new post of the year (that damn Google Transit one from 2007 still out-pageviewed it, though). Where did the traffic come from? Well, that’d be Dan.

Using Fluid.app to Bring Google Reader for iPhone to your Desktop (8/14)
A couple blogs (like Web Worker Daily and Hackszine) picked up on this little lifehack.

My Favorite CSS Techniques (11/14)
This might have been my favorite post of the year. Most of the traffic for this one came through StumbleUpon, though Web Worker Daily also linked to it. I may follow it up with some more techniques eventually.

Milestones and Releases

Luckily, I documented some of the bigger things that happened this year (no new babies or anything—YET!—so it’s all techy stuff).

BatchBook Goes 1.0 (2/8)
Pretty big moment for me—the single project I’ve ever poured the most of myself into gets released to the world.

NewBCamp08 Presentation: Introduction to Web Standards (2/23)
I haven’t done much speaking before, and this was the start of it. It was a lot of fun and I hope to do it some more. With the second NewBCamp coming up in February, I just may get to do that…

Two Weeks: Two Redesigns (BatchBook & BatchBlue.com) (10/13)
Redesigns can be a major thing. Back-to-back, I worked on the redesigns of our product (BatchBook) and our website (BatchBlue.com).

New BatchBook Screencasts (and How-To Posts Coming Soon) (11/24)
I’ve done screencasts before, but I was really proud of this set. I also documented the process so I could write a series of blog posts about screencasting.

Announcing Tabigail: A simple, gray, one-column, socially savvy WordPress theme (12/15)
Earlier this month, I took the design of this blog and packaged it up as an open source WordPress theme.

BaseballTwit: A New Home for the Baseball Posts & Tweets (12/27)
Over the last few days, I’ve been doing some hardcore baseball research for this new project. If you’re into stats and the old personalities of the game, this is for you. If not, run far far away!

Off-topic (yes, baseball)

I also enjoyed writing these baseball-related posts enough that I just needed to start that separate blog…

Branching Out: Baseball Player Bio Writer? (2/26)
Yes, Pete Incaviglia is using the bio I wrote about him (years ago) on his own site.

“My Guys” Never Win MVP Awards (11/20)
In which I make my Dustin Pedroia mancrush public and reminisce about my favorite players.

Is There a Doctor in the Hall? (10/16)
I actually entered a contest to be a sports blogger for WEEI. I didn’t win, but this was my submission.

Misc

Here’s some more posts I’d like to highlight for various reasons:

SXSWi 2008: A Recap(3/13)
SXSW was a ton of fun. It’s also where I met Ira.

1000 Tweets (1/23)
I just thought it was funny that this year I hit the 1000 tweet milestone. Apparently, tweet #2000 or #3000 weren’t worth blog posts. I currently sit at 3,896.

Full-Time Designers Should Do (SOME) Side Work (11/3)
I thought this was an interesting topic that fetched a couple good comments. I would have loved to see more though. It’s not too late!

Some General Stats

Here are some stats I was interested in for the year…

Top Posts by Pageviews

1. Google Transit Comes Through: Best Customer Service EVER (63,927)
2. URL as UI (14,916)
3. My Favorite CSS Techniques (4,602)
4. The Blog is the New Resume (2,009)
5. Using Fluid.app to Bring Google Reader for iPhone to your Desktop (1,563)

Browser Usage

1. Firefox (82.32%)
2. Internet Explorer (9.60%)
3. Safari (5.18%)
4. Mozilla (0.88%)
5. Opera (0.72%)
6. Chrome (0.55%)

Looks like Chrome still has a way to go? IE is less than 10%, but what’s the version breakdown?

1. IE 7.0 (71.13%)
2. IE 6.0 (26.44%)
3. IE 8.0 (2.25%)

4 visits each from IE 5.0 and IE 5.5. They deserve whatever the heck they saw.

OS Usage

1. Windows (74.30%)
2. Macintosh (20.06%
3. Linux (4.99%)
4. iPhone (0.42%)

I guess nearly half a percent of all visits from iPhone isn’t that bad. What’s with just 20% Mac? Come on people! Also, the 5% from Linux was MUCH higher than I thought.

And the music

On my previous “End of Year” posts, I’ve picked an album of the year. Before I do that, let’s take a look at last.fm and see what the stats show I was listening to this year (yes, I have a thing for stats…):

Most Listened-To Artists of the 2008

1. Teenage Fanclub (They’ve always been my #1, so it makes sense.)
2. Mogwai (My all-time #2, and I have a thing for Glasgow bands, too)
3. Yo La Tengo (Yes, this is my all-time #3, too. The best US band in history)
4. Band of Horses (I was late to the party on them, but made up for it)
5. Rogue Wave (Liked them a while now, but just keeps growing)

Top song of the year according to Last.fm? That’d be “Our Swords” by Band of Horses.

This year’s choice

My best new album of the year? Well, that’d be Mogwai’s The Hawk is Howling.

Happy New Year!

In October, I wrote about Twalala, a new Twitter client. Twalala bills itself as “Twitter with a mute button”, but muting is only half of what makes Twalala a worthwhile Twitter client.

First, I have a few personal requirements in a Twitter client. I know not everybody’s requirements list is the same, but mine are important. They are:

1. Web-based: The majority of my Twitter usage is actually done on the iPhone. But I don’t want a native iPhone app because I like to maintain the same Twitter workflow whether I’m mobile or not.
2. Mobile: This goes along with the first, but the app needs to be usable in both desktop and mobile formats. Preferably, it would be the same interface for both.
3. Full-featured: The mobile version of Twitter.com is decent, but lacks some important features (like DMs, which you need to switch to the full twitter.com to access).

So, the only app that has filled these requirements is Hahlo. I love Hahlo. Like, a lot. I really have no complaints about it (recent downtime troubles aside). My newest pain point has nothing to do with Hahlo, but has everything to do with my growing Twitter network. When I’m online and working, I have no problem skimming the tweets from my entire stream, seeing what’s going on in tech and the world. But the problem is if I’ve been offline for a while and I want to catch up. I just can’t catch up on everything I’ve missed.

This is why some people use Twitter as a real-time thing and don’t worry about catching up. But I have a large number of people in my stream that I want to see EVERY tweet from. It’s not everybody, and that’s the problem. With Hahlo (and every single other web-based Twitter app), I either catch up on everyone or nobody.

I tried some hacks, such as subscribing to some people (via a FriendFeed list) in Google Reader. But that’s delayed and it mixes in what I’ve already read with what I’ve missed. It was just more trouble than it was worth. So, I turned to Twalala. And it worked.

When it was first released, I used Twalala as a bit of a novelty, muting a few phrases so I’d never see them in my Twitter stream (like those damn Qik.com links). I hadn’t gone as far a muting people. That has changed.

A couple weeks ago, I opened Twalala, took a deep breath, and started muting the crap out of my follower list. Who made the cut? People I know personally and industry folks I REEEEALLY want to see everything from. I believe I muted 150 or so people. Sounds shady, right? But no. The thing is, Twalala is my “catch-up” app. I don’t use it all the time. In fact, I still might use Hahlo a bit more than Twalala.

Remember when I said that muting was only half of what makes Twalala cool? The other half is the complete opposite—white listing. If you “white list” certain terms, they will always be highlighted (in yellow) in your stream… even if you’ve muted the person that said it. This is perfect for @replies and brand monitoring.

How can Twalala become my full-time Twitter client?

I’m still using multiple clients (Twalala, Hahlo, and twitter.com), but how far away is Twalala from being a one-stop solution for me? Here’s what I’d need:

• An unfiltered stream: It’s great that I can mute people and phrases. But that means I’m locked into those settings (unless I remove the filters one by one). It would be nice to have a view that shows my friend stream unfiltered along with one that shows it filtered. Right now, the main tabs in Twalala are “home | @replies | direct messages”. I’d recommend “all | filtered | @replies | DMs”. That way I could see my entire list in one tab, but also see the list filtered a click away.
• The ability to follow/unfollow: I’d love to be able to follow someone from within Twalala. Right now I have to hop to a different client to do that.
• The ability to favorite: Because sometimes @wrycoder is so good that I need to jump to twitter.com to fave that ish.
• Profile data: Right now, I need to click out of Twalala to see a user’s basic profile info. On their page, I’d like to see bio, number of followers, number of following, and URL.
• Remember me: A remember me button would be nice, especially with mobile. Sometimes I open up Hahlo when I’d rather open Twalala because I need one click to get to my stream on Hahlo and (lemme count…) about 20 to do the same in Twalala.
• iPhone-optimized input: Not sure why, but posting a tweet has gotten pretty slow. You need to punch a bunch of letters on the iPhone and wait for Twalala to catch up. I admit sometimes I read in Twalala and jump to Hahlo to tweet.

That’s it! Not to much, right?

So, give Twalala a look. I might just be what you need to make Twitter work better for you.

Same thing with my Twitter stream. If I’m watching a Sox playoff game with many other folks in my stream, I have no problem tweeting about it. But every once in a while I find a random stat or fact and I want to tweet it. Sometimes I do. Sometimes I choose not to bore the vast majority of my stream with it. Again, I don’t want to tweet less about baseball than I already do, I figured I’d tweet more. Elsewhere.

Introducing BaseballTwit: Blog posts and Twitter tweets about baseball stats and history by Adam Darowski

Not only is BaseballTwit the new home for my stat-and-history-related baseball blog posts and tweets, it also marks the first blog powered by my recently-released Tabigail WordPress theme.

So, if you’re into this sort of thing, please subscribe to the blog feed and follow @baseballtwit on Twitter.

Like most beginners, when I first started using WordPress (in May of 2006) I used a downloadable theme. I eventually outgrew it and in March 2007 I stripped down the blog’s design to just raw HTML. Little by little, I started styling—purposely NOT working from an established design… I wanted to see where playing with the CSS took me. I captured how it looked less than 24 hours into the design.

Since then, I’ve tweaked and refined endlessly, but still kept the basic feel of that design I did in a day over twenty months ago. While I really like the design, it’s time for a change. So, what better way to archive the design than releasing it as a WordPress theme?

I’m calling it Tabigail.

Why Tabigail? One of the features of the design was a rotating Polaroid-style photo in the header. I’d change it every so often. However, the last time I changed it was December 15, 2007—one year ago today. That was the day we had to put our beloved kitty, Abby (or Abigail the Tabigail), to sleep. I never could make myself swap out the image of Abby.

I’ve built a new page specifically for the Tabigail theme. You download the theme there and I’ve also posted setup and customization tips that allow you to make the theme more “you”. On that page, I briefly wrote about what makes Tabigail a compelling WordPress theme:

1. So super simple. A quick peek at the CSS will show you that there’s really not a ton here beyond plain HTML.
2. No sidebar. You know those annoying over-crowded sidebars so many blogs have? This theme has NO sidebar.
3. Socially savvy. The footer features a list of links to your social networking profiles. Because, really… it’s not all about your blog anymore. Plus, these links are marked up in an hCard with rel=me (just planning for the future!).

Just a note on that last one… what’s cool about that hCard with all those rel=me links? Well, as far as I know, nothing yet. But as the need to consolidate web identities becomes more mainstream, Tabigail will be ready to tell any service provider where all your social media identities are located.

Dude, you’re future-proof!

So, please… take a look, download the theme, and leave a comment letting me know what you think. This is my very first WordPress theme (well, publicly available one anyway… I’ve done a ton)… I’m hoping somebody finds value in it!

I rescued this post from an old blog that I’m not updating anymore. It has become a handy piece to point folks to when I try to tell them about my baseball simulation league. This post was originally published June 16, 2006.

I never understood fantasy baseball.

I have all the symptoms of a fantasy baseball addict. I love baseball. I love baseball statistics. I love tracking how my favorite players are doing. I love putting myself into the shoes of Major League general managers, debating what I would have done in a particular trade or signing situation. I love drafts. I’m web savvy and online a good chunk of the day. I enjoy making a deal.

But I have picked a different kind of poison. My drug is not fantasy baseball. Instead, I am addicted to baseball simulation.

There are very important differences between fantasy baseball and baseball simulation. One of my problems with fantasy can be summed up in an example that I often use.

Let’s say my brother in law is sitting at a bar with his friend, watching the Red Sox game. Their fantasy teams are facing each other this week. Jason Varitek lifts a sacrifice fly. David Ortiz tags up and scores. The friend shouts, “Ha! There’s a point for me! I have Varitek!” My brother in law replies, “Yeah, but I have Ortiz. We’re even.”

I have three very big problems with this scenario. The first is “this week.” A baseball game that is one week long? What is this, football?

Secondly, in fantasy baseball when your player drives somebody in, he’s (usually) not driving in a fantasy teammate. In simulation, when my player drives someone in, he is actually driving in a teammate and I am watching that run add to my score.

And finally, say I don’t have Jason Varitek on my fantasy team. Say I do have Kevin Millwood and he’s facing Varitek. I’m a big Jason Varitek fan. I could never root against him. It would just feel wrong. So, I’d find myself not rooting, just sitting there… torn.

Baseball simulation is, at the very least, a great way to avoid these problems. The games are not dependent on the Major League Baseball season. It is all run in a software program. In simulation, Jason Varitek is not the real “Jason Varitek”. He is a software model of Jason Varitek at one point in is career. From that point on, the simulated Jason Varitek can evolve differently than he does in Major League Baseball.

At this point, I’ll invoke the Back to the Future comparison. Remember when 2015 Biff finds the sports facts book in an antique shop, hops into a time machine, and gives the book to 1955 Biff? (Don’t lose me, now.) That action ended up creating an “alternate 1985″ in which all events after young Biff received the book deviate from the original history.

I am the Commissioner of a baseball simulation league. For my league, The Ted Williams Memorial League, our “1955″ (the point where the alternate history deviates from the original) is 2000. The league begins with the 2000 season and the players are generated from a database of all players and prospects from 2000. From the point that our league begins, however, players can evolve differently than they do in Major League Baseball.

Here are three examples:

In 2000, Rick Ankiel was the hottest prospect in all the land. He ran into post-2000 problems in Major League Baseball and has since given up pitching. In my league, he is looking like one of the best pitchers in history (certainly the best in our young league).

In 2000, Barry Zito was not a highly regarded prospect. So, in my league he never really panned out and recently retired with just three career wins.

Mark Teixeira was drafted in 2001. Therefore, he does not even exist in my league.

Trading is far different (and far more rewarding) in simulation. In fantasy, if you need a player, you trade for him, and his points are added to your totals. In simulation, you must find a player that appropriately fits into your lineup, into your payroll, and into your future. Many baseball simulation leagues span over multiple seasons (think “Career Mode” in console games). For example, in the TWML we are about to start 2013, our fourteenth season. Trading for a 37 year old star is great for the short term, but doesn’t make much sense if you’re not going for it all this year. With the exception of keeper leagues, In fantasy your roster is refreshed from scratch from year to year. Even keeper leagues only allow you to keep a few players.

Drafts are far more rewarding in simulation as well. In fact, this is the favorite aspect of many simulation owners. In fantasy, you draft a team of major leaguers from a pool of the top talent. In simulation, you have a very similar draft at the very inception of the league (in order to fill the rosters). Then, each year you have an amateur draft, just like Major League Baseball.

These drafts allow players to choose from a rookie crop of youngsters generated by the software model each season. Some rookie classes are better than others. Some prospects are studs while some are mediocre. Some will develop better than you thought—others worse. Where simulation drafts are really rewarding is when you draft a player, develop him in your minor leagues, and then watch him succeed. In fact, this one aspect of simulation is what I will base the rest of my article on.

After I took over a team in our simulated year 2000 (my original plans were to just act as Commissioner, but I adopted a team with an AWOL owner and dismantled it), I was inline for the third overall pick in 2001, our first rookie draft (our rookie drafts occur in the offseason). Right away, I knew who I wanted, and I got him.

Jack Gonzalez was a 21 year old catcher who was pretty much average in most aspects of the game. But Jack possessed two unique skills: a rifle of an arm and a bat with brilliant power potential.

Jack was sent to my Class A team to start the 2001 season (we have three minor league levels in my sim league). In 88 games, he hit 24 homers and drove in 58 runs while hitting .264 with a .873 OPS. He earned a promotion to AA. While in AA, he again hit 24 homers, this time in only 68 games. His average dropped to .250, but his slugging percentage skyrocketed to .617. His OPS was .934. He drove in 53 runs. For the two days of the season, he went to AAA, where he was 3-for-9 with a homer.

After hitting 49 homers at all three levels in his first minor league season, I wanted to see how my boy did with a full season at AAA. At this point, he was my top prospect and I had a very capable starter in Ben Petrick (.289, 12 homers, 61 RBI in 2001). There was no need to rush Jack.

My big league catching tandem of Petrick and Javier Valentiin was very good in 2002, allowing Jack to stay in AAA all year long. He showed he had nothing left to prove and blasted 57 home runs while driving in 138 in 159 games. He hit .269 with a .338 OBP and .596 slugging percentage (.934 OPS). Jack was ready.

At age 23, Jack was called up for the start of the 2003 season. Valentin departed as a free agent and Petrick would spell Jack and provide a solid bat off the bench, all while trying out some third base. Gonzalez, as expected, had some trouble with contact hitting, batting .230. He showed power potential, though, hitting 24 homers with 87 RBI. He even showed an element that wasn’t expected, stealing 11 bases. It was all a good start, but just a .285 OBP needed improvement and the low average brought his slugging percentage to just .399. Still, Jack ranked second in Rookie of the Year voting, collecting four of fifteen first place votes.

We hoped 2004 would build on 2003, but it didn’t. My team moved to our equivalent of the National League and the team average dipped from .272 to .247. Jack was one of the biggest offenders, dipping to just .193 with a .252 OBP and .373 slugging percentage. He did hit 20 homers and drive in 62 runs, but those averages were unacceptable. It was sad to see my homegrown “star” struggling like this. Alas, he was just 24.

The next season, Jack seemed to wake up a bit, getting his career highs in batting average (.234), homers (25), OBP (.309), and slugging percentage (.439). In a truly proud moment for me, he was selected as an All Star. At that point, he was just the second player ever created by the software to be an All Star.

In 2006, Jack gave me the type of season that makes a general manager proud. He hit .254—not stellar, but a career high again—and bashed 34 home runs. He slugged a robust .535 with a .312 OBP. His 26 doubles were a career high and his 82 runs batted in were his most since his rookie season. It is worth noting that Jack turned 27 in July of this season, essentially hitting his prime.

The team underwent a big change in 2007. After 2006, the team’s eventual Hall of Famer and franchise cornerstone Mo Vaughn opted for an early retirement at age 38. (It’s worth noting that MY Mo Vaughn had 2510 hits, a .295 career average, and 521 homers in his illustrious career). Vaughn homered 31 times and drove in 119 in his final season. His retirement sent the team into a tailspin and, eventually, a rebuilding phase.

During 2007, Gonzalez appeared to regress. He tied a career low with 20 homers and drove in a career low 53 runs as we fell from an 89 win team to a 72 win team. He hit just .224. Topping it all off, this was a contract year for Gonzalez. He was resigned at the beginning of the season for $1.6 million per season for six years. One thing to keep in mind is that the software’s financials look a little different than MLB’s. A good rule of thumb is that the software’s figures are about a third of what MLB’s would be, so Gonzalez was to be paid about $4.8 million per season—a bargain for a 34 homer hitting catcher, but a 20 homer, .224 hitter?

In 2008, he went from a .224 hitter to a .214 hitter, but he raised his home run total back to 25, making it a bit more acceptable. But still, it wasn’t enough. I was starting to wonder if Jack would get better. I was getting defensive of cracks on Jack’s hitting made on our league’s forums. One thing I did have was a great pitching staff all along, and Jack was one of the reasons. He was an excellent defensive catcher and always threw out a lot of runners.

2009 was an important season for Jack, as he turned 30 years old that July. The Battle Cats were a struggling franchise, but we got a boost when Jack got off to a huge first half. He was an All Star again for the second time. Unfortunately, his second half started off miserably. As we slipped even further, I did a lot of studying of our box scores and game logs. I found some interesting patterns.

I noticed that though I was resting Jack because his hitting was slumping, we were still losing. We actually seemed to do better when he was in there, whether he was producing or not. So I put him back in, and I put him in every day. He finished a bit better and posted a career high .255 average with 25 homers and 74 RBI. He slugged .459, his second best mark yet. And we won more.

It’s one of those things where you really don’t know how much goes into the software model. Astros pitchers love throwing to Brad Ausmus, so he always plays even if he’s not the best hitter. Could my digital pitchers feel the same for Jack? He seemed to have built the trust of my star pitchers. So, I decided to never take Jack out again.

In 2010, Jack started all 162 games of the season. He hit just .230, but he belted a career high 35 home runs and drove in a new career high of 103 runs. The season included his 200th home run.

We went from an 80 win team to a 93 win team. We won our first division title since leaving the old DH league. Though we were smacked around in the first round of the playoffs, it was a great step.

2011 was more of the same. Jack started all 162 games and we improved to 96 wins (winning the division again). Jack hit .234 with 34 homers and 100 RBI. We made it all the way to our very first World Series. Unfortunately, we lost both our top starters to injury in a dramatic 7-game LCS, so we were stuck calling upon a reliever, Billy Koch, to join the rotation. We went six games, but fell short. However, it was another big step for the franchise.

Gonzalez received one lone third place vote for Most Valuable Player. It’s not much, but it was another owner recognizing that while Jack didn’t post the average and OBP of some stars, he provided plenty that was valuable to his club. Teammate Billy Marty, a computer-generated star teammate of Jack’s, took the MVP award. The Battle Cats swept the awards that season (a league first).

I was starting to realize something. Jack hadn’t missed a game since August 25th, 2009 and we were about to start 2012. He had started every game since 8/31/09, as well. And we were winning like the old days. It was fun.

Then came 2012.

Jack was even better.

I’m the father of a toddler, so I’m not going to go overboard and say that watching what Jack did in 2012 is like watching your baby grow up, but man… I’ve experienced the sim baseball equivalent.

Jack was off and running right out of the gate in 2012. He had nine homers and 23 RBI by the end of April. Nice start, but I’d seen this before. He had just a .250 average in June (even that’s not terrible for Jack), but he gave us eight more homers and (get this) 29 RBI for the month. That’s 17 home runs and 52 RBI by the end of May. That’s okay… he’ll slow down at the All Star break, right?

Wrong. June came and Jack had his biggest month, hitting .309 with ten homers and slugging .778 for the month. He became an All Star for the third time. At about the statistical mid-way point of the season, Gonzalez had 27 home runs and 75 RBI. July came and so did ten more home runs and 22 more RBI. This was starting to get a bit crazy. Jack, with 37 homers, had already eclipsed his career high in homers. And there were two months left of the season.

In August, Jack “dipped” to eight homers, but hit .316. During the month, I decided to go ahead and extend him even though he was not due for a contract until the end of 2013. For $2.3 million per season (remember, about $6.9 million in MLB money), I had Jack signed up for five more years (six including 2013). He would be a Battle Cat through age 39.

Finally, in September, Jack showed signs of slowing down. He hit five homrers, giving him a grand total of 50 on the year. He hit just .238, but that only brought his average down to .275, still a career high. He still drove in 21 (meaning that in all six months, he drove in 20+ runs), giving him 141 on the year. He posted a .338 OBP and .590 slugging percentage, both career highs, and also reached new highs in hits (167), doubles (34), runs (97), and triples (4), while tying his high in walks (53).

In September, he also passed the 500 consecutive games started mark, simply remarkable for a catcher. His current totals are 515 consecutive games played, 511 consecutive starts. This season was also his tenth straight 20 homer season from the start of his career, a feat no other computer-generated player in the league can boast.

In addition to his gaudy numbers, Gonzalez posted numbers with runners in scoring position of .301/.343/.613 with 12 homers in 163 at bats. His Close/Late numbers were .311/.373/.622 with 6 homers in 74 at bats. These numbers, and his league leading home run and RBI totals, helped him win his first Most Valuable Player award. Gonzalez was named first on twelve of the twenty ballots. Needless to say, I was ecstatic.

We won our third straight division title and tied our club win record of 98 (originally set back in 2003). After dropping the first two games of the LDS, we unfortunately found ourselves with our backs against the wall in the playoffs. Jack had enough in him for one more dramatic showing. We pulled off Game 3 on a 2-run ninth inning homer by Jack’s teammate, Billy Marty. In Game 4, with our season still hanging by a thread, Jack hit a pair of two run homers to power us to an 8-0 win. However, we dropped Game 5, 3-0, ending what should have been a much better season.

As we’re heading into 2013, Jack’s 11th season with the club, he is 33 years old and is starting to build some impressive career totals. He is only batting .235, but with 1229 hits so far, he seems to have a good shot at 2000 (especially with playing every day now). He has 292 homers, making 400 for his career seem very likely. If he keeps hitting homers at a 50 homer pace, of course he could get more. He is under contract for six more seasons. If he averages 30 in those years (a dropoff of 20 from last season), that would put him at 472. Can’t complain about that.

This article was not meant to be a biography of Jack Gonzalez. But I think his story really illustrates my point about baseball simulation. In fantasy baseball, there certainly is some sense of pride if you draft a Justin Verlander and he dominates. But how much pride can you take? It was the scouting director that found him and the general manager that drafted him to the pros, not you. With simulation, you can take more pride in this because you did it yourself. Nobody did the dirty work of getting the player to the big leagues besides you.

There are many reasons why I prefer baseball simulation over fantasy baseball. But I have to say that #1 on the list is definitely Jack Gonzalez, and all that goes along with him. He’s my baseball pride and joy—the guy I’ve brought up. Can you get these types of feelings in fantasy baseball?

I never did.

My BatchBlue staff photo, December 1, 2008.

I blame the kids.

Customize your data with SuperTags

The Flash Video runs 4:20 and is 24.5MB. (Download iPod compatible version, 11.1MB)

That’s just one of them. The whole set is on the screencasts page.

I also created a feed for the screencasts, therefore turning them into a video podcast. I went ahead and registered the video podcast with iTunes. So, yeah… it’s on iTunes!

I’ve found myself super into writing lately, so I’m going to write a series of How-To posts over at the BatchBlue Blog in the coming weeks. Last time I recorded screencasts, a few folks asked me about my process. So, I’m going to document it in three steps:

1. Recording the screencasts
2. Encoding the sreencasts and embedding them
3. Creating the podcast feed and submitting to iTunes

I’ll be sure to update you here when I publish them there. In the meantime, Happy Organizing!