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

Day 54 – Meal Wheel

A fun Lindt chocolate contest inspired this page! I saw this giant Lindt bunny near downtwon. If you see people lining up, then you line up behind them without question. Yep. There was a prize wheel and I won some chocolate. There was a golden bunny car on site too. Love the ears! I think the little chocolate bunny is the cutest though.

IMG_2202IMG_8266

I used html5 canvas to draw my wheel. I looked at this Prize Wheel tutorial and made adjustments. I divided Math.PI into 6, creating a full circle of 12 sections. By incrementing the start and end angles with a for loop, I drew an arc and then a line to the center for each section and filled it with a color from an rainbow array. To fill the text in each section, I used cos and sin functions to calculate the x and y distances from the text to the center of the circle.

The angle would be the beginning angle of the arc section plus half of the incremented angle value. This gives us the angle between the start of the section and halfway of the section. For x, we use cos(angle) = adjacent/hypotenuse, with the hypotenuse being how far away we want the text to be from the center. The adjacent value tells us how far away the x value is from the x value of the center of the circle. So the x placement of the text would be

x value of the center of the circle + cos (beginning angle + half of the arc angle) * distance of text away from center >> this leads to a formula of width/2 + cos (angle + (Math.PI/6)/2) * textRadius

Similarly the y value, we can use the sine function to get height/2 + sin (angle + (Math.PI/6)/2) * textRadius.

Now the text is where it should be, but it’s horizontal! To rotate the text so it aligns with the wheel section, we can just rotate the text to the same angle as halfway of the section. I used rotate(angle + (Math.PI/6)/2) to align the text. I drew the arrow with simple lines and then filled the section.

To make the wheel spin, you just change the starting angle you draw the wheel from. Set a spin time and then set an interval to draw the wheel at the next starting angle until the spin time is up. When the wheel has stopped spinning, you want to get the text of the pie section chosen. You take the total degrees the wheel has spun and get the remainder from 360. This tells you how far the wheel has “shifted” from the original starting position, ignoring any complete rotations.

Here’s where it got a little tricky. Say you got 390 degrees, that means the wheel has shifted 30 degrees from its original starting point. You’d be tempted to divide 30 degrees by the angle of one wheel section to get the index. This would be wrong! The reason is because the wheel rotation and the index are in opposite directions. When the wheel is rotated to the right 30 degrees, the stationary arrow is actually pointing to “30 degrees LEFT of the original starting position of the wheel”. You must take 360 degrees and minus this angle, then divide by the angle per section. You can then use Math.floor on the final value to get the index value.

Finally, show the food chosen by looking at the food array at the index value and display it on the screen. Tada! Your food is ready to be ordered.
Screen Shot 2015-03-31 at 9.51.55 PM

Day 54 – Meal Wheel

Day 53 – Tic Tac Toe

To be honest, the process of writing this page was hard. Tic Tac Toe is such a simple game that I thought I would be able to code it easily. Instead I found myself confused. If I gave each box on the game board an id, should I get the id upon every click and then compare with all the other pieces on the board? How do I set the “winning patterns” to check for? I overcomplicated things for myself and found writing Tic Tac Toe to be frustrating because while I thought it was a simple task, it took me more effort than anticipated.

Something like this can lead you to doubt your own abilities and I found a fixed mindset voice in my head saying “if you had any talent, this would be easy” and “you can’t even code such a simple thing?” Although I shipped production code for the very first time last Friday (hooray!), this small page caused doubt on my own progress. I just have to keep telling myself, “growth mindset!” If there’s something I don’t know, I can learn it. It’s ok if it takes me longer, because the next time it will be a little bit easier.

The way I set it up was to create an empty board in JavaScript and place user choices on the board (only allowed if that box on the board is empty). After each placement, I would check if that player had any winning patterns on the board. This Tic Tac Toe game is for two players.
Screen Shot 2015-03-27 at 10.08.41 PMDay 53 – Tic Tac Toe

Day 26 – Friendly Dog

Okay this isn’t just any dog, it’s Otousan from SoftBank! SoftBank is one of the telecommunications giants in Japan. It is also the company I paid tens of thousands in yen to for my phone bills. I had a love-hate relationship with SoftBank for three years. I hated the hidden fees, the long contracts, the “system errors” that would occur when we tried to cancel extra package add-ons to our plans… but I loved their mascot. I know, so shallow. But just look at him! otosan2And if you haven’t seen a SoftBank commercial yet… you have to watch this. Oh and Tommy Lee Jones also helps sell canned coffee.

2837970858_22bd1f563eCheck out this blog post for more details. So yeah, Japan is weird, But very very good at making cute things… I digress. I used css to draw Otousan and a cell phone. Css animation and javascript make the phone ring intermittently and picking up the phone results in a friendly woof! I think my drawing is super kawaii (cute).
Friendly DogDay 26 – Friendly Dog