Git submodules

Let’s start with an idea – consider your vim configuration as project, with plug-ins as dependencies. Since you want to have the latest and greatest, you may want to directly link to their sources on github. But how? This is where git submodules come in:

git submodule add <repository> [<path>] 

In the case of your vim configuration, the above command will take the following form:

git submodule add https://github.com/scrooloose/nerdtree.git .vim/bundle/nerdtree

The above command will add a reference to the project located at <repository> to your vim configuration (that is itself in git). However, there is a problem: due to the fact that many projects have their own directory structure, you cannot just add them easily to the specific directories that vim expects. Luckily, vim superstar Tim Pope has developed a remedy called “pathogen”.

Pathogen

This great plug-in will load other plug-ins from the ~/.vim/bundle directory. Since pathogen is yet another dependency of the project, it should be placed in the .vim/bundle folder:

git submodule add https://github.com/tpope/vim-pathogen.git .vim/bundle/pathogen

source ~/.vim/bundle/pathogen/autoload/pathogen.vim
call pathogen#infect()

Now that vim is infected with the pathogen, your modules are fully loaded. Hack away!

Updating plug-ins

Here comes the really sweet part: if you want to update all your plug-ins (bound by submodules), it is as sexy as running one line in bash:

git submodule foreach git pull origin master 

Updating a single module is done by a git pull origin master, if you ever need to.

In conclusion

I hope that this will let you manage your vim configuration with ease – it works great for me! We are one step closer to our personal configuration heaven. If you found this article to be useful, leave a comment or hit me up on twitter!

Open-source and coding conventions

Adhering to coding conventions (other than your own) is hard. This is particularly true in the open-source world, where every project may have different style requirements. This makes code contributions harder, since you either:

• have to remember the coding style for each project that you contribute to, or
• submit patches that do not follow the style guide of the project (thus either scrambling the code or making the reviewers’ job harder)

Tools like jsLint solve these problems by enforcing strict rules about the coding style. However, requiring all developers to run jsLint is prone to errors, as it is yet another step in the process of contribution. This post provides a solution to this problem, for projects that have unit tests written in qUnit — but the same process can be applied for any other unit test framework.

JsHint

jsHint is a code quality tool forked from jsLint. While the latter had strict rules and pretty much tried to enforce a general coding convention, the former allows flexible customization of the rule set, so that it matches your coding standards. Its configuration is dead simple, and you get a nice array of all style violations when you call the JSHINT function.

Integrating jsHint into qUnit

Imagine that you could validate a JavaScript file against jsHint with the following line:

jsHintTest('Core', '../src/core.js');

It would be neat, right? Well, the following code introduces this new type of qUnit test. It fetches the specified JavaScript file and outputs any validation errors like qUnit test errors.

function jsHintTest(name, sourceFile, options) {
    function validateFile(source) {
        var i, len, err,
            result = JSHINT(source, options),
            errors = JSHINT.errors;

        ok(result);

        if (result) {
            return;
        }

        for (i = 0, len = errors.length; i < len; i++) {
            err = errors[i];

            if (!err) {
                continue;
            }

            ok(false, err.reason + " on line " + err.line +
                                   ", character " + err.character);
        }
    }

    return asyncTest(name, function() {
        $.ajax({
            url: sourceFile,
            success: function(source) {
                start();
                validateFile(source);
            }
        });
    });
}

And the result is...

The latest qHint code is on github. ]]> http://blog.gyoshev.net/2011/04/enforcing-coding-conventions-with-jshint-and-qunit/feed/ 1 http://blog.gyoshev.net/2011/04/enforcing-coding-conventions-with-jshint-and-qunit/ http://feedproxy.google.com/~r/OfCodeAndColor/~3/BqGfBlIwv-c/ http://blog.gyoshev.net/2011/03/beginning-vim/#comments Fri, 25 Mar 2011 17:37:54 +0000 gyoshev http://blog.gyoshev.net/?p=279 Vim? What? Why?

Let me say that: there is a raging war out there, driven by the eternal question “What text editor do you use?”. Personally, I was ignorant of the two camps (namely, the vi-like editors and Emacs). However, I got curious when I found out that Notepad-like programs are not even considered as text editors. When people have such strong feelings about a program, it definitely deserves a few hours to play with.

So what is Vim? Simply put: an extensible text editor, focused on manipulation of text, rather than pure editing. There are currently about 3500 extensions for it, ranging from source control integration to a personal wiki.It is said that mastering Vim will yield great productivity gains in term of coding. Well, that’s pretty convincing!

Learning Vim

If you feel hooked, you should download and install it. There is only one practical way of learning Vim, and it’s to use it. The first advice I got was to do all my text editing in it for a week before judging it. But let me give you a word of warning — the learning curve is steep, to say the least.

Personally, I started off with the integrated interactive tutorial in Vim, called vimtutor. It’s a shell script that can be found in the installation directory. Under 64bit Windows, that’s C:\Program Files (x86)\Vim\vim73\vimtutor.bat. You’ll need to run it several times (when practicing “how to close vim”), so keeping a command prompt or explorer window in the directory is quite handy.

If you prefer video, and want to spare a few bucks to treat yourself, PeepCode has the Smash Into Vim series (2 x $12). The alternative are Derek Wyatt’s craaaazy vim novice screencasts* – these are funny, too! Vimcasts have videos that cover interesting information to supplement the other tutorials, but aren’t targeted at complete novices.

If you are an active Twitter user, you may like to follow @vimtips for daily vim tips. Past tips are archived on vimtweets.com, and there are real gems among them.

And if you want to setup your workspace for learning, you can use the Vim movement shortcuts wallpaper.

Making it beautiful

This is absolutely necessary, since the default color scheme / font combination is really ugly. I think that this repels many people and could be fixed for the sake of better first-time user experience. Of course, this may be an intentional design decision, made either to please the die-hard fans or to create a tribal vim community. Or a bit of both.

My personal preference is the railscasts color scheme, with the Consolas font. In order to apply these, you need to create a _vimrc file (that stores the Vim configuration) in your user directory (for windows 7, that’s C:\users\yourusername) and place the following two lines in it:

colorscheme railscasts
set guifont=Consolas:h12

In order to use the railscasts theme, you have to download it from the link above and place it in the vimfiles/colors/ subdirectory of your user directory.

Sharing your Vim configuration across multiple computers

If you want to learn Vim both at work and at home (like me!), it is convenient to share your configuration between computers, so that you get the same environment without much effort. What better way to share it than to put it on GitHub! However, there happened to be two problems with this:

1. I turned out to be too lazy to pull my configuration every time I make a change. Dropbox to the rescue! I simply cloned the configuration repository to my Dropbox folder and it got synced across my work and home PC.
2. I didn’t want the local repository to be the same as my Windows 7 user folder. This can be easily fixed by creating a symbolic link for the _vimrc and vimfiles, like this:

   cd c:\users\gyoshev
   mklink _vimrc "F:\github\config\_vimrc"
   mklink /D vimfiles "F:\github\config\vimfiles"

   In Windows Explorer, the newly created links should look like this:

   

Voila! Everything gets synced everywhere.

Conclusion

Well, I hope that these resources will prove useful to you! I certainly feel more confident after having read and watched most of them. And if you need help, don’t forget to :h command it ;-)

P.S.: Many thanks to @korchev, for the initial help and the aggressive Vim marketing at work :)

* Don’t worry, after the first 2-3 of them, he calms down. At first, I expected that he’ll ritually consume his mouse, with candles and everything. You’ll see what I mean.

I am a bit extreme when it comes to optimization (as I will prove in a bit). Both YSlow and Google PageSpeed are great pals in this, and I get concerned when they report inefficiencies. You see, I use Google Analytics in order to track the page views of this site. If you ever used it, you have certainly copied the tracking script from the GA site — the script that is generated for you automatically and you just need to paste in the pages that you want to track. I like this feature pretty much, as it saves time; it also saves Google the need to explain what code you need to write to get it done. However, the code that gets generated isn’t optimized, nor minified, so the above tools find it offensive. So I took the effort of optimizing it, and here is how.

Starting script

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXXX']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script');
    ga.type = 'text/javascript';
    ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www')
                 + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(ga, s);
  })();

</script>

This is the default snippet that gets generated from the GA site, without additional options.

Optimization process

1. Array.push can accept multiple arguments. This is even mentioned in the online help, but the generated code does not contain it.

   _gaq.push(['_setAccount', 'UA-20578581-1'],['_trackPageview']);

2. Both the HTTP and HTTPS GA scripts are identical. Furthermore, both URLs work fine without specifying a subdomain. Thus, using protocol-less URLs (part of the URI RFC) in order to link the JavaScript shaves off a few more bytes.

   ga.src = '//google-analytics.com/ga.js';

3. (Theoretically optional) The script persists its location in the document, which is nice for more advanced scenarios that require more tracking. However, placing the script anywhere else than before the closing body tag might degrade performance. If performance is more important than tracking,

   document.body.appendChild(ga);

And after a few manual minification tricks, here comes the…

Optimized script

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXXX'],['_trackPageview']);

  (function(d) {
    var s = d.createElement('script');
    s.type = 'text/javascript';
    s.async = true;
    s.src = '//google-analytics.com/ga.js';
    d.body.appendChild(s);
  })(document);

Optimization statistics

After minification, the reduction is by 45% (187 bytes), since the current GA code generator does not minify its output. Voila!

The optimized script is active on this site, and was tested in IE6 (’nuff said).

I hope that you will find this useful.

Employers!

If you want to hire mediocre people, that do not care about what you work on, then great for you! But if you actually care, you want to hire somebody who does, too. Filtering the candidates is something you should do, instead of trusting foreigners blindly. In order to do remarkable work, it is not required to be famous, or have a great deal of experience. And if a person values her work, she will want to get in touch with other people that will honor this – like you.

Candidates!

Really? Would you let someone else determine where you spend the better part of your day? Your work should be more important for you than that. Instead, you could go for something you value and believe in. In fact, it does not speak really well of an employer if a staffing agency is involved (as noted above). Going to an interview without knowing what the company stands for, and without looking at what it does, undermines your image. A honest cover letter can outline your appreciation for the work being done, and your research will certainly pay off once you meet the future employers. As the saying goes, failing to prepare is preparing to fail.

And…

Introducing more people to your hiring process just increases its complexity (and it is already complex enough). The moment both sides start to care, the middle man perishes. So… start caring.

var dates = { "2009": { "4": [20, 21] } };

It can be accessed like an array, say dates[2009][4], yet it doesn’t contain some 2000 elements. Neat, huh?

This is especially useful when you have to describe a few specific values (say, the date of Easter) from a big collection (say, all dates in the 1970 – 2030 range).

Indeed, using a bot may seem really unfair to the passionate gamers that try to spend their time at becoming self-proclaimed gods in the given reality. But this is exactly my point. Most of these games are based completely on collecting numbers – either gold, points, stats or whatever. And you can’t beat an intelligent toaster at this one. And I just want to understand the toasters. I’d love to take on a challenge of creating better ones, actually. And this is partially related to game developers, too – if your game is stupid enough to be robotized, it should be.

<asp:TextBox runat="server" ID="TextBox1" Text="Sample text" TextMode="Password" />

How to hack work-around it? Use the HTML value property.

<asp:TextBox runat="server" ID="TextBox1" value="Sample text" TextMode="Password" />

It’s lovely how ASP.NET looks after you.