Page 66 – Homepage refresh!

I decided it was time my Hello World page could use a little makeover. I moved my original index page into a folder and created a new one for ! I still link to the old index page but I feel this new landing page shows a little more of my personality (of course a picture helps too).

The most time consuming part of this redo was doing the screenshots. I spent a lot of time taking screenshots of the different pages and adjusting the sizes in Preview. I wanted to give a glimpse into the 180 pages project so I just chose a few of my favourites. My first layout had landscape, portrait, and square images of different side lengths. When I put these into rows, I quickly realized it looked really messy. I then redid all the screenshots so that they would have the same width.

To align the thumbnails vertically, I used Masonry.JS! I love how it readjusts the elements according to the viewport width. Some people made a fun little game out of the rearranging capabilities. (You have to resize the browser to an exact dimension to get the design aligned correctly!) I used simple mask <divs> to show some information about each thumbnail on hover.

Screen Shot 2015-07-27 at 10.37.33 PM

Screen Shot 2015-07-27 at 10.35.42 PM

Page 65 –

Page 65 – Bing Bong

I watched Inside Out on cheap movie Tuesday and was reminded of why I want to and don’t want to watch Pixar films… they’re so touching that I cry! I don’t want to ruin the story for anyone, but that line “I have a good feeling about this one” … it’s just too much. After I got home and couldn’t stop talking about Bing Bong, the imaginary friend in Riley’s mind, I knew I had to do a page for him.

I did not have to learn any new concepts for this page but it took me a while because of all the details. Bing Bong, the wagon, and the rainbow are completely done in CSS. I used CSS keyframes to animate the scene and a few lines of JavaScript to play the audio. Something flying through the air with a rainbow trail? You gotta add the nyan cat music. (Although I debated recording myself singing the Bing Bong song as well…)

This page was purely for fun!

Funny note, after I finished the page, I realized I could have used a single <div> with a CSS gradient instead of having 6 <li> to create the rainbow trail columns!


Page 65 – Bing Bong

Page 64 – Spirals

I have been studying JavaScript through books lately but I missed my 180 pages project! I wanted to do something inspired by the “rabbit” hole in my Code & Coffee talk. I haven’t played around with the HTML5 canvas for a while and definitely felt a little rusty!

To draw a spiral, you use the math formula for Archimedean spirals. In polar coordinates (r, theta), the locations of the spiral can be found using r = a + b(theta). The real numbers a and b control how the spiral acts and looks: b controls the distance between successive turns, a turns the spiral. If you increase a, the spiral turns clock-wise. To get the polar coordinates into cartesian coordinates, you use the sine and cosine functions. To get different shapes, I incremented the angle theta by different sizes. (It was fun going through all the possible shapes and picking some of my favourites!)

Aren’t these crazy? Look at the screenshot below… I promise it’s not moving!


Page 64 – Spirals

Page 63 – Code & Coffee

This was a slideshow I created for my talk at Code & Coffee. When one of the meet up organizers, Rose, first asked me if I’d like to give a talk at the monthly meet up, I was quite wary. Some of the previous talks had been about functional programming, marketing your open source project, unit testing… I could barely follow along for a few of them! How could I give a talk to a crowd of developers all more experienced than myself? I don’t have any shiny credentials beside my name, what could I even contribute? Would people look down on me and think I was wasting their time?
catprogrammerI decided to take a risk and said YES! I knew I would not be giving a technical talk, so I wanted to talk about what I knew best – how to be a beginner at web development. I talked about some of the obstacles I encountered as a beginner and some steps I took to overcome those hurdles. Basically, just do it! In the words of Amelia Earhart, “the most effective way to do it is to do it.”

My fears of the talk were unfounded. After the talk I found myself surrounded by a group of curious and supportive people who all wanted to share their stories. Not only did people listen to my talk, they wanted to talk to ME afterward! It was definitely a big confidence boost. It reminded me that you are usually your own worst critic. Everyone has to start somewhere.

A huge thank you to Rose and the Code & Coffee community for the opportunity!

Page 63 – Code & Coffee

Page 62 – How Many Elephants

This was my very first AngularJS app! When Richerd gave Mack 24 hours of ‘I’ll hack together anything you want”, Mack came up with this trivia game based on elephants. All the questions refer to elephants, such as “How many elephants tall is the Eiffel Tower?” The user answers by using a slider to guess the number. Since Richerd built the iOS app, I thought I would build a desktop version for fun!

It was fun looking up elephant facts! I didn’t have the question database so I made up a few of my own questions. I put all the questions into an array. Each array was an object with a question, answer, a min range value, and a max range value. It was a big change using Angular controllers and directives. Even at Trippeo, the desktop app was built without a front-end framework so it was an adjustment from manipulating DOM elements with jQuery.

After building this trivia game, the opportunity came up to create a page with many DOM elements generated from a database. I chose to do the website in Angular to try out some of my newly learned skills. The site is not yet public, but… I wrote production AngularJS code! Very exciting. I hope to be able to share that site here soon.

Screen Shot 2015-07-27 at 6.11.01 PM   Screen Shot 2015-07-27 at 6.11.11 PM
Page 62 – How Many Elephants

Page 61 – Sync Animation

I’ve played with CSS animations using keyframes and transitions, but didn’t know about SVG animations before. When Adarsh asked me about them, I read up on some SVG animation articles. I wanted to try and make an animation using image files. I didn’t have any SVG files to work with so I took a screenshot of a mock landing page for Trippeo. I chopped up the image into different elements (individual expense, phone with an empty screen, expense list, laptop with an empty screen) with good old Preview. I saved these pictures as PNG files.

I used CSS keyframes and positioning to simulate an expense syncing from the laptop app to the mobile app. To run the animation, a class called “running” is added to the laptop and the phone. When the class is added, the expense list slides down and a new expense expands in. I put a delay on the phone animation so that it would seem the expense is syncing from the laptop.

When the “sync animation” button is clicked, I remove the CSS classes and re-add them. In order for the CSS animation to show, I set a small delay between the removal and addition. I later read about a few more ideal methods to achieve the same goal: restart a CSS animation with a click. What an odd concept to clone the element, remove it, and then add it back to the DOM! I think one of the perplexing and interesting parts of code is how many ways there are to get to the same outcome.

Screen Shot 2015-07-27 at 5.29.58 PM

Page 61 – Sync Animation