Learning JavaScript using a Rosetta Stone

The Rosetta Stone is an ancient Egyptian stone, inscribed with a decree.  It is unique in that it contained the decree in three languages, including ancient Greek.  Which allowed for the translation of the Egyptian hieroglyphs.  So this week Raghu used this analogy/method to ease us into learning JavaScript.

We translated things like conditional statements from Ruby to JavaScript.  JavaScript is a very important tool for any web developer, since it is the only language that Browsers understand.  It allows you to change the page a user is seeing without reloading the page.  JavaScript was born way back in 1995 at Netscape.

iLostandfound profile page as it would look on a tablet

Here is the iLostandFound new profile page, we had fun doing this after learning JavaScript

The next step was to learn jQuery, a JavaScript library that makes your life a little easier by defining a bunch of methods that you can use.  There is also jQuery UI, which can do even more and has very cool visual effects.

The last part of this weeks learning was Ajax (asynchronous JavaScript and XML).  This allows you to update records in your database without changing the display the user sees in the browser using JavaScript.

Learning Javascript made this possible

The Modal for one message on the iLostandFound profile page.

Armed with these new skills Anthony (another Starter League student) and I worked all Saturday on iLostandFound, and we had so much fun.  It was probably the best day of coding yet.  We just about completely redid the main profile page to include a bunch of JavaScript.

We have tried to work with mobile and tablets in mind and the results look pretty cool.  We broke the profile page in to four parts;  messages, QR code, profile and badges.  Font Awesome provided the perfect icons for each of these.  Then we’ve used a modal to show detail of the messages and to edit your profile.  A modal is when something shows over the page with black transparent background.

iLostandFound profile page on a mobile devise

View of the profile page on a mobile device… Looks awesome!

To be honest, we surprised ourselves with what we were able to achieve.  iLostandFound is starting to look really slick. Learning JavaScript, jQuery and Ajax made this the best week of Starter League yet!