weekend readings

• Vim plugins you should know about series by Peteris Krumin (actually I recommend reading all of his blog)
• Vim plugins used at Joyent for Node.js
• One man's HTML5 developer workflow
• Master list of HTML5, JS, CSS Resources (great list!)
• Using Sublime Text 2 for develoment (I will write my experience trying out ST2 soon)
• Sublime Text official help document

Janus with jslint Vim plugin

Nowadays, I write quite a bit of JavaScript and uses JSLint command line tool quite a lot. A co-worker recommends a nice Vim plugin that validates your JavaScript code when you are editing and when you save it.

While I was trying to install it for Janus (a Macvim clone that I uses), I ran into two issues:

1. By default, when you run rake inside the git cloned directory, the plugin gets installed into ~/.vim. For Janus, user customized plugins should go to ~/.janus, and Janus will load them automatically. For details, please check out the Customization section of the Janus documents.

So, to get around:

- create a jslint directory in ~/.janus
- edit vim plugin's Rake file, replace line 38 File.expand_path("~/.vim") with File.expand_path("~/.janus/jslint"), you get the idea.
- run rake from inside vim plugin directory and it should install into the correct Janus directory

2. The second issue is that I keep getting warning when I start trying out the plugin, something like "s:cmd" not defined. Did some poking around and it seems like ftplugin/javascript/jslint.vim is trying to find a JavaScript interpreter (line 62 to 75 for *UNIX systems) and somehow failed.

I am on Snow Leopard, which comes with an acceptable interpreter "jsc" at /System/Library/Frameworks/JavaScriptCore.framework/Resources/jsc, so not really sure why it did not work. I ended up just install Node.JS (for Mac users, highly recommend using Homebrew, just follow instructions here) and added node to my PATH. And it takes care of these errors.

Now, enjoy the jslint plugin and be a good JS developer ;-)

P.S. For people not happy with Crockford's personal styles (some styles don't make sense to me either), you can update options in ~/.jslintrc (see examples on jslint.vim site). Or simply use jshint vim plugin instead. JSHint is a more relaxed and reasonable fork of JSLint.

Sorry for going off the topic, but it is quite funny to read about why the original developer forked JSLint, especially entertaining are the comments. For example, Crockford's response to JSHint:

When asked for his "feelings on JSHint" Crockford replied "There are many stupid people in this world, and now there is a tool for them."

Lua Development Tools Koneki, IDE based on Eclipse

Just got a comment from developers of Lua IDE Koneki on my previous post about setting up Eclipse-based Lua IDE. So, I gave it a try and it is quite neat, I really hope the developers can keep it moving and make it a great default IDE for Lua developers ;-) As of now, I feel it is not yet conveniently as useful as LuaEclipse I posted about a while back. But the project is under active development and it will become better every day, I am sure.

Here is a quick rundown what I have tried so far:

1. Installation: they offer both standalone and update site, I just installed through update site following their instructions. I am on Eclipse 3.7.1, btw. I also got lua and luarocks installed through Homebrew (by default they are installed in /usr/local/bin).

2. Create a new Lua project: create a new Lua project, add source files under src, similar to the typical Java projects.

3. Ready to run? I feel stuck at this step at first since there is no launch configuration that allows me to configure the local Lua environment. After running through several threads, it seems Koneki does not support launch configuration yet. It only supports "remote debug launch configuration".

But the developer also provides this workaround using "External Tools" and I got it to run and show the results in Console View. This is the sample configuration (you need to select the main.lua before run this external tool configuration). For the meaning of Eclipse variables like ${workspace_loc}, ${resource_loc}, see Eclipse external tools documentation.

4. Debugging. LDT supports remote debugging via DBGP, you can follow the LDT user guide to set it up.

Many thanks to the LDT developers for this nice IDE. I wish the launch configuration can be added so beginners like me can get started with Lua and LDT quickly. Also, I wish the configuration of debugging and remote debugging can be integrated into LDT.

Unbounded function wrappers

I was reading "JavaScript Garden" (highly recommend for JS beginner/intermediate) and could not understand the concept of the "fast, unbound wrappers" for functions. See Function arguments for the example.

function Foo() {}

Foo.prototype.method = function(a, b, c) {
    console.log(this, a, b, c);
};

// Create an unbound version of "method" 
// It takes the parameters: this, arg1, arg2...argN
Foo.method = function() {

    // Result: Foo.prototype.method.call(this, arg1, arg2... argN)
    Function.call.apply(Foo.prototype.method, arguments);
};

Luckily I found this Stackoverflow post that explains the idea behind it. It took me a while to wrap my head around Function.call.apply ;-)

So, the basic idea is that we have a function defined in a class, but we want to use it without binding to specific object, maybe the concept of static method in Java? So, instead of creating an object and invoke the function on the object, we define the function as a property of the class, not on its prototype.

useful vim tips

Vim is definitely a text editor you need to learn progressively because it has an interesting learning curve. If you have not read "Seven Habits of Effective Text Editing" from Bram Moolenaar (main author of Vim), please do that first. There is also an updated version of this article that can be found here. Basically, there are three steps to improve your Vim skills through daily work:

1. find repeated actions that are not efficient or quick enough
2. find a quicker way (search online, ask around, read documentation and tutorials, etc.)
3. practice the new tricks and make it a habbit

So, basically I am trying to take notes about some new tricks I learned over the past week. Hopefully, I will do the iterations and find even more efficient ways to do these in the future.


Quickly move around on a line.

0 (zero) moves the cursor to the beginning of a line (white spaces are considered as characters)
$ moves the cursor to the end of a line (white space are considered)
^ moves the cursor to the beginning of a line (white space ignored)
g_ moves to cursor to the end of a line (white space ignored)

For example (using + to stand for space here for illustration purpose):

++a line++
- -    - - 
0 ^    $ g_

w, W move the cursor forward to the beginning of a word, the difference between the two is W uses white space as separator. So, for me w is quite useful in code, W is useful in the textual sentences.

e, E move the cursor forward to the end of a word, same difference as in w and W.

b, B move the cursor backward to the beginning of a word, difference is again the separator.

ge, gE move the cursor backward to the end of a word.

*, # to quickly move forward and backward to the same word under the cursor. This is faster than search using / and press N and n.

o adds a new line under current line and start insert.
O adds a new line above current line and start insert.
s deletes the character under cursor and start insert.
S deletes the current line and start insert.
D deletes from cursor to the end of line.
C deletes from the cursor to the end of line and start insert.


Quickly move around in code.

% matches the parenthesis, bracket and curly brace. For example, put the cursor on a closing curly brace  and % takes the cursor to the matching opening brace.

[{ and ]} to match the opening and closing curly braces. Place the cursor inside a code block, using these two to quickly move to the beginning and end of the closes curly braces pair.

gd jumps to the local variable definition when the cursor is on a variable name.
gD jumps to the global variable definition.


Use . (dot) command to repeat the last change in normal mode. See Vim Twiki "repeat last change".

You can also do N. to repeat the change N times. For example, dd command delete the current line, use . to delete another line, use 5. to delete additional 5 lines.

There is also a similar repeat trick @: for last command made on command line. For example, on the command line, we do :!ls to list files in the current directory. Then, we can do @: to repeat it again.


Copy/cut and paste text in visual mode. See Vim Twiki "copy and paste using visual selection".

• put cursor to the beginning of the desired text
• enter visual mode: use v to begin character-based selection, V to begin line based selection, ctrl-v to begin vertical block based selection (move the cursor will select the whole columns of text)
• put cursor to the end of the desired text
• use d to cut, y to copy
• put the cursor to the paste position
• use p to paste after the desired position, P to paste before the desired position

On the Vim twiki, there is also the tip to overwrite the same amount of text using the copied/cut text using Nvp, NVp, N^Vp depending on the selection mode (character, line or block).

Disable auto-indentation, manual indentation.

Sometimes, I had one annoying problem when I copy and paste formatted source code from another application - Vim will reformat the content and mess up with the indentations. To prevent Vim from retabbing, use :set paste. After you are done, use :set nopaste to diable paste. You can also add a key binding using set pastetoggle in your .vimrc file. See Vim Twiki "Toggle auto-indenting for code paste" for more details.

Instead, you want manual indentation. In normal mode, == indents the current line. In line-based visual mode (V or shift-v), select several lines and = indents them all.

Jump in the change list, moving back and forth in changed positions in the current file. One common task is to jump back and forth between edit positions. See Vim Twiki "list changes to the current file".

• `.  jumps to the last edit position
• g; jumps back in the change list
• g, jumps forward in the change list
• :changes to show the change list

Interestingly, there is another (probably less useful) jump list that records the default last 100 positions a user makes a jump. A jump is one of search, substitute and mark. See Vim Twiki "jumping to previously visited locations".

• ctrl-O to jump back in jump list
• ctrl-I to jump forward in jump list
• :jumps to show the jump list

Auto expansion, adding comments, etc.

One common case when coding is to add comments. So, how do you add something like these lines:

• ///////////////////////////
• /*------------------*/
• /*************** <multiple lines of text> *************/

Ni/<esc> inserts N / (slash), quite useful for N repeating characters.

Another way is to use auto expansion. For example, you can add these into your .vimrc:

:ab #b /************************************************
:ab #e ************************************************/
:ab #l /*----------------------------------------------*/

Then, in the edit mode, you can type #b<enter> to automatically insert /*******.

Text objects.

Last, I found out about Vim text objects, it is so powerful and convenient that saved me a lot of time. For details, please read this great post "Vim Text Objects: The Definitive Guide" and Vim documentation on text objects.

Note that text object is more convenient than motion when you want to delete a chunk of text, you don't need to move cursor to particular position. For example, the difference between dw and diw is that when you want to use dw to delete a word, you must move the cursor to the beginning of that word first. For diw, you can place the cursor anywhere inside that word.

For example, I want to refactor code that has a string value hard coded to use a variable:

public class Hello {

    public static void main(String[] args) {
        System.out.println("hello, world");
        showMe();
    }

    public static void showMe() {
        System.out.println("hello, world");
    }
}

// refectored
public class Hello {

    public final static String hi = "hello, world";
    public static void main(String[] args) {
        System.out.println(hi);
        showMe();
    }

    public static void showMe() {
        System.out.println(hi);
    }
}

So, I can add a variable hi="hello world", then replace the string value "hello, world" on line 4 and line 9 using text object:

1. move to line 4, a position before the string "hello, world", in normal mode, type ca", this will delete the string value including the quotes and change to insert mode.
2. type the new variable name hi
3. move to line 9, a position before the same string
4. type . to repeat the replacement
5. done!

One extra tip. Using text objects, you can delete/update the content inside the double quotes, but how do you delete the double quotes only? You can do this:

1. move cursor to one of the double quotes
2. use % to jump to the matching double quotes, delete it using x
3. use Ctrl-o or two back-ticks (``) to jump back to the first double quote, delete it using x
4. done!

Other related tips:

- Vim documentation: motions
- Vim paste in insert mode
- 10 kick-ass Vim tips
- Vim Text Objects: The Definitive Guide
- Remove a pair of parenthesis in Vim

Web application security readings

Articles:

• Mozilla Web Application Security (quick reading, 10 min)
• Browser Security Handbook (quick reading, 30 min)
• OWASP Cheat Sheets (quite comprehensive reading, several hours)
• How Browsers Work

Slides:

• Cross Site Scripting (XSS) Slides from Mozilla Security Learning Center (38 pages, 10 min)
• Web Application Security: Hands On Slides from Michael Coates 

Specifications:

• CSP (Content Security Policy): a W3C draft spec that defines fine grained security policies for resource loading to mitigate the risk of injection attacks such as XSS. The policy per resource representation is defined in new header is Content-Security-Policy. Firefox and Chrome is experimenting in headers X-Content-Security-Policy and X-WebKit-CSP respectively. The spec also defines a report-only mode without browser enforcing the policy but sending violation reports to the server, which is helpful for gradually enforcing the right policy.

Books:

• "The Web Application Hacker's Handbook (2nd)"
• "Web Security, Privacy and Commerce"
• "Hacking: the Next Generation"

so many cookies

I was reading upon HTTP cookies and it is actually quite confusing. Because there are many different cookie specs and browsers not necessarily support all of them.

Original Netscape Cookie Spec: http://curl.haxx.se/rfc/cookie_spec.html

Very simple and straightforward format:

Set-Cookie: NAME=VALUE; expires=DATE;
path=PATH; domain=DOMAIN_NAME; secure

RFC 2109 (based on Netscape spec with minor tweaks): http://tools.ietf.org/html/rfc2109

The syntax for the Set-Cookie response header is

   set-cookie      =       "Set-Cookie:" cookies
   cookies         =       1#cookie
   cookie          =       NAME "=" VALUE *(";" cookie-av)
   NAME            =       attr
   VALUE           =       value
   cookie-av       =       "Comment" "=" value
                   |       "Domain" "=" value
                   |       "Max-Age" "=" value
                   |       "Path" "=" value
                   |       "Secure"
                   |       "Version" "=" 1*DIGIT

RFC 2965, obsoletes RFC 2109: http://tools.ietf.org/html/rfc2965

It adds more syntax items. It is very interesting to read 9.1 section about the compatibility with existing cookie implementation. Basically, it should overwrite an existing cookie value set by Set-Cookie if domain and path both matches.

The syntax for the Set-Cookie2 response
   header is

   set-cookie      =       "Set-Cookie2:" cookies
   cookies         =       1#cookie
   cookie          =       NAME "=" VALUE *(";" set-cookie-av)
   NAME            =       attr
   VALUE           =       value
   set-cookie-av   =       "Comment" "=" value
                   |       "CommentURL" "=" <"> http_URL <">
                   |       "Discard"
                   |       "Domain" "=" value
                   |       "Max-Age" "=" value
                   |       "Path" "=" value
                   |       "Port" [ "=" <"> portlist <"> ]
                   |       "Secure"
                   |       "Version" "=" 1*DIGIT
   portlist        =       1#portnum
   portnum         =       1*DIGIT

RFC 6265, obsoletes RFC 2965: http://tools.ietf.org/html/rfc6265

It admits the same confusion that I had, and deprecates the Cookie2 and Set-Cookie2 headers introduced in RFC 2965!

"Prior to this document, there were at least three descriptions of

   cookies: the so-called "Netscape cookie specification" [Netscape],
   RFC 2109 [RFC2109], and RFC 2965 [RFC2965].  However, none of these
   documents describe how the Cookie and Set-Cookie headers are actually
   used on the Internet (see [Kri2001] for historical context).  In
   relation to previous IETF specifications of HTTP state management
   mechanisms, this document requests the following actions:

   1.  Change the status of [RFC2109] to Historic (it has already been
       obsoleted by [RFC2965]).

   2.  Change the status of [RFC2965] to Historic.

   3.  Indicate that [RFC2965] has been obsoleted by this document.

   In particular, in moving RFC 2965 to Historic and obsoleting it, this
   document deprecates the use of the Cookie2 and Set-Cookie2 header
   fields."

The actual format is getting updated as well. Notice that now both Expires and Max-Age are supported with Max-Age overriding Expires if both exist. If not, the cookie is kept by user agent till the current session ends.

 set-cookie-header = "Set-Cookie:" SP set-cookie-string
 set-cookie-string = cookie-pair *( ";" SP cookie-av )
 cookie-pair       = cookie-name "=" cookie-value
 cookie-name       = token
 cookie-value      = *cookie-octet / ( DQUOTE *cookie-octet DQUOTE )
 cookie-octet      = %x21 / %x23-2B / %x2D-3A / %x3C-5B / %x5D-7E
                       ; US-ASCII characters excluding CTLs,
                       ; whitespace DQUOTE, comma, semicolon,
                       ; and backslash
 token             = <token, defined in [RFC2616], Section 2.2>

 cookie-av         = expires-av / max-age-av / domain-av /
                     path-av / secure-av / httponly-av /
                     extension-av
 expires-av        = "Expires=" sane-cookie-date
 sane-cookie-date  = <rfc1123-date, defined in [RFC2616], Section 3.3.1>
 max-age-av        = "Max-Age=" non-zero-digit *DIGIT
                       ; In practice, both expires-av and max-age-av
                       ; are limited to dates representable by the
                       ; user agent.
 non-zero-digit    = %x31-39
                       ; digits 1 through 9
 domain-av         = "Domain=" domain-value
 domain-value      = <subdomain>
                       ; defined in [RFC1034], Section 3.5, as
                       ; enhanced by [RFC1123], Section 2.1
 path-av           = "Path=" path-value
 path-value        = <any CHAR except CTLs or ";">
 secure-av         = "Secure"
 httponly-av       = "HttpOnly"
 extension-av      = <any CHAR except CTLs or ";">

To conclude, here is a paper providing a good overview and discussion about the cookie: "HTTP Cookie: Standards, Privacy and Politics".