World disintermediation, one hack at a time
Further to my Delicious CSS post, here's a javascript bookmarklet to make adding delicious css tags that much easier:
Just drag it to your bookmarks toolbar somewhere, and click to use.
Unfortunately, the latest version of the delicious tag form doesn't accept
tag arguments in the URL, which is what we need to preset the delicious_css
tags we need. To workaround this, you need to also install the
Auto-Fill Delicious Tag Field
greasemonkey script.
And from the quick-weekend-hack department ...
Ever wanted to quickly add a style to a page you were on to make it more usable? If you're a Firefox user with Firebug installed you can do that directly, but it's a temporary and local-only solution. User stylesheets are more permanent, but at least in Firefox (as I've complained before) they're relatively difficult to use, and they're still a single-host solution.
I've wanted a lightweight method of defining and applying user styles on the network for ages now, and this weekend it struck me that a simple and relatively elegant hack would be to just store user styles as delicious tags, applying them to a page via a greasemonkey script.
So here it is: available at userscripts.org is a
relatively trivial Delicious CSS
greasemonkey script. It looks for delicious bookmarks belonging to a list
of specified delicious usernames that are tagged with
delicious_css=<current_domain>,
and applies any 'style tags' it finds on that bookmark to the current
page.
Say if for example you wanted to hide the sidebar on my blog and make the content wider, you might do this in CSS:
div#sidebar { display: none }
div#main { width: 100% }
To define these rules for Delicious CSS you'd just create a bookmark
for www.openfusion.net with the following tags:
delicious_css delicious_css=www.openfusion.net div#sidebar=display:none div#main=width:100%
Note that since delicious tags are space-separated, you have to be careful to avoid spaces.
The general format of the style tags is:
ELT[,ELT...]=STYLE[;STYLE...]
so more complex styles are fine too. Here for example are the styles I'm using for the Sydney Morning Herald:
div.header,div.sidebar,div.aside,div.ad,div.footer=display:none div#content,div.col1,.span-11=width:100% body=background:none
which turns this:
into this:
And to setup a new machine, all you need to do is install the Delicious CSS greasemonkey script, adjust the usernames you're trusting, and all your styles are available immediately.
I'll be setting up my userstyles under my 'gavincarr' delicious account, so you should be able to find additional examples at http://delicious.com/gavincarr/delicious_css.
I've been playing with the very nice YSlow firefox plugin recently, while doing some front-end optimisation on a Catalyst web project.
Most of YSlow's tuning tips were reasonably straightforward, but I wasn't sure how to approach the concatenation and minification of CSS and javascript files that they recommend.
Turns out - as is often the case - there's a very nice packaged solution on CPAN.
The File::Assets module provides concatentation and minification for CSS and Javascript 'assets' for a web page, using the CSS::Minifier (::XS) and JavaScript::Minifier (::XS) modules for minification. To use, you add a series of .css and .js files in building your page, and then 'export' them at the end, which generates a concatenated and minified version of each type in an export directory, and an appropriate link to the exported version. You can do separate exports for CSS and Javascript if you want to follow the Yahoo/YSlow recommendation of putting your stylesheets at the top and your scripts at the bottom.
There's also a Catalyst::Plugin::Assets module to facilitate using File::Assets from Catalyst.
I use Mason for my Catalyst views (I prefer using perl in my views rather than having another mini-language to learn) and so use this as follows.
First, you have to configure Catalyst::Plugin::Assets in your project config file (e.g. $PROJECT_HOME/project.yml):
Plugin::Assets:
path: /static
output_path: build/
minify: 1
Next, I set the per-page javascript and and css files I want to include as mason page attributes in my views (using an arrayref if there's more than one item of the given type) e.g.
%# in my person view <%attr> js => [ 'jquery.color.js', 'person.js' ] css => 'person.css' </%attr>
Then in my top-level autohandler, I include both global and per-page assets like this:
<%init>
# Asset collation, javascript (globals, then per-page)
$c->assets->include('js/jquery.min.js');
$c->assets->include('js/global.js');
if (my $js = $m->request_comp->attr_if_exists('js')) {
if (ref $js && ref $js eq 'ARRAY') {
$c->assets->include("js/$_") foreach @$js;
} else {
$c->assets->include("js/$js");
}
}
# The CSS version is left as an exercise for the reader ...
# ...
</%init>
Then, elsewhere in the autohandler, you add an exported link at the appropriate point in the page:
<% $c->assets->export('text/javascript') %>
This generates a link something like the following (wrapped here):
<script src="http://www.example.com/static/build/assets-ec556d1e.js" type="text/javascript"></script>
Beautiful, easy, maintainable.
I've been messing with user stylesheets the last couple of days, almost getting what I want, but not quite.
I'm a happy little firefox user, but the stock firefox functionality in this area really isn't that useful. My gripes:
first, firefox/mozilla seems to only support a single global user stylesheet, which gets huge and unwieldy awfully fast. Opera does this much better than firefox, I hear.
because of this, to apply styles to a particular site you have to use
a magic @-moz-document domain style modifier, and this doesn't
seem to play nicely with @media modifiers, so afaict there doesn't seem
to be a way of specifying print styles for a particular site, say.
If I'm wrong about this, I'd be happy to hear about it.
user stylesheets are local files, which means they don't follow me around across the different machines I use, and I don't get any network effects from the work of others, as is available using a 'cloud' solution like greasemonkey
(more minor) I know it's to spec, but having to specify !important
everywhere to force user styles to stick gets old fast
As usual with firefox, there's an extension/add-on that does the job better though. The Stylish extension - "Stylish is to CSS what Greasemonkey is to JavaScript" - does a pretty nice job of addressing (1) and some of (3) above (the network effects part), allowing you to import and manage multiple per-site stylesheets pretty nicely.
My other quibbles remain, though. In particular, there doesn't seem to be a nice way of setting up media-specific per-site styles, which is a must-have, I think. I'd also really love a solution that would follow me across browsers, especially given the number of sites you might want to tweak is typically much larger than the number of extensions you typically have installed.
Hmmmm.