Commands in TextMate are awesome.
I've used Textmate to write code for the past year or so. I always thought it was a fantastic editor, but I stumbled on something new (to me) about it the other day that makes me like it 1000 times more. You can write commands to automate tedious tasks in Textmate, and you can do it in just about ANY language that you already know. For me, that's Ruby. Writing commands with it is super easy.
Lately, as I've been doing more CSS3 stuff, I've gotten more and more frustrated by having to type all the browser-specific extensions for properties that haven't been quite finalized yet. It's annoying, and I'll inevitably start leaving stuff out because I don't want to mess with it (Sorry, Opera). But once I figured out that I could write commands in Ruby, I was able to whip this up in just a couple minutes:
#!/usr/bin/env ruby
s = STDIN.read
s.gsub!(/([[:blank:]]*)border-radius: (\d+px);/) do
"#{$1}border-radius: #{$2};\n#{$1}-moz-border-radius: #{$2};\n#{$1}-webkit-border-radius: #{$2};\n"
end
s.gsub!(/([[:blank:]]*)box-shadow: (\d.+);/) do
"#{$1}box-shadow: #{$2};\n#{$1}-webkit-box-shadow: #{$2};\n#{$1}-moz-box-shadow: #{$2};\n"
end
s.gsub!(/([[:blank:]]*)transition: (\S.+);/) do
"#{$1}transition: #{$2};\n#{$1}-webkit-transition: #{$2};\n#{$1}-moz-transition: #{$2};\n#{$1}-o-transition: #{$2};\n"
end
print s
Then I saved it as a command (Menu > Bundles > Bundle Editor > Edit Commands), and set the input to "Selected Text" or "Line", so I wouldn't accidentally run the command over and over again on different parts of the document.
It's nothing crazy, but it makes my day WAY easier. Now I can just type the non-browser-specific CSS declarations, then run the command (from the Bundles menu), and all the CSS declarations I've selected get expanded out to their browser-specific versions. For example:
#foo {
border-radius: 5px;
box-shadow: 2px 2px 4px #ccc;
transition: width 0.3s linear;
}
becomes:
#foo {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 2px 2px 4px #ccc;
-webkit-box-shadow: 2px 2px 4px #ccc;
-moz-box-shadow: 2px 2px 4px #ccc;
transition: width 0.3s linear;
-webkit-transition: width 0.3s linear;
-moz-transition: width 0.3s linear;
-o-transition: width 0.3s linear;
}
It's pretty rad. I wish I had known about that earlier. I'll probably expand on it as needed, but these three rules are already saving me a lot of time. For example, figuring out an easy way to do CSS gradients would be cool, but seems like it'd be an really ugly regular expression.