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 staceylin.com ! 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.

Before:
Screen Shot 2015-07-27 at 10.37.33 PM
After:

Screen Shot 2015-07-27 at 10.35.42 PM

Page 65 – staceylin.com

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!

bingbong

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!

spiral

Page 64 – Spirals

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 60 – Custom Music Player

When I made Color Picker, I never thought I would be using the jQuery UI slider again and again!

I recently made a billing page with a slider for Trippeo:
Slider Part 1

A slider for the pricing on Trippeo’s new landing page:
Screen Shot 2015-06-23 at 5.31.34 PM
And a custom music player, all using jQuery UI slider!
Screen Shot 2015-06-23 at 5.32.18 PM

Would it be fun to see how many different pages I could build using jQuery UI slider? It could be a jQuery UI slider collection!

For this custom music player, I created a JavaScript Song object with the song titles, artists, album images, and file names. I used the HTML5 audio element to play and pause the songs. I had previously used the audio element for my Rainbow Piano but added an audio element for every sound on the page. This time, I created a single audio element and changed the audio source to play different songs.

I used the ‘play’, ‘pause’, and ‘ended’ events to go through the songs on the playlist. When the events play or pause were fired, I would change the play button accordingly. When the ‘ended’ event fired, I checked to see if there is a next song. If there is a next song, then I play that song. If there isn’t a next song but the Repeat All option is on, then I go back to the beginning of the list and play the first song.

Once I got the audio element up and working, it was time to create a custom interface. I took inspiration from the iOS music UI. I created a playlist from my Songs object and used font awesome icons for the controls. The song timeline was a little tricker, should I divide the current playing time by the total time and show the progress through a CSS div?

Turns out jQuery UI slider was perfect for the job! I set up the slider with a min of 0 and a max of the song’s total playing time. By using the audio element’s ‘timeupdate’ event (which fires when the current playback position changes), I could update the slider position as the song played. I got the audio’s playback position in seconds and updated the value on the slider to match. Showing the remaining time and the current play time was done with simple math calculations on the audio’s currentTime and duration properties.

Finally, I used CSS to add some styles to the playlist and highlight the current playing song.
Screen Shot 2015-06-23 at 6.03.15 PM

Originally I used some free instrumental music I found but Richerd suggested fun top 40 songs. I googled and realized it’s really easily to create short audio clips from full songs! Simply open the song in iTunes and right click to ‘get Info’. Then, fill in the times you want to start and stop the song, save, and right click the song to ‘Create an mp3’. Tada! Short song previews!

Enjoy the music.

Page 60 – Custom Music Player

Day 57 – Button Effects

I used css pseudo elements to create background effects for buttons! First I thought these animations would require keyframes specifying where the element should start and finish… but they could be done using simple pseudo elements and css transitions.

I created pseudo css elements using :before and css transformations. For example to create a slide to right effect, I put a transformation on the pseudo element of scaleX(0). (This shrinks the pseudo element to zero width). On hover, the pseudo element has a transformation of scaleX(1), ‘growing’ to full width. On the before element, I set transition duration, property, and the initial transformation. In order for the transformation to come from the left instead of the middle, I set a transformation origin of top left.

It was fun to think of different transformations to get different effects! Once I got one working, it was much easier to make the various background transitions. The slanted button effect is really just the vertical open effect, but rotated slightly to the right.

I think my favourite is the vertical open because it reminds me of a TV!

buttons

Day 57 – Background Transitions

Day 56 – Menu effects!

After creating a pretty static blog page, I wanted to learn how to create a slide in menu. I found this great demo of different menu transitions on codrops. What do you do when you have no clue where to start? You start by imitating. Don’t reinvent the wheel.

Initially I had a single menu div and applied a “starting position” class to it on effect button click. The trouble was, I had to set a small delay so that the starting and final position classes would not be applied at the same time by JavaScript. There would have to be a delay and transition when the classes were removed as well. (Or else the menu would just vanish instead of sliding back out). This was the first time I really used the transition property and I definitely struggled with setting up the code!

The more simple way was to just have a menu set up for every effect. Apply a css class to move that menu into the correct starting position (for example: for Slide in, you push the menu 100% of its width to the left). Then when the button is clicked, you add a class for the final position. The final position of the menu was always the same for my effects, right on the left of the screen. By adding transition timing to the classes, the menu would slide in from the left and then slide back out.

menu-effects

Once I had the setup figured out, creating different effects was much easier. I just had to create different classes for each of the effects: one menu closed class and one menu open position class for the main div if needed (for example if the menu pushes the main div to the right).

In this effect (Forward and back), the main div is scaled down when the menu is open.

main-final
I used JavaScript to open the effect button clicked, and then close the menu upon another click anywhere on the page. This ensures that two different effect menus are never shown at the same time.

This page was another one of those “this seems easy, why is it so frustrating” pages in the beginning but now I know how to create a slide in menu!

Day 56 – Menu Effects