There has been a lot of talk lately about the “death of Flash”. We like to imagine that Flash peacefully died in bed of natural causes surrounded by its family and close friends. But that’s far from what happened. Flash was, in fact, murdered.

Who’s to blame? Maybe Steve Jobs for black-listing it from iOS. Or perhaps it was an inside job when Adobe turned their back on it and yanked mobile support? One could even argue it was all those anonymous marketers creating resource intensive, annoying banner ads that lost the hearts and minds of users.

Flash has a few breaths left, however, it’s staggering down the corridor with a dagger in its back as its once loyal friends look on with disdain.



“Being the richest man in the cemetery doesn’t matter to me … Going to bed at night saying we’ve done something wonderful… that’s what matters to me.” – Steve Jobs

I think someone coded this up on their last day at Adobe. Or maybe it was done offshore and is just poor English. Either way, I kept getting this message the other day when trying to open up Photoshop after it crashed. I had to restart my computer to get it to go away.

Have compelling content.

One of the most often overlooked features of CSS transitions is the ability to specify a cubic-bezier timing function. This is because you get a bunch of easing options out of the standards-based box: ease, ease-in, ease-out, ease-in-out, linear.

These canned presets are alright, but if you want your animations to be the best they can be, you need to understand cubic-bezier. How an animation eases is a good way to set tone, and even distinguish a brand.  If you don’t animate intuitively your product won’t “feel” right. Think about how Apple adds polish to their products by meticulously choosing how their animations look.

One reason I think cubic-bezier is overlooked is because it’s unintuitive at first glance. Digging into the documentation you see that it takes four parameters:

cubic-bezier(P1x,P1y,P2x,P2y)

Great… what do these do? Well, these map to points, and these points are part of a Bézier curve:

So there are 4 points, but the function only mentions P1, and P2 with their corresponding X and Y values?

For CSS Bézier Curves, P0 and P3 are always in the same spot. P0 is at (0,0) and P3 is at (1,1). An important thing to note is that the points that get passed in the cubic-bezier function can only be between 0 and 1. So if you decide to try something like cubic-bezier(2,3,5,2), you’ll be banished to linear easing, the worst of all easing functions. That’s like a font-family falling back to Comic Sans.

Also notice that the x-axis is the time the animation takes, and the y-axis is the property being changed. Based on the graph above you can visualize it easing quickly in the beginning, slowing down in the middle, and picking up speed at the end.

I’m a visual-spatial kinda guy, so I needed to make a tool so I could see these curves in action. So world, say hello to the cubic-bezier builder.

text-shadow is really nice for making your copy appear to “pop”. Conversely, I found if you hack around a little bit, you can create a blurry text effect. All it takes is 2 simple lines of CSS:

h1 {
    text-shadow: 0 0 10px #000;
    color: rgba(0,0,0,0);
}

First, you need a text-shadow with no offset and a blur (10px). Second, you just need to use an rgba() color with the alpha set to zero. This way you only see the shadow… and there you have it!

Below is an image of a Snellen chart (eye exam chart) with text-shadow used to blur it. You can check out the example code here.

Is this useful? Not really, but it could be fun to use blurry text in experimental projects. Or one day if you’re making an advertisement for an eye product on a standards compliant browser, look no further! (Hey it’s not that far fetched, iAds support modern technologies).

I decided to play around some more with this, and mix in some transitions. Check out this example where you can have text blur away (webkit browsers only). If you figure out any cool uses for this technique, drop a comment.

IE6 has been dipping low in market share, one site I work on it’s at 3.2%. Recently I started a new project and asked, “So… are we supporting IE6?”. The answer was, “No, but it at least has to be functional.” That’s a reasonable request, and I totally agree, but I’ve started to reflect on what that means? To me it’s:

• Continue to fix PNGs with dd_belated
• Ignore Minor CSS problems
• Don’t put shadows on boxes, and rounded corners become square
• Don’t rely on any new features that IE6 can’t support
• Start prodding users to upgrade
• But otherwise make sure that everything functions

On my project “No” translates to “Partial support”. What does “not supporting IE6″ mean to you? And how long till we get to the point when we stop supporting IE6 completely?

With the latest iOS 4.2 upgrade, Apple added accelerometer support to mobile Safari. You can access this via the W3C DeviceOrientation API. This is a really great feature that creates a lot of potential for browser based apps.

Apple is not the first one to introduce this feature to a browser. Mozilla also has an Orientation API that you can access in Firefox when using a Macbook. In my last post, I introduced the “Accelerometer Fish” that uses the Mozilla’s MozOrientation API to sway back and forth as you move your Macbook around. I just updated the code so that the demo also works with DeviceOrientation if you’re using iOS 4.2. Check it out here.

There were a few tweaks I needed to do to make my old code work with with the new API. First, I had an object named “orientation” that I was storing the values in every time the phone moved. This was fine in Firefox, but it didn’t work in Safari. I would always get a null value, when asking for orientation.x after assigning it. It seemed like a logical name, however, I forgot that it’s a reserved value that it is already used by Safari… so avoid that mistake.

The second problem was that the values that were returning for DeviceOrientation were much larger than the MozOrientation ones. It looked like DeviceOrientation values were 10x’s larger, so I divided the values by 10 and everything was working fine.

Besides those snags, it was really easy to implement both accelerometer API’s. I look forward to seeing what kind of stuff people come up. For a more detailed listing of the iOS 4.2 upgrades to Safari, check out this blog post. If you make anything cool, share a link in the comments, I’d love to see what other people are doing with this.

In between sessions at jQuery Boston I wanted to make something fun using the new jQuery rotation extension and also the MozOrientation events. So, I hacked this together for fellow MacBook Pro Firefox users to play with: Accelerometer Fish. Go to the link, pick up your computer, rock it back and forth, and then click the fish. Enjoy!

If you’ve played around with either of these, post the examples in the comments.

I was looking up details about a DotEasy, a web host used for a site I maintain, and found some humorous “features“. Wow! Dreamweaver compatible, so the server actually supports text files?! Oh and Flash support, that’s good to know I’m investing my money wisely.

It’s interesting how DotEasy isn’t the only culprit of throwing random buzzwords into their comparison charts. GoDaddy also incoherently lists out some interesting javascript specs:

I would like to see a plan that can’t support jQuery. Perhaps if the disk space on the server is less than 100kb. And what annoys me about having Script.aculo.us listed is that you can’t even use it without Prototype, so why not list that too? I’m sure the comparison charts will soon be littered with “HTML5 support”. Happy Friday!