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 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 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

Trippeo – Subscription Plan Menu

Subscription Plans 1
Unavailable plans are greyed out and not clickable. The selected plan is highlighted.

Here’s how I made changes to my Trippeo subscription page to eliminate unnecessary clicking.

The user decides whether they want to be billed monthly or annually. The annual pricing is 17% cheaper. When a user decides on a plan, the “Next” button appears. This was set up so that a plan would have to be selected before the user can proceed.

However, this is confusing and tedious. When a user selects the Team option, and click on the annual/monthly toggle to see the different pricing, their selection disappears. They then have to click Team again. On the technical side, this happens because there are actually 8 plan options, 4 each in monthly and annual billing. But as a user, I just see the four team size options. I would think that the toggle is changing the pricing, not showing me 4 completely different plans than what I selected from before.

To make this less confusing, I kept the user’s selection even when they toggle between annual and monthly billing.

When the user toggles between annual/monthly billing, their team size selection stays highlighted.
When the user toggles between annual/monthly billing, their team size selection stays highlighted.

When a user selects a plan, I update a hidden input value with the selected plan id. I also store the size of the selected plan in a variable (Individual, Team, Studio, or Company). I called this variable selectedTeamSize.

When the user clicks on the toggle, I check to if selectedTeamSize has a value. If so, I first remove the current highlighted plan. I then look in the plan table that is now showing (either annual or monthly) and find the plan with the same team size. I highlight that plan and update my hidden input value with the new plan id.

In the example above, the user first chose the Studio option in the monthly plan chart. When the user clicks the toggle to switch to annual billing, the Studio option for the annual plan chart is automatically selected.

This makes the selection process smoother and eliminates confusion.

Trippeo – Interactive Form

My task was to create an interactive form for users to contact Trippeo. The backend developers created 3 simple input fields with a submit button. We used a jQuery plugin to validate the phone number field.
subscription form - before

Since the form would only be for companies with 25 employees or more, it did not have to be shown as a default. I first created a simple section with the option to contact Trippeo.
intro

Upon clicking the button, Trippeo’s contact information and the form would appear and slide down. The intro text would slide up and disappear. Originally I changed the states with CSS transitions but another way is to simply use jQuery methods slideUp() and slideDown(). A problem with the methods is that they toggle CSS display: none and display: block to show and hide items. This can cause issues if your shown elements need to be inline-block. (The inline styles of display: block will override your inline-block styles.) In that case, animating with CSS would be the way to go.
slide down form

The user can contact Trippeo through the contact info on the left, or submit a form that gets sent to a company e-mail address. Once the form is sent, the form slides up and disappears. The user gets a notice saying their message has been received!
thank you

An improvement that could be made to the form is to simplify the input fields even further. Since the most crucial info is the user’s name, number, and company size, the third input field could be made into a drop down selector. The user would then choose their company size, say 25-30 employees, or 100+ employees. This would not only make the process simpler for the user, but also give Trippeo some valuable information to bucket interested companies into tiers.

Trippeo – simplifying UX and Design

A user had mentioned that it was quite inconvenient adding billable clients to their expenses. To add client names, they went to Company Settings. But to turn on the feature for expenses, they had to go to the Policies page. This involved a lot of clicking around.

Screen Shot 2015-05-13 at 11.31.48 PM
The policies page to toggle Billable Clients for expenses.
Screen Shot 2015-05-13 at 11.28.56 PM
The Company Settings page to add client names.

Looking at the JavaScript code, I saw that a few of the options on the Policies page had originally been on the Company Settings page. I moved the toggle on/off back to Company Settings. The user could now toggle the option on, then scroll down to add client names. We did have a discussion about whether the toggle would be better placed under the Billable Clients section, but wondered whether that would be strange as well.

Screen Shot 2015-05-13 at 11.30.05 PM
Billable Clients toggle is added to the Company Settings.

If the toggle was under Company Info, it would clash with the other input fields. If it was under Billable Clients, the look of Billable Clients would not match with the Expense Categories table above it. As this presented design and flow problems, we decided to do a quick fix for now and just put them on the same page until our upcoming design changes. Yes, our dashboard UI will be completely redesigned soon!

I took some time to read about UI design and designers, it seems like a very exciting time of growth and experimentation as it is so much younger than areas such as fashion design. A lot of tech startups are cofounded by designers, including Trippeo! I loved how the design founders at airbnb were inspired by Disney’s Snow White to create storyboards for their user experience design.

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 51 – Dippin’ Dots

I started this page wanting to make splashes of color on the page for Holi, a spring festival of colors. I used html5 canvas to draw colorful dots on the page where a user clicks. I used loops and time delays to create a splatter “animation.” Each dot is a particle object that gets drawn onto the canvas. The size of the splatter, the distance between each loop, the angle(direction) of the new particles, and color can all be adjusted. After playing around with the particles, I decided to make the particles more spaced out so all the dots could be seen. Below are some variations I tinkered with.

Putting the particles closer together gives more of a “splatter look.”
Screen Shot 2015-03-10 at 9.33.25 PM

Spacing out the particles and making them bigger creates fun “dot” splatters.Screen Shot 2015-03-10 at 9.32.59 PM

If you make the dots closer together but change the color for every loop within a splatter, you get these crazy looking “spider webs”! These were fun but a little too “neon looking” for my taste. 
Screen Shot 2015-03-10 at 12.34.25 AM
I quite liked this effect. If you limit the particles to one direction, you get these splatters that remind me of rainbow squids! 
Screen Shot 2015-03-10 at 12.35.02 AM
Here is my final version. I liked the look of the dot splatters but wanted more variety in color! It is a combination of the “rainbow squid” and the “dot splatter” looks. These remind me of colorful Dippin’ Dots! I remember how my friends and I were so excited for the “ice cream of the future” when Dippin’ Dots first came to the Calgary Stampede.
dippin-dots-pop_11568

Yummy!
Screen Shot 2015-03-10 at 12.35.23 AM

Day 51 – Dippin’ Dots

Day 49 – Buzz Quiz

This page was inspired by the fun quizzes on BuzzFeed. I wanted to learn more about checkboxes. BuzzFeed lets you click on the checkbox or the entire div to select an option. I thought this would be easy to do, just trigger a click on the input element when the parent div is clicked, right? The problem was that the box was checked if you clicked on the parent div, but not if you clicked on the checkbox itself! Why was this happening?

The problem was that the parent div and the input element had a handler for the same event. When you clicked on the checkbox, the click handler for the parent div was triggered as well, resulting in a “double click.” The result is the box is not checked at all since you checked and then unchecked it. Because a click handler was defined for the parent div, any child element event handler will bubble up and trigger the event handler.

I solved this problem by attaching click handlers to the poster image and the input elements. Since the poster images are not parents of the input elements, you do not get the ‘bubbling up’ to the parent. Another way to prevent this would be to use event.stopPropagation(), which will keep parent event handlers from being triggered.

The funnest part of this page was writing the different movie results. Choose different movies and see what you get!
Screen Shot 2015-03-04 at 12.13.27 AM

Day 49 – Buzz Quiz