<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
 <title>Jaseem Abid' Blog</title>
 <link href="http://jaseemabid.github.io/" rel="self"/>
 <updated>2014-05-12T12:54:23-07:00</updated>
 <id>http://jaseemabid.github.com/</id>
 <author>
   <name>Jaseem Abid</name>
 </author>

 
 <entry>
   <title>A word about cloning large git repositories.</title>
   <link href="http://jaseemabid.github.com/05-13-2014/git-clone-large-repositories.html"/>
   <updated>2014-05-13T01:05:10-07:00</updated>
   <id>http://jaseemabid.github.com/05-13-2014/git-clone-large-repositories</id>
   <content type="html">&lt;h1 id=&quot;a_word_about_cloning_large_git_repositories&quot;&gt;A word about cloning large git repositories.&lt;/h1&gt;

&lt;p&gt;I love git!&lt;/p&gt;

&lt;p&gt;I got used to its stupid UI over the time and now I’m pretty comfortable with it. But as always, when you hit a rough edge, it hurts a lot!&lt;/p&gt;

&lt;p&gt;I tried cloning the linux kernel today and failed multiple times. I’m really surprised that clone doesn’t handle the most common edge cases and do better.&lt;/p&gt;

&lt;p&gt;I tried to clone into a small VM first and it failed silently twice. I was fortunately watching ‘dmesg’ and realized that clone failed to allocate some memory and crashed. Fine! But what about the data that was downloaded already? git decided to just throw it away. Really?&lt;/p&gt;

&lt;p&gt;Well, I have a macbook with 8GB ram! It cannot fail there! Well, here in India internet connectivity is not that awesome. Minor power outage for a few minutes and it failed again.&lt;/p&gt;

&lt;p&gt;Then I get this idea. Make an empty directory and init a git repository there. Fetch from the remote repository. I was hoping that this will be fine because even it fails in the middle, it can resume. Sadly git just decided to ignore the cache for some reason. Failed again.&lt;/p&gt;

&lt;p&gt;The golden hammer turned out to be ‘clone –depth=1’. Git can do something called a ‘shallow clone’, which is to get only the latest version of the repository. This will be much smaller for a large project compared to the entire history and hence should clone just fine. After this, you can deepen the history progressively with ‘git fetch –depth=N’ and eventually ‘git fetch –unshallow’ to get the complete history.&lt;/p&gt;

&lt;p&gt;Why don’t do this out of the box folks?&lt;/p&gt;

&lt;p&gt;Call me unlucky, that failed too. Another power failure.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;../img/failed_clone.png&quot; alt=&quot;Failed clone&quot; /&gt;&lt;/p&gt;

&lt;p&gt;I was taking a backup of the folder while it’s being cloned, so even when git decided to delete the damn folder again, I thought I could just ‘fetch –depth=1’ inside the copied backup folder. Nope! Failed again because git ignored the local cache.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;../img/failed_fetch.png&quot; alt=&quot;Failed clone&quot; /&gt;&lt;/p&gt;

&lt;p&gt;Now what do I do? Who can provide me with a git bundle somewhere which I can download with my beloved ‘wget -c’?&lt;/p&gt;</content>
 </entry>
 
 <entry>
   <title>Hacker At Heart, Starting Over</title>
   <link href="http://jaseemabid.github.com/10-05-2013/hacker-at-heart.html"/>
   <updated>2013-10-05T02:08:09-07:00</updated>
   <id>http://jaseemabid.github.com/10-05-2013/hacker-at-heart</id>
   <content type="html">&lt;h1 id=&quot;hacker_at_heart_starting_over&quot;&gt;Hacker At Heart, Starting Over&lt;/h1&gt;

&lt;p&gt;&lt;a href=&quot;https://github.com/nitcalicut/Paathshaala&quot;&gt;Paathshaala&lt;/a&gt; was a humble attempt to learn some good programming. Me and &lt;a href=&quot;https://twitter.com/swvist&quot;&gt;Vipin&lt;/a&gt; would sit and hack all night on random stuff, learn new things an we were just happy about it - &lt;a href=&quot;https://github.com/jaseemabid?tab=contributions&quot;&gt;but its been a while since we have done something like that&lt;/a&gt;, and we are going to challenge us, the hard way.&lt;/p&gt;

&lt;p&gt;In a week from now, I want to write a &lt;a href=&quot;http://en.wikipedia.org/wiki/Conway&#39;s_Game_of_Life&quot;&gt;Conway’s Game of Life&lt;/a&gt; implementation in elisp - something I wanted to learn for a long time, but never really got a chance for. You need a good understanding of elisp to master emacs, which is the primary objective of this task. Vipin will implement a singe player &lt;a href=&quot;http://en.wikipedia.org/wiki/Reversi&quot;&gt;reversi&lt;/a&gt; game with AI and a GUI in Erlang. I guess his love for Erlang is going to help him a lot there.&lt;/p&gt;

&lt;p&gt;If one of us fail to do the task, he will pay the other Rs 10K (Approx $162.79), and if both of us fail to do so, we will donate to charity. If we both win, you can join us for a dinner at &lt;a href=&quot;http://www.zomato.com/bangalore/barbeque-nation-indiranagar&quot;&gt;BBQ nation&lt;/a&gt; for free, assuming you can prove yourself to be a smarter programmer.&lt;/p&gt;

&lt;p&gt;Now read it in &lt;a href=&quot;http://swvist.github.io/10-05-2013-hacker_at_heart.html&quot;&gt;his words&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Let the hacking begin.&lt;/p&gt;</content>
 </entry>
 
 <entry>
   <title> Emacs package management for newbies</title>
   <link href="http://jaseemabid.github.com/06-04-2013/emacs-package-management-for-newbiews.html"/>
   <updated>2013-06-04T18:57:52-07:00</updated>
   <id>http://jaseemabid.github.com/06-04-2013/emacs-package-management-for-newbiews</id>
   <content type="html">&lt;h1 id=&quot;emacs_package_management_for_newbies&quot;&gt;Emacs package management for newbies&lt;/h1&gt;

&lt;p&gt;&lt;em&gt;&lt;em&gt;Note&lt;/em&gt;: This post requires Emacs v24+&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;One of the most important reasons why I use Emacs is the numerous amazing packages available for almost everything. This post will give you an introduction to the ecosystem and finding the right modes.&lt;/p&gt;

&lt;p&gt;Emacs is a very big software and a lot of functionality is split into major and minor modes. A buffer can have only one major-mode enabled at a time and any number of minor-modes. The major mode is almost always language specific, like ‘python-mode’ or ‘emacs-lisp-mode’. The major modes set the basic language semantics, indentation, syntax highlighting etc. Minor modes are like small features you can turn on and off as per your wish. You want to automatically check for spelling mistakes when you type? There is a minor-mode for that (fly spell-mode). You normally pick a major-mode according to the file type and a bunch of minor-modes as per your wish.&lt;/p&gt;

&lt;p&gt;One of the major problems I faced when I switched to Emacs was that I didn’t know which modes to use and how. I came across 1000s of modes and I was not sure which of them are commonly used, and also which of those I really require. It took me quite sometime to get used to all of that, but there is an easy way. An average emacs user will have at least 20-30 extra modes installed and maintaining and updating them manually can be a real pain. The built in package mechanism in Emacs v24+ makes it super easy to install and update them. I prefer the melpa repository for the large number of curated packages and the pretty web UI.&lt;/p&gt;

&lt;p&gt;This &lt;a href=&quot;http://batsov.com/articles/2011/08/19/a-peek-at-emacs24/&quot;&gt;article&lt;/a&gt; about the new features in Emacs24 and this introductory &lt;a href=&quot;http://batsov.com/articles/2012/02/19/package-management-in-emacs-the-good-the-bad-and-the-ugly/&quot;&gt;article&lt;/a&gt; about Emacs packages might help you understand concepts mentioned here easier.&lt;/p&gt;

&lt;p&gt;Just like standard linux package repositories, emacs is having 3 popular package repositories now. You can add this code somewhere in your ‘~/.emacs.d/init.el’ to activate all the repos.&lt;/p&gt;
&lt;pre class=&#39;prettyprint lang-scm&#39;&gt;
(setq package-archives &#39;((&quot;gnu&quot; . &quot;http://elpa.gnu.org/packages/&quot;)
			 (&quot;marmalade&quot; . &quot;http://marmalade-repo.org/packages/&quot;)
			 (&quot;melpa&quot; . &quot;http://melpa.milkbox.net/packages/&quot;)))
&lt;/pre&gt;
&lt;p&gt;Here is what you can do, go to the &lt;a href=&quot;http://melpa.milkbox.net&quot;&gt;melpa repository&lt;/a&gt; and sort the packages by the number of downloads, and you can see &lt;a href=&quot;https://github.com/magit/magit&quot;&gt;magit&lt;/a&gt; topping the list with over 10,000 downloads. There is a decent probability that such packages are going to be both awesome and useful to you. There are other amazing packages which wont top the list, like &lt;a href=&quot;http://orgmode.org/&quot;&gt;org-mode&lt;/a&gt; because they are shipped with Emacs core.&lt;/p&gt;

&lt;p&gt;Now you can install the package with 1 simple command, ‘M-x package-list-packages’&lt;/p&gt;

&lt;p&gt;So what packages to use? This is the &lt;a href=&quot;https://github.com/jaseemabid/emacs.d/blob/master/elpa-list.el&quot;&gt;list of packages I use&lt;/a&gt;. A few of them just got in there randomly when I was learning and exploring Emacs but there are some which I just cannot live without now. &lt;a href=&quot;https://github.com/magit/magit&quot;&gt;magit&lt;/a&gt; is the most awesome git interface ever. &lt;a href=&quot;http://orgmode.org/&quot;&gt;org-mode&lt;/a&gt; is an amazing notes/todo organizer. &lt;a href=&quot;https://github.com/lunaryorn/git-modes&quot;&gt;git-commit-mode&lt;/a&gt; ensures that my commit messages are always sensible and well formatted. &lt;a href=&quot;https://github.com/bbatsov/guru-mode&quot;&gt;guru-mode&lt;/a&gt; makes sure that I will use the proper key bindings and wont fall back to arrow keys once in a while. &lt;a href=&quot;http://www.gnu.org/software/auctex/&quot;&gt;auctex&lt;/a&gt; is a really amazing mode for tex/latex files. &lt;a href=&quot;http://www.bitlbee.org/main.php/news.r.html&quot;&gt;bitlbee&lt;/a&gt; will let me tweet as &lt;a href=&quot;http://twitter.com/jaseemabid&quot;&gt;@jaseemabid&lt;/a&gt; right from Emacs. Other modes like &lt;a href=&quot;https://github.com/ajc/nginx-mode&quot;&gt;nginx-mode&lt;/a&gt; and &lt;a href=&quot;https://github.com/nex3/haml-mode&quot;&gt;haml-mode&lt;/a&gt; gives me syntax highlighting for whatever I edit. &lt;a href=&quot;https://github.com/emacsmirror/rainbow-mode&quot;&gt;rainbow-mode&lt;/a&gt; will make the colors look &lt;a href=&quot;http://julien.danjou.info/projects/emacs-packages#rainbow-mode&quot;&gt;pretty&lt;/a&gt; in my CSS/HTML files. &lt;a href=&quot;https://github.com/bbatsov/solarized-emacs/&quot;&gt;Solarized dark&lt;/a&gt; is my favorite theme and it got packaged as well. &lt;a href=&quot;http://rinari.rubyforge.org&quot;&gt;rinari&lt;/a&gt; makes Rails development a breeze. I got rid of my file manager (thunar/nautilus/nemo) almost completely completely with &lt;a href=&quot;http://www.gnu.org/software/emacs/manual/html_node/emacs/Dired.html&quot;&gt;dired&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Some modes are known for its poor state. &lt;a href=&quot;&quot;&gt;php-mode&lt;/a&gt; is one of the worst and fortunately I don’t have to write much PHP. Another broken mode is ‘js-mode’ but there is &lt;a href=&quot;https://github.com/mooz/js2-mode&quot;&gt;js2-mode&lt;/a&gt;, a much better fork. Read &lt;a href=&quot;http://steve-yegge.blogspot.in/2008/03/js2-mode-new-javascript-mode-for-emacs.html&quot;&gt;here&lt;/a&gt; some interesting history about js2-mode.&lt;/p&gt;

&lt;p&gt;You might have already come across people who tell you how flexible Emacs is with emacs-lisp right? Here is an example. What if you want to completely forget about the default js-mode and switch to js2-mode? You have 2 ways (definitely a lot more, this is what I know).&lt;/p&gt;

&lt;p&gt;1 Ask emacs to open files with a ‘.js’ extension with js2-mode&lt;/p&gt;
&lt;pre class=&#39;prettyprint lang-scm&#39;&gt;
;; Open .js files with js2-mode
(add-to-list &#39;auto-mode-alist &#39;(&quot;\\.js\\&#39;&quot; . js2-mode))
&lt;/pre&gt;
&lt;p&gt;2 Ask emacs to switch to js2-mode whenever js-mode is activated.&lt;/p&gt;
&lt;pre class=&#39;prettyprint lang-scm&#39;&gt;
;; Switch js-mode to js2-mode
;; js-mode
(add-hook &#39;js-mode-hook
    (lambda ()
        ;; Switch to js2
		(js2-mode)
		)
	)
&lt;/pre&gt;
&lt;p&gt;That was easy! elisp might feel a bit alien in the beginning, but its quite easy to get used to that.&lt;/p&gt;

&lt;p&gt;So, get started with emacs and let me know how it went ;)&lt;/p&gt;</content>
 </entry>
 
 <entry>
   <title>The Douglas Crockford autographed laptop</title>
   <link href="http://jaseemabid.github.com/08-30-2012/crockford-autographed-laptop.html"/>
   <updated>2012-08-30T09:25:41-07:00</updated>
   <id>http://jaseemabid.github.com/08-30-2012/crockford-autographed-laptop</id>
   <content type="html">&lt;h1 id=&quot;the_crockford_autographed_laptop&quot;&gt;The Crockford autographed laptop&lt;/h1&gt;

&lt;p&gt;&lt;img src=&quot;../img/Crockford.png&quot; alt=&quot;The autograph&quot; /&gt;&lt;/p&gt;

&lt;p&gt;I met &lt;a href=&quot;crockford.com&quot;&gt;Douglas Crockford&lt;/a&gt; at Yahoo Open hack India 2011. Being a JavaScript fanboy myself, got an autograph on my laptop :)&lt;/p&gt;

&lt;p&gt;Thoughts,&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;My photography skills pretty much suck.&lt;/li&gt;

&lt;li&gt;I should have got a better cover to protect the ink&lt;/li&gt;

&lt;li&gt;Its fading :(&lt;/li&gt;

&lt;li&gt;The machine is a Dell Studio 1558&lt;/li&gt;
&lt;/ol&gt;</content>
 </entry>
 
 <entry>
   <title>Picture of the day wallpaper for XFCE</title>
   <link href="http://jaseemabid.github.com/08-21-2012/picture-of-the-day-wallpaper-for-xfce.html"/>
   <updated>2012-08-21T21:30:00-07:00</updated>
   <id>http://jaseemabid.github.com/08-21-2012/picture-of-the-day-wallpaper-for-xfce</id>
   <content type="html">&lt;h1 id=&quot;picture_of_the_day_wallpaper_for_xfce&quot;&gt;Picture of the day wallpaper for XFCE&lt;/h1&gt;

&lt;p&gt;National Geographic will send me a picture the every other day and I will download it and set it as my wallpaper. I just automated this with a &lt;em&gt;tiny&lt;/em&gt; bash script.&lt;/p&gt;

&lt;p&gt;The task is simple.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Download the &lt;a href=&quot;http://photography.nationalgeographic.com/photography/photo-of-the-day/&quot;&gt;National Geographic photo of the day page&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;Scrap the html file with grep for the picture link&lt;/li&gt;

&lt;li&gt;Download the picture with wget and put it at ~/.wpoftheday&lt;/li&gt;

&lt;li&gt;Use this &lt;a href=&quot;http://phantomsdad.blogspot.in/2011/09/set-wallpaper-in-xfce4-from-command.html&quot;&gt;tiny script&lt;/a&gt; to set it as the xfce wallpaper&lt;/li&gt;

&lt;li&gt;Delete the downloaded web page&lt;/li&gt;
&lt;/ol&gt;

&lt;h3 id=&quot;here_is_the_shell_script&quot;&gt;Here is the shell script&lt;/h3&gt;

&lt;pre&gt;&lt;code&gt;#/bin/bash
# wp - Set National Geographic &amp;#39;picture of the day&amp;#39; as XFCE wallpaper
# Author : Jaseem Abid &amp;lt;jaseemabid@gmail.com&amp;gt;

# Make cache directory
dir=~/.wpoftheday
[ -d $dir ] || mkdir $dir

# CD to cache dir
cd $dir

# Delete index file if it exists
[ -e index.html ] || rm index.html

page=&amp;quot;http://photography.nationalgeographic.com/photography/photo-of-the-day/&amp;quot;
wget -q  $page

# echo &amp;quot;Scraping the link&amp;quot;
link=$(cat index.html | grep &amp;quot;Download Wallpaper&amp;quot; |  grep -Po &amp;#39;http.*.jpg&amp;#39;)

# echo &amp;quot;Downloading the image&amp;quot;
wget -nvc  $link

# echo &amp;quot;Setting the wallpaper&amp;quot;
file=$(echo  $link |  grep -Po &amp;#39;[-\w]*.jpg&amp;#39;)

# Set picture $file as desktop background
# 0 - Auto, 1 - Centered, 2 - Tiled, 3 - Stretched, 4 - Scaled, 5 - Zoomed

xfconf-query -c xfce4-desktop -p /backdrop/screen0/monitor0/image-path -s $file
xfconf-query -c xfce4-desktop -p /backdrop/screen0/monitor0/image-style -s 0
xfconf-query -c xfce4-desktop -p /backdrop/screen0/monitor0/image-show -s false
xfconf-query -c xfce4-desktop -p /backdrop/screen0/monitor0/image-show -s true&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;Or download it &lt;a href=&quot;../code/wp.sh&quot;&gt;here&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Download the script and run &lt;code&gt;bash wp.sh&lt;/code&gt; and you are done. You could also move the file to your bin and call it like &lt;code&gt;wp&lt;/code&gt; or set a cron job to get this done automatically everyday.&lt;/p&gt;

&lt;p&gt;My bash skills suck. Any way to improve this is welcome :)&lt;/p&gt;</content>
 </entry>
 
 <entry>
   <title>Programming lessons I learned</title>
   <link href="http://jaseemabid.github.com/07-26-2012/programming-lessons-learned.html"/>
   <updated>2012-07-26T17:37:41-07:00</updated>
   <id>http://jaseemabid.github.com/07-26-2012/programming-lessons-learned</id>
   <content type="html">&lt;h1 id=&quot;programming_lessons_i_learned&quot;&gt;Programming lessons I learned&lt;/h1&gt;

&lt;p&gt;This blog was edited since it was first posted here. Here is the &lt;a href=&quot;https://github.com/jaseemabid/jaseemabid.github.com/commit/5a04ab501fa1f1ddbb88f63ff737f365c701a940&quot;&gt;patch&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Things I learned outside the classroom that might help somebody :)&lt;/p&gt;

&lt;h3 id=&quot;1_learn_to_version_control_your_code&quot;&gt;1. Learn to version control your code.&lt;/h3&gt;

&lt;p&gt;Learn &lt;a href=&quot;http://git-scm.com&quot;&gt;Git&lt;/a&gt;!&lt;/p&gt;

&lt;p&gt;Its a bit pain to learn, agreed! so is every other VCS out there. It will surely change the way you code forever, if you put some effort into learning it properly.&lt;/p&gt;

&lt;p&gt;The basic idea of git is that you can get back to any version of your code at any time. It makes collaboration a breeze. It will tell you who added a line of code at what point of time. You commit when something works, add a decent commit message [&lt;a href=&quot;http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html&quot;&gt;1&lt;/a&gt;] [&lt;a href=&quot;https://github.com/erlang/otp/wiki/Writing-good-commit-messages&quot;&gt;2&lt;/a&gt;] to help yourself later, and continue working. Before the next commit, look at the diff to see what you are going to commit, think again if that is exactly what you want to do and go on. Are you stuck with some nasty bugs? Revert to last known working version, and continue your work in a fresh manner or stash your current changes for later review.&lt;/p&gt;

&lt;p&gt;Read &lt;a href=&quot;http://sethrobertson.github.com/GitBestPractices/&quot;&gt;Git best practices&lt;/a&gt;. Its one of the most dense articles I have come across yet. It will surely reward you.&lt;/p&gt;

&lt;p&gt;Here are a &lt;a href=&quot;https://gist.github.com/1321592&quot;&gt;few tutorials&lt;/a&gt; I collected which might help.&lt;/p&gt;

&lt;h3 id=&quot;2_have_some_sane_white_space_in_your_code&quot;&gt;2. Have some sane white space in your code.&lt;/h3&gt;

&lt;p&gt;White spaces are important.&lt;/p&gt;

&lt;p&gt;The ideal way to fix this will be to use &lt;a href=&quot;http://www.emacswiki.org/SmartTabs&quot;&gt;emacs smart tabs&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;People who find that difficult should at least use the whitespace highlight plugin with gedit. Here is a screen shot with white space plugin enabled. &lt;img src=&quot;../img/ws.png&quot; alt=&quot;whitespace&quot; /&gt;&lt;/p&gt;

&lt;p&gt;Intent all your lines with either fixed amount of spaces alone, say 4 or with tabs alone. Tabs are better IMHO because they lead to smaller files and anybody can adjust tab widths to read it as per their convenience without actually editing the file. This makes patches real patches and not just white space modifications. It makes the file consistent across platforms and editors.&lt;/p&gt;

&lt;p&gt;Update 1 : Seems like more people prefer spaces over tabs. I am yet to find a solid argument which makes one better than the other.&lt;/p&gt;

&lt;p&gt;Update 2 : ‘leads to smaller files…’ seems to be a bit pointless to me now (Read the comments). I either compile or minify my code before deploying, which makes large files not a problem at all. Thanks to @darrencauthon for the comment.&lt;/p&gt;

&lt;h3 id=&quot;3_pick_a_real_programmers_editor&quot;&gt;3. Pick a real programmers editor.&lt;/h3&gt;

&lt;p&gt;I’m going a bit inclined here. Pick emacs, not vim.&lt;/p&gt;

&lt;p&gt;There are infinite number of comparisons online. I’ll state my reason for picking emacs over vim. Vim is a modal editor and it suggests you stay in the normal mode by default. It makes moving around very easy and when you want to insert text, you type &lt;code&gt;i&lt;/code&gt; to get to insert mode and then type in the content.&lt;/p&gt;

&lt;p&gt;I realized that this is not how “I” work with my code. Emacs is not a modal editor. You can insert text at all times. It uses control meta keys more efficiently and makes moving around and inserting text at the same time a breeze. I think I can beat a kickass vim guy with my basic emacs skills.&lt;/p&gt;

&lt;p&gt;Watch this &lt;a href=&quot;http://emacsrocks.com/e02.html&quot;&gt;video&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Here are some good emacs videos to get started.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;a href=&quot;http://emacsrocks.com/&quot;&gt;EmacsRocks&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;a href=&quot;http://emacsmovies.org/&quot;&gt;emacsmovies.org&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;a href=&quot;https://peepcode.com/products/meet-emacs/&quot;&gt;PeepCode&lt;/a&gt;, if you can pay for it&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;If you prefer downloading videos for offline viewing, use wget for downloading all EmacsRocks episodes:)&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;
    wget http://dl.dropbox.com/u/3615058/emacsrocks/emacs-rocks-{01..11}.mov?dl=1
&lt;/code&gt;&lt;/pre&gt;

&lt;h3 id=&quot;4_contribute_to_a_foss&quot;&gt;4. Contribute to a FOSS&lt;/h3&gt;

&lt;p&gt;This is actually easier than it sounds. Pick some small application, interact with the community and fix issues which you can. I was able to fix some issues with gedit during my last vacation and I am working on more of it now. Also, I am porting the JavaScript code in gitweb to a standards compliant version using jQuery which was a proposed Google Summer of Code 2012 project. Hoping to get those patches accepted soon :P&lt;/p&gt;

&lt;h3 id=&quot;5_lint_your_code&quot;&gt;5. Lint your code&lt;/h3&gt;

&lt;p&gt;I use &lt;a href=&quot;http://www.jslint.com/&quot;&gt;JSLint&lt;/a&gt; for my JavaScript and I am happy with it. Some prefer &lt;a href=&quot;http://www.jshint.com/&quot;&gt;JSHint&lt;/a&gt;, which is equally awesome. Biggest reason to lint, you can save your time from a &lt;a href=&quot;http://blog.safeshepherd.com/23/how-one-missing-var-ruined-our-launch/&quot;&gt;lot of silly errors&lt;/a&gt; like this and it generally leads to much cleaner code.&lt;/p&gt;

&lt;p&gt;It gives the added advantage that if all of the programmers in the team use the same lint before all commits, it leads to much cleaner patches.&lt;/p&gt;

&lt;p&gt;JSLint says “JSLint will hurt your feelings”, yes true! But not for long. Gradually you will learn to write code by default that way, leading to less error prone and better code. &lt;a href=&quot;http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-using-jslint/&quot;&gt;Give it a try now!&lt;/a&gt;&lt;/p&gt;

&lt;h3 id=&quot;6_write_tests_for_your_code&quot;&gt;6. Write tests for your code&lt;/h3&gt;

&lt;blockquote&gt;
&lt;p&gt;All my code I wrote before &lt;a href=&quot;https://github.com/jaseemabid/git/blob/gitweb/gitweb/static/js/test/dateTime.spec.js&quot;&gt;my first BDD test spec&lt;/a&gt; was a waste - Jaseem Abid&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;We all actually in a run tiny, micro tests all the time. Most of the people log output into the console now and then after something is done &lt;em&gt;just to see if things are fine&lt;/em&gt;. Writing tests are not that complicated. You just need to collect all of those tiny tests, put it in a file in the proper manner and you are done. Its a pain thing to start up, but once you get it, just like git and emacs, you wont be able to live without it from then on.&lt;/p&gt;

&lt;p&gt;Tests also provide excellent documentation also on how to run functions and object methods. I prefer &lt;a href=&quot;http://visionmedia.github.com/mocha/&quot;&gt;mocha&lt;/a&gt; and &lt;a href=&quot;http://en.wikipedia.org/wiki/Behavior-driven_development&quot;&gt;BDD&lt;/a&gt; myself. I have some interest in &lt;a href=&quot;https://github.com/douglascrockford/JSDev/&quot;&gt;JSDev&lt;/a&gt; by &lt;a href=&quot;http://crockford.com/&quot;&gt;Douglas Crockford&lt;/a&gt; also. (He is the real JavaScript dude! I met him once at Yahoo! Open Hack India 2011 and got an autograph on my laptop, which still stays there :) ). Here is a &lt;a href=&quot;http://net.tutsplus.com/tutorials/javascript-ajax/meet-crockfords-jsdev/&quot;&gt;tutorial&lt;/a&gt; on JSDev to get started.&lt;/p&gt;

&lt;h3 id=&quot;7_learn_multiple_languages&quot;&gt;7. Learn multiple languages&lt;/h3&gt;

&lt;p&gt;All learn C at school and I really don’t think that is enough. &lt;a href=&quot;http://xkcd.com/353/&quot;&gt;Python is awesome&lt;/a&gt;, and you should really invest some time in learning something that is &lt;em&gt;actually awesome&lt;/em&gt;. Personally I think JavaScript is the coolest one ;)&lt;/p&gt;

&lt;p&gt;I really wanted to tell that you should learn one functional, array, imperative, OO… language. I cant put it better than this &lt;a href=&quot;http://stackoverflow.com/a/3958962/501945&quot;&gt;SO answer&lt;/a&gt;, so read it up quick. The whole thread is kinda interesting.&lt;/p&gt;

&lt;p&gt;You could watch this &lt;a href=&quot;http://www.youtube.com/watch?v=NvWTnIoQZj4&quot;&gt;video&lt;/a&gt; by Bjarne Stroustrup or &lt;a href=&quot;https://www.google.com/search?q=5+programming+languages+to+learn&quot;&gt;!google 5 programming languages to learn&lt;/a&gt;. This is a &lt;a href=&quot;http://bluebones.net/2006/09/five-programming-languages/&quot;&gt;good post&lt;/a&gt; on the topic.&lt;/p&gt;

&lt;p&gt;The fundamental point : Pick the right language to get the job done. If you are the guy who is fitting C everywhere, I hate you and you are a jackass. Often love for language works against this principle and I tend to do that with JavaScript, I use node.js and JavaScript where I should have used bash, I use couchDB and JavaScript where I should have used SQL, I use node.js as a calculator instead of iPython. This is still not an excuse to stick to C though ;)&lt;/p&gt;

&lt;p&gt;Comments welcome :)&lt;/p&gt;</content>
 </entry>
 
 <entry>
   <title>My thoughts on gnome3, unity..</title>
   <link href="http://jaseemabid.github.com/07-11-2012/thoughts-on-gnome-3.html"/>
   <updated>2012-07-11T01:35:33-07:00</updated>
   <id>http://jaseemabid.github.com/07-11-2012/thoughts-on-gnome-3</id>
   <content type="html">&lt;h1 id=&quot;my_thoughts_on_gnome3_unity&quot;&gt;My thoughts on gnome3, unity..&lt;/h1&gt;

&lt;p&gt;The huge number of touch devices in market is making ui developers optimize their apps for all those touch and mobile devices. One thing they don’t understand is how screwed up the app becomes for a developer on a normal workstation. I’m talking about gnome 3..&lt;/p&gt;

&lt;p&gt;Gnome was my first desktop when I started using computers late 2009. I was happy with it and used it till the early releases of gnome3. I hate it with passion from then. There was “gnome classic” on my Debian sid for a long time but it felt buggy and clumsy. My network manager never worked, apps crashed very often and it was an overall mess!&lt;/p&gt;

&lt;p&gt;Why am I saying this now? Recently &lt;a href=&quot;http://git.gnome.org/browse/nautilus/commit/?id=ef467c8775392d0f0feb0e38f7a80f2d41719d84&quot;&gt;they removed the tree view&lt;/a&gt;, &lt;a href=&quot;http://git.gnome.org/browse/nautilus/commit/?id=b8d5b4a7bcf47ed34a6343c95bcc3b079255c0a0&quot;&gt;they removed nautilus extra panes&lt;/a&gt;. It really annoy me because when I moved to xfce I really missed that feature in thunar. It let copying between multiple locations a bliss, and not anymore.&lt;/p&gt;

&lt;p&gt;Whats wrong here? They just don’t understand that they &lt;strong&gt;CAN’T&lt;/strong&gt; run the same thing on a touch device and a desktop.&lt;a href=&quot;http://amplicate.com/hate/gnome3&quot;&gt;It does annoy people&lt;/a&gt;. &lt;a href=&quot;https://plus.google.com/102150693225130002912/posts/UkoAaLDpF4i&quot;&gt;Linus said he hates it and moved to xfce&lt;/a&gt;. It became so unusable so that the mint guys forked it, made &lt;a href=&quot;http://cinnamon.linuxmint.com/&quot;&gt;cinnamon&lt;/a&gt; and its such a beautiful thing to use. Mint even became the most popular distro in the planet.&lt;/p&gt;

&lt;p&gt;There was no reason to remove the bottom bar with minimized windows. I always used my tab key for switching apps.I never used it actually, but that tiny bar there told me about all open apps. Why save that tiny space there making it really harder to use?&lt;/p&gt;

&lt;p&gt;Linus in this &lt;a href=&quot;http://www.youtube.com/watch?v=4XpnKHJAok8&quot;&gt;talk&lt;/a&gt; said subversion is the most pointless project ever. Sorry, I have to disagree. Its unity. Subversion surely comes just after it. Why did they remove the quick launcher icons on the top panel? Because its very hard to touch with your fingers. But at the same time, its really easy to do that with a mouse. Why do you have to go to a corner of a screen to do &lt;em&gt;everything&lt;/em&gt; that can be done with a GUI? Removing C-A-t was like killing me. I must be pressing that over a million times everyday. Gnome 3 have serious usability issues. It might work for an idiot clicking his mouse here and there but not for a developer. Gnome3 just cant be customized. It cant minimize. Needs too many clicks to get things done.&lt;/p&gt;

&lt;p&gt;Seems like windows 8 is going in a very similar path. I wont be surprised to see all of them, unity, gnome and windows dead soon.&lt;/p&gt;

&lt;p&gt;I moved to xfce, and I am happy with it :)&lt;/p&gt;

&lt;p&gt;I found few more people with a very similar thoughts &lt;a href=&quot;
http://felipec.wordpress.com/2011/06/16/after-two-weeks-of-using-gnome-3-i-officially-hate-it/&quot;&gt;here&lt;/a&gt;, &lt;a href=&quot;http://blog.taz.net.au/2011/11/27/some-more-reasons-to-hate-gnome-shell/&quot;&gt;here&lt;/a&gt; and &lt;a href=&quot;http://www.zdnet.com/blog/virtualization/i-hate-unity-i-hate-gnome-i-hate-windows-8-the-ultimate-desktop-search-continues/4089&quot;&gt;here&lt;/a&gt;&lt;/p&gt;</content>
 </entry>
 
 <entry>
   <title>Git for the very lazy ones like me</title>
   <link href="http://jaseemabid.github.com/05-07-2012/git-for-the-lazy-ones.html"/>
   <updated>2012-05-07T02:19:41-07:00</updated>
   <id>http://jaseemabid.github.com/05-07-2012/git-for-the-lazy-ones</id>
   <content type="html">&lt;h1 id=&quot;git_for_the_very_lazy_ones_like_me&quot;&gt;Git for the very lazy ones like me.&lt;/h1&gt;

&lt;p&gt;This post is proof that I’m lazy at heart to the core!&lt;/p&gt;

&lt;p&gt;I came across git over year ago. It’s a quite hard tool to learn, but once you get it, Its &lt;em&gt;bloody awesome&lt;/em&gt;. It will change the way you code, forever. If its not, learn it well, again.&lt;/p&gt;

&lt;p&gt;Here I am sharing a few ways in which I am making git “awesomer”, or say better for lazy guys like me, saving some typing.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;&amp;lt;disclaimer&amp;gt;&lt;/code&gt; I don’t give a damn about windows users. I don’t care if things I share don’t work for them. I hate M$, people using M$ products ( includes skype also ) and everything that is vaguely or remotely related to them. Things I blog here works on my primary machine powered by Debian Sid and that’s all I know. &lt;code&gt;&amp;lt;/disclaimer&amp;gt;&lt;/code&gt;&lt;/p&gt;

&lt;h3 id=&quot;1_save_some_typing_with_awesome_aliases&quot;&gt;1. Save some typing with awesome aliases.&lt;/h3&gt;

&lt;p&gt;Its a long list of aliases, so its quite sensible to hack bash and add a new alias file. Add the following code to your &lt;code&gt;.bashrc&lt;/code&gt;. I’m not sure of other platforms, sorry. I think its same for tcsh, dash, ksh etc&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;if [ -f ~/.bash_aliases ]; then
	. ~/.bash_aliases
fi&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;Now all this to &lt;code&gt;~/.bash_aliases&lt;/code&gt;&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;# git aliases

alias gs=&amp;#39;git status &amp;#39;
alias ga=&amp;#39;git add &amp;#39;
alias gb=&amp;#39;git branch &amp;#39;
alias gc=&amp;#39;git commit&amp;#39;
alias gd=&amp;#39;git diff&amp;#39;
alias go=&amp;#39;git checkout &amp;#39;
alias gl=&amp;#39;git log &amp;#39;
alias gk=&amp;#39;gitk --all&amp;amp;&amp;#39;
alias gg=&amp;#39;gitg --all&amp;#39;
alias got=&amp;#39;git &amp;#39;
alias get=&amp;#39;git &amp;#39;
alias gits=&amp;#39;git status &amp;#39;&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;It saves you from typos like ‘get’ and ‘got’. &lt;code&gt;git status&lt;/code&gt; being the most common command is aliased to &lt;code&gt;gs&lt;/code&gt; and &lt;code&gt;gits&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;My favorite is &lt;code&gt;alias go=&amp;#39;git checkout &amp;#39;&lt;/code&gt;. When you want to go to ‘master’, you say &lt;code&gt;go master&lt;/code&gt; or &lt;code&gt;go issue53&lt;/code&gt;. I think it makes a lot more sense than &lt;code&gt;git checkout master&lt;/code&gt; or &lt;code&gt;git co master&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Often you might prefer git aliases powered by git itself. Add this to your &lt;code&gt;~/.gitconfig&lt;/code&gt; or set it manually with commands &lt;code&gt; git config --global alias.s status&lt;/code&gt;&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;[alias]
	s = status
	c = commit
	co = checkout
	see = log --pretty=format:\&amp;quot;%h %s\&amp;quot; --graph&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;Not enough, there is a special one. This one saves a lot of typing for less frequently typed commands or often ones like &lt;code&gt;g commit&lt;/code&gt;&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;alias g=&amp;#39;git &amp;#39;&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;Add it to the previous list.&lt;/p&gt;

&lt;p&gt;Here comes the problem. We are quite used to bash auto completion. Transformations like &lt;code&gt;git com&amp;lt;tab&amp;gt;&lt;/code&gt; =&amp;gt; &lt;code&gt;git commit&lt;/code&gt; comes quite handy. It just wont work with &lt;code&gt;g com&amp;lt;tab&amp;gt;&lt;/code&gt;. Hack bash again!!!&lt;/p&gt;

&lt;p&gt;Add this to your &lt;code&gt;~/.bashrc&lt;/code&gt;&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;complete -o default -o nospace -F _git g&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;Aha, one more problem solved !!&lt;/p&gt;

&lt;p&gt;Next trick is quite common and actually much cooler, because you don’t have to type at all. You can edit the environment variable &lt;code&gt;PS1&lt;/code&gt; in bash to change your primary prompt. We can add the current state of the git repository to the prompt. That means a lot less &lt;code&gt;git status&lt;/code&gt; because you can just get the info from your prompt.&lt;/p&gt;

&lt;p&gt;Here are 3 images.&lt;/p&gt;

&lt;h4 id=&quot;default_prompt&quot;&gt;Default prompt&lt;/h4&gt;

&lt;p&gt;&lt;img src=&quot;/img/git/default.png&quot; alt=&quot;Default prompt&quot; title=&quot;Default prompt&quot; /&gt;&lt;/p&gt;

&lt;h4 id=&quot;prompt_in_a_clean_git_working_directory&quot;&gt;Prompt in a clean git working directory&lt;/h4&gt;

&lt;p&gt;&lt;img src=&quot;/img/git/clean.png&quot; alt=&quot;Prompt in a clean git working directory&quot; title=&quot;Prompt in a clean git working directory&quot; /&gt;&lt;/p&gt;

&lt;h4 id=&quot;prompt_in_a_dirty_git_working_directory&quot;&gt;Prompt in a dirty git working directory&lt;/h4&gt;

&lt;p&gt;&lt;img src=&quot;/img/git/dirty.png&quot; alt=&quot;Prompt in a dirty git working directory&quot; title=&quot;Prompt in a clean git working directory&quot; /&gt;&lt;/p&gt;

&lt;p&gt;The current branch is shown as &lt;code&gt;[master]&lt;/code&gt; if pwd is a git tracked directory, else its just ignored. the &lt;code&gt;*&lt;/code&gt; means the working tree is dirty, Ie, there is something that you haven’t stashed/commited yet.&lt;/p&gt;

&lt;p&gt;Add this to your &lt;code&gt;~/.bashrc&lt;/code&gt; for the new prompt.&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;function parse_git_dirty {
  [[ $(git status 2&amp;gt; /dev/null | tail -n1) != &amp;quot;nothing to commit (working directory clean)&amp;quot; ]] &amp;amp;&amp;amp; echo &amp;quot;*&amp;quot;
}
function parse_git_branch {
  git branch --no-color 2&amp;gt; /dev/null | sed -e &amp;#39;/^[^*]/d&amp;#39; -e &amp;quot;s/* \(.*\)/[\1$(parse_git_dirty)]/&amp;quot;
}

export PS1=&amp;#39;\[\033[1;33m\]\w\[\033[0m\] [\T \d] $(parse_git_branch) \n -&amp;gt; &amp;#39;&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;I have always wondered why people put their name or the hostname in their prompt, unless they are ‘always ssh’ dudes, which most of us are not, the hostname is a quite useless thing wasting space. Also its multi-line, means you have more space to type commands. As a bonus it shows the present working directory and time also :)&lt;/p&gt;

&lt;p&gt;I am in the middle of building something &lt;em&gt;awesome&lt;/em&gt; with &lt;a href=&quot;http://git-scm.com/book/en/Customizing-Git-Git-Hooks&quot;&gt;git hooks&lt;/a&gt;. This post will soon be updated with more stuff :)&lt;/p&gt;

&lt;p&gt;Thanks to @jasim_ab for inspiring me to write this one :)&lt;/p&gt;</content>
 </entry>
 
 <entry>
   <title>An introduction to JavaScript templating</title>
   <link href="http://jaseemabid.github.com/05-04-2012/javascript-templating.html"/>
   <updated>2012-05-04T02:21:29-07:00</updated>
   <id>http://jaseemabid.github.com/05-04-2012/javascript-templating</id>
   <content type="html">&lt;h1 id=&quot;an_introduction_to_javascript_templating&quot;&gt;An introduction to JavaScript templating.&lt;/h1&gt;

&lt;p&gt;Quite often you have might have some JSON data like this &lt;/p&gt;

&lt;pre&gt;&lt;code&gt;{
    &amp;quot;friends&amp;quot;: [
        &amp;quot;john doe&amp;quot;,
        &amp;quot;swvist&amp;quot;,
        &amp;quot;paul&amp;quot;,
        &amp;quot;subin&amp;quot;,
        &amp;quot;varun&amp;quot;
    ]
}&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;… and you want to render it into a html list like this.&lt;/p&gt;

&lt;blockquote&gt;
&lt;ul&gt;
&lt;li&gt;john doe&lt;/li&gt;

&lt;li&gt;swvist&lt;/li&gt;

&lt;li&gt;paul&lt;/li&gt;

&lt;li&gt;subin&lt;/li&gt;

&lt;li&gt;varun&lt;/li&gt;
&lt;/ul&gt;
&lt;/blockquote&gt;

&lt;p&gt;Chances are rare when you build a whole webapp with just static data. You will need to pull data out of your DB, add some html tags and css classes around to display it properly. This post is about doing this task in style, with client side JavaScript. Nothing about PHP, Python, RoR or anything serverside now. May be later.&lt;/p&gt;

&lt;p&gt;People will often come up with a very quick and dirty script for the task.&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;var result = &amp;quot;&amp;quot;,i = 0;
result += &amp;quot;&amp;lt;ul class=&amp;#39;myClass&amp;#39; id=&amp;#39;myId&amp;#39;&amp;gt;&amp;quot;;
for (i = 0; i &amp;lt; friends.length; i += 1) {
    result = result + &amp;quot;&amp;lt;li&amp;gt;&amp;quot; + friends[i] + &amp;quot;&amp;lt;/li&amp;gt;&amp;quot;;
}
result += &amp;quot;&amp;lt;/ul&amp;gt;&amp;quot;;
// Insert `result` into the right place​​​​​&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;&lt;code&gt;&amp;lt;personalDisclaimer&amp;gt;&lt;/code&gt; Sorry, but you are abusing JavaScript, string concatenation, templating and everything that’s vaguely related to any of these if you write code like this. The data is too bound to your presentation. &lt;a href=&quot;/04-15-2012/jekyll-powered-blog.html&quot;&gt;Web developers hate it, and I have mentioned it already&lt;/a&gt;. You will ultimately end up with spaghetti code that’s too hard to maintain and it will finally kill the whole damn application. Changing the color of a link should involve only CSS and never editing some html or a class name in JavaScript. If you are doing that, you are &lt;em&gt;&lt;em&gt;wrong&lt;/em&gt;&lt;/em&gt;.&lt;code&gt;&amp;lt;/personalDisclaimer&amp;gt;&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;There is a root similarity in all of the methods to be discussed. They split your data and template very efficiently. Its a lot more cleaner in &lt;a href=&quot;http://coffeescript.org/&quot;&gt;CoffeeScript&lt;/a&gt; using the ‘String Interpolation’ feature. Bad implementation, but still better. You sort of fill in data into your templates.&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;list = &amp;#39;&amp;#39;
style = &amp;#39;myClass&amp;#39;
id = &amp;#39;myId&amp;#39;
for friend in friends
    list = list + &amp;quot;&amp;lt;li&amp;gt;#{friend}&amp;lt;/li&amp;gt;&amp;quot;
result = &amp;quot;&amp;lt;ul class=&amp;#39;#{style}&amp;#39; id=&amp;#39;#{id}&amp;#39;&amp;gt;#{list}&amp;lt;/ul&amp;gt;&amp;quot;

// Insert `result` into the right place​​​​​&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;This idea can’t be new to any programmer. We have all used it with printf, &lt;a href=&quot;http://code.google.com/p/sprintf/&quot;&gt;sprintf&lt;/a&gt; etc in C programming. If you think you don’t need &lt;a href=&quot;http://coffeescript.org/&quot;&gt;CoffeeScript&lt;/a&gt; just for string interpolation, you can use this &lt;a href=&quot;https://gist.github.com/1321623&quot;&gt;&lt;em&gt;tiny&lt;/em&gt; script&lt;/a&gt; to do the same task with JavaScript supplants. Problems : Slower, a bit more to type.&lt;/p&gt;

&lt;p&gt;The same task in &lt;a href=&quot;http://documentcloud.github.com/underscore/&quot;&gt;underscore.js&lt;/a&gt; gets way better. Its a small library that gives a lot of useful utilities under a global _ object. Here is a very simple example&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;_.template(&amp;quot;hello: &amp;lt;%= name %&amp;gt;&amp;quot;, {
    &amp;quot;name&amp;quot;: &amp;quot;John Doe&amp;quot;
});​

// &amp;quot;hello: John Doe&amp;quot;&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;&lt;span class=&#39;label label-info&#39;&gt;Heads up!&lt;/span&gt;&lt;/p&gt;

&lt;p&gt;Read the &lt;a href=&quot;http://documentcloud.github.com/underscore/#template&quot;&gt;template documentation&lt;/a&gt; for a complete overview. &lt;a href=&quot;http://documentcloud.github.com/underscore/&quot;&gt;underscore.js&lt;/a&gt; is one of the best ways to get things done since the library as such is quite small and provides you with a &lt;em&gt;lot&lt;/em&gt; of other essential features. I’d seriously recommend learning &lt;a href=&quot;http://documentcloud.github.com/underscore/&quot;&gt;underscore.js&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;The above task in underscore (obviously without the extra new lines)&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;var list = &amp;quot;&amp;lt;ul&amp;gt;
		  &amp;lt;%
		    _.each(friends, function(name) {
		      %&amp;gt; &amp;lt;li&amp;gt;&amp;lt;%= name %&amp;gt;&amp;lt;/li&amp;gt; &amp;lt;%
		    });
		  %&amp;gt;
	  &amp;lt;/ul&amp;gt;&amp;quot;,
result = _.template(list, friends);​&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;The gotcha here is that you can add arbitrary JavaScript code in the template blocks. The blocks here are &lt;code&gt;&amp;lt;%= name %&amp;gt;&lt;/code&gt; for variable interpolation, &lt;code&gt;&amp;lt;% code %&amp;gt;&lt;/code&gt; for arbitrary JavaScript code and &lt;code&gt;&amp;lt;%- escaped code %&amp;gt;&lt;/code&gt; for JavaScript code that will be html escaped.&lt;/p&gt;

&lt;p&gt;Clean, much neater :)&lt;/p&gt;

&lt;p&gt;If you’re into the whole “DOM as a Template” thing then &lt;a href=&quot;http://beebole.com/pure/#&quot;&gt;PURE&lt;/a&gt; could work well. I recently came across this, never used it much till now. This might fit well in some contexts. From the &lt;a href=&quot;http://beebole.com/pure/#&quot;&gt;official site&lt;/a&gt;, &lt;a href=&quot;http://beebole.com/pure/#&quot;&gt;PURE&lt;/a&gt; is a &lt;em&gt;Simple and ultra-fast templating tool to generate HTML from JSON data&lt;/em&gt; and here is the sample code&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;# HTML template
&amp;lt;div class=&amp;quot;who&amp;quot;&amp;gt;
&amp;lt;/div&amp;gt;

# JSON Data

{
  &amp;quot;who&amp;quot;: &amp;quot;Hello Wrrrld&amp;quot;
}

# Output
Hello Wrrrld&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;&lt;a href=&quot;http://mustache.github.com/&quot;&gt;Mustache&lt;/a&gt; is the big daddy when it comes to templating and Aha! there is a JavaScript port of it like many others. &lt;a href=&quot;https://github.com/janl/mustache.js&quot;&gt;Mustache.js&lt;/a&gt; templates are language agnostic allowing you to reuse them between frontend and backend. Pretty neat tool.&lt;/p&gt;

&lt;p&gt;There is a quick &lt;em&gt;simple&lt;/em&gt; tutorial by &lt;a href=&quot;http://net.tutsplus.com/tutorials/JavaScript-ajax/quick-tip-using-the-mustache-template-library/&quot;&gt;net.tutsplus&lt;/a&gt;. Check it out for simple mustache code examples.&lt;/p&gt;

&lt;p&gt;&lt;a href=&quot;http://ejohn.org/blog/JavaScript-micro-templating/&quot;&gt;JavaScript Micro-Templating&lt;/a&gt; by &lt;a href=&quot;http://ejohn.org&quot;&gt;John Resig&lt;/a&gt; (the dude behind &lt;a href=&quot;jquery.com&quot;&gt;jQuery&lt;/a&gt;) is a pretty crude but good option. Pretty similar to my &lt;a href=&quot;https://gist.github.com/1321623&quot;&gt;&lt;em&gt;tiny&lt;/em&gt; script&lt;/a&gt; mentioned earlier.&lt;/p&gt;

&lt;p&gt;jQuery templates are good and here is the necessary &lt;a href=&quot;http://blog.reybango.com/2010/07/09/not-using-jquery-javascript-templates-youre-really-missing-out/&quot;&gt;tutorial&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;One more part is left. You still have template strings in your JavaScript. The &lt;a href=&quot;https://developer.mozilla.org/en/HTML/Element/script&quot;&gt;html script tag&lt;/a&gt; comes for rescue here. By the way &lt;a href=&quot;http://www.sitepoint.com/javascript-mime-type-damned-if-you-do-damned-if-you-dont/&quot;&gt;this&lt;/a&gt; is a very interesting post on script tags. Worth a read for sure, I promise :) We add our template as a script tag with a &lt;em&gt;wrong/custom&lt;/em&gt; &lt;code&gt;type&lt;/code&gt; attribute. Unless its &lt;code&gt;text/javascript&lt;/code&gt; (which is wrong) or &lt;code&gt;application/javascript&lt;/code&gt; (which wont work in fucking MSIE), it wont be executed. Here is an example from &lt;a href=&quot;http://handlebarsjs.com/&quot;&gt;handlebars.js&lt;/a&gt; site.&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;&amp;lt;script id=&amp;quot;entry-template&amp;quot; type=&amp;quot;text/x-handlebars-template&amp;quot;&amp;gt;
  template content
&amp;lt;/script&amp;gt;&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;You can pull out the content with &lt;a href=&quot;http://api.jquery.com/html/&quot;&gt;jQuery.html()&lt;/a&gt; and the custom id we set. Quite simple!&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;var template = $(&amp;#39;script#entry-template&amp;#39;).html()
// Do anything mentioned above with the template variable&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;Essentially we moved the templates out of script, Nirvana! Whatever be your templating method, do this. Your template should stay in html and not JavaScript.&lt;/p&gt;

&lt;p&gt;A few more tools and learning resources are listed below. All share common ideas and learning something new if you know a few wont be tough. There are no silver bullets, and there is no single best template engine for JavaScript.&lt;/p&gt;

&lt;p&gt;&lt;a href=&quot;http://liquidmarkup.org/&quot;&gt;liquidmarkup&lt;/a&gt; is amazing. I use it for this blog, but its all serverside, ruby stuff!&lt;/p&gt;

&lt;p&gt;I personally prefer underscore.js. They are fast and lightweight, if you have it loaded already then its a good option.&lt;/p&gt;

&lt;p&gt;Your templating solution should depend on the rest of your application stack.&lt;/p&gt;

&lt;p&gt;&lt;a href=&quot;http://www.quora.com/What-is-the-best-JavaScript-templating-framework-and-why&quot;&gt;This question on quora : What is the best JavaScript templating framework and why&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hope this helps somebody. Comments welcome :)&lt;/p&gt;</content>
 </entry>
 
 <entry>
   <title>A jekyll powered blog for yourself</title>
   <link href="http://jaseemabid.github.com/04-15-2012/jekyll-powered-blog.html"/>
   <updated>2012-04-15T02:05:00-07:00</updated>
   <id>http://jaseemabid.github.com/04-15-2012/jekyll-powered-blog</id>
   <content type="html">&lt;h1 id=&quot;a_jekyll_powered_blog_for_yourself&quot;&gt;A jekyll powered blog for yourself&lt;/h1&gt;

&lt;p&gt;Googling on the topic should lead you to tutorials on how to get your &lt;a href=&quot;https://github.com/mojombo/jekyll/&quot;&gt;jekyll&lt;/a&gt; powered blog up in minutes. &lt;a href=&quot;http://jekyllbootstrap.com/&quot;&gt;jekyll bootstrap&lt;/a&gt; will even give you a custom script to make deployment easier. This &lt;a href=&quot;http://net.tutsplus.com/tutorials/other/building-static-sites-with-jekyll/&quot;&gt;nettuts article&lt;/a&gt; could be your first read about jekyll. The official &lt;a href=&quot;https://github.com/mojombo/jekyll/wiki&quot;&gt;docs&lt;/a&gt; and &lt;a href=&quot;http://octopress.org&quot;&gt;octopress&lt;/a&gt; give more idea. So here I’m going a bit against my first post. More philosophy and less code.&lt;/p&gt;

&lt;p&gt;jekyll is originally by &lt;a href=&quot;https://github.com/mojombo&quot;&gt;Tom Preston-Werner aka mojombo&lt;/a&gt;. You can read his blogs &lt;a href=&quot;http://tom.preston-werner.com/&quot;&gt;here&lt;/a&gt;. Out of all of the posts, &lt;a href=&quot;http://tom.preston-werner.com/2008/11/17/blogging-like-a-hacker.html&quot;&gt;blogging like a hacker&lt;/a&gt; talks about the inception of jekyll.&lt;/p&gt;

&lt;p&gt;I have always felt something similar about blogging but never ever thought I could write something like this bottom up. I’d like to share here why I moved to something like this from the traditional blogging engines.&lt;/p&gt;

&lt;p&gt;When I felt like writing, I wanted to concentrate on my content and not on the style or presentation. When I designed, I dint want to go to 10 blog posts and edit CSS classes there. I wanted to separate them out, because content and presentation are two different things they just don’t go well together. jekyll provides enough tools to do this very efficiently. &lt;a href=&quot;http://octopress.org&quot;&gt;Octopress&lt;/a&gt; adds sugar on top of jekyll and gives you a default template, loads of extra plugins and it makes the first jump into something like this less troublesome. This was important to me. I might move my blog to some other platform someday and I want the transition to be smooth. Posts can be written in a standard format, mardkown. You can read more about it &lt;a href=&quot;http://daringfireball.net/projects/markdown/syntax&quot;&gt;here&lt;/a&gt;, and &lt;a href=&quot;http://github.github.com/github-flavored-markdown/&quot;&gt;here&lt;/a&gt; and &lt;a href=&quot;https://github.com/rtomayko/rdiscount&quot;&gt;here&lt;/a&gt;. It gives me the freedom to express things exactly the way I wanted it. In a way it reminds me of stuff like &lt;a href=&quot;http://en.wikipedia.org/wiki/Model-view-controller&quot;&gt;MVC architecture&lt;/a&gt;, though they are quite different.&lt;/p&gt;

&lt;p&gt;I feel so insecure when I write content or code and don’t track it with git. I wanted my data or code to be safe even if my laptop crashed midway a sentence. Its pretty usual for me to push to github per commit. I learned git about 2 years back. Thanks to &lt;a href=&quot;http://twitter.com/noufalibrahim&quot;&gt;@Noufal Ibrahim&lt;/a&gt;. Though it was quite a pain to pick it up, I gradually fell in love with git. Thanks to &lt;code&gt;.netrc&lt;/code&gt; file which will let me push through firewalls like that of &lt;a href=&quot;http://www.nitc.ac.in&quot;&gt;NITC&lt;/a&gt; allowing only port 80, 443 etc without typing passwords again and again. Im gonna write a lot about git in the future I guess. I could track my blog posts as plain text files, VC it with git and make sure that I exactly know when and how some content posted up on the internet on my name changed and react to it. I cant imagine this on blogger. Here I trust SHA1 security of git and &lt;a href=&quot;http://en.wikipedia.org/wiki/Linus_Torvalds&quot;&gt;Linus Torvalds&lt;/a&gt; over the blogger servers run by Google.&lt;/p&gt;

&lt;p&gt;Forgetting all the uber geek stuff, finally jekyll will output a static site to &lt;code&gt;_site&lt;/code&gt; folder, which you should be able to deploy to any web server in the world easily. github adds a bit spice and you can directly push the jekyll code and it will deal the rest. (Tom Preston-Werner aka mojombo is a githubber). I am not sure how well it will fit somebody else’s needs, but this feels like the right tool for me. Ping me for any help and I will be happy to do so :)&lt;/p&gt;

&lt;p&gt;As Tom says,&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;I’ve been living with Jekyll for just over a month now. I love it. Driving the development of Jekyll based on the needs of my blog has been very rewarding. I can edit my posts in TextMate, giving me automatic and competent spell checking. I have immediate and first class access to the CSS and page templates. Everything is backed up on GitHub. I feel a lightness now when I’m writing a post. The system is simple enough that I can keep the entire conversion process in my head. The distance from my brain to my blog has shrunk, and, in the end, I think that will make me a better author.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;UPDATE : I just added disqus comments to my blog and this is how I did it.&lt;/p&gt;

&lt;blockquote&gt;
&lt;ul&gt;
&lt;li&gt;Get your &lt;a href=&quot;http://disqus.com/&quot;&gt;disqus code&lt;/a&gt; and insert it into something like &lt;code&gt;_includes/disqus.ext&lt;/code&gt; &lt;a href=&quot;https://github.com/jaseemabid/jaseemabid.github.com/commit/169706808efb4431fded505fe0052cd2d61fcb6a&quot;&gt;commit&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;Conditionally include it to your post layout &lt;a href=&quot;https://github.com/jaseemabid/jaseemabid.github.com/commit/8c5c565c27cd6f7b0207600880e6fe80ace397a9&quot;&gt;commit&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;Make it look good with too less css &lt;a href=&quot;https://github.com/jaseemabid/jaseemabid.github.com/commit/48298c4cd9af8390084270b77325f86ffd7984ed&quot;&gt;commit&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/blockquote&gt;</content>
 </entry>
 
 <entry>
   <title>Hello world in blogging</title>
   <link href="http://jaseemabid.github.com/04-14-2012/hello-world-in-blogging.html"/>
   <updated>2012-04-14T18:00:00-07:00</updated>
   <id>http://jaseemabid.github.com/04-14-2012/hello-world-in-blogging</id>
   <content type="html">&lt;h1 id=&quot;hello_world_&quot;&gt;Hello world !&lt;/h1&gt;

&lt;p&gt;April 14 seems like a bit late to start work on a new year resolution - “write a tech blog in 2012!”.&lt;/p&gt;

&lt;p&gt;This post is more or less an introduction. I don’t like writing a lot and I plan to put more code and less philosophy here. I would love to share what I know and learn more from people who might stumble upon these random notes.&lt;/p&gt;

&lt;p&gt;I had a blog at blogspot, which apparently died because of low maintenance. I felt nothing good about wordpress or blogspot which made me sit in front of it and write something up. They might be amazing tools for somebody, but they were just not right for me! It was already there and there was nothing I could do to improve it or bend it to make work better for me. It missed the element of hacking, creativity, exploring and definitely I was not learning anything new from it. All you can do there is to write, write and write. Ah, boring! Life for me is all about learning new things and it keeps me ticking all day long. That part was just not there in blogger.&lt;/p&gt;

&lt;p&gt;Then I found &lt;a href=&quot;https://github.com/mojombo/jekyll/&quot;&gt;jekyll&lt;/a&gt;. “Jekyll is a blog-aware, static site generator in Ruby”. Design a html, css template for the blog, write blogs in simple markdown, track with git, push to github pages and, Aha! the blog published. This felt more like my way of things. I could comfortably write blogs when I wanted in my terminal with vim, track and when I feel like publishing it, its as simple as a git push. Its a lot more interactive. I can decide bits and bytes of my blog and I felt more freedom to do things. This suited me well.&lt;/p&gt;

&lt;p&gt;This blog is built with free software tools like &lt;a href=&quot;http://twitter.github.com/bootstrap/&quot;&gt;twitter bootstrap&lt;/a&gt;, &lt;a href=&quot;www.jquery.com&quot;&gt;jQuery&lt;/a&gt; and of course &lt;a href=&quot;https://github.com/mojombo/jekyll/&quot;&gt;jekyll&lt;/a&gt;. I might write about JavaScript, git, Perl, programming in general, web development, jQuery, css, node, backbone, coffee script, gitweb, gsoc, vim and anything like that under the sun as I wish. This will constantly evolve. You will find features added someday, or removed.&lt;/p&gt;

&lt;p&gt;I believe in free software. I publish almost all code I write as free software at github. The source for this blog is pushed to its &lt;a href=&quot;https://github.com/jaseemabid/jaseemabid.github.com&quot;&gt;github repository&lt;/a&gt;. You are free to do whatever you want with it!&lt;/p&gt;

&lt;p&gt;You can find more about me &lt;a href=&quot;/about&quot;&gt;here&lt;/a&gt;&lt;/p&gt;</content>
 </entry>
 
</feed>
