<li data-bind="css: {'active': visible()}"></li>

But if you use XSLT to render your HTML, it may fail because the curly-braces may not be supported in attributes.

To make this work, you need to do two things:

1. Convert the attribute:

   data-bind="..."

   into an

   <xsl:attribute name="data-bind">

   Like this:

   <li>
    <xsl:attribute name="data-bind">
     css: {'active': visible()}
    </xsl:attribute>
   </li>

2. Do a search and replace exchanging the curly braces with XML-safe entities:

   	"{" to "{"
   	"}" to "&#125"

   So the final XSLT should look like this:

   <li>
    <xsl:attribute name="data-bind">
     css: &#125'active': visible()&#125
    </xsl:attribute>
   </li>

    

Ugly, I know! But now it will work.

I do it all the time! That’s why I created DropCheck.

DropCheck is a web app that turns lines in a .txt file into checkable lines in a nice web app interface.

It’s tailored specifically for grocery shopping, as this is a common use case for me.
You have the ability to tick off each item as it goes in your shopping cart (“Yes”).
Or you can mark it as sold out (“No”).

At the bottom you can move the checked items to the bottom of the list, so you have them out of sight.
The web app also remembers the state of the list even though you close it.
To re-connect to the Dropbox .txt-file you just click the “Reset to Dropbox file” link.

Installation:

To install, unzip the DropCheck folder into your Dropbox public folder, then get the public link of the file called dropcheck.htm:

Visit the public URL in Safari on your iPhone and save it to your homescreen:

Now, when you visit the DropCheck app, you’ll see the contents of the dropcheck-list.txt file turned into a checkable list.

Enjoy!

UPDATE for Windows users:

Kasper Hyllested pointed out to me, that there was an issue with international characters when saving the .txt-file from Notepad on Windows.

To fix this, you must force notepad to save using UTF-8 encoding of characters (instead of ANSI):

MyArray.length = 0;

(Just a reminder to myself, since I’ve forgotten about this a few times …)

Imagine changing the color scheme of an entire design with flick of a switch. This would be a real time saver.

States (like hover states or ajax states)

We’ve got layer comps. Now make them interactive. Maybe something like Axure.
Right now, Fireworks is just too complicated to bridge the gap between prototyping and proper graphic design.

Hide layers (like hide tracks in Logic)

In Logic, every track can be hidden if they’re not used. This drasticly reduces clutter in the arrange window.
Why not make this possible with layers in Photoshop?

Version Control

In code this is indispensable.
I feel like it is in graphic design as well. It’s just not available yet …

Intelligent update of smart layers from separate files

Imagine having a central repository of elements that could be shared between projects or multiple designs within a single project and maintained in a single place.
This is a concept that’s essential in software engineering. Why not let graphic designers benefit from it as well?

Countless hours have been lost creating rounded corners, dropshadows and gradient backgrounds for the web.
With Internet Explorer still lacking support for CSS3, until recently it seemed like we would have to keep doing tiny graphic sprites (or implementing dirty javascripts) in order to accomodate the demand for such UI niceness.

Enter: http://css3pie.com/
PIE is a .htc CSS behaviour script that enables support for dropshadows, rounded corners and background gradient CSS3 properties in Internet Explorer – all the way back to IE6!

Of course, I couldn’t wait to try it out.
And it didn’t work.
Bummer …

Fortunately, I found out why:
It only works on positioned elements.

You must specify “position: relative;” or “position: absolute;” on the element that calls the .htc behaviour, and then it works!

Amazing script!
CSS3 future is here now.
Thank you so much, Jason Johnston of 327 Creative LLC, for sharing this little goodie with the world!

The good people at Microsoft have introduced the Browser Choice splash screen on new Windows installations.
I thought I’d try it out by re-installing the Windows XP that runs in VMWare on my Macbook.

After running the install and the massive pile of updates following it, I rebootet and was greeted by the Browser Choice introduction.
I then clicked OK to confirm that I was connected to the Internet and ready to make my choice …

This is what happened:

Time to pick a browser. Which one should I choose ... hmmmm ...

What a funny coincidence!
It appears that the freshly updated IE has opened it’s configuration wizard right on top of the Browser Choice window …

(-:

Variables, nested selectors, abstractions from vendor-specific properties etc. etc. etc. Good stuff!

Installation and usage couldn’t be simpler! (Really. I don’t see how it could!)
You place the library folder in whatever folder holds you CSS-files. Then you copy-paste the .htaccess-file that redirects every request for your CSS-files to the library. Scaffold then reads through your CSS and interprets whatever tricks you’ve written and serves up nicely formatted (or minifed, if you prefer) W3C-compliant CSS.

”What’s this good for?”, you say?

Well. Consider this piece of regular CSS:

form#searchbox #arrival_date,
form#searchbox #departure_date,
form#searchbox #persons,
form#searchbox #location
{
font-size: 18px;
color: white;
margin-bottom: 20px;
}
form#searchbox #arrival_date label,
form#searchbox #departure_date label,
form#searchbox #persons label,
form#searchbox #location label
{
width: 100px;
display: inline-block;
}
form#searchbox #arrival_date input,
form#searchbox #departure_date input,
form#searchbox #persons input,
form#searchbox #location input
{
font-size: 18px;
width: 180px;
height: 40px;
padding-left: 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
behavior: url("boxsizing.htc");
}
form#searchbox #arrival_date .popupcalendar_icon,
form#searchbox  #departure_date .popupcalendar_icon,
form#searchbox  #persons .popupcalendar_icon,
form#searchbox  #location .popupcalendar_icon
{
background: url(./graphics/images/sprites.png) no-repeat 0 0;
height: 295px;
width: 314px;
display: block;
text-indent: -9999px;
overflow: hidden;
background-position: -271px -20px;
height: 39px;
width: 31px;
zoom: 1;
display: inline;
display: -moz-inline-box;
display: inline-block;
vertical-align: top;
margin: 3px 0px 0px 10px;
}

Even though it’s nicely ordered and very readable, this code is still quite hard to understand at first look. You can’t just read what’s going on. What’s related to what? You need to look back and forth a few times to see this.
This makes it bad code!
Good code is always easy to read and understand.

Now look at the same code in Scaffold syntax:

@constants {
   labelTextColor: white;
   gutter: 10px;
}
 
form#searchbox {
 
   #arrival_date, #departure_date, #persons, #location  {
      font-size: 18px;
      color: !labelTextColor;
      margin-bottom: #[2 * !gutter]px;
 
      label {
         width: #[10 * !gutter]px;
         +inline-block();
      }
 
      input {
         font-size: 18px;
         width: 180px;
         height: #[4 * !gutter]px;
         padding-left: #[1 * !gutter]px;
         +border-box();
      }
 
      .popupcalendar_icon {
         image-replace: url('./graphics/images/sprites.png');
         background-position: -271px -20px;
         height:39px;
         width: 31px;
         +inline-block();
         margin: 3px 0px 0px 10px;
      }
   }
}

The nesting immedietaly makes the code easy to read!
The selectors come in a logical order. The code is scannable, and in my opinion this is quite a revolution as far as CSS goes!

And it gets even better!

As you may have noticed, my second code example is full of non-CSS properties.
These are Scaffold-specific functions, constants and ”mixins”.

For example: A standard gutter width of 10px is defined as a constant, then used throughout the style declarations by reference.
No more search-and-replace for simple color changes!
This feature alone will save me countless hours.

Then there’s stuff like ”+inline-block();” or ”+border-box();”. These are ”mixins” that basically call a set of CSS properties that take care of crossbrowser compatibility. Scaffold serves up vendor-specific properties and even a selection of IE-behaviors, filters and expressions to get the desired effect working all around. Now we have a one line trick that’ll fix box model-quirks or get inline-blocks behave like expected. (Or rotation, shadows and other CSS3-goodies for that matter). This means more time for coffee, which is nice!

Finally we have functions like ”image-replace: url(‘./graphics/images/sprites.png’);”
This line takes care of everything regarding CSS image replacement. It even automatically sets the correct height and width fitting the specified image file.

The library has tons of useful features and some pretty advanced ones too. Everything is cached, so it’s just as fast as regular CSS.

So if you’re lucky enough to have your CSS-files served from an Apache server with PHP enabled, then by all means, do not miss out on Scaffold CSS!

Today’s library is:
SLIR

SLIR – or ”Smart Lencioni Image Resizer” – was developed by Joe Lencioni.
It does on-the-fly scaling and cropping of images.

The benefit is that you can change your image sizes dynamically on request-time.
If your page layout changes, you can just request images with new sizes that fit.

Under the hood it’s a clever PHP script that returns the content of an image file. Requests are handled by a .htaccess-file that disguises the underlying PHP and presents it to the public as an actual image file.

This means you activate the resizer just by requesting a url with some resize parameters plus the path to the original image file.

Example:

Original image:

<img src="http://www.jakobloekkemadsen.com/wp-content/uploads/2010/02/DSC_1225_maj-30-2009.jpg" alt="" />

Scaled to fit 100px width:

<img src="http://www.jakobloekkemadsen.com/slir/w100/wp-content/uploads/2010/02/DSC_1225_maj-30-2009.jpg" alt="" />

Scaled to fit 25px width and cropped to square:

<img src="http://www.jakobloekkemadsen.com/slir/w25-c1:1/wp-content/uploads/2010/02/DSC_1225_maj-30-2009.jpg" alt="" />

”What about performance?”, I hear you ask. “Won’t the server choke on having to process all image requests?”

No, it won’t. (-:
SLIR caches the image the first time it’s requested, so all subsequent requests are served just as fast as any other image file on the server. The redirect is handled by an alias to the cachefile. Only if no matching cache file exists, or if it’s too old, or if the original has changed, then SLIR is invoked and a new image is generated and cached.

”Ok. But what about security, then?”

In theory this script enables a hacker to flood your server with files just by changing the url and requesting all imaginable combinations of width and height. This issue has been discussed in the comments on http://shiftingpixel.com/2008/03/03/smart-image-resizer/ and the current version of the script can be made to restrict access to any other combinations than the ones you specify.

Personally I haven’t found an easier, more futureproof and flexible solution for handling image scaling.
And it’s free!

Simply put: I love this script!

Stay tuned for part two of “Useful PHP libraries”. Coming soon …