A few disclaimers, and also some bugs:

1. It has sound. Turn off your music and turn up (down?) your speakers.
2. You need a Webkit browser. Latest Chrome or Safari will do the trick.
3. On Chrome, it works better at a 1024×768 window size. If you have a bigger screen, like me, then shrink it. Any bigger and the animation blanks out for a few seconds halfway. I’d love to know how to fix this. Safari is fine.
4. It doesn’t work on iOS devices, and I’m not sure why. Again, fixes please!

So, without further adieu: CSS3 + HTML5 LOST intro

About 5-6 weeks ago (maybe longer?) I created a simple little service called Re/Spin, using the Rdio and Last.fm APIs, that allows you to import any Last.fm playlist into Rdio. It was my first foray into using Rdio’s API, and I think it worked out well.

As a gesture of appreciation and support for their community, Rdio was kind enough to send me an “I [listen to] Rdio” t-shirt and an Rdio sticker.

Thanks y’all!

Until today. Today, I stumbled on the answer, inspired by a forum thread I found on MacThemes. It’s quick, easy, and it works (at least for me). So here’s the instructions, prefaced with some disclaimers:

Disclaimers:
a) This worked for me, and I’ve only tested it in Photoshop CS4.
b) Backup stuff before you delete, change, or modify anything.

Onto the instructions…

1. You need (I’m assuming) a pre-Lion version of Helvetica Neue. If you don’t have one, here you go: http://cl.ly/2v2E1b1W1H3i2z2u0p3p
2. Copy it (Apple+C)
3. Go to /System/Library/Frameworks/ApplicationServices.framework/Versions/A/
   Frameworks/ATS.framework/Versions/A/Resources/ProtectedFonts/
4. Delete HelveticaNeue.dfont from that folder and paste in the replacement (Apple+V)
5. Go to /System/Library/Fonts/
6. Delete HelveticaNeue.dfont from that folder and it should auto-replace itself. If it doesn’t, paste in the replacement again
7. At this point, you should clear out font caches for Photoshop. I use Font Explorer so that makes it easy. You can also use Onyx to do that.
8. Reboot

Hope this works for everyone else!

However, when I opened up an existing project I had been working on in Photoshop I was presented with a small, yet irritating, surprise. Rather, it was what didn’t appear that was the surprise: Helvetica Neue Bold won’t render spaces. Crap.

A few people on Twitter have said the same, and searches on the Adobe support forums haven’t offered up any solutions either. I’ve started a thread about the issue, so If you have encountered this issue, and especially if you have a solution, let Adobe know as I’m sure this issue will grow as more people install Lion.

Update: In an effort to get this fixed, I’m spreading the word on the issue. Now posted at Adobe’s Get Satisfaction page for Photoshop.

Since I began designing and building for the web over eleven years ago, the profession of “web designer/developer” has morphed dramatically. In the beginning, many web guys and gals were computer nerds (I say that with love and participation): the survivors from the end of the BBSing era, the sysops and IT professionals who messed around with extra tech stuff in their spare time. People excited about art, history, writing, photography, technology, code, business, and society, and wanting a way to digitize these things. Sure, there have always been the core group who were building all of the tools, like Tim Berners-Lee, but the rest of us were explorers and hacks, learning from the code that Dreamweaver spit out or the tips we’d find on a cached forum page from Experts Exchange.

Later, those of us that stuck around began to learn and hone our craft. We shared information, built communities to share it on (anyone remember the former and awesome Stylegala?), and out of that came order. Methodologies changed, and digital recipes were born… the perfect mixes and techniques to produce faster, sharper sites, with better experiences for users. We went beyond just putting up a Macromedia-generated website for the business we worked for to being able to analyze, predict, enhance, minify, blend, solidify, and masterfully produce dynamic, powerful tools. Sites traverse platforms, purposes, and potential, and we – today’s designers and developers – are the ones who make these things sing.

At the beginning of the week I had coffee with a friend in town, and we were talking about the role of web folk. A thought bubbled up in me, one that I had considered a few times before but never articulated, an image of my profession. To me, I explained, the people in my profession are modern-day swordsmiths. We’re craftspeople. Tradesmen. We are a skilled practice that combines highly-specialized technique with beautiful, expressive art, producing tools to equip those in our community. There may be a few of us in town. And if you want a strong, dependable tool that has been crafted with intent and impressive enough that you’d put it over your mantle or pass it down to your children… well, you’ve come to the right place.

The past century has seen the emergence of the white-collar class out of the blue-collar class. I think a new sort of collar has been emerging over the past decade or so, one that takes cues from both. People who rub elbows with both small business owners and financial powerhouses, but who also ply their trade and hone their craft, sharing notes amongst themselves on how to produce a higher level of quality, and having their work used all around the world.

As the globe continues to digitize, quality “net-smiths” will be as necessary and sought after as a good plumber, electrician, welder, or mechanic. And while we may not have as many hand calluses as these other craftspeople, our worth will be reflected by how well our products serve our communities, at both at the individual and societal levels.

It took a twist, a turn, and a false start, but here it is. After doing some serious thinking about how I wanted to present Hot Meteor, and considering Meagan Fisher’s words “be true to yourself,” I scrapped the April edition of HM and created this one.

This one is here to stay. Why? Because I actually like it.

I still need to do some testing on older browsers, and clean up the iPad display. But it looks good on a mobile device and behaves well (for the most part) on the desktop. Updates to come.

Update #1: Should be working fine on mobile and tablets now, just need to do a little more Windows refining.

I hope to do a formal launch this week, so to speak.

Of course, the usual solution was available (some float: left; width: 33%;-type action), but I wanted to give the new CSS3 Flexible box layout module a spin. The spec isn’t complete on it, but I figure I could get it working for my needs.

As it turns out, it wasn’t so easy. Something I took for granted using the old float-y way was the explicitly set widths of the columns. Using the box layout module, the widths aren’t set, and in fact they get all crazy as soon as you start adding content.

Note the uneven columns. It gets even crazier once you add paragraphs.

I wanted to use padding and have equal widths. I didn’t want to fuss with all the floating biznazz and I wanted the box layout to work… What to do? Fortunately, in my search for a solution I stumbled upon a recent post by Stephanie Rewis where she explores the possibilites of the box-model. Stephanie hit the same wall as I did. And in the comments, Firefox team member Tab Atkins provided a work-around until the revised spec is ready.

The secret is, and I quote:

In the current draft, the way to get more intuitive flexing behavior, where everything with the same box-flex becomes the same width, is to set width:0 on them first. I dunno how well this works in webkit, but it should work in Firefox.

Awesome. And it works! By changing my CSS from

article {
margin-right: 30px;
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
}

to

article {
margin-right: 30px;
width: 0;
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
}

I get the desired results – evenly-sized and spaced columns. I also use Modernizr (as in every project) to do a fall-back for those less box layout inclined.

Update (4/23/11): This appears to only work for Webkit. For Firefox you’ll have to remove the width. You could isolate Webkit (if you’re using Modernizr) by using .cssreflections article, as it’s Webkit only.

Update 2 (4/23/11): Nevermind. The problem wasn’t there, it was with the columns’ containing element. You need to explicitly set a width (even 100%) or it’ll collapse.