Responsive Responsibility

Today’s modern web is complex.

Not only do we have all the various programming languages, frameworks, standards and libraries (which is complicated enough already) for programming the web, but adding to the entropy is actual hardware! Yes, today screensize and form factor matter as well, especially since half the world owns either a smart phone or a tablet. Gone are the days when you had to check for cross-browser compatibility, these days very few sites are actually legible on mobile phones, forget about providing the awesome desktop functionality.

So we have the problem, now what’s the solution? It is a little something called Responsive Web Design. Responsive Web Design is a set of guidelines and techniques which one can use to enable their web pages to look good on various form factors, without having to worry about serving (and maintaining) different web pages based on the device. Sound confusing? Why don’t we check out an example?

Head over to my webpage. Hopefully, you opened it on desktop. Take in the pure concentrated awesomeness and then open the same site in a mobile browser. Do you get it now? The mobile version has streamlined itself automagically to provide the best user experience for that device and screen size. That, ladies and gentlemen, is the crux of responsive design.

Now how do you enable your website to be responsive? For starters, you can use the amazing Twitter Bootstrap library. There are other options like Foundation, but for a beginner, Bootstrap is by far the best! It also helps that Microsoft has an introductory Bootstrap course on EdX. Going through the site, it is quite easy to grasp Bootstrap since all you essentially do is use the CSS and JS files and simply add classes. Sample galleries and websites, and a plethora of questions on StackOverflow just ease things further. Of course, you can always go the whole monty and install Node, Less and Sass and really customize your Bootstrap files. What really happens under the hood is that we make use of CSS Media Queries to define screen size and viewport breakpoints, depending on which, different CSS rules are applied to your page, hence the magic re-adjustment. There is also a bit of JavaScript involved, but thankfully, Bootstrap already handles most of that for us.

Just to demonstrate how important responsive design is, every modern browser now comes with a responsive mode in their debugging tools, so you can quickly verify what your site looks like on a wide variety of devices. Even Google, whose entire business relies on the internet, has a sweet tutorial on responsive design while being framework agnostic.

In conclusion, making your website look good on all form factors is imperative in today’s day and age. With the internet becoming the backbone of the digital age and handheld devices taking preference over conventional desktops, it is our responsibility to be responsive.

Eviva!

The Sound Of Commits

Well, all I can say is that I’ve been busy. How busy you ask? Let this post answer it for you.

I had come across the Github API a while back and ever since I have been contemplating ways to use the data provided by the API in a meaningful way. After weeks of brain-wracking, I finally hit upon the idea that why not render the commits for a year long period as musical notes? If you have a Github account, you might have noticed in your “Repositories” tab there is a wonderful little visualizer that has blocks of varying green colorations, showing your Github activity over the past 1 year. Why not audiolize it?

So first things first, I head over to Github’s API docs. Now the beauty of Github’s API is that it to read user and public repository a.k.a. repo information, I don’t need to sign in. That enabled me to write the whole thing in client side Javascript and not worry about Cross Origin Resource Sharing (CORS) since the audiolization would be hosted on my website. This made my task much, much easier (and more hassle-free for the user). Some quick jQuery setup and custom wrappers to the AJAX calls had me pulling the data in a jiffy.

The next step was preparing the data, i.e. getting the commits from the last one year for a user across repos and grouping them by date. Github allowed me to limit the data returned to the past 1 year, but grouping it was still an issue. That is where moment.js comes in. This intuitive and feature-rich library gave me all that I needed to manipulate and compare the date-time signatures on each commit as well as taught me the standard for representing dates and times. Couple this with a few articles on Javascript promises and closures (Lisp throwback!!) and I have my data ready to be audiolized.

A small digression: For all my difficulty with JS and its weak-typing model, the fact that Lisp has inspired JS and that JS allows me to come from a functional programming school of thought, made my code really clean and easy to work with. I was strictly against creating a global variable to store and work on the final data in the JS file since side effects from functions could mess up the data and be really hard to track down and fix. Functional programming, which by design avoids side affects on your data, really helped me out and JS’ closures really sold me to the language.

Now for the music. Musical Instrument Digital Interface or MIDI is the de facto standard for rendering music and this is no different on the web. Here is where I found this amazing project called MIDI.js on, you guessed it, Github! I forked the repo so I had my own version to play around with, and after some digging around since the documentation was substandard, I had attached MIDI musical notes to my commit data.

After some quick HTML and CSS where I set up the web page, I finally published it to the web. Sharing with people via Facebook and Twitter helped get some good feedback on it. You can find it here. Be sure to try it out, especially if you have a Github account. Seeing all my Github activity rendered as music was a joy like no other and I was glad to be able to help others see that joy as well.

Let me play you a song of your commits. If you have any suggestions, do feel free to comment.

 

2 Month Notice

Well, technically it’s been more than 2 months since I joined my new workplace, but I guess it is high time I gave an update as to what I am up to.

As expected from working at one of the top tech companies in the world, there is a lot of work (and fun), but there is a great potential for learning as well. And man have I learned a lot!! In my first month here, I worked on a Windows 8 Modern UI app and understood the architecture of building a Modern app hands-on. Not only that, but I also had to integrate the app with a web service using Javascript (which, by the way, is my weakest programming language), and after a lot of fumbling in the dark, I can now bend JS to my absolute will (Evil laughter)!!

In my free time, I got together with a senior of mine, Prakhar Gupta, who works at the same company albeit in the Bangalore office, and quickly coded up a Windows Phone 8 app. The app basically acts as a birthday reminder for all those like me who are poor at remembering dates. Expect to see the app in the Windows Marketplace soon! Along the way, I have also been drawn to Cloud Computing, thanks to the amazing Windows Azure (they have tutorials on creating Android apps with an Azure back-end), and hope to soon gain certifications in Cloud Computing. This along with some other projects that I really can’t talk about (Non Disclosure Agreement, you see) have made my life coding bliss!!

Oh, and did I mention that I have also started development on the Leap Motion? Expect to see more on that and Kinect development in my next few posts. This is from a practical standpoint. From a knowledge standpoint, I am learning everyday. I have learned about good design and best practices while coding in C# and am also re-exploring functional programming with F#. SQL and database querying now seem to come more naturally than ever, and I have also started looking into query execution plans to further optimize my SQL code. I have also been trying to read up on the Common Language Runtime (CLR) which so far looks great with the way the CLR handles managed modules and the variety of support provided for different languages, but with all the work and coding going on, I am having a hard time actually removing time for myself to read more. Will have to stretch more on the reading front!

In the pipeline are some more apps (maybe on Android?) and reading papers and texts on NLP (for WishWasher) and Computer Vision (which is still my favoured field). I do seem to be loaded with work, but hopefully, I will keep inventing things and inspiring you to try new things. Keep an eye out for more on this domain.

Eviva!