Read my book

I wrote books about Webpack and React. Check them out!

Wednesday, July 25, 2012

Colorjoe - a Scaleable Color Picker

Colorjoe is a color picker I developed particularly scaleability in mind. This shows in two ways. It doesn't depend on any external images by default (uses CSS gradients). It is also fairly simple to extend thanks to its plugin API. Best of all the widget doesn't depend on any external framework. Just drop it to your project and off you go.

Colorjoe supports two basic types for picking colors (RGB, HSL). You can also make various fields (RGB, HSL, HSV, CMYK + A) visible if you want. Hex and selected color are supported naturally.

If this sounds interesting to you, check out the project page. You'll find a couple of demos there. The README contains more technical documentation.

Brief History

XKCD 927: Standards by Randall Munroe (CC BY-NC 2.5)
I developed the original version a year ago as I was really unhappy about the situation back then. There were a lot of color pickers around but not any of them did quite what I wanted. As a result I ended up writing my own. I guess this what the previous guys thought when they developed theirs.

As I had some time around April and May I decided to revive the project. The original hack depended on a framework so I got rid of that dependency. I did the initial port at jsbin just for the kicks (not working due to changes made to color.js). After that I moved the development to GitHub. That's where the project resides now.

Around two weeks ago the project was revived yet again as a friend of mine, Esa-Matti Suuronen, decided to integrate the picker into a project of his. During the process we came upon a few bugs which were promptly squished. Also some new functionality was added.

One of the interesting bits provided by Esa-Matti was Grunt based build file. Essentially that makes it easy to create both debug and production (minified) builds with minimal effort. You can also provide some metadata about your project in a Grunt file and then have it append that to your build files. Nice little project!

I also made the project demo page somewhat nicer at the time and for some random reason decided to share it at Reddit. Usually when I post something there it either doesn't show up or gets ignored. Surprisingly it didn't go that way this time. Instead I got some positive feedback. Someone even posted it at Hacker News where it got some additional visibility.

At one point a guy known as Munter contacted me. He provided a nice color library for me to use. This allowed me to add CMYK field support to the project. I believe this was a good way to go. I can focus on maintaining the widget without having to deal with possible issues in my color library too. If anyone is interested in some more exotic colorspaces (LAB, XYZ), the library definitely would allow to add support for those in the widget.

One interesting offshoot of the project was drag.js (demo page). It provides a way to make elements draggable. There is also functionality that makes it possible to write sliders (1d, 2d). Perhaps I'll make it possible to catch "drops" someday making it a proper drag and drop library. The library encapsulates all sorts of nasty details I really don't want to even think about. It gets that ugly due to browser differences sometimes.

Media Visibility

Reddit and Hacker News were just a tip of an iceberg. Several mediums took a note of the widget. It even showed up on the popular JavaScript Weekly newsletter. Just to tip off my hat these guys I'll mention a few. You can find the rest at Topsy.

  • MakeUseOf added the widget to their directory. I had never heard of the site before they let me know they added it there. Looks quite a big portal to me.
  • WebResources Depot covered the widget as well.
  • Softpedia added an entry for it.
  • Estudiosinnova covered it on their blog.

I'm sure I forgot someone. Anyway, thanks for the coverage. :)

Conclusion

It's really interesting to see how things can go sometimes. You write something you think is entirely trivial and then it gets kind of popular. In this case the cycle fed on itself. I got more motivated to write and revamp the widget as it got some attention. As a result we all have a nicer widget to use. It also resulted in a little project (drag.js) that might grow into something interesting later on.

Let me know if you think there are ways I can improve the widget. I'll definitely look into it. It should contain plenty of functionality already but it's entirely possible it's still missing something obvious.

Monday, July 23, 2012

DNS Woes and How to Deal With Those

I just had a most curious morning. The server hosting my IRC shell (irssi on screen session) didn't respond as usual. I poked the guys at IRC using a web client and found out that it works for them. After a while I came to a conclusion that my DNS must be broken somehow. As a result I decided to try alternative DNS. Now I'm using OpenDNS and things seem to work just fine.

As my router won't allow me to modify its DNS settings I ended up changing the configuration locally. The following set of instructions should work on OS X Lion. You might need to adapt the recipe for your purposes:
  1. Add your new DNS addresses to network settings. In short System Preferences → Network → DNS → DNS Servers (add 208.67.222.222 and 208.67.220.220 here for OpenDNS or 8.8.8.8 and 8.8.4.4 for Google DNS). Same thing graphically.
  2. Flush your DNS cache using sudo killall -HUP mDNSResponder at terminal. Other versions of OS X use a different set of commands.
  3. Flush your browser DNS cache. As I use Chrome I had to navigate to chrome://net-internals/#dns and hit "Clear host cache".
That did it for me. If you ever run into weird behavior with your networking, DNS might be a part of the reason. Apparently DNS provides some additional services so if you need something like parental controls, that might be the way to go.

Tuesday, July 10, 2012

Vim - A Programmer's Best Friend

What is the easiest way to generate a random string? Tell a freshman to quit vim. That's the joke anyhow. There's some truth to it. Vim can seem somewhat alien at first.

I have used Vim as my main editor for around a year now. I still have plenty to learn about it. I believe it takes a lifetime to master it and to make it truly your tool. Vim is one of those tools you really have to retrofit to suit your purposes.

I used to swear by real IDEs before. These days I pretty much use Vim solely. I have a couple of terminals on my screen estate in which I perform various tasks (revision control etc.) and have editors open on demand. Usually I have a web browser right next to these terminals.

Some people use just a single terminal and navigate within Vim. I guess that can work too. It's really depends on what kind of workflow you prefer. There are guys that like to use some more graphical version (gVim, macvim, recently open sourced Vico come to mind). You can even get Vim bindings for the most popular IDEs so there is really no excuse to at least learn a little bit about it. Be careful, though. You just might get vimfected. :)

In this post I aim to provide you some basic knowledge on Vim. I will go through the basic philosophy and show you how to untap some of its power using various options and a couple of plugins.

What Makes Vim So Great?

Switching from Vim to Emacs by Abstruse Goose
To be honest, the first time you start using Vim it's going to be somewhat underwhelming. Despite this there is an immense amount of power beyond that simple shell you see. If you can access even a small amount of functionality in Vim, you'll be way more productive than in your regular editor.

Say goodbye to your Notepad (most modern IDEs are just glorified Notepads) and enter the era of productivity! Even if Vim isn't your thing, perhaps Emacs is. You are in a winning team either way. You can even use Vim bindings in Emacs if you really want to or the other way around.

The greatness of Vim lies in its extensibility and configurability. Most of the magic happens in your .vimrc and .vim directory. Especially configuring your .vimrc file right is one of the keys in unlocking its power. .vim directory is used for storing your plugins. I have set up Pathogen, a package manager as instructed by Mir Nazim to make it easier for me to deal with that.


Lord of the Modes


Keyboard from ADM-3A computer terminal. Source.
When you start Vim, you'll find yourself in normal mode. It is effective to traverse in this mode. You can jump around quite effectively and search (/) fast using regular expressions. In addition to search, I use :, gg (jump to start) and G (jump to end) a lot.

If you haven't used Vim before, you probably should go through vimtutor to get some idea of the basic navigation. You might also find Vim Adventures and Openvim tutorial interesting.

The image above contains the reason why hjkl are bound as arrows. The idea is that it's more effective to use the home row as your fingers don't have to travel a lot that way. That's why hjkl are so popular amongst vimists.

I think hjkl is not ideal. You still have to move your fingers around a little bit. That is why I have remapped the keys to jklö on my Finnish layout. You might want to do something similar if you feel uncomfortable with the default hjkl.

Insert and Visual Modes

As just hopping around is kind of boring, there is also a insert mode (enter using i) and a visual mode (enter using v). The latter is used for selections and moving fragments around. Insert mode is where you produce your magnificent code, text or whatever it is you do.

Commonly your workflow might look like this while performing some Copy-Paste Coding™:
  1. Navigate to selection start in normal mode
  2. Enter visual mode (hit v)
  3. Select some fragment using your navigation skills
  4. (y)ank or e(x)tract it. After doing this you should find yourself at the normal mode again.
  5. Navigate to where you want to add the fragment
  6. (p)aste
Exiting from the insert mode can be troublesome due to the difficult default binding (it's esc). You can also use ctrl-c if you want to. I have bound tab to do the thing for me as it is somewhat conveniently located for my long fingers. Some prefer Caps Lock instead. There are various ways to avoid the dreaded esc key. If you like hardhacks, you could build a clutch to do this.

Basic .vim Settings

By default vim looks and feels somewhat like the good old vi. You will need to manipulate .vim a little bit in order to turn it into something beautiful. I have tried to list some common options next. The listing is likely missing some good ones but at least should give you some starting point or perhaps ideas on how to improve your existing configuration.

Color Scheme

By default Vim looks somewhat bland. It comes with a set of default schemes. You can even create these on your own. I've set the scheme to koehler myself (colorscheme koehler). Some like solarized. If you want to play around with these while in Vim, use :colorscheme . You can try this trick for other options too if you want to.

Syntax Highlighting

As far as I know you will have to use a combination of options to get the best advantage out of Vim's integrated syntax highlighting. The following options should do the trick:
  • filetype on
  • filetype plugin on
  • syntax on

Automatic Indentation

Vim comes with C style automatic indentation. Simply enable it using set cindent. You can also use << to dedent and >> to indent in normal mode. These two, like many commands in Vim, may be combined with a modifier. >5> or 5>> would indent five lines at once. Use % modifier (ie. >%) to modify a whole block at once. Note that you may use sw= option (ie. sw=4) to define how much << and >> shift.

set autoindent is another handy option to be aware of. It simply copies the indentation from the previous line.

The default C style indenter isn't ideal for JavaScript and such. Fortunately there are many other alternatives, such as JavaScript Indent, that should work better. Look around. You might find something fitting for your purposes.

Dealing with Tabs

Vim provides a variety of ways to deal with tabs. I personally have set it up so that tab produces a certain amount of spaces (set tabstop 4 and set expandtab). In case a file happens to contain tabs (argh!), I've set it up so that they are set to a certain width (set tabstop 4). Given I've rebound tab to esc, I don't use "soft tabs". Soft tabs would allow to to indent while still in the insert mode.

Rebinding Keys

There are multiple ways to bind keys in Vim. The complexity has to do with the fact that Vim is a modal editor as mentioned above. You can bind keys to work based on mode. It is also possible that a binding is either a recursive or a non-recursive one. I currently use following bindings:
  • nnoremap <F2> :set nonumber!<CR> - Toggles line numbers. It is handy to have this set so you can copy material outside in a proper format.
  • set pastetoggle=<F3> - This toggle makes it a lot easier to paste material from the system paste buffer to Vim. Note the special syntax!
  • command W w - This allows you to define custom commands. In this case I made W invoke (w)rite. I have this kind of aliases set for (q)uit, wq (write and quit) and wa (write all, handy if you have multiple files open).
  • noremap j h - This remaps j to h non-recursively. As mentioned earlier, I use this kind of mapping to remap hjkl to something more comfortable for me.

Automatic Word Wrapping

It is possible to make it Vim to wrap your text automatically to the next line using set textwidth. I've set it to 79 (ie. set textwidth=79) given I don't like long lines. Edward Yang has covered some of the more advanced options in more detail.

Line Numbers

This is an easy one. All you need to do is to set number. As I mentioned above it can be handy to have a toggle set up for this.

Show Matching Braces

Here's another easy one. Just set showmatch. If you navigate on a begin brace, it will highlight the end one for you automatically.

Show Ruler

set ruler makes some extra user interface available. The ruler visible at the bottom shows some metadata, such as line number, column number, virtual column number and relative position. You can customize the ruler further if you want to.

Better Search

Vim provides two handy options that can make search (/) more powerful. These are set hlsearch and set incsearch. The former enables highlighting while the latter performs a search incrementally while you are typing it.

Abbreviations

If you notice you are typing some specific word a lot, you might want to take advantage of abbreviations. I have set up one for my Javascript coding. abbr fn function makes it possible for me to just enter fn and then expand it to function by pressing space. Super handy!

File Name Completion

This is another one of those tiny yet powerful tricks. Suppose you are opening a file using :e. It would be handy if you could tab complete the file names as in Bash. You can achieve this if you set wildmode=longest,list.

Spell Checking

If you typo a lot, you might want to enable spell-checking. Simply do this with set spelllang=en_us (that's three l's).

Showing Trailing Whitespace

As a programmer it is really handy for me to see any trailing whitespace. This can be done by set list and set listchars=tab:>.,trail:.,extends:#,nbsp:.

My Configuration

I have made my configuration available. It contains the set up above and a couple of extras I didn't cover here. I know many people have way more elaborate .vimrc. I'm pretty happy with my current simple one. Hopefully the above options give you some idea how to improve yours.

In addition I use a couple of plugins particularly suited for web and JavaScript development. As mentioned earlier I prefer to use Pathogen for managing these. Just to give you some idea of plugins I'm currently using, check out closetag, delimitMate and syntastic. syntastic in particular is awesome. I use it with JSHint. It has saved a lot of my time as it allows me to spot certain errors before getting I get myself in a too big a mess.

Conclusion

Lada - From Russia with Love (CC-BY Ellesmere FNC)
Vim definitely has some history behind it. It might look a bit ugly and feel quirky at times. You will get used to its quirks, though, and learn to love it given some time. It's like Lada pictured above. It might not be the prettiest editor around. But you sure can pimp the crud out of it if you want to. Vim is what you make it.

If you still feel like learning Vim or improving your existing skills, be sure to check out this awesome cheat sheet and tutorial, Derek Wyatt's videos and Bram Moolenaar's thoughts on effective text editing. Especially the last article by the creator of Vim should put you in the right set of mind for improving your Vim skills.

Monday, July 2, 2012

Casual Reading - Dune, Wool Omnibus, Starship Troopers

I have seen my share of sci-fi series on TV. I've never really delved into the literature, though. As I had some time on my brief vacation, I decided to tackle a couple of classics and perhaps an upcoming one. I started out my reading Hugh Howey's Wool Omnibus (Wool 1-5) then moved onto Heinlein's famous Starship Troopers and finally read Dune by Frank Herbert.

Stylistically the books were somewhat different. Wool describes a dystopia of sort. I guess the situation Starship Troopers describes could be considered dystopic by some. Dune is something different altogether. It's more of an amalgam of fantasy and sci-fi. This makes it a really interesting read!

Dune and Starship Troopers operarte on a more philosophical level than Wool. Particularly Dune is a really layered and somewhat complicated book. There are many underlying themes of which I managed to understand a few properly. It probably would benefit a lot from another read.

Wool is more straight-forward than these two. It is the most story-driven of the three. It seems to me that Heinlein wrote the story of Starship Troopers just to make it possible for him to examine various themes, morality, society and citizenship included.

Movie Versions

It has been a long time since I saw the movie version by Verhoeven. It would be interesting to see the movie again with the book fresh in mind. The first time I saw that I thought it was incredibly campy. Perhaps there is some proper message beyond the camp.

Apparently Lynch's made a version of Dune. There seem to be several mini-series available as well. There is definitely a lot of material to tap into. The book I read is just a starting point. I'm not sure if I want to tackle the whole series anytime soon, though.

It would not surprise me if someone made a really awesome movie or a mini-series out of Wool. I believe it would translate somewhat well to the screen. It's more straightforward than both Dune and Starship Troopers.

Conclusion

I enjoyed particularly Dune. It felt like character development could have been stronger in certain points. Certain events just didn't have the impact they could have. This is not a big flaw, though. The story more than makes up for this. Some claim Dune is the LoTR of sci-fi. I wouldn't object to that. It's a great book.

Wool describes a possible dystopia. Perhaps that's what makes it a bit scary. Howey is an excellent storyteller. I will definitely keep an eye on this series and keep on reading the parts as they are released. If you decide to read this, get the omnibus edition.

Starship Troopers was definitely an interesting read. Even though the action sequences were well written, I felt the story and characters were somewhat hollow (particularly the protagonist). Fortunately it's not a thick book. What makes it interesting is the philosophical content. It definitely makes you think.