The world (and word) of jaymz

There’s been a fair amount of buzz surrounding the Zen Coding plugin’s for various editors. In one line, it lets you write out HTML via css selector syntax. So something like

Would transform into the appropiate HTML table:

I use KDE's Kate editor for my main dev setup. I'm really used to its setup and find it a powerful tool for coding web apps. It's minimal compared to a full on IDE but I'm one of those developers that doesn't really like the whole IDE concept. For web development at least, if I was building on OS-X or Windows I'd probably be using Xcode or Visual Studio but for web-dev, I find Kate + a shell + Firefox with Firebug/Webdev/HttpFox is more than enough.

Unfortunately there isn't a plugin to give native Zen Coding support in Kate. Some googling found me this obscure reference to a "Insane HTML plugin" for the development trunk of Kate but when I checked out the git repo and compiled it I couldn't find it. Then I came across Sparkup. It's a similar thing to Zen (its based of its syntax and is compatible) and they provide it as a python script. Kate provides you the means to pipe text through a shell command, I use this to format or parse text through awk & sed quite a bit and so dropping in the sparkup python script to /usr/local/bin I could write out some CSS→HTML markup and just pipe it through.

It's not quite as slick as having a single hit plugin but it works enough to make it part of my toolchain now when creating templates. I've also been looking at things like Less CSS for adding variables and calculations to CSS files. You write your CSS in a more programming style markup (colors assigned to variables for example) and then Less compiles it out to actual CSS. I wanted to do something similar for sparkup for less so installed the ruby gem for it. Alas it takes a file as input and gives a file as output so I couldn't just pipe through selected text in Kate to lessc. Fortunately it only takes a little bit of bash to allow me to write abbreviated CSS, pipe it through lessc and have Kate drop back in the "compiled" version. Here's the bash (gist):

All it's doing is putting the input into a variable, outputting that to a file and then calling lessc on it. The output is then cat'd back to standard output which means Kate will dump it out over our selection. Combining these two gives Kate a fair bit more power as my main (pretty much only) coding environment, and means I don't have to switch out to use something else to give zen/less css a go. I quite like the concept of Less CSS, for complicated projects using it from the outset would be a pretty good idea I think, for now I'm using it as a sort of shorthand. Your path to the lessc binary might be different but probably not by a lot.

Finally, the default binding for "pipe text to shell command" is CTRL+|, which, as I tend to use the left control key makes it a little constrictive to fluidly type. I also tend to end up hitting z or a instead which gets annoying so I remapped it to CTRL+#, which is a lot easier to hit with both hands fully extended. I think its a better mapping if you use it a lot. Which you will when you look up a few sed 1 liners

jaymzcd@googlemail.com