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!

Artificial Intelligence Vs Computer Security

I encountered a very interesting thing about Google a few days back and I’ve been itching to blog about it. Since this post is about something that touches almost everybody with an internet connection (namely, Web Search), I’ll try keeping it as low tech as possible. Also, the issue here is not exactly Security as we know it, but can be thought of as a branch and a way for the author to bring up this point.

First, a short description of what happened: I was using Google image search and was searching for images of penthouses and Google would not return me any images. Instead what I saw, a message stating that the word “penthouse” had been filtered out of the search query and since the query was that word only, the resulting query was a blank. When I deactivated search filtering, that was when I realized what was making Google filter out the word. Apparently, the word “Penthouse” is the name of a famous adult magazine. You have got to be kidding me.

Google Fail

Now this brings me to the main point. For those of you who are unaware of the way Google Search works, I’ll put it down in one paragraph. There are 2 main components to their search: Natural Language Processing and Web Page Indexing. Natural Language Processing (or NLP) is a sub-field of Artificial Intelligence which tries to give machines the ability to comprehend human-like speech and language. We think understanding human language is easy, since we are humans, but this is a very hard problem for machines due to the subtleties of human language like ambiguity and sarcasm. Google sends its query to one of its many servers which runs its NLP programs and tries to make heads and tails of our query as well as pick out the important words on which to return results on. So a query like, “What is WordPress?” will have the keywords “what” indicating the type of sentence/query and “wordpress” which gives the servers a hint at what to narrow their search on. There are many sub-algorithms used to achieve this, like Stemming, Word normalization, etc., and since Google uses Statistical NLP, there is also a lot of Machine Learning involved. The second component, Web Page Indexing, is simply the way Google’s servers store various webpages, so as to allow efficient retrieval of matching, relevant webpages. This where the famous PageRank algorithm comes to play, the algorithm that started Google from the minds of 2 Stanford students. Now, I may not be an expert in these fields, but I did attend a lecture on this technology by two experts from Microsoft Research at Microsoft, so you can take my word for now if you feel you are a bit lost.

So we have AI doing most of the heavy lifting. Where does Security come into play? Well, the filtering of my search results can be construed as the security part. An important part of security is Access Control, maintaining what people can/cannot do on a system. Google filtered my results in order to protect me from data that I might have found offensive, but what it did was also remove legitimate search results.

Now the bigger question is, did I fail to get results because the AI failed to understand my intent, or because the security measures put into place were too stringent to allow the results to come through? From the AI perspective, I would say that the system failed because of something called High Bias and a lack of smoothing in Machine Learning. However, from a Security perspective, I can argue that Google should know better than to block all results of the word “penthouse” and be so strong about it. So even though they have all these PhDs and other super-smarties working for them, this sure was a dumb mistake. This leads to the point of debate whether Computer Security is affecting Artificial Intelligence and vice versa, and in what ways. This is an interesting question for me, as I am personally involved in AI research but, thanks to some friends at Amrita University, have developed a keen interest in security. I am sure, with some probing, we can find some other such examples of conflict. This little problem of Google’s will (hopefully) be resolved in the next few weeks, but the point of debate may not be resolved so easily.