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

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 – Account cancellations and reports

I made a few small bug fixes today to improve the user experience.

Account Cancellations
These were internal requests by our customer success manager, Alanna! Instead of a form with radio buttons for user feedback, she wanted an open text field. The bigger button initially said “Yes – cancel my plan” but we wanted to switch them around. I removed ‘yes’ from the cancel button and made it the smaller button out of the two choices.
Screen Shot 2015-05-13 at 5.18.27 PM
If a user has active members in their company account, they will not be able to cancel. A fade out popup appears on the upper right of the screen asking them to contact Trippeo. Alanna wanted a hyperlink to make contacting us easier. I changed the popup to a modal. Originally I had two buttons: Contact Trippeo and Cancel. The Contact Trippeo would link be a mailto link and close the modal. The cancel button would simply close the modal.


However, some browsers (such as my own with Chrome), would not do anything with the e-mail link! The user would click on Contact Trippeo, and the modal would close, leaving them to wonder what had happened. To prevent this sticky situation, I added the link to the text and a single button for the user to acknowledge the alert.

contactReport Views for Admins
When a user submits an expense report for approval, their manager receives an e-mail. A link brings them to a report view. An inconvenience was admins would have to click export as pdf to see the attached receipt files. I added the type of transaction and a link to a pop up of the receipt in the first column.

Screen Shot 2015-05-13 at 4.36.38 PM

The triangle indicates a lost receipt where a receipt was required by company policy. The paperclip has a hover of popup and links to the receipt image.
Screen Shot 2015-05-13 at 5.16.18 PM
The user can click anywhere outside of the receipt image or the close button to close the modal. The admin can easily look at the receipts and approve or reject the report. This functionality was already present on the dashboard, it just needed to be added to the report view for e-mail links.
Screen Shot 2015-05-13 at 5.14.56 PM

Receipt Bank Testing
An exciting upcoming feature is the ability to e-mail receipts! Instead of uploading receipts for individual expenses, you e-mail all your receipts and they get automatically uploaded to a receipt library. You would then be able to attach the receipts to expenses and reports. Our backend developer Dmitry recently added this feature and I had a lot of fun sending cute animal pictures to my account! All the receipts showed up within 1-2 minutes. A nifty feature is uploaded pdfs show as images in thumbnail view but become scrollable when you click to enlarge.

Day 58 – Webinars

Today’s page was about taking a psd file and turning it into code!

I decided to write the css in Sass. I set up sass and got it to watch the precss file for changes. It was fun to try writing in sass but I found I had a lot of ‘nested’ classes which made the resulting css quite bulky. Even after consolidating classes and styles, I still had seemingly repetitive styles for all the different colors. I felt like I was not using the full power of sass. Then again, first page using sass, let’s not get too ambitious here.

As I don’t have Photoshop, I used Pixelmator, a free photo editing tool for Mac. Using the slice tool, I got the background photo image files. Navigating the different layers of the psd file took some clicking and unclicking. I feel like there should be an easy way to select which layers you want…layers should be sorted by the sections they affect!

I did a funny thing with the buttons: from the psd, I got the colors and set the styles individually for the light green and blue buttons. I assumed that the three buttons on the image backgrounds were the ones with less opacity. After setting all the button styles, I looked again and had a moment of realization: the light blue and light green buttons were just white buttons as well. White plus blue equals lighter blue… good old colors.

webinars

Day 58 – Webinars