Today, I spent a whole day on reconfigure my Vim. Vim is a powerful monster that needs care. Once you feed it with (your precious) time, Vim will pay you back with a nice and pretty editing experience.

Two things I’ll talk about today: Solarized Dark and Powerline.

Solarized Dark

Solarized Dark is a color palette designed by Ethan Schoonover. From my experiences, this color scheme proves to be usable across many kinds of computers and monitors. The colors are smooth and clear. Color settings for most of daily use apps are provided on the official website. Even if it doesn’t provided officially, you usually still can find it somewhere on the Internet. :-p In short, pretty color for your eyes and large userbase. Go get it now!

To use this color scheme (properly) in Vim, some prerequisites must be met.

• A decent terminal emulator with properly configured 256-colors support
• Install vim-colors-solarized plugin

Since there are way too many terminal apps to be introduced one-by-one, I’ll save your time from that. I can tell you that I’m using this color scheme on iTerm2, mintty, gnome-terminal. Oh, Did I mention that I just gave your links to those color scheme files? :-D

P.S. OSX’s Terminal is no good, try iTerm2 if you’re using OSX.

Once you prepared your terminal environment for colorful life, we can get to the business. The vim-colors-solarized plugin can be installed by adding this line to your .vimrc, given that you’re using Vundle, and please do use it.

1
2
3

Bundle 'altercation/vim-colors-solarized'

colorscheme solarized

Save, reopen your vim, and run :BundleInstall. Do reopen your vim again, then Voilà!

Powerline

Powerline is a plugin designed to power your Vim’s laststatus. It gives you a super pretty and useful statusbar right after installation. If you want to install this plugin, add those to your .vimrc.

1
2
3

Bundle 'Lokaltog/vim-powerline'

let g:Powerline_symbols = 'fancy'

Set g:Powerline_symbols to fancy gives you best look, but it requires you to use a patched font. You can find those fonts here. To use those fonts, simple download it and change your favorite terminal app’s fonts to “[Your favorite font name here] for Powerline”.

Conclusions

Your Vim should now be look liked mine in the screenshot. However, this is just a start. The real power of vim lies in the plugins. Maybe I’ll write another post to talk about my favorite vim plugins sometimes later. Bon voyage, on the journey of becoming a power Vim user. :-)

It is very convenient to build a static website using middleman along with some tools like compass, twitter’s bootstrap framework. You can easily build a professional looking website while maintaining high code readability and maintainability.

When you’re designing a website for a conference or event, one thing that you might want to put in the footer is the "last modified date". The first way come in to my mind to do this is very simple. Just put a line to output current date in ruby code.

1
2

  Some website™
  #{"Last Modified: %s  " % DateTime.now.strftime("%Y/%m/%d")}

I was thinking that the middleman will only build changed file. Though this code will show the last `build time’, but it’ll act effectively as last modified time for file. I was wrong. :( If you build the website in different date, you’ll find out hat middleman is smart enough to know that the evaluated result of ruby code in the layout has changed. It will then rebuild every file that includes this layout. However, it is very hard to know which file is being generated in middleman. I tried lots of way and finally find this. When middleman building a website, it simulates a Sinatra request in the following format:

1

http://example.org/your_page.html

In sinatra, you can get the request via `request’ object in page. This works in middleman too. However, it gives you no clue about the real filename since the engine extension has been stripped in output. Fortunatly, in most condition, one file is going to use only one engine to build, so just append a * operator after the path should be just fine. The result code would look like this:

1
2

  Some website™
  #{"Last Modified: %s  " % File.mtime(Dir.glob("source/#{request.path}*")[0]).strftime("%m/%d/%Y")}

Voila, now you have it. :) If you have a better way to do this, please share with me!

There is a interesting javacsript library being released on the github these days, the impress.js. Impress.js is a framework for making presentations on a open canvas, or so called the Prezi-style. I tried out the Prezi few years ago. It’s cool, but as the README from the impress.js said: “impress.js may not help you if you have nothing interesting to say ;)”. I don’t really have a chance to make a will-use-on-the-stage presentation on a Prezi.

Fortunately, there is a regular meeting of my lab, and it’s just my turn to present a read paper this week. I spent a whole night and messed around with the impress.js. You can find my result here: A dynamic user authentication scheme for wireless sensor network. I’m not really get used to arrange contents flat, so the result is not perfect yet.

It’s really fun to make slides using HTML5/CSS3, and make them alive through impress.js. For example, I made that Smartcard entirely in the CSS3, which used border-radius and linear-gradient properties. I also used some CSS3 animation property in the Security Analysis section. Once you enter the slide, Login Replay becomes larger and the other two fade out. Next slide zooms in on the detail of login replay, the text will rotate for a little bit to give you a visual clue. You can use whatever CSS3 trick you know to make a presentation. Best of it? You can host it on whatever provider you want since it’s just some plain HTML/CSS/JS files. Dropbox? Sure. Github? Done.

However, it does have some strange quirk. First, the relative location and zoom-on-active of slides seems not necessarily remain constant across different computer / resolution / browser configuration set. My slides did need some tweak to make sure no text being blocked out on both my iMac 27" and MacBook Air 13". You’ll need to manually align your slides to the center, so you can expect some negative values on X, Y values. It would be awesome if the library can take care of this of me. :P

In any case, this is still a fascinating library worth you to play with. Get it now on the github and perhaps you can make your own slides, or better, contribute some patches back to the project.

I actually made this dashboard few weeks ago, I’m just too lazy to write this down. /me flee

This dashboard is made for collaboration with teams. I was a hackthon-ing with bizkit and ftt. We set up the dashboard to pulls new data from the repository automatically and display in this pretty format. It was only intended for fun but it turns out very useful when merging works from everyone. The tool we used to make it display on the desktop is called NerdTool, and it was very easy to setup. You just need to add a new entry with the following command. We have another repository put under ~/.gitwatch to prevent the work being interfered when pulling new changes and to eliminate all local branches.

1

date; cd /Users/Zero/.gitwatch/fun-taipei-fork-of-csim-saycheese; git pull >/dev/null 2>&1; git lp2 --all | head -n 34

Oh, and for the lp2, it’s actually abbrev. of log command with customized format string. You could add the following entries to your ~/.gitconfig file.

1
2

[alias]
  lp2 = log --abbrev-commit --decorate --graph --color --pretty="format:%C(yellow)%h%Cred%d\\ %C(cyan)%an%Creset:\\ %Cgreen%s%Creset\\ %ar" --all

Now, have fun! :)

MetaWatch just shipped out few days ago. Once I got the watch, I starts to play with it, and to see what it is capable to do. I tried to use the intent-based API and put together this little experiment. I use the phone to acquire current location then retrieve Google Maps image for 96x96 display. Before you could deliver images to the watch, you’ll need to convert it to Black & White image. I used a threshold filter on the luminance channel for this, and the photo above is the result. Kinda fun, but not really useful. Let’s see what can be done next..

Update: Source code are now available here!

Just saw this new blogging system and I think I like the idea. :) I think I’ll move to this blog and try to write posts in English here.