Why Pokemon Go! Is A Disappointment

Close to 6 months ago, the much awaited mobile game, Pokemon Go!, was released on most major mobile platforms. Now if you’ve been playing the classic Pokemon games series from Gamefreak, all the way from the GameBoy Color to the Nintendo DS, you will know that as kids, we wanted nothing more than to run into the wilderness and encounter rare pokemon to befriend, capture and battle. Go! gives us all of that. From running around catching pokemon, to challenging Gyms and Gym leaders. Unfortunately, that is where the similarities stop.

As someone who has grown up playing all the Pokemon games on the GameBoy systems, seen the first 12 seasons of the Pokemon anime and wasted a good chunk of money on trading cards, Go! was an exciting prospect that was eagerly awaited. After a good year of patience since Niantic made its initial announcement, the app was finally on the App and Play stores, and subsequently on my phone. The app was soon the most downloaded app in the history of the Play store and Nintendo stock rose an astounding 21% (which is ridiculous since a 2% increase is considered solid business). This app was next big thing.

The first few hours of Go! were bliss! Creating an avatar, selecting my starter, just walking around the city, using the proximity indicator to locate those ultra rare Pokemon, it was the largest nostalgia rush I’d had since I graduated college. So far, so good. Then it all changed. The first peeve was the candy system. For those of you in the know, (rare) candy is something we use to level up any Pokemon quickly, but the right way to do it is to battle Pokemon and give them experience points, a.k.a. real life hard-work. The candy system in Go! is nothing of the sort. It requires us to catch more Pokemon of the same species in order to collect more candy that is specific to that Pokemon species and use that to level them up. The concept of peer battles is non-existent and that killed some of my interest in the app. It was still a great app, tonnes of fun, and gave me the required motivation to get my backside into gear and move out of the house. However, constantly catching the same Pokemon again and again, just to level up the first one of that kind you caught, soon became redundant and boring. Strike one.

Then came the next big update: the removal of the proximity indicator. The footstep indicator that displayed how far you had to walk to find a Pokemon was completely removed and thus made the game almost unplayable. When you have to rely on dumb luck to find a Pokemon you’ve really been meaning to catch, it is no longer a game. This was compounded by the fact that Go! comes with no sort of instructions or gameplay objective whatsoever. Suddenly it seemed that the good people over at Niantic had no idea what they were doing. Strike two.

The final kicker for me was the proliferation of illicit means to locate Pokemon. Pokemon trackers and websites displaying where different kinds of Pokemon were located started showing up all over the internet. These were illicit since Niantic had never released an official API and they were pretty much reverse-engineered and hacked together. Niantic made poor choices trying to curb this kind of unfairness, either not addressing the issue, or making the game completely unplayable. By this time, the number of active users of Go! had declined drastically and I was pretty sure that Go! was in doldrums.

As I sit at my desk with the DesMuMe DS emulator running in a different window with Pokemon Platinum, I am reminded of all the reasons why Pokemon is a global phenomenon. Playing the original game series by GameFreak showcases how to take a good idea and make it great through sophisticated execution, something a lot of companies have taken upon themselves in recent times. In comparison, Go! was doomed by its own popularity and the poor decisions by Niantic. As I head to face the first Gym Leader in Pokemon Platinum, I’m quite content having given up Go! and gone back to the classic series. At the end of the day, you gotta catch ’em all!

Easy Password Reset With Django

I’ve recently been playing around quite a bit with Django and full stack development. While this has not been primarily affiliated to my research, it has helped me work with other research groups that need custom web applications in order to deploy their work.

Django as a web framework is really powerful. With easy URI schemas, a built-in ORM with supercharged capabilities, and a plug-and-play, modular architecture, there seems to be no limit to what django can accomplish. However, I recently came across a stumbling block where I needed to do user password recovery and it for some reason, I find the documentation sorely lacking, while other blog posts have conflicting (and many times, incorrect) opinions on how to accomplish this seemingly simple task.

Here I’ll show you the django-ic way of doing password recovery for your site, which is both and easy and, more importantly, secure. Note that by recovery, we always mean a password reset, since showing you your old password in plain text is akin to asking someone to hijack your account. Assuming you have your user models set up and user registration and authentication working well, let’s step through it.

Models

This is the easiest bit. django handles password recovery with the User model directly, so let’s move on.

URL Conf

We first modify the urlconf so that we can naturally move onto the views from there. This is the most involved step of adding user password recovery, but it is more of configuration rather than code, keeping in line with django’s batteries included  policy. First we import django’s auth module to make our life a lot easier

from django.contrib.auth import views as auth_views

Password Reset

We add a URL that the browser connects to when the user clicks on a password recovery button.

url(r'^account/password_reset/$', auth_views.password_reset, {'post_reset_redirect': '/account/password_reset/done/', 'template_name': 'account/password_reset.html', 'email_template_name': 'account/password_reset_email.html'}, name="password_reset")

This creates a link /account/password_reset which calls django auth’s built-in password_reset view. The password_reset view accepts custom templates for the page as well as the email that gets sent out, so we pass those in as a dictionary (note the key values).

Password Reset Done

This is the page that you see that notifies you that your recovery email has been sent out.

url(r'^account/password_reset/done/$', auth_views.password_reset_done, {'template_name': 'account/password_reset_done.html'})

This is similar to the above, but we just change the template that we will use to one that gives the user the message clearly. Don’t worry about the link in the email being insecure, django creates a URL with a unique UIDB64 hashed identifier and manages it for you.

Password Reset Confirm

This is where we do the actual password reset. The user is presented with a form that asks them to input their new password and confirm it. django takes this form and updates the password securely without you having to touch a line of code.

url(r'^account/password_reset/(?P[0-9A-Za-z]+)-(?P.+)/$', auth_views.password_reset_confirm, {'template_name': 'account/password_reset_confirm.html', 'post_reset_redirect': '/account/password_reset/complete/'}, name="password_reset_confirm")

In the above URL definition, we accept the link that django sent out in its email with the unique UIDB64 hash and the unique token. To customize the response, we pass in a dictionary indicating what is the template with the form we wish to serve as well as where to submit the POST request of the form. The form gets posted to the link we define below.

Password Reset Complete

Once django takes in the new password and updates your password, it will redirect to this page to show that the password reset was successful.

url(r'^account/password_reset/complete/$', auth_views.password_reset_complete, {'template_name': 'account/password_reset_complete.html'})

The final URL, this one accepts the password recovery form as a POST request and serves up the confirmation template that displays to the user if the password was successfully reset or no.

Templates

Finally, we look at the design and tidbits of the templates whose names we were passing into the URLs above.

  • “Password reset” only has a form to accept the email address or username of the account whose password we wish to recover.
  • “Password reset done” is a simple message indicating that a recovery email has been sent out.
  • “Password reset email” is the template where you can define how your password recovery email looks like so that your organization looks more professional.
  • “Password reset confirm” should just be a template with an if block checking for `validlink`. If `validlink` returns True, we define a form that takes two fields, `form.new_password1` and `form.new_password2`. If not `validlink`, we display an error message stating that the recovery link is no longer valid.
  • “Password reset complete” is again a simple notification template which is displayed if the password recovery was successful.

Emails

The last part is configuring the email account from which to send the recovery email. Although django comes with great helper functions for sending emails, it does not have its own SMTP server which is needed to send emails.

Thankfully, we can save ourselves the trouble of setting one up by using a service such as Gmail or Outlook. Since Gmail is wildly popular, let’s use that.

Firstly, go ahead and create an account on Gmail which will serve as the account from which the emails will be sent out. Once you have the email ID ready, go to your settings.py in the main django app and put in the following settings –

EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend'
# Indicates that we are using gmail
EMAIL_HOST = 'smtp.gmail.com'
# The port number for the gmail SMTP server
EMAIL_PORT = 587
EMAIL_HOST_USER = ''
EMAIL_HOST_PASSWORD = ''
EMAIL_USE_TLS = True
DEFAULT_FROM_EMAIL = ''

Please note that you should not be putting the password to your email account (or any password for that matter) in plain text in a code file, and then checking that into source control for the world to see. You should be inserting that password via environment variables or some other secure mechanism.

Conclusion

And that’s it! We’re done. Without writing any sort of complex cryptography code, we have incorporated a full password recovery system into our web app. This is one of the many cool things you can do with django, and hopefully, this guide has explained this feature in a way which was easy and concise.

Solemn OAuth2

Considering all the recent reading I’ve been doing, I decided to tackle a new challenge and read a complete RFC for a change. A RFC (literally Request For Comments) is a document that proposes a new idea for the world to comment on and if it looks good, an organization such as the Internet Engineering Task Force, better known as the IETF, goes ahead and approves it for large scale use. Reading a RFC can be a lot of fun since some of the biggest ideas of today, such as TCP/IP, HTTP and REST started out as humble RFCs. For the same reason, I decided that my first RFC read would be about the ever-so-confusing OAuth2 protocol, described in RFC 6749.

In today’s mobile and web driven world, OAuth2 has been the mainstay that has allowed the whole world to share and access data securely. If it wasn’t for OAuth, things like Facebook login, Gmail and OneDrive would not have been possible. However, OAuth2 can be tricky to get right, not because it is a difficult protocol, but because a layman would be wrapped up more in the jargon than the actual workings. I hope to review OAuth2 and provide a simple working example for everyone to benefit from.

Let’s get some terminology out of the way. The RFC describes 4 entities. Let’s take a simple example of a Twitter (because of its ubiquity) API client to create analogies:

  • Resource Owner – This is you, the user, who stores your data (or resource) on the Twitter servers in the form of tweets, likes and other micro-blogging related data.
  • Resource Server – This is the server owned by Twitter that makes sure your data is securely and safely stored.
  • Client – This is the web or mobile app that we want to use to get access to the data from anywhere in the world. Let’s assume it is a mobile app for now.
  • Authorization Server – This is an independent server (again run by Twitter) whose job is to verify that you are the owner of the data or have been granted access by the owner to access the data. Let’s call this the Twitter Auth server.

Now that that’s out of the way, the basic flow of OAuth 2 is:

  1. The API Client asks the Twitter Server for authorization (either directly or indirectly via the Twitter Auth server) to access the desired resource.
  2. The Twitter Server gives the Client an authorization grant.
  3. The Client then presents the authorization grant to the Auth server, authenticates itself and gets an Access Token in return.
  4. The Client can now use the Access Token to gain access to the desired resource on the Twitter server and perform the function it was designed for.

There you have it! OAuth2 is that easy. The specific implementation/URLs vary, but the general flow is common.

However, we still haven’t talked about the Authorization Grant, why is it important and what that means for the kind of app you’re developing. So let’s quickly go through that:

  • Authorization Code – Here the client simply asks the resource server to redirect itself to the auth server in order to perform the authentication and authorization. Via a ‘redirect_url ‘ parameter, the auth server can send the resource owner back to the desired URL to continue the flow. This is the most common OAuth2 flow you will see.
  • Implicit – Rather than provide an authorization grant, the auth server directly provides the access token, thus greatly simplifying the flow. This is especially useful for websites using Javascript where Javascript can directly access the resource. Note that authentication is not performed since the access token is already provided.
  • Resource Owner Password Credential – This involves directly sending your username and password to the resource server as the authorization grant, over the wire. This is risky and not recommended unless the resource server is highly secured and trusted by your client, which is almost never the case.
  • Client Credentials – Again uses the client’s credentials to authenticate and authorize but only for resources that the client controls or for resources that have been predetermined, and not necessarily all available resources. This flow is not very common so I wouldn’t worry too much about it.

Well that’s it for the salient stuff of the RFC. Of course you can delve deeper into it if you are comfortable with Computer Security terms, but I hope that after reading this post, you are more comfortable understanding how OAuth2 functions and how you can leverage it to power your app.

Eviva!

Raspberry Pi Recipe

Being a Computer Scientist sure has its perks. Take for instance one occasion where I decided to take part in a company’s programming challenge just for the heck of it. The result was a brand new Raspberry Pi B 2! Yet another perk.

For the uninitiated, the Raspberry Pi is a credit card sized computer. Yes, when I say computer I don’t mean an embedded device that you program with some kind of esoteric language or a weird mutation of your preferred language (yes Processing, I’m talking about you), but a computer much akin to the one you use at work or at home to get through your day. Of course, being that small a computer means that it’s not as powerful as your Intel machines or Macbooks, but you’d be surprised by what you can accomplish.

Alas, to get started is the trickiest bit on the Pi! It’s small and cheap, but it lacks a lot of things such as secondary memory, wifi support, bluetooth connectivity and other things. So if you’re interested in working with a Pi, you’ll be interested in getting these items as well, but the choices are pretty overwhelming (and in some cases, exorbitant). That’s where this post comes in. If you follow the guidelines here, you’ll at least be up and running in no time.

First things first, the Pi is a computer and computers need operating systems to do a lot of the heavy lifting for you. You can head over to the Raspberry Pi Foundation page and get the images for the various compatible OSes. I personally prefer Raspbian (Jessie over Wheezy, since it is newer) and Windows IoT Core, since the Arch Linux image reportedly has problems and I outgrew Ubuntu. However, we have a small problem: we need a memory card to save the image on! Amazon to the rescue. I was able to order a 32GB card for approximately $10. You can get any card you like, just make sure it is a Class 10 Micro SDHC card. You can’t really go wrong with the memory card if you just buy the right type.

Installing the image is super easy and I wholly recommend following the procedure given by the distribution of your choice. I myself just needed 5 clicks to get the memory card ready. Next, you’ll want to actually see the device in action, so you need a screen since the Pi, sadly, doesn’t have one built-in. The Pi supports HDMI which is absolutely great since digital signal trumps anything else in terms of video communication. Either get an old TV monitor with HDMI ports or borrow one from your friend, though I recommend getting your own. You can get a good HDMI cable for super cheap off Amazon (~ $5).  Insert the memory card, hook up the Pi to the screen with the HDMI cable, and use your standard phone charger to power the Pi up. You should see it boot up in the coolest way possible.

Finally, what’s the point of having a portable mini-computer if it doesn’t connect to the internet? Pick up a Wi-Fi USB adapter (I used Edimax), and ensure it is Pi compatible. It should mention on the label if it supports the Raspberry Pi or not. Plug that in, let the drivers do their thing, and you should be good to go. Optionally you can also get a Bluetooth USB module that lets you connect wireless headphones and stuff, but that depends on your choice.

And there you go! Your Pi is all baked and ready for awesomeness. You now have all the power you need to run some crazy Internet of Things experiments and show off your Tony Stark to the world!

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.