Category Archives: Coding

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!

Builders Weekend – My first Hackathon

O boy! Did we have fun this week!  The Starter League organized Builders Weekend, a weekend hackathon.  A hackathon is really an event where a bunch of people come together to try and create some sort of product, usually software or web based app, in teams in a pre-defined time period.

This gives you a change to learn and stretch yourself, by working with other people on a tight deadline to create a completed product.  So on Friday night we started around 18:00. Everybody had a chance to pitch an idea, once all the ideas were presented, we could vote for our two favourite ideas.

Picture of the iLostandFound team building the app

The iLostandFound team working hard at Builders Weekend

The 4 ideas with the most votes were built.  I joined a team building iLost&Found.  iLost&Found is an online service that connects your contact details to a qrcode.  You can have try it here: iLost&Found.

We had until Sunday 1400 to work on the app.  Each team then had the chance to present their app to everybody including a panel of judges, who would pick a winning team.

Home page for iLostandFound - Our app from Builders Weekend

Home page for iLostandFound – Our app from Builders Weekend

It was great fun. I even managed to work through the night Saturday and only got to bed Sunday morning around 0800.  Something I have not done in a while.  We learned a bunch of great lessons this weekend. Here are my three takeaways:

1)   Working on code other people wrote is much harder than building the whole app on your own.  It gave me a new appreciation for writing comments and making sure the code is easy to read.

2)   Managing a code base with multiple contributors is tricky. We did not know enough about using github to make this easier so ended up spending loads of time redoing code that was ‘lost’.

3)   Scoping is VERY important.  Seems like you almost always try and do more than what is possible with the time and resources at your disposal.  But since in event like this those are fixed, the only thing left to adjust is how much you can achieve.

Found page - from iLostandFound build during Builders Weekend

The page you will see after scanning a qrcode from iLostandFound 

Mobile version of Found page

Mobile version

All four teams did really well and progressed nicely with building apps.  All the presentations were awesome.  It is actually amazing to see the skills we’ve all learnt over the last 8 weeks being applied, to build working apps in only a weekend.

It was great spending the weekend learning and working in a team, as an added bonus the iLost&Found team was declared the winners.  I look forward to doing something like this again.

Pushing an App to the Web for the first time!

My first ever app is live on the web!  Pushing an app to the Web for the first time was fun. I have been playing around with a site for ski instructor reviews.  This week at The Starter League we’ve learnt how to push an app to Heroku a free online hosting platform. So after I few hiccups I’ve managed to get mine live!

It was amazing once again at the work Rails do.  Rails has something called an assets pipeline.  This includes all assets that you have in your app, like pictures, CSS files and more, and then put them all together and make them as small as possible to help optimize your application.

We played with building search functionality this week.

We also played with building search functionality this week.

While doing the About Us page for the app, I did some work in CSS to help it look better and styled the pictures to look like old Polaroid’s.  But for some reason when I updated the live site the CSS that applied to this static page would not be there. Even though I’ve added it to the same CSS file as all the rest.

After a little research, I’ve found the solution.  I had to put the CSS for static pages in a separate file and give rails a direct instruction to include it while compiling the asset pipeline.  Otherwise Rails checks the CSS file before doing it and only include the CSS that is actually used in your app, leaving out anything that is not needed.

The About Us page off the dummy app I pushed to the web this week.

The About Us page off the dummy app I pushed to the web this week.

We also started to play with building search functionality.  It is still early days, but I think building search functions is going to be fun!

I really enjoyed playing with CSS; it is amazing how much you can do with CSS3 and HTML5.  I still remember the days that anything that need special style had to be an image done in Photoshop. I am glad those days are over!

Authentication and Authorisation

Another week has flown past!  Last week we learnt a few essential concepts and I also had a few ideas about the type of problems I would like to solve.  We did a bunch of work on authentication and authorisation.

Working on authentication was fascinating.  So when you have an app you obviously would like to customize the experience for your users, which means you need to identify and recognize them.  The easiest way to do this is by getting users to register and choose a password.

Example of User registration page.

Here is an example of a Registration page asking for a password and confirmation

But having users passwords in your database without encryption is a bad idea. Since most people tend to use the same password for many services.  Therefore it is better to encrypt the password, but if you use an encryption service that can be decrypted, somebody can still use the encrypted value you store to get the original password.

The answer to this is to use one-way encryption that is consistent. This means it cannot be decrypted, but every time the same password is encrypted the result is the same so you can compare the encrypted versions to see if they match. Like many other features that most apps use, there is a gem to help in rails. Which once again, makes the whole process a breeze.

Example of login page

Once registered a new user can just log in for future visits

Now you would think that when choosing which encryption method to use, you would want something difficult to crack but that can still do its work as quickly as possible;  but it turns out you actually want one that is slow, which makes it harder to brute force it.  This article on How to safely store a password explains it in detail.  So we ended up using bcrypt.

This next step after authenticating users, involves deciding who should have access to which services in your app.  Once again something that rails makes very easy!

I think The Starter League has done an awesome job so far with the curriculum, it feels like they introduce us to the right concept at the right time in the right dose.  They also leave enough for us to figure out on our own. This week Jeff the Chief Instructor at Starter League shared this video that shows a little of the teaching methodology that they try and follow:

It was another great week, it was fun learning about authentication and authorisation. I have also spent a great deal of time this week thinking about the problems I would like to solve, and will do another post about that.

Building our own IMDB

I am now 5 weeks into The Starter League and I still love every minute of it.  At times I find it hard to believe that it has only been 3 weeks since I worked with Rails for the first time.  It has empowered me to do things already that I thought would be impossible after only 5 weeks here.

In the last two weeks we have spent a lot of time working with databases.  First we’ve learnt how to make two databases relate to each other by adding a foreign key to one of them.  You call that one to many relationships, since you have one ‘object’ that relates to many others.

SMDB movie index page

The list of Movies on our SMDB app – our own IMDB clone

To explain this concept and give us something to work on, Raghu made us build a copy of IMDB (Internet Movie Database). For the sake of our project, we assumed a movie could only have one director.  So one director could have many movies but a movie could only have one director. This was our first one to many relational databases.  We achieved this by adding a director_id column to the movie table in our database…. that sentence would have made no sense to me a month ago!

We then added another one to many relationship by adding roles to a movie (again assuming a role could only be in one movie).  But since a role is played by an actor, we could add another one to many relationship between a role and an actor.

SMDB Movie Show page

The details page of my Favourite movie, The Shawshank Redemption on our IMDB clone

After we did that, Raghu explained that we in effect had created a many to many relationship between actors and movies by using a table linking the two, in this case called roles.  So we had created our first many to many relationship without even knowing it!

Raghu also challenged us to build a paging system after one of the classes this week.  I struggled with that one for a few hours but eventually I was able to get pagination going the way I wanted it without using a gem. A gem is like plugin, a piece of code somebody else wrote, usually for a task that many people want done. You install the gem and then you can use it instead of writing that part of the code yourself.

pagination on smdb

Doing pagination far a fun challenge, here it is nicely implemented on our IMDB clone

On Friday we’ve also learnt about font awesome, another little arrow now in our arsenal.  It allows you to add icons to your site that act like fonts, so you can change the colour, size and some other properties in CSS like regular fonts.  No need for a designer to redo everything a 100 times!

Building a IMDB clone was great fun! I continue to be amazed how much fun it is learning to code. I really look forward to using these new skills to solve meaningful problems in the future!