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!

2014 in review

The WordPress.com stats helper monkeys prepared a 2014 annual report for this blog.

Here’s an excerpt:

A San Francisco cable car holds 60 people. This blog was viewed about 2,100 times in 2014. If it were a cable car, it would take about 35 trips to carry that many people.

Click here to see the complete report.

Firefox Un-Synced

Boy am I boiling mad. You’d think after all the hard work the Open Source community (and Mozilla in particular) get from contributors, you’d have a deterministic, working service, but it seems I have been mistaken.

So here’s what happened. My work laptop got kind of messed up due to some Virtual Machine (Virtualbox, in case you’re wondering) configurations and that introduced a bug in my Network centre, thus leading me to format my OS. Now, as any good hacker, I have over a dozen tabs open in my Firefox browser with sites pointing to code, articles, documentation, youtube, you name it, so I have to make sure that I have these links saved somewhere so I can reload them after I re-install Firefox. Delicious is too slow for my liking and while Pocket would get the job done, the tediousness of cleaning up later was something I dreaded.

In comes Firefox Sync, where I already have an account thanks to years of using Firefox on a Linux machine. I could simply create a folder in my bookmarks, save all the links there, hit ‘Sync Now’ and then have all my bookmarks magically restored. This option isn’t there in Internet Explorer (atleast it doesn’t seem to be) so I had to export all my bookmarks from IE to a different partition.

Now, once I was done reinstalling Windows, I signed in, booted up IE and installed Firefox. While Firefox was installing, I decided to import my bookmarks back into IE, but lo and behold, all the bookmarks were already there. It seems Microsoft added a cloud sync to IE right under our noses, so the only extra work I had to do was delete the exported bookmarks. Microsoft 1, Mozilla 0.

Back to Firefox, I quickly sign in and activate sync. I wait with anticipated breathe as my theme and bookmarks start populating. Then I try to find my backup folder, but wait! I can’t find it anywhere!! I open the Bookmarks manager and to my dismay, I see that the bookmarks are the same as the one on my Linux machine and the sync from my work machine seems to have been overridden, hence losing my saved bookmarks. This almost made me cry, and I am sure if you were someone like me, you’d feel the same way. Thus, it turns out that due to a change in the Sync system in Firefox from an older version to a new one, there was some craziness going on and that made my sync account on my work machine invalid. Microsoft 1, Mozilla -1.

After this, the only damage control I could do was remember as many links as I could (which weren’t a lot considering how dependent I was on Sync) and then unlinking and relinking the sync accounts on both my machines so that they both would be in a stable state. Ironically, I noticed that the Firefox version on my Windows machine is greater than the one on my Linux machine. Now hopefully, Sync should work for me without glitches.

However, this was a very disappointing scenario since failures like these in today’s age is almost unheard of. I have learnt my lesson to never depend on Sync again and always export and import bookmarks explicitly. All I can do now is move on and continue with my work, treating this as a cases similar to a HDD failure. I just hope anyone else using sync doesn’t have to face this situation.

Shame on you Mozilla.

HTTP Libraries – Your Best Friends

For a programmer like me, the web is a playground like no other. Not just the information that can be retrieved, but the sheer amount of services and APIs available online make getting structured, useful data a matter of reading a few documentation pages. From social data like Facebook and Twitter to data services like Xbox Music, the web is a repository of rich information that can be manipulated as per your whim.

So while the data is omnipresent on the web, the bigger task is pulling that data from the stores they reside in. This is where the HTTP protocol comes in. With its basic operations like GET, POST, PUT and DELETE, you have a handy mechanism to retrieve, push or manipulate the data on the servers. Now, the HTTP protocol is not as simple a protocol as this blog post makes it seem. Things like HTTP Headers, application types, authentication tokens and other similar things make the task of HTTP based retrieval slightly more complex than it must have been intended to be.

This is where HTTP libraries come in. They handle the most of the heavy lifting and let you focus on the kind of content you are dealing with on a per API basis while abstracting away the inner complexities of packet and protocol rules. As someone who has been doing a lot of development in C# and Python, the HttpClient library in the .NET framework and Python’s Requests libraries have helped me unleash the raw power of the web countless times. To give you a glimpse of this power, you can take a look at how the HttpClient library handles various forms of HTTP content in this Stackoverflow answer.

The simplicity of Python’s requests library makes rapid prototyping with new web APIs a cinch. Simple methods like requests.get() and requests.post() (which do exactly as the names suggest) let you examine in real time the data coming in. This knowledge can then be leveraged to build more robust languages either in Python or in enterprise level languages like C#. The HttpClient library brings amazing power in terms of its ability to not only do various kinds of HTTP requests, such as upload images programmatically, but also manipulate headers and metadata effectively, thus helping you quickly get off the ground with your application. Add to that C#’s asynchronous operation support and you’ll be developing .NET software full-time.

Now while I learn Ruby, I have already exposed myself to the Net::Http library of Ruby to take advantage of this newly discovered ability. I personally will definitely make it a point to master the HTTP libraries of whatever language I use along with the defining features of the language. Accordingly, especially if you are a new programmer, I urge you to do the same and reward yourself with this power and flexibility to leverage existing information to build upon, create cool things and make the world a whole better place!

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.

 

Seeing Spaces by Bret Victor

A workspace to help us better understand the things we build so we have a more scientific approach to whatever we do.

I so need to do this in my work space!!

Rob Pike’s 5 Rules of Programming

• Rule 1. You can’t tell where a program is going to spend its time. Bottlenecks occur in surprising places, so don’t try to second guess and put in a speed hack until you’ve proven that’s where the bottleneck is.
• Rule 2. Measure. Don’t tune for speed until you’ve measured, and even then don’t unless one part of the code overwhelms the rest.
• Rule 3. Fancy algorithms are slow when n is small, and n is usually small. Fancy algorithms have big constants. Until you know that n is frequently going to be big, don’t get fancy. (Even if n does get big, use Rule 2 first.)
• Rule 4. Fancy algorithms are buggier than simple ones, and they’re much harder to implement. Use simple algorithms as well as simple data structures.
• Rule 5. Data dominates. If you’ve chosen the right data structures and organized things well, the algorithms will almost always be self-evident. Data structures, not algorithms, are central to programming.