I now no longer post , update it or maintain this blog. Its just there because of legacy reasons. You might want to check out my new blog on wordpress - kirtangajjar95.wordpress.com
Monday, 29 December 2014
Monday, 27 January 2014
My Journey to Metro UI
There was I, staring at my screen of my laptop thinking what to do next for my website which was part of project given by my college. But, I ain’t a guy who does ‘coz he have to do it… I do because I WANT to do. By now, it was clear that I have to go far behind my syllabus. My project was about creating a small chatting website that I and my friends could use. We were allowed to use only HTML5 and JavaScript. I am somewhat familiar to HTML but an absolute noob to JavaScript. Thanks to my expertise in C++, JavaScript didn`t seem that much a big deal. For chatting part, I am planning to use WebSocket API, but I've no idea what it is… I just know that it defines a “full-duplex communication” which helps to give real time feedback (Like Facebook instant notifications). But, there were two problems first I’ve got to have a server which supports WebSocket API (Mostly written in either Python or JavaScript) and using/configuring that was seemed a bit tough (Giving some time, I could do that but I was far too lazy about that) and also I wanted to keep logs of all conversations using XML… and using XMLHttpRequest with WebSocket seems pretty messdauntimidating (messed up + daunting + intimidating)… and missing internet connection at my home even make it worse.
And that`s why I`ve got a plan B – using XML to store all the data and simulating a full-duplex communication with Ajax polling (a technique in which webpage is refreshed within fixed interval to simulate real-time connection), something people used to do when WebSocket was not available. There ends scripting… two stuff to go – designing and uploading. Of course, I was not going to pay some moron just to get my website online, so I am planning to use Apache Tomcat 8.0 or Microsoft IIS to host from my laptop (in short, my lappy online, my site online, my lappy offline, my site offline) and giving out my IP instead of domain name to anyone who is interested to visit my website. That`s all in uploading. Here comes the last part – Designing, and here I was again, staring at my screen, thinking what to do next… I wasn't having any idea how EXACTLY my website should look, but I just knew I wanted to make something “COOL”.
I was going to press ALT +F4 to close chrome when I accidently hit windows key… and that’s when annoying tiles came up. Hmm… Not bad how about making a website with win-8 theme??? Seems cool. So, now I am going to be in need of some windows-8 style colours, fonts, buttons and hell a lot of stuff… Thanks to god I was in a place where Wi-Fi was on and I knew its password, so googling everything out shouldn't be that painful. At least that was what I thought, so I opened up chrome and started by juggling in”windows-8 colours”. Hex and RGB colour code were easy to find. Msdn just showed up some 10-12 colours that were present in windows-8. Some other guy on the net had collection of 40 colours, which he promised to be of w-8. I got them all. Hmm lets Google up “windows-8 fonts”, which I hoped will show up fonts used in windows-8. But it wasn't that much easy either… it showed fonts ‘FOR’ win-8 rather than fonts ‘IN’ win-8. I planned to Google it out later… I've got much job to do before the Wifi was shut down by its owner. So I started kat.ph and started downloading Adobe Edge Code CC (A software better than notepad to write in your HTML/JavaScript code) followed by some books on Backtrack and Metasploit. I didn't enjoy to download at 25-40 kbps, but it wasn't a bad deal for free.
Back to Google, I continued my journey by typing “windows-8 button”. The auto-suggestion suggested that “windows-8 button CSS” would lead some fruitful results, so I moved on with that. I downloaded some button images in PNG, out of which the most cool was that circular animated windows loading logo (in both, black and white flavours). Now from Google's auto-suggestion results it was clear that there were other nasty people out there too who had this crazy idea of getting this all w8 stuff on their website. So, there should be people out too who've created entire website, win-8 style, so I refined my search by removing “buttons” from it, leaving just “windows-8 CSS” and it worked!!! There were some people who have dedicated much time to it, and I was much impressed by their work, of which the best I had come across was http://metro-webdesign.info . It was havi`n some cool animation and styles. Although, sometimes Animation in browser lagged, but still it wasn't bad deal. Above all, it came in both free and paid versions. Nice! I thought… and there it goes right in my downloading bar. I opened the source code… Hmm now what’s that??? PHP??? Wait, no… oh! Yes, it jQuery baby, Yeah, I recognised it immediately by seeing those $ signs everywhere.
Now there were some limitations (Like no support for multiple homes, no flip tiles etc…) in the “free” versions, and according to my standards, nothing less than “Excellent” could work. So, I thought about having that paid version… of course, for free, so I checked my download link… it was a dropbox link something like http://www.dropbox.com/blah_blah_blah/V4_lite.zip. I made and “educated” guess about the full version link. So I tried renaming the link by adding V4_full.zip. And Voila!!! It showed and 404 bad request page from dropbox (which looked a lot better than download link page). I realised that everybody isn't that dumb. So, I wanted to try another thing… see everything in http://www.dropbox.com/blah_blah_blah/ directory, and then download something that looks like full version of my stuff. How simple, I thought… so I got in Google and started typing terms analogues to "viewing/accessing all files under one directory", "viewing/accessing all files under one directory in dropbox", "getting website directory tree" etc… but no luck… most of people in most of forums would say that only way to view contents of the directories was to hack them, and I neither had the time nor guts to hack dropbox :( So, I had to find another way… I started messing with those metro web UI`s (User Interface) source code, hoping that they could've possibly revealed link directly, but again they were a bit smarter than me, it wasn't my luck. But I aint a guy who give up so easily...
So, it was time for some .more google-fu and I started typing inurl: http://metro-webdesign.info intext: Index of. Now this would get me all webpage on metro-webdesign.info that had Index of in their webpage (Index of / means you can see what’s in that folder on website). It gave me one page, it had some links, but all to webpages and not to any directory, so I thought of googling out (again) something that could give me “directories on website”. I clicked on third link which was of a forum that mentioned something about downloading a software called LinkChecker which list down link of all webpage found form everywhere, source code, JavaScript etc… I was feeling pretty much exhausted by this time as it was being quiet a time I was trying and it was almost 3 pm and I didn't even had my lunch, but still there was a bit hope in that software, so I downloaded that software of whopping ( according to my internet speed) 13 MB!!! This time no Google, nothing I was just staring at the circular download bar and praying to god not to show a “Network Error” message. And it took nearly 20 minutes to download it… Fortunately, it ran in my netbook, it had just an input field URL: and a button Analyse. Already frustrated, I just gave http://metro-webdesign.info an input and pressed Analyse, and it ran giving links to many pages. It was still running at the end of 15 minutes, meanwhile I decided to go through some of the links, most of them were to forums or to their main site, but there were links to some external sources too. There were some 5-6 dropbox links. There was even a link to that lite version too… and there were some other dropbox link too. I opened a link. Its name looked something like autozoom_blahblahblah.zip, so I downloaded it and opened it, which contained just one JavaScript and one css file, whose content I couldn't understand. I opened all links pointing to dropbox and saved them in my local drive hoping to analyse them sometime later.
It was evening 8:00 pm and I`ve already finished my dinner, and also there was nothing interesting to do, so I opened my laptop and navigated to folder containing all those dropbox files. I unzipped V4_lite.zip which was the lite version that the site offered. I also unzipped another file that grabbed my attention, named v4_quickfix.zip. It had 2 folders and a readme file, which I opened first.it said – “
-For Metro UI template v4.b1
-unpack the "js" and "plugins" dir into your root so it merges. Overwrite the existing files.”
Well, well, well, now what's that??? I opened up the ‘js’ folder, which had a file function.js. I also opened up V4_lite, which also had js folder, which in turn also had function.js… hmm I opened up both the files side by side, starting and ending of both the files were same, but something was fishy here, the size of lite version was 9.79 kb, while that of quickfix version was 10.2 kb, so I checked the no. of lines of both files, former had 324 lines, while the latter had 336, that means 12 extra line of code were there in quickfix version, so I checked line by line, code of both files and yeah, I found what was missing in lite version, -
/* Scrolls background, if needed */
scrollBg = function(){
if($page.layout!= "column" && device=="desktop" && $group.direction == "horizontal"){
/* ONLY IN FULL VERSION */
$events.bgScroll ();
}
}
And same stuff was in quickfix version but instead of“ /* ONLY IN FULL VERSION */ ” there were 12 extra line of code which made it full version!!! I also discovered later that other links to dropbox also resembled some of the full version features like multiple_home.zip, auto_zoom.rar etc…
After unzipping all those zip files, and merging them into the "root" folder, as specified by that readme, I packed up my laptop and then directly went to bed, hoping that i will use my recently hacked stuff someday. I thanked god for giving me such a great talent (no comments if you disagree) and also for giving me opportunity to hack into somebody`s website ;). Its an awesome feeling you get of satisfaction at such times when you have really worked your ass off something and you finally made it. Its this feeling that makes me work day and night on computer. Its this feeling that is my motivating force behind those 8-10 hrs of coding sessions. It is this feeling that makes me work for my passion. Its this feeling that makes me live more and more every day.
Being the richest man in the cemetery doesn't matter to me. Going to bed at night saying we've done something wonderful, that's what matters to me. -Steve Jobs
Subscribe to:
Comments (Atom)