New website: Jeffrey and Anna

At work and at play, I’m always makin’ websites! Shortly after getting engaged at the beginning of the year, I started brainstorming on how best to tell family, friends, and the world at large about us. Naturally, it would be a website, but I realized I’d have to pick up a pen and pencil for the first time in years if I really wanted to make it special.

Screenshot of Jeffrey and Anna

After a few months of tinkering, I present to you Jeffrey and Anna, a super-fun, animated adventure through our life. Everything has been coded (save for some plugins) and drawn by me, and written by both of us.


What follows is a bit of a technical walk through the site.

Jeffrey and Anna is, naturally, pure HTML, CSS, and JavaScript. It adapts to different resolutions and form factors with media queries, using the same technology to gracefully degrade for less capable browsers. The site is very different from on a desktop computer, but hopefully just as usable, when you view it on a phone or tablet.

I drew everything on paper, scanned it, and colored it in Photoshop. I designed the site to use different complementary color schemes for every section, and further personalized it with Google Web Fonts and Font Awesome.

Superscrollorama is the engine behind the animations which happen as you scroll through the page. I slightly modified the library to detect whether you’re scrolling up or down, and to cause certain animations to start from wherever you currently are on the page.

I used certain parts of Twitter Bootstrap. Scrollspy causes our clothes to change as we jump through the sections, and Carousel provides CSS-animated navigation between subsections.

The site runs on Rails, my current web application framework of choice. Being database-driven, it doubles as our guest list management tool, as we can easily create invitations for guests by using RailsAdmin – and guests can enter their automatically-generated RSVP codes to instantly notify us of their attendance.

The stylesheet is written in Sass + Compass. Compass’ astounding ability to automatically generate sprites would have been an amazing help, given the massive amount of images on the site, but unfortunately, the sheer size of the sheets it generated caused the site’s performance to slow to a crawl. It turns out that it’s not a good idea to have dozens of images at tens of thousands of square pixels moving around on the screen at once. Instead, images are individually crushed and preloaded.

A little easter egg: some of you will see a little range slider in the lower-right corner of the page. Use it and see what happens!

I feel that this site represents the epitome of my current skills. It’s a bit hard to poke through the files on the site as it’s minified for best performance, but fortunately, it’s all open-source! Please poke through the code on GitHub, and feel free to comment (or create an issue) with any suggestions.


For those who are wondering, we haven’t sent out invitations yet! There’s still the task of combing over the list with the parentals, and then collecting the physical addresses of almost a hundred families. It’ll be a few weeks. But do be on the lookout soon for the location and date of our wedding!

Europe Trip Omg

Anna and I are going to Europe! For 2.5 weeks! In November!…

Yes, we’re really, really jumping the gun and planning way too far in advance. But what the heck there is not much else to do during downtime at work. At this point we’re planning on visiting these places:

  • London
  • Paris
  • Cinque Terre
  • Rome
  • Venice
  • Munich
  • Berlin
  • Amsterdam

We’ve already bought some pretty cheap airplane tickets. We’re planning on taking trains from place to place, and using as many sleeping cars as possible to save time and money.

Doing this in 2.5 weeks is a little ridiculous, so we are considering dropping Rome, Venice, Amsterdam, or some combination thereof. We’ve never been to Rome but there are definitely enough churches to see along the way, I’ve been to Venice but hear that it’s murky and ugly in November, and I’ve also been to Amsterdam and while it’s beautiful, I’m not really sure what there is to do for 2 days unless you plan on taking mushrooms.

I’ve been nerding out in planning this thing. We’re using Google Wave to collaborate on all the aspects of the trip – airfare, trainfare, lodging, things to see, dates and locations, etc. etc. The events we’re proposing so far are on a Google Calendar, which I am sending through Yahoo! Pipes, entering into Google Maps, and back into an iframe in Google Wave so we can see a map of places we plan to go to. I’ve already put a Google Spreadsheet together of possible times, durations and fares for train travel from place to place.

The only real downside to planning so far in advance is that we have so long to wait and obsess over it. I’m hoping that when the time comes we aren’t too jaded or disappointed, but it’s not a genuine concern. In the meantime we can learn more about the places, cultures, and languages, so when we’re there we don’t just hang around the biggest tourist attractions we can find.

This also means that there’s time for you out there in blogland to give us suggestions on what to see and what to skip. C’MON, DO IT.

Magic.

Jeffrey: carl and ellie cant be in the same world as andy because they are more cartoony than andy
Jeffrey: i refuse to believe it……
Anna: what will it take you to believe?
Anna: a wizard?
Anna: I can get you a wizard
Jeffrey: FETCH ME A WIZARD!
Jeffrey: ONLY THE FINEST WIZARDS, CLAD IN SILKEN ROBE AND CAP
Jeffrey: WITH A COMPENDIUM OF MAGICAL KNOWLEDGE RIVALING THE GREATEST OF DRAGONS!
Jeffrey: They’re over there in the supply closet.
Anna: yeah, I ordered too many last time
Anna: we are in abundance of wizards

Achievement Unlocked, or Why Lyndon LaRouche Owes Me An Arm

I broke my first bone yesterday, and it was pretty badass!

I was biking to work as usual, eager to jump in and check all my code into SVN, when I noticed something new on Market Street: LaRouche PAC tabling with their obnoxious “Obama = Hitler and should be impeached because he wants people to be healthy” posters. Quite angered, I continued along my route, up until I reached the usual crosswalk at Market and Sutter.

Quite distracted, I did not wait until the light turned red to turn left and cross the street – rather, I started turning left at the yellow light. Meanwhile, a dude decided to floor it across the intersection before the light turned red. Bad combination!

I heard a screech, felt the impact, instantly thought “oh shit, this is a real-life accident I’m a part of,” saw the world turn upside down, saw my bike fly across the intersection, hit the ground landing on my right arm, saw a flash of red, bounced up, and landed on my chest. Within seconds I was on my feet, yelling for someone to stop that car, which was at the next light by that point.

A bunch of people rushed over to me and someone helped me sit down, then lie down, on the curb. Answered “yes” when asked if someone should call 911, unaware of the state of my arm just yet. My bike eventually showed up next to me on the curb, but I noticed my phone was gone when I checked my pockets.

Ambulance and police arrived in very short order. The man who hit me had come back and was apologizing profusely to me, and answering to the police about what happened. It wasn’t really debatable what happened – he was zooming through a yellow light and I jumped the gun having assumed that no other cars were coming. Eventually paramedics were asking me the usual questions – where it hurts, whether I have any allergies, etc. etc. It was becoming more and more apparent that my right arm had been more than just twisted. I asked, sheepishly, if anyone had seen an iPhone lying around.

Soon I was on a stretcher being whisked by ambulance to SF General Hospital, with pillows to cushion my right arm. The receptionist at Linden Lab was notified of the situation. My bike went along for the ride, slightly beat up but definitely in fixable condition. (I was wearing a helmet, by the way.) I was brought into a trauma room, had my shirt cut off and my pants removed, and was hooked up to morphine. I was quite conscious this entire time – the shock had worn off pretty quickly after I got hit, and all I really felt was intense pain in my shoulder. A doctor ran x-rays, but I couldn’t easily move my arm into the requested positions since the pain was basically blocking me from doing so.

A social worker asked if there was anyone they could call, and at that moment, a policeman walked through the door with my phone. He snarkily remarked that it would have been smushed on the side of the road had Muni actually been a reliable service. Unfortunately, the screen was white, and despite a tech-savvy nurse’s attempt to replace the SIM card and get the numbers off, it was a lost cause. I did know my mom and dad’s numbers, so they were notified, and eventually my dad notified Anna. I was shown the results of the x-rays and I did indeed have a fracture in my humerus, near my shoulder.

Eventually I was brought into the trauma center hallway, where I stayed for about an hour in pain. I asked for water, but they couldn’t provide it because it was possible I was going to undergo surgery and needed to have an empty stomach. I eventually requested more morphine, which they supplied a good 15 minutes later. Anna eventually came and I swear it never felt so good to see the face of a loved one. She stood there stroking my knees as I walked her through what happened.

It turned out that the first x-rays weren’t telling enough, so I was wheeled away for a second round, and wheeled back to the hallway, where I waited around for yet another hour. Then it turned out that the SECOND round of x-rays didn’t show anything useful, so I was wheeled away for a third one. And back to the hallway. An hour later, I was given a sling and declared free to go, with a Vicodin prescription.

It was about 4:30 by then – a good eight hours since the accident – and I was very thirsty and hungry. So much, in fact, that when I attempted to get up and walk around, I became very dizzy due to low blood sugar and took a seat until I was provided with some apple juice, milk, and an orange. The best apple juice, milk, and orange I ever fucking had.

Anna helped me clothe, and we were out the door. So very fortunate that Anna lives a block away from the emergency room doors. I took a small nap as Anna (who hadn’t eaten all day either) ordered some food from the delicious Big Lantern.

That’s pretty much the story. Got my Vicodin, headed back to my place with a pint of Humphry Slocombe‘s Secret Breakfast (and a complimentary cookie), watched the new Lost, and hit the hay. Today I’m taking it easy, answering company email, scheduling a follow-up orthopedic appointment with Kaiser, and getting my iPhone’s screen replaced (good as new!). I’ll probably be out and about regularly by next week.

I keep reminding myself that I got hit by a car yesterday. It’s surreal. I was that dude that everyone saw flying into the intersection after a loud screech and a crunch. It’s the first time I got hit by a car and the first time I broke a bone. On both counts, pretty tame compared to what could have happened in that situation. Glad to be up, conscious, and already on the road to recovery.