Overall I love vim: it has a steep learning curve, but it’s very powerful.If you are touch-typing and loath the mouse as much as I do, it’s fantastic. But I found myself missing out on some of TextMate’s great bundles, and JSLint integration is one of them. After some googling around and looking at different solutions, this is the one that was easiest to install and I like the functionality.

First download & install JavaScript Lint. On OSX & Linux, you can do so by copying the resulting folder into your PATH. I put it in /usr/local/bin/.

Then get the JavaScriptLint vim plugin by Joe Stelmach and restart vim.

Off you go. When you save a JavaScript file in vim, you will get a window with JSLint warnings. If you want to configure JSLint to show/hide certain errors, you can edit the config (jsl.default.conf) in the folder. You might want to backup the file before editing it.

Happy linting!

The path of the built in Subversion command line client is different to the one that the Collab.net Community binary is installed to. The following steps will fix this.

Disclaimer – Be careful: when you use the Terminal you are flying without a safety net! No undo & no restore from trash. Do this at your own risk and don’t forget to have an up-to-date backup!!!

1. install the binary downloaded to Collab.net
2. open your Terminal and check which version of SVN you are using by typing svn --version. This should say 1.4.x
3. check which installed instance of SVN the OS is using by typing which svn. This will return the path to the SVN version you are using, which probably is /usr/local/bin/svn
4. check whether the Collab.net version is installed by going to it: cd /opt/subversion/bin. Doing an ls should show you the subversion files
5. Backup the current svn location: by going to it (cd /usr/local/bin) and copying it to your desktop or wherever you fancy (mv svn* ~/Desktop/)
6. now you need to create symlinks to the Collab.net binaries:
   • ln -s /opt/subversion/bin/svn svn
   • ln -s /opt/subversion/bin/svnadmin svnadmin
   • ln -s /opt/subversion/bin/svndumpfilter svndumpfilter
   • ln -s /opt/subversion/bin/svnlook svnlook
   • ln -s /opt/subversion/bin/svnserve svnserve
   • ln -s /opt/subversion/bin/svnsync svnsync
   • ln -s /opt/subversion/bin/svnversion svnversion
7. That should be it

The beauty is that you only need to do this once. The next time you upgrade your Subversion client, the symlinks will just point to the updated files and everything should be fine. As I said earlier though: only do this if you feel comfortable on the command line.

UPDATE: I have been told that some people seem to have SVN installed in /usr/bin/. Just use the path that is returned by the which svn command. You might also need to use sudo to run some of the command (i.e. move).

Hopefully this makes up for it: as a treat for the new year, I thought a little jQuery plugin that I wrote would be handy for some people: please welcome Elpaginator!

What it does:

It looks for a ul or ol within a wrapper & adds pagination depending on the maximum number of items specified.

Features:

• paginates if there are more items than the user specified
• displays number of items left or pages, i.e. 1-10, 11-20, etc or 1, 2, etc
• html of pagination is fully configurable (wrapper need to contain class of page-list!)
• the number of the list item if ordered list is used is correct (uses start attribute that is deprecated, but there is no real alternative yet as IE6 & 7 don’t support CSS for this yet)
• support for ul & ol
• very lightweight (less than 200 lines WITH lots of comments)

You can find the elpaginator script & a demo page in my repository.

Options

This is how you initialise the pagination:

  $('#wrapper').elpaginator();

Possible Options are:

  $('#wrapper').elpaginator({
    MAX: 10,  // maximum number of items per pagination
    list: 'ol',   // whether it's an ul or ol. Default: ul
    style: 'items', // other value is pages -> show 1-5 6-10, etc, or 1, 2,
    paginationHTML: '<div class="pagination"><ul class="page-list"></ul></div>', // HTML for the pagination. Is appended to the wrapper
    paginationListItemHTML: '<li><a href="#"></a></li>' // HTML for the pagination items
  });

A live example of it working can also be seen on the new Top Gear site (look at the sidebar for the lap times table).

String concatenation always creates a new string.

Thus, writing:

 
var str = "This is a long" +
  " string. That's why we want to " +
  " split it over several lines";
 

is slower & more memory intensive than writing:

 
var str = "This is a long\
 string. That's why we want to\
 split it over several lines";
 

Just be careful you don’t have trailing spaces as that will mess it up.

However, rather than creating 3 methods that sit in the global namespace, I wanted to use a singleton object that would only add 1 global variable. Since there is no need for private methods, the object literal pattern is appropriate.
In my opinion the names of the methods make it very straight forward to use. Good names mean less looking up, mean less mistakes, mean faster development. Your Technical Project Manager will love you for it

To create/set a cookie:
cookie.set('name', 'value, 234); // last argument is number of days until expiry. If none is provided, it will get deleted when the browser is closed

To get the cookie value:
cookie.get('name');

To delete the cookie:
cookie.erase('name');

As always, you can download the latest version from my svn repository

Long story short: the interactive mode keeps TextMate from getting all the data so you don’t get the .rxxx & .mine files which are needed for FileMerge to show you the differences.

To fix this is:

1. go into your TextMate Subversion Bundle
2. go to the ‘Update to Newest (HEAD)’ command and add
   --non-interactive after '#{svn}' update

You can see the resulting code here (change on line 14).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

require_cmd "${TM_SVN:=svn}" "If you have installed svn, then you need to either update your <tt>PATH</tt> or set the <tt>TM_SVN</tt> shell variable (e.g. in Preferences / Advanced)"
 
"${TM_RUBY:-ruby}" -r "$TM_SUPPORT_PATH/lib/shelltokenize.rb" <<END
	svn = ENV['TM_SVN'] || "svn"
	ruby = ENV['TM_RUBY'] || "ruby"
	support = ENV['TM_BUNDLE_SUPPORT']
	paths = TextMate.selected_paths_array
 
	# TODO: Ideally, we'd like to use a tooltip for one and not others, but we can't switch from a tooltip
	# to dynamic HTML output (or maybe we could double-fork a process?)
	# if ((paths.size == 1) and not (File.directory? paths[0]))
	#	puts %x{#{svn} update #{TextMate.selected_paths_for_shell}}
	# else
		update = IO.popen("'#{svn}' update --non-interactive #{TextMate.selected_paths_for_shell}", 'r')
		format = IO.popen("'#{ruby}' -- '#{support}/format_status.rb'", 'w')
		update.each_line { |line| format.puts(line) }
	# end	
END
 
# force TM to refresh the current file..
rescan_project

I’ve come across this quite often lately, so I quickly put a little jQuery plugin together to make my life a bit easier.

It works on input fields and it works just like any other jQuery plugin.

All you need to do is call the plugin with the selectors you are interested in, i.e.
$('input:text.email').autoInputLabel();

The options are specified in an object literal & can be:

• blurColor – colour of the text when the label is displayed
• focusColor – colour of the active text, i.e. user input
• value – the label that should be displayed

By default, the plugin displays the value of the value attribute. If there is none, it checks whether there has been a value provided by the user. Otherwise it looks for the label associated with the input field (that is probably hidden, otherwise why would you use the plugin?). The label needs to be associated to the input field with the for attribute.

The plugin only works on <input type="text"> fields.

You can download the latest version from my public svn repository

Why?

To write down my ideas & discuss them with fellow interwebbers, make some of my code publicly available for others to use & maybe get more discipline into my thoughts by researching them a bit before I open my mouth.
Hopefully I will also be able to help some other developers, just as numerous blogs have helped me out over the past years.

Who am I?

My name is Gilles Ruppert, aka elduderino78 (ever seen The Big Lebowski?). I am a Front-end developer for BBC Worldwide and work on their consumer websites which include:

• Top Gear
• Radiotimes
• BBC Good Food
• Gardeners’ World
• Love Earth

I am focusing on web standards: POSH HTML, CSS, JavaScript, accessibility & usability. I’m also doing a little bit of PHP & CakePHP development whenever time allows.
My aim is to become an accessible JavaScript Ninja & for that I’m devouring pretty much any decent JavaScript book that comes out.

I have probably chosen the worst possible time to start blogging as I will become a dad in about 3 months, but maybe I can keep posting whilst holding the little one in the middle of the night

Cheers,

Gilles