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.
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.
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!
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? I 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!
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.
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.
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.
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.
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!
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.
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.
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.
Report 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.
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. 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.
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.
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.
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!
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.
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.
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.
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!
This post was inspired by the lovely inbox zero animation that pops up in the google Inbox app! Funny story was that I tried desperately to match the colors of my page to the animation colors. First I did this by visually comparing and adjusting my hex code, then I discovered I could use DigitalColor Meter! It was so great to just hover the little dropper over the image and get the RGB values, which I then converted to hex.
But, my colors were still a little off! Why?!? Of course it was then that I decided to go to the inbox web dashboard and right click for Inspect Element… and found out that my color values were still off. I spent way too much time on this process.
It was fun to find svg icons for the menu and the little plus sign icon. My little plus button brings you to the Google Inbox page. The sun also rotates if you hover your mouse over it. Creating the clouds and sun gave me more practice with css and was also really fun. I would compare and adjust my sun/cloud positioning by looking at the screenshot I took.
In future pages I’d like to learn to create a search bar and toggle buttons.