First Update in a while

What have I been up to?

When I got hired at the Toronto Star, my understanding was that it would be a front-end job mostly dealing with Javascript.

As of January 2016 I was given the opportunity to work with Java, as that was the primary back-end language used for the Toronto Star CMS which was CQ5.6 as of January 2016. At that point I did not touch Java for probably 4-5 years since my time at Seneca College.

Over the next couple months I am going to be working on a personal project involving Java/Javascript(Angular/React). This project will be called Zpace and will be a fictional space travel company.

Also later on in the summer I will be try out some Coursera courses involving Data Structures & Algorithms –

Ruby Time!

Over the next 2-3 months its time to pick up some Linux based back-end languages.

First in line is Ruby/Ruby on Rails!

As in the past I will be doing some code school courses to get an intro to Ruby!

Creating the Bootstrap Nav in Ember

The standard Bootstrap Navigation includes a list of items and whichever item has the class of active is given a grey background to indicate it is the selected/active item in the navigation. Creating this navigation with Ember came to be a bit of a struggle, but behold I found a fix in the Ember.js github issues section with a solution.

The HTML code for the nav:

{{#link-to ‘local’}}

Some Javascript needs to be added to create the linkli component which handles assigning the class active to the current page/nav item.

App.LinkLiComponent = Em.Component.extend({
tagName: ‘li’,
classNameBindings: [‘active’],
active: function() {
return this.get(‘childViews’).anyBy(‘active’);

Ember Idea – Fictional News Site

After some thinking I will create a fictional news site done mostly in Bootstrap with Ember.

I hope to also take some features from two EmberJS sites that I use alot The Score and Twitch.

My deadline is to have this project done in 2 weeks(By May 1st) and roughly 50~ hrs spread over this time frame. I will update my daily progress on my github page.

MoviezZz Done(for now!)

After spending the last few months doing alot of tutorials, I finally got my first AngularJS app done!

As I briefly noted in my previous entries, I had created MoviezZz which you can also view my progression on MoviezZz GitHub.

I’ll admit the app isn’t the most visually appealing thing. But I would guess I put roughly 40 hours into the single page app spread over 2 weeks.

The app is a Fictional Movie Theatre website, that in which customers can enter customer information, movie time, and concession items.

The app contains AngularJS features such as Controller, Factory, ngRoute, Form Validation, $http, $scope, $location and some directives that included ng-click, ng-init, ng-if, and ng-repeat to name a few.

Up next, I hope to start an Ember/Bootstrap app in a day or two. I am still debating between a few ideas for what the app will be about.

Bug encountered with AngularJS, Select option with jibberish value

I found an interesting bug on the second page of the form ‘movietime.html’ where users can select a movie, time and amount of tickets.


I was testing the form, and noticed an interesting bug after I tried to pick a new movie(a second time), after selecting a movie and time earlier.  When I pick the new movie, the movie time select option appears to have no value.  After looking into the select option in Developer Tools I noticed that the value inside (notice the pic below).  The value for the selected option went from 10:00PM(the previous movie time) to “? string:10:00 PM?”.  angProblem

When I click the select option Movie it runs ng-change=”moviesChange()” which is a function that populates the Movie Time select options.  I’m guessing that my problem has something to do with the data-binding from ng-model getting confused when the function gets fired.

After some further testing, I have fixed the bug after clearing/resetting the object fV.movieTime inside the moviesChange function with the simple code: $scope.fV.movieTime = {};

I’m still a bit puzzled what is happening with the data-binding/ng-model on the Movie Time select option, as it’s value gets changed in an odd way.

Working on a Bootstrap/AngularJS Website

Since I’ve done a bunch of tutorials over the last few weeks that involved various Javascript libraries, it’s time now to get some coding done.

So I have a rough deadline for April 6th, a Bootstrap/AngularJS website which is a fictional Movie Theatre “MoviezZz”.  The progress of the website can be viewed on my Github page, and in the projects section of my website.

I’ll a bunch of more features to the site after the deadline, but my rough idea consists of a multiple-page form that involves ui-router.  The form will include customer information, movie selection, concession purchases, and a final confirmation page including all the information before confirming the purchase.

Node and Express Courses Done!

Over the last 3 days I completed two more CodeSchool courses Real-time with Web with Node.js and Building Block of Express.  I’ve done some reading in the past with Node.JS and it was interesting to find out briefly how Node.JS works along with Express!

Also an ex-co worker told me to look into MEAN(Mongo,Express,Angular,Node) as he knew that I have been looking into Angular, Node, and Express a bit recently.  So, on Monday I checked out my local Indigo and found a book Full Stack Javascript with Mean by Adam Bretz & Colin J. Ihrig.  So over the new week or so, I will try to go through the book and get a better idea of how all the 4 technologies work together.

Initial Quick thoughts on Backbone

On Thursday I started taking a look into Backbone, with Code School’s course The Anatomy of BackboneJS.  In comparison to the other popular Javascript MV*, Backbone seemed more like Ember than Angular.  Angular seems to be the most powerful, and in the most in demand among the 3.

So, once I finish the Node, Express, and Coffescript courses mid next week I will be putting in alot of time with Angular!

Ember Done!

On Sunday I started the Ember Course, which consisted of 7 levels which each took roughly 60-90minutes, and I finished it earlier today.  I thought that ember would be more like AngularJS, but they seemed to be quite different in my opinion, and I will have some fun trying the Backbone course over the next few days.

A rough breakdown of the content included in each level was:

Level 1: Routes, Templates

Level 2: tagName, link-to

Level 3: Resource Routes, Dynamic Routes, Nested Routes

Level 4: Models, Fixtures

Level 5: Array Controllers, Computed Properties

Level 6:  Components, Views, Partials, Render

Level 7: Controller Actions, Model Data Binding, Events in Views