CSS Tweak Dashboard Widget
The first release of the CSS Tweak dashboard widget is done! Now you can optimize your CSS from the comfort of your Mac’s desktop.
This is the first widget that I’ve ever made, it’s been really great to get into the guts of how they work.
For those of you that have never seen inside a widget, they are simply a combination of HTML, CSS and Javascript. So if you are a web developer, you most likely already have the knowledge and skills to make a fully functional dashboard widget.
Actually, I cheated a little with the CSS Tweak widget. Well, not so much cheated, but I didn’t code the whole thing in Textmate. I managed to be one of those lucky people who had an installed version of Dashcode on their new MacBook Pro. I used Dashcode to develop this widget from start to finish and I really only have great things to say about it.
Despite the program crashing a fair bit (which is understandable considering it is a pre/non-release version) it provides wysiwyg and debugging features that go a long way to help you set up your widget and get it working exactly how you want it. Plus, it has a gorgeous interface as you would expect from an Apple developed tool. 
Anyway, more about the widget itself. The widget will accept CSS files dropped onto it (which is annoyingly unintuative, but Apple fails to provide file input any other way). Once you drop a CSS file in, you are presented with tweaking options. You can choose to enable or disable any of the options, just the same as on the CSS Tweak website. Once you hit tweak, the CSS file is sent to the CSS Tweak server, tweaked, and then sent back and saved in the same location as your original file.
I hope that people find this tool useful. It will definately save time not having to visit a website, you can simply drop your file in from anywhere and you’re done.
This is of course the first version, and there will no doubt be a few bugs to iron out. Please let me know via email (andy [at] this domain) if you find anything out of whack. I should mention, you do need to be connected to the internet for this widget to work.
11 People Added Their Comments
Lovely looking widget and great Idea too! However, I tried this and the ‘tweaked’ code that was generated made the site I tried it with look wrong. (Border and background styling did not display properly in firefox)
Looking forward to updates though as its a great idea.
Hi Sam,
Can you send me the example CSS file so I can see the issue. I’ve not come across any problems with this before.
Were you using stylesheet hacks at all?
Andy
Would B cool you do it for Konfabulator cause it makes WINDOWS compatible!
great work andy!
GREAT widget, love it! One thing though, it’s 3.9 MB when unzipped. Isn’t that a big big for a widget or is this ok?
Don’t know if I would use it but it is cool!
Bob: I’m going to look into how I can easily translate this into a Konfabulator/Yahoo widget. If it’s easy and I can maintain one source, I will likely have a go.
Rutger: I’ve released an updated version which drops the download to 150kb! Looks as though Dashcode created a whole bunch of temporary files that were hidden. Those files accounted for a lot of unneeded bloat.
Awesome widget. I was waiting for something like this. CSS Tweak was always a great resource. Now I can get the same convenience on my desktop. Thans for the widget.
Good work with this Andy! Not sure if i would use it either, it kinda messes up the code to the point where I can’t read it to make changes.
Antonio, don’t run it if you plan to edit the CSS document afterward (from the widget description: “Great for optimizing CSS for deployment to a server.”).
Keep a separate development copy.
Hello
Your site is great
Bye