DigitalOcean is fun, but is it worth it?

It’s fun! No doubt about that. If you are a web developer or a cloud enthusiast like me, you will love DigitalOcean. I found it to be a true personification of creating cloud infrastructure that scales as you grow. Unlike the wild pricing jungles of Azure and AWS, DO has a pretty neat price sheet. Creating and deleting VMs is stupendously easy. They have done a great job with their community documentation, which has now evolved into a gold standard for everything servers.  And it’s reasonably cheap! Is there anything to NOT like with DO? Let’s see.

I have moved my blog (this website) from Arvixe (cheap shared hosting, batshit customer support) over to DO (fully managed VMs, apparently great customer support), including my domain. Through Let’s Encrypt, I now even have my very own SSL certificate (see that green https thing in browser’s address bar?). I have hardened my LAMP installation to my liking.

I had opted for the cheapest plan ($5/mo), where my VM’s performance is comparable to what we get in shared hosting. Frankly, $5/mo is not a big amount to pay in exchange for full control of the server and a great technical support.

With the help of their one-click apps, I am very much looking forward to deploying Ruby on Rails and Node.js applications some time in the future.

P.S. If you sign up at DigitalOcean using my referral link, you will get $10 to start with. Wish I knew about it while I was signing up 🙁

Hackeam ’18 – A hackathon that left a lot to be desired

I am back from two days of sheer coding, brainstorming, strategizing and bonding. It was one of the most tiring weekends I’ve ever had. I drove more than 100 kilometers going to and fro.

When Shivam told me about the 2018 edition of Hackeam, I was not immediately excited. It was when I heard about its unique methodology that I decided to participate. Like regular hackathons, its main event is about 24 hours of non-stop coding. Unlike regular hackathons, that’s only one aspect of the whole thing. Their motto says it all:

Trek. Report. Hack. Adapt. Achieve.

This year’s theme was using technology to make a significant social change. It was a good theme — a practical one — given that most hackathons focus on bringing out the best programming talent.

Phase 1 was about picking a category (healthcare, rural, traffic, etc.) and physically going on a “trek” to one of several pre-selected institutions pertaining to your selected category. This was to encourage participants to be “on the ground” and to talk to the players involved before identifying a problem to solve. Yep, everybody was free to choose their own problem to solve. This was both practical and inspiring. Post our trek, we were required to submit a report on the same. The topic we identified after the trek was Remote Rehabilitation of Patients with Post-traumatic Stress Disorder and Motor Impairment. A PDF of our solution’s design document is available here. Excerpts:

Rehabilitation of PTSD and motor impaired patients is heavily dependent on follow up therapies. While a PTSD patient goes through several psychotherapy sessions, a motor impaired patient takes up many physiotherapy sessions during their recovery period. There are two major problems that come in the way of a patient being able to take up therapy sessions: cost and mobility.

Our solution addresses these problems through a system of applications that provide an effective and cost-free way of delivering professional-grade therapies to patients in the absence of a doctor, and automatically tracking their progress. It is to be noted that our solution is NOT MEANT TO 100% replace doctors and medical experts but rather aims to: ● save patients additional costs that they would otherwise spend doing follow up sessions, and ● make the entire process hassle-free and fun to improve motivation levels for taking up sessions at home.

Phase 2 was the actual hackathon. It was time to put our ideas to code. We were competing with 25-30 other teams (of 2-4 participants each). Only 10 would make it to Phase 3. The venue was the renowned Netaji Subash Institute of Technology (NSIT) in Dwarka, Delhi, where getting an admission is — quite literally — more difficult than getting on a plane to Mars. The college buildings are in pretty bad shape. I can write a whole book on how pathetic the venue was, but that’s for another time. When Shivam and I entered the main auditorium for the opening ceremony, all we could see were throngs of young guys and girls. All students, no working professionals? It was an unsettling feeling for the both of us. We knew beforehand that this hackathon would attract more students than professionals, but just two professionals? Really? So out of place felt we that we broached the main organizer (and head of the computer science department) Dr. Shampa Chakraverty to confirm whether it would be really fair for us experienced folks to compete with students who had had zero real-world experience.

2DEA26F9-BBC8-44FE-899D-C4E0377B79C5

Everything post that point was delayed – snacks, dinner, midnight snacks, evaluations, sleeping arrangements… you get the idea.

Anyway, after 2 hours of delay, the hackathon finally began. We got to work straight away. Everything post that point was delayed – snacks, dinner, midnight snacks, evaluations, sleeping arrangements… you get the idea. The organisation was pretty screwed up, and a lack of leadership and direction was clearly showing among the organizers, who were as clueless about things as we.

Shivam and I interacted with a few teams, and secretly stopped by to see what others were working on. We were pretty blown to see how much smarter the upcoming generation was in terms of both technical skills and ideation. Then again, a sizeable number of participants were first and second year students of NSIT, that attracts one of the best and the brightest of India year after year.

Writing three applications and a cloud backend in just 24 hours was a tiring yet fun experience, but not something we had not done before. As software professionals, we are used to doing coding marathons every now and then to meet deadlines. We used node.js, Angular, Ionic, Bootstrap, Raspberry Pi, Microsoft Azure, and a whole bunch of other cool stuff to create our apps. In sum, we enjoyed coding, thinking, coding, rethinking, going out on a stroll, coding, eating, and coding again.

Night went on, and morning came pretty fast. We were visited by 4 different evaluators, all of whom appreciated our idea and solution. We wrapped up our coding a couple of hours before the official closing time. Results of Phase 1 and 2 would be announced soon. We gathered in the same auditorium that we had visited on day 1. It was full of young guys and girls waiting to hear good news. After two hours of mindless waiting, Dr. Chakraverty announced a good news – instead of 10 the final shortlist had 12 teams. Then came the bad news – we weren’t one of 12. In fact, none of the 5 other teams in our room was selected, despite this one particular team getting extremely rave reviews from our final and main evaluator. As it was already very late, Shivam and I left the place. Empty handed. There were no physical participation certificates to be collected. As disappointed as we were, we took away not dismay but the learning experience and a resolve to never in future participate in students’ events.

Was it a weekend well spent? Maybe not so much.

Our solution’s full source code is available on github. Perhaps someone will find it useful.

P.S. We were later informed by a student organizer about our winning an award in a special category (that was perhaps invented on-the-spot after realizing that a lot of good ideas were not recognized in the top 12). We had awarded the Best Research award but we weren’t there to receive it.

Rails: Two different layouts with two different CSS frameworks

I have said it before. Rails is awesome. I find myself creating a new web application in Rails rather than, say, ASP.NET or even PHP much more often. It is intuitive and uncomplicated. Command-line tools and pre-handpicked components allow me to focus more on writing code and implementing business logic.

While working on a Rails application, I was faced with a (reasonably) common situation — having one layout for the end-users and another for administrators. I had my admin pages all written and finished. My CSS framework of choice at the time I started was Ink, mostly because of its fresh UX and Bootstrap‘s aging grid system. When I was about to start with end-user pages, I found out about the release of Bootstrap v4.0.0 (something I had been waiting for since long). The examples made using this version were very much in line with what I wanted for my own purpose. I had made a decision: use Bootstrap for end-user pages and stick to Ink for the admin interface. Realizing this decision in Rails was not as easy as I had thought.

As good as the Rails documentation is, I frequently find myself wanting for more code snippets and examples for things that are apparently presumed to be too basic to explain. After stackoverflowing into the problem and applying some common sense, I came up with the following solution.

Step 1: Download and put the second CSS framework in “vendor”

Say, you want Bootstrap as your second framework. Download it and unzip it inside your app’s vendor folder.

Step 2: Add “vendor” to assets path

Instruct Rails to include the vendor folder while searching for assets (css, js and image files) by adding this line at the bottom of config/application.rb.

config.assets.paths << Rails.root.join('vendor')

Step 3: Create a new CSS manifest

Create a new file at app/assets/stylesheets/bootstrap.css.scss. Import in this file all stylesheets required by the CSS framework to work. Note that you do not specify .css extension for imported files.

/*
 * This is a manifest file that'll be compiled into customer.css, which will include all the files listed below.
 *
 *= require_self
 */
 
@import "bootstrap-4.0.0/dist/css/bootstrap.min";

Step 4: Create a new JS manifest

Do the same at app/assets/javascripts/boostrap.js.

// This is a manifest file that'll be compiled into customer.js, which will include all the files
// listed below.
//
//= require bootstrap-4.0.0/assets/js/vendor/jquery-slim.min.js
//= require bootstrap-4.0.0/assets/js/vendor/popper.min.js
//= require bootstrap-4.0.0/dist/js/bootstrap.min.js
//= require bootstrap-4.0.0/assets/js/vendor/holder.min.js

Step 5: Set the two manifests to precompile

Add this one line at the end of config/initializers/assets.rb. This will ensure bootstrap.css.scss and all stylesheets it imports are compiled as bootstrap.css. Similarly, all Bootstrap JS files will be compiled into a single file bootstrap.js.

Rails.application.config.assets.precompile += %w( bootstrap.js customer.css )

Step 6: Create a new layout

This is assuming that you already have a CSS framework properly setup in your layouts/application.html.erb. Create a new file at layouts/bootstrap.html.erb. Use any example from Bootstrap’s official website as an inspiration to fill this file. Mine looks like this:

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
 
    <title>My Application</title>
    <%= csrf_meta_tags %>
    <%= stylesheet_link_tag 'bootstrap', media: 'all', 'data-turbolinks-track': 'reload' %>
</head>
 
  <body>
 
    <div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom box-shadow">
      <h5 class="my-0 mr-md-auto font-weight-normal">Company name</h5>
      <nav class="my-2 my-md-0 mr-md-3">
        <a class="p-2 text-dark" href="#">Features</a>
        <a class="p-2 text-dark" href="#">Enterprise</a>
        <a class="p-2 text-dark" href="#">Support</a>
        <a class="p-2 text-dark" href="#">Pricing</a>
      </nav>
      <a class="btn btn-outline-primary" href="#">Sign up</a>
    </div>
 
    <div class="container">
      <%= yield %>
 
      <footer class="pt-4 my-md-5 pt-md-5 border-top">
        <div class="row">
          <div class="col-12 col-md">
            <img class="mb-2" src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" alt="" width="24" height="24">
            <small class="d-block mb-3 text-muted">© 2017-2018</small>
          </div>
        </div>
      </footer>
    </div>
 
    <%= javascript_include_tag 'bootstrap', 'data-turbolinks-track': 'reload' %>
</body>
</html>

Pay special attention to these two lines:

<%= stylesheet_link_tag 'bootstrap', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'bootstrap', 'data-turbolinks-track': 'reload' %>

First one will load the compiled bootstrap.css as a link element. Second one will do the same for the compiled bootstrap.js.

Step 7: Use the new layout in your end-user pages

Start by setting up the routes. We want all requests to /p/:page to be redirected to the show action in our “pages” controller. Eg., /p/home => pages#show, /p/pricing => pages#show. Add this to config/routes.rb:

get '/p/:page' => 'pages#show'

Now, create the pages controller, app/controllers/pages_controller.rb, to serve the end-users:

class PagesController < ApplicationController
  layout "bootstrap"
  def show
    @page = params[:page]
    if @page.to_s.empty?
      @page = "home"
    end
    render template: "pages/#{@page}"
  end
end

The last thing we need to do is create views that will be loaded in our new layout. Create a new directory pages inside app/views. Inside this, create home.html.erb and fill it with some HTML. Create as many additional views as you want. A Bootstrap view looks like this in my application:

Blind cricket

IMG_20170728_094438
Players from the Indian Blind Cricket Team sharing their experiences at Disability Matters Asia Conference 2017 in Bangalore.

Wikipedia defines blind cricket as “a version of the sport of cricket adapted for blind and partially sighted players.” Before yesterday, I didn’t know it existed. Shame on me!

It is not every day that you get a chance to meet players of an international sports team. That happened to me at Disability Matters Asia Conference 2017, yesterday, July 28, where I met players from the Indian Blind Cricket Team. Although the conference was about innovations and best practices in the field of accessibility in software, prominent differently-abled people were invited to share their experiences. Top IT companies were invited to speak on accessibility in software, with Accenture being the lead event sponsor. The event was enlightening in many ways. I have separately written about my conference experiences on LinkedIn.

A blind cricket experience zone had been set up inside the conference hall. This was a pitch-sized area, bound by nets, where one could experience how blind cricket was played. Non-blind people were blindfolded before they were handed the bat. It was not surprising to see those people unable to even make contact with the ball. I did not try my hands at batting but watched intently when others did so.

IMG_20170728_130838
A blindfolded person tries his hands on batting.

Blind cricket is played with an auditory ball – a hollow ball filled with stuff that produces a rattling sound when the ball is rolled. The bowler, before throwing the ball, feels the stumps or the crease to make a sense of direction. Using their non-bowling hand as a rudder, they throw the ball with an underarm action. The batsman uses sweep-shot to maximize the chance of hitting the incoming rattling ball.

Each team has four players who are totally blind, categorized under B1, three players, partially blind, categorized under B2, and four players, partially sighted, categorized under B3. It is nothing short of amazing to see how the fielding side strategically uses this combination to cover the entire ground.

Blind Cricket is globally governed by the World Blind Cricket Council (WBCC). It has 10 member countries, including all regular cricket test playing nations such as India, Pakistan, Australia, South Africa, etc. The governing body in India is Cricket Association for the Blind in India (CABI).

The whole experience was enlightening. I think it was a great idea by the organizers to arrange for this experience. As an IT professional, I found it particularly interesting to see in reality how the blind play sports. I was already getting some ideas about certain design elements to use and not use while creating accessible software.

Leading the contingent of players, present at the event, was Shekhar Naik, mentor and former captain of the Indian team. Naik has captained the Indian cricket team to two major victories – the 2012 T20 world cup and the 2014 world cup. He was awarded the Padma Shri earlier this year by the Government of India for this feats. It was an absolute honor to meet the man in person: a humble and down-to-earth guy, always ready to make friends.

Naik is partially blind and plays in the B2 category as wicketkeeper-batsman. He told me the stories of other players that he knew as well as his own. A lot of players in the team are congenitally blind, mostly due to heredity. In Naik’s own family, 15 others have some form of visual impairment.

To sum up, DMAC was one of the best conferences I’ve ever been to. I got a chance to meet some incredible personalities who have achieved phenomenal success despite struggling with even the simplest of things every day of their lives, things that fully abled people take for granted. I am glad that I now know something about how the blind play sports. This has opened up my thought process for designing more accessible software. I close my blog post with this beautiful picture where I am standing along side the Indian cricket team (Naik is wearing an orange cap).

IMG_20170728_131151

IMG_20170730_082458