Integrating Twitter Bootstrap and H5BP in Rails

Disclaimer: There are other alternatives to this setup by means of gems. But this is how I prefer to do it. Manually. With total control.

I have been working on a Rails application (a side project) and wanted to utilize the power of Twitter Bootstrap 2.0.1 and HTML5 Boilerplate 3.0.2 with Asset Pipelining in Rails 3.2.1.

**Requirements: **

Download Twitter Bootstrap from http://twitter.github.com/bootstrap/

Download HTML5 Boilerplate from http://html5boilerplate.com/

Setting up the Rails Application

First and foremost, create a new Rails application by using the command rails new app_name.

Once the app is created, navigate into the app folder cd app_name.

Integrating HTML5 Boilerplate

Now let’s first start with HTML5 Boilerplate. Open the downloaded H5BP zip file.

CSS:

Navigate into the css directory in the zip file. Copy the style.css file into app/assets/stylesheets of the Rails application that you just created.

JavaScript:

Once you’re done with that, navigate into the js directory of the H5BP zip archive. You’ll have script.js, plugins.js and a directory called libs. Copy the plugins.js and script.js into the app/assets/javascripts of your Rails application.

Open the js/libs directory in your H5BP zip archive and you’ll have jquery-1.7.1.js, jquery-1.7.1.min.js and modernizr-2.5.3.min.js. These are the versions available during the time of this post. These will change eventually. Now copy those three files into lib/assets/javascripts directory of your Rails app. If you don’t have the javascripts directory in your lib/assets of your Rails app, create it and then copy the said files.

Next, from the H5BP zip archive, copy the files highlighted in the image below into the public directory of your Rails application.

"H5BP

Next, copy the left out index.html from your H5BP zip archive into the app/views/layouts directory of your Rails app.

Delete the file named application.html.erb (if you’re using ERB) from the app/views/layouts directory of your Rails app and rename your index.html file existing in that directory to application.html.erb. We’ll get back to this file after setting up Twitter Bootstrap.

With that, you can get rid of your H5BP zip archive. Next step would be integrating Twitter Bootstrap into the application.

Integrating Twitter Bootstrap

Open the downloaded Twitter Bootstrap zip archive and navigate to the css directory in the zip archive. You’ll find the bootstrap.css and bootstrap-responsive.css files along with their corresponding minified versions. Based on your requirements, copy the needed files into the app/assets/stylesheets directory of your Rails application.

Now, navigate into the img/ directory in the Twitter Bootstrap zip archive and copy the **glyphicons **files into the app/assets/images directory.

Next, navigate into the js/ directory in the Twitter Bootstrap zip archive and copy the bootstrap.js file into app/assets/javascripts directory of your Rails application.

And you’re done with the Twitter Bootstrap zip archive.

You’ve now successfully placed all the required files in the right places of your Rails application. The next part would be tweaking the Rails application a bit and modifying the default layout.

Changing the Directives

Now, change the contents of your app/assets/javascripts/applications.js file with the contents of this:

Next, change the contents of your app/assets/stylesheets/application.css file with the contents of this:

Change the contents of your app/views/layouts/application.html.erb file with the contents of this:

Important: If you’ve used the minified versions of the files from Twitter Bootstrap, then you should change the directives in the app/assets/javascripts/applications.js and app/assets/stylesheets/application.css to the corresponding minified files.

For ex: in app/assets/javascripts/applications.js, require bootstrap becomes require bootstrap.min.

Also, the reason we are manually “requiring” the files is to maintain the required order of the files. This also prevents overriding of the styles and functionality.

That’s it. You’re done setting up your Rails application with the power of HTML5 Boilerplate and Twitter Bootstrap (Rails BootPlate). Now the rest is in your hands.

If you find anything wrong with the setup, please do let me know in the comments section below. I will make changes and update this post. If you’re interested, you may fork the project at: https://github.com/mohnish/rails-bootplate

**Update: **To make the glyphicons work properly, you need to change the path of the icon files in the bootstrap.css file at Line 1174 and Line 1183 to /assets/glyphicons-halflings.png and /assets/glyphicons-halflings-white.png correspondingly.

Move fast and Break things

""

I have been thinking about implementing a lot of ideas that I’ve had since a while but never had the motivation to do so. That was mostly because I always plan on making things in a perfect way and tend to procrastinate a lot. So, perfection in my case can be dubbed as procrastination. To get rid of that, I have planned on hacking on the ideas that I’ve had and will try to complete them ASAP. Starting from today, I will pick up one idea at a time or even multiple ideas if I feel bored and hack on them. I will deploy them without waiting for my innate judgmental self to kick in and decide if the app is really worth deploying or not. The only priority for the deployment of an app would be that It Works™.

I will open source my applications one at a time so that anyone who finds my hacks interesting can contribute to them. I will also write a follow up blog post for each of these apps explaining the technology stack behind the app, the APIs used in the application and the process of building it.

I hope the information I provide helps you, inspires you and I really hope you guys enjoy using my applications as much as I do.

The Switch

If you’re reading this blog, then you must have noticed that I’ve changed the theme and the URL of my Blog. Well, those are just the superficial changes. I even changed my blogging platform. I used to use WordPress to blog (Of course, occasionally). But now, I switched to a much more comfortable platform, Tumblr.

Till now, I haven’t had any problems with Tumblr. In fact I like the service.

So, here is a little comparison of the two awesome blogging platforms.

WordPress: In a word, terrific. It has almost all features a blogger desires. It’s very easy to setup and use. It has a very neat admin interface. Nothing complex. You have a ton of plugins to customize your blog. There’re good themes, not great, good (the free ones). I’ve used WordPress for over two years. I have always loved it.

Then what made me shift? Well,

  • You cannot have your customized URL for free. You need to pay some amount for that.
  • Even if you pay the amount for the customized URL, you cannot install any plugins because WordPress.com doesn’t allow you to do that.
  • You’ve to purchase the upgrade (which by the way costs you around $99/year if I am not wrong) for customizing your blog with the plugins you desire.
  • A better way to use the powerful WordPress blogging platform is to install a copy of it from WordPress.org on your own server and you’re free to customize it to your needs. That might sound like a great option. But it is not if you’re not planning on shelling out your hard earned money to merely host your personal blog on a server. If you’re willing to pay for your server, then go nuts. WordPress is an amazing platform to blog on. Although it has a few drawbacks.

The main drawback with WordPress is friction. The platform has a certain amount of friction which makes the usability a bit less pleasing. I know this statement might piss off the WordPress fan-boys reading this blog, but it’s a fact.

WordPress doesn’t make me feel like blogging often. I tend to postpone blogging. If I feel like sharing something, it doesn’t provide me that frictionlessness (wow, that’s a big word). This is because of the options you have to post content. Yeah, they do have different post types, but still, they’re not up to the mark.

WordPress’s iPhone app is not that great. I have had it installed on my phone for more than a year and I haven’t used it even once. That is definitely a deal breaker.

This is the exact point where Tumblr kicks in.Tumblr excels where WordPress fails. Frictionlessness.

""

First off, the Tumblr iPhone app is very good. I love it. It is so easy to use and it makes you feel like sharing more stuff. There’re many post types such as Image, Audio, Video, Chat, Quotes and Text. I have used all these post types (except audio) on my blog. WordPress has failed to handle such types well. So this is the point where the friction to share kicks in when using WordPress. When you feel like sharing an image, you think twice and opt for some other image sharing service like Instagram.

Secondly, the free themes offered by Tumblr are lovely. It’s ultra easy to customize your theme to make it look the way you want it to.

The other good thing about Tumblr that I loved is that it doesn’t charge you for using a customized domain name and the service itself is free.

These were the exact things that I was looking for to get rid of my Rackspace server. I was literally paying $132/year for a WordPress blog that I use occasionally. There’re other services which offer free WordPress hosting, but they’re very slow. That is obvious because their services are free and you really can’t expect more from them.

Before I actually made the switch to Tumblr, I even considered Posterous. Posterous was good but not as good as Tumblr. Tumblr has features that really impressed me to make the switch.

And that my friends, is the story of The Switch.

Happy New Year 2012

Bill Gates (B): Okay. So, shall we begin?

Me (MT): Yeah. Sure.

B: So, what’s the reason behind this sudden blog post?

MT: Sudden? pfft…It’s New Year. So, this is my customary post. Of course, since nobody visits my blog, it’s not a surprise that you don’t know about it. Anyhow, moving on…

B: Then why don’t you blog more frequently?

MT: There are two reasons for that:

  • I am lazy.
  • Who reads my blog anyways? (Come on admit it, you’re reading this blog either because you’re jobless or there is nothing on this earth left to do which is lesser boring than reading my blog or you were redirected here by some spammy website)
  • There’re a zillion other Social Networks to catch up with.
  • I am lazy.
  • I am busy with my work and my side projects that I’ve been working on lately.

B: Side projects? Can you elaborate what they are and what you’ve been working on?

MT: No.

B: That was insightful.

MT: Thank you.

B: What were your biggest achievements in 2011?

MT: Well, 2011 helped me gain a lot of respect. Yeah. So much, that the doors open-up themselves seeing me at airports, malls, grocery stores etc.

B: Airports…Have you been travelling too much?

MT: Good question. In 2011, I travelled a lot. I had the wonderful opportunity to live in Eastern, Central and Pacific timezones.

B: That should’ve been fun.

MT: Yeah, no. You might think it was, but no. But that sure helped me make up a new resolution.

B: What is it?

MT: Visit all the 50 states in the United States. Not in just a single year, but at least I should start with this year. And by visit I mean, I should stay in a place for at least a night in any State.

B: That sounds interesting. What are your other resolutions?

MT: There’re a few.

  • Be productive.
  • Donate money.
  • Lose weight in a healthy way and work out at least 18 days a month.
  • Complete what I started.
  • Be less selfish.
  • Be cool.

B: Most of these look like your last year’s resolutions. Don’t they?

MT: Yeah. They are. So what do you get from that?

B: That you never were able to keep up any of your resolutions?

MT: 10 points for the correct answer. Claps

B: Okay, now let’s skip to the last part. What according to you have been the highlights in 2011?

MT: Let me recollect. Thinks Yeah. Here they are:

  • I met some amazing people.
  • I went through a very tough time and survived.
  • Nailed an awesome job at a Start-up.
  • Visited some great/good/bad/ugly places.
  • My country won the cricket World Cup.
  • Had my first ever surprise birthday party ( tears rolling down )
  • Travelled between the dates September 11-15, October 11-15, November 11-15 and December 11-15. Amazing coincidence, right?

B: Sure. Whatever you say. Okay now, with that we wrap up this wonderful conversation. Have a wonderful year ahead. Take care.

MT: That is so kind of you to call this conversation “wonderful”. Anyhow, have a Wonderful and Prosperous New Year ahead.

/me wakes up

CareerTrackr v0.4

I have been actively looking for jobs since the past few days and I couldn’t find an efficient way to properly keep track of all the jobs I’ve applied and the resumes I’ve used for each of the jobs. I tried using some applications but in vain. None of them suited my needs. I even tried using Dropbox to keep track of all the resumes and the job applications. Even that didn’t go well. All of these had their own problems. I needed a powerful and robust solution.

As a result, I developed a new Web Application as a weekend hack, which does exactly what I need, keeps track of all the jobs that I’ve applied to along with the respective resumes. It’s called “CareerTrackr”. I don’t even know if the name is apt to the product that I’ve developed. The only thing that matters to me at the moment is its functionality. A lot of my effort went into designing the interface for the application. As always, I believe in a good UI/UX.

Currently the project is not open to the public. I am testing the project on my own. If I find any bugs (which I am eventually bound to), I’ll fix them and then open it up to the public. Also, I will Open Source the code once I am done with the testing. Once the project is full-fledged, I will post the link and the screenshots. If that sounds interesting to you, wait for my next post on CareerTrackr.

Latest updates

WordPress: First off, let me start off with WordPress. WordPress never fails to impress me after launching new versions of its blogging platform. WordPress 3.2 seems to be heavily loaded with awesome. This seems to be a terrific upgrade from the previous versions. There are loads of new features included in the upgrade.

  • The new Twenty Eleven WordPress theme (which is currently on my blog)
  • Lighter on the resources
  • Newly designed dashboard
  • The best part of the update: Zen mode for distraction free post writing.

**Google: **Google seems to be going crazy with the release of its new products like Google+, Google Music, WDYL etc. Google also launched 2 new versions of their new Gmail interface. Believe me, they look really clean, simple, minimalist and amazing.

Facebook: Facebook launched its Video Calling feature yesterday along with other updates such as Group Chat and newly designed chat interface. The Video Calling feature seems to be activated but the Group Chat feature doesn’t seem to be. On a lighter note, there has been an image doing rounds on Google+. I really am a huge fan of Facebook and I really don’t appreciate the image. But the image makes me really LOL. Just look at the “f” flip when the girl gets slapped. 😀

""

Google+

Google at last had launched its new suite of social tools, Google+, yesterday. I think it’s a great move from Google. I’ve actually been waiting since a long time for this to happen. It was rumored that this suite would be named something like “Google Circles” or “Google Me”. Google had its recent failures by introducing products like Google Wave, Google Buzz, +1 etc. Buzz was supposed to be Google’s answer to Facebook but it didn’t manage to even get proper public attention. Apart from Google+, Google seems to have revamped their Web Search interface (which sucks btw. Come on Google, seriously, a black toolbar with white shadows?), a new widget in Gmail that displays information about the person mailing you and some sweet shortcuts, a floating options menu in Gmail and of course, WDYL.com (What Do You Love). Google seems to be trying very hard to get into the game. I like this kind of competition among the top companies. It forcibly creates a need for creativity, speaking of which, I think you should check out the tour and the videos Google has set up on their Google+ website. Let’s see what Facebook has lined up for us.

My trip to India (Dec 2010 – Jan 2011)

It has been 24 days (already) since I’ve returned to India for my vacation and I am totally enjoying my stay here. It’s been awesome all the while. I met all my friends (School, Intermediate, Engineering and WKU of course) and some of my relatives. I had my favorite Chicken Biryani, Chicken 65 and many other foods which are part of the Indian Cuisine. I had been to almost all the places I love here. I may have put on some weight but I seriously doubt it.

There are two things though which bug me here – the pollution and the Internet speed. Both suck big time. Apart from these, everything is beautiful. I am feeling bad coz I’ve to go back to the US very soon. I do like my place back in the US, Bowling Green (Kentucky), but home is always much more fun. The festivals here are the best part. They are very lively, colorful and festive.

Speaking of festivals yesterday was Sankranthi, the “kites’ festival” as I fondly call it. Sankranthi happens to be my first favorite festival (2nd being Ugadi). I had loads of fun yesterday and the day before, flying kites with all my buddies. It was awesome meeting all my pals at the same time. 1 terrace, 21 friends, million kites, unlimited fun. It reminded me of my childhood days. I used to along with my friends, fly kites from three months before the festival till three months after the festival. That’s the amount of love I have for the festival.

Anyways, let me tell you guys about what we (my friends & I) did yesterday. After it was late in the evening, my friend Subbu said that he should fly a kite far enough until the thread (manja – sharp thread and saadhi – soft thread) was finished. While he was onto it, I suggested that we tie something (some color paper from torn kites) to the thread just to make sure that we know where the kite was (It was getting really dark and the kite was out of our scope). As we did that, another pal, Amar, came up with another idea, stating that we tie some more kites to the existing thread. We did that as well. Now, at this point, he got another idea. This probably was the weirdest part of the fun that we had yesterday. He suggested that we tie even some trash from the left over papers and stuff. So, as per the plan, we did that too and flew it. 😀

But that was not enough. We wanted more fun. Next, it was my friend Prashanth’s turn. He suggested that we burn crackers since it got really dark. I said yes. After a while our minds became even crazier and we started tying the crackers to the thread of the kite, lit them, flew the kite and watched the crackers fire up in the sky. We had an awesome time doing this little experiment of ours 😀 I will definitely miss all this. Anyways, how is it goin’ on with you guys?

PS: Will upload the video and the pics ASAP

Happy New Year 2011

Happy New Year!? Observe the above line carefully. Did you? Good.
I was just trying to play with your attention 😀

Anyways, guys how was your 2010? I hope it was great. Mine was good. Not great. Good. I have learnt practically many things in life in 2010. I am thankful to 2010 for that. I learned that I should not depend on anyone for anything. Do my work myself. And most importantly, not to plan stuff. Planning stuff ruins everything. (In my case) But on an honest note, **FUCK YOU **2010. You literally messed my life up. Absolutely zero productivity, one messed-up head and two B’s to my GPA.

Ok, let me not get emotional here. Let me tell you about my last year’s resolutions and how they went. Yeah. My resolutions. My first resolution was to work hard, which I terribly failed at. I never worked hard. In fact I wasted a lot of my precious time (special mentions: facebook and twitter) and when I had time, I was in neck-deep problems. My 2nd resolution was to try not to be lazy. Had I not been lazy, I would have blogged on the 1st of January itself. So, to hell with that. I hope at least you guys were committed to your resolutions. Anyways, here is my new set of New Year resolutions. (I withdrew my previous ones, punctuality and regularity. Whom am I kidding?)

  • Keep my resolutions this year. Take resolutions more seriously.
  • Be productive.
  • Donate at least $100.
  • Lose weight in a healthy way and work out. At least 18 days every month.
  • Complete what I started.
  • Be less selfish. With that, here I am wishing y’all an awesome 2011. Cheers.

PS: If any of you guys are willing to sponsor a Johnny Walker Blue, please don’t hesitate to stop by. My doors are always open for such generous people.

Be an efficient Shopper this Thanksgiving

With Thanksgiving coming up, I am sure most of you out there are desperately waiting for some really good deals. I have come up with an efficient way to shop this thanksgiving. As a matter of fact, this will make your lives much easier, not just for shopping this thanksgiving, but for shopping online in general. First off, you need the Firefox browser. If you don’t have it, install it. If you already have it, use it. Next, you need to install these two Firefox Addons.

In case you don’t know, Add-ons are extensions developed for your browser. They extend your browser’s features/capabilities making it more powerful, useful and efficient. For example, Adblock Plus is by far the most efficient add-on for Firefox. It blocks away the annoying advertisements from all the websites you visit. There are extensions even available for Google Chrome (I will come back to that later). Once you open on the links provided above, you need to click on the “Add to Firefox” button.

Once you click that, you get a dialog.

Click on “Install Now”. Now, Firefox will go ahead and install the add-on. Firefox then prompts you to restart your browser. Go ahead, restart it. When your browser fires up, you are fully armed. Now all you have to do is search for what you want. These add-ons will do the rest. They show you better alternatives available for the product you are viewing.

The product in the image was actually sent to me by my roommate asking me to review it. I just searched for it in amazon and the add-ons did the magic for me. In this particular case Invisible Hand did a poor job, but PriceBlink came to the rescue. As a result, the price of the product came from $101.00 to $29.95 + Free Shipping. These add-ons work on all the major shopping websites and search engines. So go ahead and have fun shopping online. And yeah, I almost forgot, don’t forget to gift me the best you can this thanksgiving 😛 Happy Shopping. Happy Thanksgiving. Tip: Extensions for Google Chrome can be found here: https://chrome.google.com/extensions