Saturday, June 26, 2010

Separate vendor prefixes for CSS sucks

Seriously.

Here's my Sass mixins for some CSS3 stuff:

@mixin box-shadow($color, $radius = 1em) {
-moz-box-shadow: 0 0 $radius $color;
-webkit-box-shadow: 0 0 $radius $color;
box-shadow: 0 0 $radius $color;
}

@mixin transitions($properties, $duration, $delay = 0) {
-moz-transition-property: $properties;
-webkit-transition-property: $properties;
-o-transition-property: $properties;
transition-property: $properties;

-moz-transition-duration: $duration;
-webkit-transition-duration: $duration;
-o-transition-duration: $duration;
transition-duration: $duration;

-moz-transition-delay: $delay;
-webkit-transition-delay: $delay;
-o-transition-delay: $delay;
transition-delay: $delay;
}


and here's where they get used:

.post.snippet:hover {
@include transitions(background-color, 2s);
@include transitions(box-shadow, 2s);
@include transitions(-moz-box-shadow, 4s);
@include transitions(-webkit-box-shadow, 4s);
@include transitions(box-shadow, 4s);

@include box-shadow(#0481B5, 1em);
background-color: #0481B5;
}

Which results in this:

.post.snippet:hover {
-moz-transition-property: background-color;
-webkit-transition-property: background-color;
-o-transition-property: background-color;
transition-property: background-color;
-moz-transition-duration: 2s;
-webkit-transition-duration: 2s;
-o-transition-duration: 2s;
transition-duration: 2s;
-moz-transition-delay: 0;
-webkit-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0;
-moz-transition-property: box-shadow;
-webkit-transition-property: box-shadow;
-o-transition-property: box-shadow;
transition-property: box-shadow;
-moz-transition-duration: 2s;
-webkit-transition-duration: 2s;
-o-transition-duration: 2s;
transition-duration: 2s;
-moz-transition-delay: 0;
-webkit-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0;
-moz-transition-property: -moz-box-shadow;
-webkit-transition-property: -moz-box-shadow;
-o-transition-property: -moz-box-shadow;
transition-property: -moz-box-shadow;
-moz-transition-duration: 4s;
-webkit-transition-duration: 4s;
-o-transition-duration: 4s;
transition-duration: 4s;
-moz-transition-delay: 0;
-webkit-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0;
-moz-transition-property: -webkit-box-shadow;
-webkit-transition-property: -webkit-box-shadow;
-o-transition-property: -webkit-box-shadow;
transition-property: -webkit-box-shadow;
-moz-transition-duration: 4s;
-webkit-transition-duration: 4s;
-o-transition-duration: 4s;
transition-duration: 4s;
-moz-transition-delay: 0;
-webkit-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0;
-moz-transition-property: box-shadow;
-webkit-transition-property: box-shadow;
-o-transition-property: box-shadow;
transition-property: box-shadow;
-moz-transition-duration: 4s;
-webkit-transition-duration: 4s;
-o-transition-duration: 4s;
transition-duration: 4s;
-moz-transition-delay: 0;
-webkit-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0;
-moz-box-shadow: 0 0 1em #0481b5;
-webkit-box-shadow: 0 0 1em #0481b5;
box-shadow: 0 0 1em #0481b5;
background-color: #0481B5; }


...

So, yeah: I'm switching to jQueryUI for most of the animation heavy lifting, now. Hopefully browsers start dropping the -moz, -o and -webkit for primary use and settle on -v (vendor) or something like that in the future. Maybe with fallbacks to their own prefixes in case someone really really really needs to specify that -moz handles it another way.

Wednesday, June 09, 2010

Rails 2.3.8 + HTML strings.

Be careful with doing concatenating inside of ERB views with Rails 2.3.8.

This recently broke an app that concat'd (via '+') two strings full of HTML. Before you ask, no, I don't know why anyone would do that in a view of all places.

The quick fix was to call String#html_safe on the second string (I didn't check to see if there was any other solution since the fix was urgent).

Without String#html_safe, what ended up happening was that the 2nd string's HTML was escaped -- thus breaking the app in a few places.

Sunday, June 06, 2010

I'm a Penguin.

For the past 2 years, I've been keeping my personal life Windows powered, and my development life Linux-powered.

No more!

As of two days ago, I have replaced my Windows machine with a shiny black Ubuntu box. Three years ago, when I purchased my Windows Vista laptop (thinking it couldn't be all that bad, HO HO HO WRONG), there were still several desktop applications that I used on a regular basis.

When I decided to upgrade again this year, I took a long, hard look at my desktop usage for a few days.

One desktop application (that runs fine under Wine, by the way), and Chrome. That's it -- my computing life essentially consists of nothing but webapps.

So when it came time to upgrade, I had a simple choice: Windows 7 or Ubuntu. I've long sinced used Ubuntu for my development PC, and I was very comfortable with it. It's got great hardware support and it's fast as hell (my developer machine is specc'd lower than my Windows laptop, yet performs much better).

So, given a choice between two almost identical operating systems in terms of functionality, which one do you choose?

The free one.