blog.kentarok.org

It's very frustrating that we always have to repeat ourselves to write CSS because it hasn't supported variables for a long time. And so, people hacked the problem in various way, for example, CSS Server-side Constants. That's pretty cool way to do that, but can't we make it more simply?

Of course, we can ;)

Here's the strategy to do that:

1. Use freely customizable editor: Vim, Emacs, etc.
2. Utilize existing templating systems like ERb (Ruby), Template::Toolkit(Perl), Smarty (PHP), etc to write a template and to have CSS support variables artificially
3. Customize the editor to automatically generate a sheer CSS file from the template when we save it
4. Then we'll get a ordinary CSS file without server-side processing and any special configurarions

secondlife-san demonstrated it with Vim and Ruby/ERb. It's really easy way and highly expressive due to ERb, Ruby's standard templating system. How cool it is!

But I'm not familiar with both Vim and Ruby/ERb at all, so I tried with Emacs and Perl/Template::Toolkit, and show you how to do that with them below.

First, add the following code snippet into your .emacs file. When you edit and save a template for CSS or others, Emacs automatically generates another file based on its name using "tpage", an adjunct utility to TT.

(add-hook 'after-save-hook
          (lambda ()
            (if (string-match "\\(.+\\)\\.tpage\\.\\(.+\\)" (buffer-file-name))
                (save-excursion
                  (setq filename (concat (match-string 1 buffer-file-name) "." (match-string 2 buffer-file-name)))
                  (shell-command
                   (format (concat "tpage %s > %s && echo Compiled " filename) (buffer-file-name) filename))))))

Second, write a template on TT syntax with Emacs, and save it as like "(filename).tpage.(extension)", for example, "demo.tpage.css".

[%
  red  = "#FF3333"
  line = "3px solid ${red}"
-%]

p {
  color:  [% red %];
  border: [% line %];
}

Then you'll see a file generated automatically and named "demo.css", and it'll contain the following sinippet of CSS code.

p {
  color:  #FF3333;
  border: 3px solid #FF3333;
}

The way described above has more potential than I demonstrated. Actually, secondlife also demonstrated to generate a YAML file with some embedded ruby code. Needless to say, TT also can do that as well. It's your turn to hack more, enjoy!

Microsoft has revealed its new product Windows Live Writer, a WYSIWYG editor for easy-blogging. It enables us to not only treat texts easily, but also insert photos and Windows Live Local map directly and arrange them intuitively.

In addition to that, Microsoft is wise enough to provide Windows Live Write SDK that allows developers to extend the functions with writing some plugins. Great! I already expect that someone make plugins to work with other online services like Flickr, YouTube, Amazon etc.

Of cource, this entry was posted with Window Live Writer. I found it good.