• 1 line CSS Grid Framework - Distilling a CSS framework into one line is an interesting experiment, in that it shows essentially what all of the other (bigger than one line) frameworks are doing. Also, if you look at the markup of a site that was built using it, it serves as a pretty good reductio ad absurdum against CSS frameworks.
• jQuery Performance Rules - A useful collection of best practices that can speed up your jQuery code by non-trivial amounts. I’ll admit that I’m often guilty of sticking the bulk of my code inside of $(function(){...}).
• jQuery: Inline caching for selectors - If you’re taking the advice of the article linked above and caching your jQuery objects, take a look at this technique for keeping those cached objects available throughout your app without polluting the global namespace (hint: it uses closures).
• Procs And Blocks And Anonymous Functions - Speaking of closures, this is a decent rundown of the various uses of closures in Ruby.

I’ll apologize right out of the gate for the resemblance this post bears to one Rafe Colburn made today. We sit across from each other at work, and we’re both diving into zsh at the moment, so cross-pollination was probably inevitable.

The other day, I switched my shell from bash to zsh. Just like Rafe, I read the Fried CPU post about zsh, and was convinced to give it a whirl. It’s been in the back of my mind for a while now, since I’ve notice that a lot of people whom I respect (Ryan Bates, for one) are using it, but the concise list of really powerful features in the Fried CPU article was the tipping point. I’ll admit that, never having switched shells before, I thought it was going to be a heck of a lot more complicated than just typing chsh and replacing “/bin/bash” with “/bin/zsh” in the config file that pops up. Had I known it would be that easy, I would’ve tried it a lot sooner.

At first, I tried copying huge chunks out of the zshrc & other zsh config files that Joe Ferris maintains in a repo at Github, but eventually decided I’d get more out of this experiment if I took more bite-sized chunks out of other peoples configurations, and only added them to my own when I understood what they were doing.

That’s when things got out of hand.

When I was copying bits of my old bash configs over to my zshrc, I noticed how disorganized all of my dotfiles were–not just the shell ones, but my irbrc, and vim & emacs configs, etc., etc., etc. So I basically decided to scrap all of them and take the same approach to them as I was taking with my shell configs. So basically, I’m starting over with Unix, and slowly rebuilding what I’m hoping will be a super-organized and super-optimized environment for future work and play.

If you’re interested in seeing how things develop, you can follow along with my dotfiles repo on Github. But what I’m sure will be infinitely more interesting will be to start on your own adventure in Unix configuration. If you go down that road, here are some of the resources I’ve used in rebuilding my environment:

• Joe Ferris’s config_files repo: I mentioned this before, but it’s worth mentioning again, due to its being awesome.
• dotfiles.org: User-conributed dotfiles for just about every *nix-based utility that uses a text-based configuration file.
• irb & script/console tips: Obviously these are only useful to Rubyists, but if you swing that way, theses are well worth checking out. Ever since I first saw the SQL generated by an ActiveRecord query show up in someone’s script/console, I’ve coveted that functionality. Dan Croak shows how it’s done.
• Dr. Nic also has some great irb tips
• Finally, I cribbed a git-aware prompt from this screencast. A very neat trick.

So yeah, it’s been really fun getting back to basics with my Unix configs. That said, I have had one small hiccup in this process. After going through all of this with my OSX terminal, I went to switch my shiny new Ubuntu JeOS VM’s shell over to zsh, but found that after doing so, my delete key wasn’t behaving like a backspace as it had been doing when I was using bash. Apparently this is a known issue when using zsh or screen over ssh. I still haven’t found a good workaround for this, and so am still using bash in Ubuntu.

All in all, switching from bash to zsh has been an extremely rewarding experience, and definitely one I’d recommend to anyone looking to change up their routine and learn something new and useful.

This month, I’ll be participating in the Experimonth project. The main thrust of Experimonth is that for every month in 2009, participants will do something they (probably) don’t normally do every day in that month and record their experience. For instance, January’s experiment was to eat only raw foods for the entire month.

This month’s experiment, called “The Eyes of March” involves taking or making a picture of something every day. If you want to follow along, there’s a Flickr group for the project.

Of course, every experiment needs a hypothesis, so here’s mine: I’m guessing (and indeed hoping) that being on the lookout for things to take pictures of every day will make me more mindful of the visual impact of things that I look at all the time and don’t pay very much attention to. So if by the end of the month, I’ve been able to look at the things around me and notice something new and or important about even a few of them, then the experiment will have been a success. If anything like that happens, I’ll be sure to make a note of it here.

Hey, you know what can be a real pain in the tail? CSS rounded corners. Of course there are battle-tested, workhorse solutions out there, like sliding doors, or a handful of Javascript-based alternatives. But rounded corners are such a common element of web design and seem like a natural extension of the designer’s existing toolkit that it only makes sense that there should be a way to implement them with pure CSS. The good news is that border-radius is indeed coming in CSS3. The better news is that you can start using it today, as long as you’re only targeting Gecko & Webkit. Before we get to that though, let’s look at the way it’s supposed to work according to the spec.

As you might expect, the border-radius property is used a lot like border. That is, you can specify one value for each corner (border-radius: 10px;), one value per corner (border-radius: 1px 2px 3px 4px;), or values for opposite corners (border-radius: 5px 10px). It actually gets more complicated, since in addition to describing corners with one radius (i.e. those with semi-circular curves), you can make elliptically rounded corners by naming two radii. For more detail on this, take a look at the draft spec. Lastly, you can use a property for each corner, border-top-left-radius: 2em;, etc. So, assuming there aren’t any major changes in the spec, expect this to be what gets implemented as part of CSS3, and what you’ll ultimately using in your code.

But what about now? Here? Today? It happens that two of the standards-aware, forward-thinking rendering engines have developed proprietary extensions to CSS that should stand in for border-radius until certain ambiguities in the spec can be resolved, and the property is implented according to the standard. So if you want to use border-radius in your code today, you’ll have to use both the Mozilla- and Webkit-specific CSS properties. Fortunately, both of the proprietary extensions work in the current major releases of their respective browsers.

If you’re making a box with four corners of the same radius, the syntax is the same in Mozilla and Webkit:

-moz-border-radius: 10px; /* 4 corners of radius = 4px*/
-webkit-border-radius: 10px; /* Same as Mozilla */

To specify different radii for each corner, things diverge somewhat.

/* Mozilla: */
-moz-border-radius: 1px 2px 3px 4px;
/* Webkit:
    (The four declarations below amount to the
    same thing as the single rule above) */
-webkit-border-top-left-radius: 1px;
-webkit-border-top-right-radius: 2px;
-webkit-border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius: 4px;

And that’s the guts of it. So to make a tabbed navigation list, you would use a declaration along the lines of the following (and see the below code in action.):

li {
  border: 1px solid #587402;
  border-bottom: none;
  border-radius: 0 10px 0 10px;
  -moz-border-radius: 10px 10px 0 0;
  -webkit-border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  list-style-type: none;
  float: left;
  padding: .5em 1em 0 1em;
}

There you have it. But there are just a couple of other things I want to point out. If the container you’re rounding the corners of has only text content and a background in it, the background will clip to the rounded corners. And indeed, according to the spec, any the contents of a block-level element on which a border-radius is set should clip do the same as long as you set overflow: hidden on those contents. However, the implementations just aren’t there yet. Instead, with anything over and above plain HTML text (for instance, an img or iframe) inside such a container, the square corners will peek outside of the rounded container. (Example)

One solution would be to make the border thick enough that the corners of the inner element can’t poke through the outer border (like so). Though inelegant, this will work just fine if you don’t need everything to round nicely. And this method should suffice for whatever kind of content you’re trying to stuff into your nicely rounded box.

However, if it’s an image you’re putting in the box and you need the inner corners to be rounded as well as the outer corners, then the only answer (for now) is to set the image as a background. Still, if the language of the spec is any indication, it won’t always be this way.

For the poor soul who is trying to squeeze iframe content into a rounded corner box, you’re essentially out of luck at the moment. You can certainly use the thick border method I described above, but short of that, you’ll have to look to the bleeding edge. That is to say, you’ll need something which isn’t yet in any production-quality browser, but that is currently in the Webkit nightlies. I speak of the arcane methods of -webkit-mask-image. This property can take a png or an svg as its url, and pretty much anything you apply it to will play nice and clip to the shape of the image. See for yourself. Still, this last bit is obviously not anything anybody will be using in production code for some time to come.

After reading all of this, if nothing else, I do hope that you’ve come away with a better idea of some of the great things that the CSS working group has in store for you, the developer. But even moreso, hopefully there’s something in all of this mess that you’ll be able to put to use today.

I loved the first Condemned. It was loads of fun, and I can count on two fingers the number of games that I’ve found as legitimately scary. So I was looking very forward to the second installment. Having now played through the first level of Condemned 2: Bloodshot, let me offer a few preliminary thoughts about whether or not it lives up to the promise of its predecessor.

Graphically, it looks considerably better than Criminal Origins. This is to be expected, since the latter was a launch title for the 360, and the developers clearly didn’t know much about how to utilize the resources available to them. As such, the fact that the character models and animation have drastically improved is as expected as it is welcome.

I wish I could say that the gameplay has improved as much as the overall look of the game. Not so, I’m afraid. At least through the first part of the game, everything feels much easier. Let me expand on that. The first thing I noticed when going through the combat tutorial at the start of the game was that I didn’t really need to block to keep from getting clobbered. In the first game, encounters usually began with you having to block a 2×4 being swung at you by a lunging hobo. Then you’d have to watch your opponent and precisely time your blocks and parries until you had sent the bastard to wino hell. Each fight was intense, savage, and thrilling. This time around, however, if you notice a bad guy before he spots you, you could potentially just run up to him and punch him until he dies. Not fun. But hey, who needs intense combat, when you’ve got… minigames? Uh, no. Thanks to God of War and Resident Evil 4, game devs think that tacking a small rhythm minigame onto a fight is sufficient to take monotonous button mashing into something innovative. It’s not.

Unfortunately, the worst consequence of taking the grit out of the combat, is that the game has lost its white-knuckle edge. Playing through the first one was exhausting. Each shadow potentially hid one or more bloodthirsty crazies who could kill you pretty quickly if you weren’t ready for a fight, and the resulting tension was genuinely draining. For this outing, if you’re not worried that you’re a couple of whacks away from game over, the best you can hope for is a jump scare when the weird ash-monster explodes from the ceiling. It’s just not the visceral experience that I loved the first time around.

What I do like is the storytelling. I like that our hero has essentially become one of the lost souls he mercilessly battered in the first installment. I really like that from his (and the player’s) perspective, there isn’t any real indication that he hasn’t succumb to whatever it is that has caused half of his city’s population to turn into brutal psychopaths. Most of all, though, I really like the turn towards horror that this game takes right from the outset. The city is covered in oozing tar, skeletal ash-men lurk in the shadows, and the weird lip-ring dudes are giving you attitude in the most ominous way. Good stuff all. I just wish the gameplay was able to match the tone of the writing.

Overall, I have a lot of serious issues with Condemned 2 that I really hope will resolve themselves as I get a little further along. However, given how fantastic the first game was, I feel justified in being at least somewhat optimistic that they will.

And speaking of violent video games, Stephen King has come out against the proposed Massachusetts law that would lump violent games in with pornography as being “harmful to minors.” Indeed, he even namechecks RE4. This further supports my long-held suspicion that Stephen King is completely awesome.

1. It’s Not a League of Their Own: Boston Dirt Dogs has an excerpt from the 2008 Red Sox Annual in which the authors size up the Sox’ competition in the American League. On the whole, it’s pretty interesting I guess, but the best part is that the section on the Orioles is just one long reference to The Wire. And if you read a little further down there’s another Wire reference that’s masquerading as a pithy statement about the economics behind your brand new Tampa Bay Devil Rays:
   

   My economics are rusty, but when you have an inferior product in a saturated, inelastic market, one strategy is to re-brand the product. Therefore, exit the Devil, and their aqua uniforms, to be replaced by the San Diego Padres kits with blue replacing sand brown.

   Stringer Bell is alive and well in the sports pages, folks.

2. WebKit gets 100% on Acid3: “Yesterday’s news” you say? Nope. The news today is about Webkit/GTK. Awesome news for us LXers. Also, definitely take a look at this account of the main Webkit team’s road to 100/100. It’s got some fun insights for spectators of the race between Webkit and Opera for full Acid3 compliance. And for some (probably much-needed) perspective, here’s one Mozilla-er’s take on the Acid3 arms race.
3. JavaScript Talk at Northeastern: It’s a video of John Resig’s recent talk at Northeastern on Javascript and jQuery. What are you still doing here?

1. Nine Techniques for CSS Image Replacement: If you spend any time at all playing with CSS, you know that there are a full bajillion techniques for replacing text with an image. It’s a lot to remember, and I’ll fess up that I tend to use whatever one I happened to have read about most recently rather than taking a considered approach to which of them might be the best solution for a given situation. No more! The above-linked post does a great job of running through the pros and cons of the 9 (9!) major techniques, and from now on you (meaning “I”) no longer have any excuse to not use the best, semantic, most accessible one at every opportunity.
2. Drugs, Bugs, and IE8: A predictably good read from Eric Meyer, but I link to it mainly to have an excuse to echo the following point: There are a lot of beta browsers out there right now (one less, now that Safari 3 has shipped). If you’re testing your sites in them and something renders in any way other than what you were expecting, submit a bug report. Don’t change your code.
3. Optimizing Page Loading in the Web Browser: For the browser builders, network latency is at least as big a problem as connection speed.
4. A Japanese RPG Primer: The Essential 20: Last week, Gamasutra published this list of the best of the best in Japanese RPGs throughout the ages. It’s a top-20, so it’s not exhaustive, but it’s sure as hell exhausting–i’ve been chipping away at this beastie since last week. Anyway, if you’re at all into JRPGs, it’s a really fun read. It’s also neat to see some old favorites put into context alongside some seminal games that you may never have been exposed to.

Whenever I do a fresh install of Ubuntu, and I’m setting up Ruby, Rails, I always run into the same problem with a handful of gems (such as Mongrel & Hpricot). This is how things usually go down:

matt@thinkpad:~$ sudo gem install hpricot
Building native extensions.  This could take a while...
ERROR:  Error installing hpricot:
ERROR: Failed to build gem native extension.
/usr/bin/ruby1.8 extconf.rb install hpricot
extconf.rb:1:in `require': no such file to load -- mkmf (LoadError)
from extconf.rb:1
Gem files will remain installed in
/usr/lib/ruby/gems/1.8/gems/hpricot-0.6 for inspection.
Results logged to
/usr/lib/ruby/gems/1.8/gems/hpricot-0.6/ext/hpricot_scan/gem_make.out

Now what? The main problem here is that Hpricot and Mongrel both contain some C code that needs to be compiled. In order to fix this, you’ll need to install the Ruby & C development libraries for Ubuntu. To do that, just fire up Terminal and enter:

sudo apt-get install ruby1.8-dev linux-libc-dev libc6-dev

You should now be able to install Hpricot, Mongrel, or any other gem that requires you to build some C. It’s that easy!

1. CSS Styled Scrollbars With Mootools and JQuery: Currently, only the IEs support the styling of scrollbars with CSS alone (although scrollbar styles are part of CSS3). This post links to a couple of Javascript-library-based techniques to get the job done in the meantime.
2. Making ‘IE6-friendly’ PNG8 Images: Turns out our beloved hack to get transparent PNG32s in IE6 can sometimes crash the browser. To play it safe and ensure crash-free viewing of your site, it’s probably best to use PNG8 until IE6 is no longer a factor (someday, <<rassafrackin…>>). This post gives you some techniques to make your PNG8 graphics almost as useful as PNG32s.

1. Martian Headsets: Spolsky’s take on IE8 & web standards.
2. Translation From MS-Speak to English of Selected Portions of Joel Spolsky’s “Martian Headsets”: Mark Pilgrim’s take on the above.
3. SitePoint Guru Lists: SitePoint’s authors have listed the best articles on the SitePoint, er, site, for getting started in various areas of web design & development.