found_drama


First work alone. Then work in unusual pairs.


    #search term haiku: August 2010

    the clojure cookbook
    AppleScript window title
    malnutrition jokes

    “Search Term Haiku” is a series wherein I examine this site’s log files and construct one or more haiku poems from search terms and phrases that led visitors to the site. Where possible, I attempt to keep the search phrases intact. However, as these are haiku poems, I do need to follow the rules.


    #every IM conversation ever (part one)

    Alice: (9:14am) hey
    Bob: (9:14am - Away) BRB!
    Alice: (9:16am) question for ya... back yet?
    Bob: (5:41pm) back! what's up?
    Alice: (6:17pm) nm - you already emailed me back

    #10 things I love about Sass

    CSS. Verbose, repetitive, rife with bizarre quirks.

    Can’t say that I’m a fan. On the web, you’re using it out of necessity. Even the CSS masters out there must admit, there has got to be something better.

    Fortunately, there’s Sass. A super-set of CSS, it helps to eliminate some of CSS’s most obnoxious aspects during the development lifecycle. By way of example, my ten favorite parts about Sass:

    1. Nesting. Let’s get the most obvious one out of the way first. You know how CSS makes you write stuff like this:
      #container .post code,
      #container .post tt,
      #container .post pre {
      	font-family: Consolas, Courier, monospace;
      }
      

      Well, Sass will lets you do that like this:

      #container .post {
      	code, tt, pre {
      		font-family: Consolas, Courier, monospace;
      	}
      }
      
    2. Nesting. Again? (you say)—check this out. Whereas CSS would require this:
      .styledText {
      	font-family: Georgia, Times, serif;
      	font-style: oblique;
      }
      

      In Sass you can do this:

      .styledText {
      	font: {
      		family: Georgia, Times, serif;
      		style: oblique;
      	}
      }
      

      More lines perhaps, but it feels less verbose. And more manageable.

    3. Includes. CSS already has this notion of an @import rule, and while Sass overrides borrows the directive (with a twist on the exact syntax), it goes a step further. While the CSS @import results in an extra http request for the imported stylesheet, Sass will auto-concatenate the files—getting the request down to one. (And as a side-benefit, reducing your CSS build/deploy phases down to just calling Sass on your scss file(s).)
      /* CSS: */
      @import url("_reset.css");
      
      /* Sass: */
      @import "reset";
      
    4. Variables. Totally missing from CSS, Sass brings these to the table. Observe:
      $theme_accent: #771100;
      $theme_bg: #222222;
      
      #container {
      	h1, h2, h3 { color: $theme_accent; }
      	.post {
      		border: {
      			$accent_border: 1px $theme_accent;
      			$dark_border: 1px $theme_bg;
      
      			top: $accent_border;
      			left: $accent_border;
      			bottom: $dark_border;
      			right: $dark_border;
      		}
      	}
      }
      

      Need I go on?

    5. Line comments. Again: // need I go on?
    6. Mixins. Like variables on steroids. The Sass site’s example is great; I’ll reproduce here:
      @mixin rounded-top {
      	$side: top;
      	$radius: 10px;
      
      	border-#{$side}-radius: $radius;
      	-moz-border-radius-#{$side}: $radius;
      	-webkit-border-#{$side}-radius: $radius;
      }
      
      #navbar li { @include rounded-top; }
      #footer { @include rounded-top; }
      

      And did I mention that you can set up your mixins to take arguments?

    7. Validation. This shouldn’t be hot shit, but it is. If you’ve been screwing around with CSS long enough, you’ve likely run into a situation where some rule you’ve written isn’t taking and you can’t figure out why and it turns into a two-hour wild goose chase only to discover that you fat-fingered border as boarder or failed to close a curly bracket or some such thing. Your IDE might be warning you. But Sass goes a step further and puts the error message right into your page—right there at the top where you can’t ignore it. (It’s also a useful error message.)
    8. Auto-minification. This is right up there with, and arguably part of Includes. Either way, depending on how you have your Sass compiler set up, you can have it crunch the CSS output, stripping all comments and extraneous whitespace[1].
    9. SassScript functions. As if the variables and mixins weren’t enough for you, there’s also a whole host of hot functions and operations that you can perform in “SassScript”. For example, Dan Rubin recently Tweeted:
      CSS needs to allow me to write: * { saturation:+15%; }

      And of course, Sass has almost exactly this:

      $my_color: #77110;
      .post-title { color:  saturate($my_color, 15%); }
      

      …and a whole bunch of other color functions. Among other functions.

    10. Directives, control statements, and other functions. Maybe just more of the same from the SassScript functions above, but damn is there some great material here.
      article {
      	$base_font_size: 12px;
      	$base_line_height: $base_font_size * 1.5;
      
      	font-size: $base_font_size;
      	line-height: $base_line_height;
      
      	/* simple math */
      	h1 { font-size: $base_font_size * ($base_line_height + 1em); }
      	h2 { font-size: $base_font_size + 4px; }
      }
      
      /* some looping with conditional logic */
      @for $i from 1 through 10 {
      	#flickr_badge_image#{$i} {
      		@if $i % 2 == 0 {
      			color: 3993FF;
      		} @else {
      			color: #ff1c92;
      		}
      	}
      }
      

    All this amazing power… and I have just been casually exploring Sass over the past couple days. This project is a treasure trove and I hope that it is here to stay. My hat is off to the folks working on Sass. Marvelous work.

    1. Granted, your mileage may vary on the download time savings from this kind of minification in a CSS file. After all, provided that you’re stripping your comments from your production CSS, most the file’s trivial bytes are whitespace and gzip basically does away with that overhead. []

    #on syntax highlighting: a brief public service announcement

    In preparation for an up-coming post[1], I did a bit of extra legwork on syntax highlighting plugins for WordPress and wound up switching from Google Syntax Highlighter for WordPress (GSHW)[2] to SyntaxHighlighterPro. Both of them are backed by Alex Gorbatchev’s Syntax Highlighter library. But more on that in a moment.

    What prompted the switch was the fact that I noticed that GSHW was mangling some CSS syntax highlighting operations. The regex used to grab hex colors was getting greedy and highlighting #id-selectors as if they were colors[3]. After a little digging, I came to discover that GSHW was using a quite-out-of-date version of Gorbatchev’s library.

    Exploring the Syntax Highlighter site a bit, I found a couple of other plugins that appeared to be more up-to-date. I gave a crack at SyntaxHighlighter Evolved and the above mentioned SyntaxHighlighterPro. Both had more recent versions[4] of the library baked in. Both seemed a step up in that regard, but I went with -Pro because it was going to require the fewest tweaks and changes[5] in the code samples already posted[6] and also because its control panel offered the ability to toggle specific syntaxes at will.

    That said, the “Evolved” plugin has a nice suite of options.

    This is likely just a temporary stop-gap measure, however. I may pull the plug on the plugins and just drop in Gorbatchev’s script directly—the latest version appears to offer on-demand loading of the “brush” scripts. Combine that with a minified version of the script and that may prove a better overall solution than the plugins can offer.

    Nevertheless, the problem remains that the CSS highlighter “brush” script needs some work. It doesn’t really seem to recognize common selectors (#id and .class selectors, I’m looking at you)… and this bugs me.

    But until then…

    1. Quite likely the next post… []
    2. Which I’ve been using for a few months now. []
    3. Meaning that it was only coloring the hash and the first six characters of #container. []
    4. Though neither was using the most recent version. []
    5. I.e., it more gracefully relented to my efforts to kludge in the AppleScript and Sass support. []
    6. I.e., -Pro recognized the <pre> formatted blocks whereas Evolved was going to require changing all those to use BBCode-style [bracket] syntax. Ick. []

    #Linkdump for August 29th


    #Saturdays are for playing.



    Saturdays are for playing.


    #Linkdump for August 27th


    #new money



    Via dowlingduncan.com.


    #Retiring old favorites.



    Retiring old favorites.


    #Linkdump for August 24th




    Creative Commons License This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License.