8 things a web developer does to geek out his wedding
On December 28th, 2014 I was joined in marriage to the love of my life. My wife and I met online through OkCupid. Our relationship has always straddled the line between traditional and nontraditional and we decided early into the engagement that our wedding should do the same.
I am a web developer by trade and a perpetual tinkerer. I wanted to use that aspect of my life to improving the wedding planning experience and to make our wedding something unique and memorable for our guests and us.
Here are eight things I did to geek out my wedding.
Agile project management
Planning a wedding, even a small one is like adding another full-time job to your already busy life. To help make sense of the sheer amount of work ahead of us, I introduced my then fiancée to some principles of agile project management using the Trello app.
To the un-indoctrinated here is a rundown of our process:
We map out all the work that needs to get done and prioritize it based on importance and time sensitivity (prioritized backlog). Each week we pulled pieces of work from the top of the backlog and made a commitment to how much work we can get done (Weekly sprint). Each day we reviewed what we did the day before, what we will be doing and if there are any impediments (Daily scrum). At the end of the week, we talk about how that week went and if there are areas that needed improvement (Retrospectives). It worked brilliantly.
Having a retrospective with your significant other should always take place in a dimly lit room with candles, drinking scotch.
Google drive served a crucial role. All our files including contracts, images, and forms were uploaded to a shared docs folder for easy access. A master spreadsheet was created that tracked budget, RSVPs, seating arrangements, schedule, etc.; We reviewed and updated it obsessively.
The combination of Trello and Google drive kept us on track and ensured we met the deadlines we set for ourselves without making our lives miserable. Both work well on mobile devices so you can always have access to your information when you need it.
Unified design and branding
A byproduct of building many large commercial websites and web applications is a great deal of exposure to the design process. Having a universal design language for the wedding was extremely important. We wanted a consistent look and feel from start to finish. Whether it be our email correspondence or our labels on the parting gifts; everything should be consistent.
I am lucky enough to have a friend who happens to be a brilliant designer and user experience specialist. Even luckier is that he needed his own wedding website built at around the same time so we established a quid pro quo arrangement.
Everything was treated as if it were a professional engagement. We met regularly to discuss requirements, build concepts, and provide feedback on mockups and comps.
The most important design requirement was established early on by my fiancée. Cats needed to play a prominent role in any design moving forward.
Key assets including logos, colours and fonts were quickly established and general templates were built for print and email correspondence. This was by far one of the most important things we could have done for our wedding. Everything falls into place once the design and colour scheme are established.
100% email correspondence
We didn’t want to send invitations via snail mail. Dealing with the RSVP overhead alone was something I was not looking forward to. We decided to harvest all our invitees’ email addresses and correspond almost exclusively by Email.
We used MailChimp (Mail… Kimp?) to send our emails because of their easy template management, cross email client testing, opens and click tracking, and adding segmentation identifiers such as RSVP status.
The free tier MailChimp account fit our needs nicely. What surprised us the most was how few people had issues receiving the messages. Thanks to the tracking features we were able to identify those who hadn’t opened the email and follow up with them directly.
Modern wedding website
Let’s be honest; most wedding websites are awful. Ours had to be awesome as a matter of principle. It needed to be responsive, informative, easy to use, and reflect our sense of humour. You can see the final result here (http://www.singlahabib.com)
From a technical perspective, it was a single page static HTML document built using modern front end build processes which at the time including the use of grunt, sass, and the foundation framework. It was a great little project to learning the processes and tooling.
I spent a great deal of time on scrolling performance. Many long single page sites suffer from poor scrolling frame rates. Using GPU enhanced CSS techniques I keep our frame rate close to 60fps even on mobile devices.
A custom RSVP form was built and the submissions were sent to us via email. An “If this then that” (IFTTT) recipe was built to transfer the contents of the email into our master Google spreadsheet.
Once the RSVP deadline arrived, we closed the submission functionality and repurposed the buttons into a table finder utility which allowed our guests to quickly look up which table they were assigned to.
My favourite part of the website was the presentation of our relationship factoids. We shamelessly used the character of Pusheen the cat and had her peek out from the sides of the page at various points. If clicked, Pusheen would pop out and spill the beans. Feel free to check out the site and try it for yourself.
Statistical analysis of relationship through SMS history
My wife and I text a lot. I thought it would be really interesting to see if we could get some statistical insight into our relationship based on our text history. Thankfully my wife had our entire relationship on her phone. I used a third-party tool to extract the data then put it into a MySQL database and run queries against it to gather as many interesting and absurd metrics as I could find.
E.g. In the first month we knew each other, we messaged 3208 times.
My friend designed a three-page illustration which acted as a comedic narrative of poorly interpreted statistical data. The illustrations were printed and placed around the venue during the reception. Not only was it something people hadn’t seen before, but it gave everyone something to talk about.
SMS Photo Collage
In addition to texting. Over the last two years, we sent each other over 1200 images. So I thought it would serve as an interesting look at our relationship if I made a collage of all the images we’ve ever sent each other (PG rated of course).
Google’s deprecated Picasa desktop application was the only software I found that could accomplish this feat with some level of customization. After a few hours of fiddling I sent the resulting high-resolution image to a print shop; a few days later I had a stunning 24x30 foam core mounted poster. The results speak for themselves.
Desktop Publishing with CSS
The dinner place cards were meant to indicate where a person was sitting but also which meal they were having. I decided to make things complicated for myself and have the guests choice of meal represented by a cat logo matching our wedding colours. Red for beef, gold for fish, and mint for a vegetarian.
With 130 guests I didn’t want to manually create the place cards; It’s tedious, error prone, and difficult to make global changes. After a few failed attempts in Microsoft Word and Adobe Illustrator, I turned to the loving arms of HTML, CSS, and JavaScript.
I created an HTML document that utilized a print style sheet. It used the guest list represented as JSON to render the markup. Print style sheets have come a long way with CSS3. Aside from a few quirks, it deals with real world print dimensions very well. A class attribute was added to each card based on the guests meal preference which the stylesheet interpreted to draw the appropriate cat. A PDF was generated and sent to my local printers.
Live Instagram Feed
I made a last minute decision to have a live Instagram feed associated with the hashtag #singlahabib displayed during the reception. Unfortunately, all the existing services I found that offered this functionality were terrible so what does any self-respecting developer do? They build it themselves. It was a great opportunity to finally play with socket.io and the Instagram API.
Instagram had a subscription API service for tags (unfortunately, it is now deprecated). They would push to a publicly accessible URL endpoint whenever a photo with a specific tag was published. I wrote a small Node.js app that subscribed and listened for these push events. When received it then sent the data to a web client connected through socket.io. The client showed the most recent image as well as cycling through all the previously published images.
It worked brilliantly! As guests posted images, they would instantly be shown on the big screen.
These projects represent a mere fraction of the monumental amount of work that went into the 7 months leading up to our wedding. It’s been over a year and this is the first time I’ve really had a chance to reflect. It sounds cliché but it really was one of the best days of my life; made even better knowing that I put into it so much of myself.
Hopefully, this will inspire you to be a little crazy and really own the experience of putting on your own life changing event. At the end of the day, you’re throwing a big-ass party, but it’s YOUR big-ass party so make it a place you want to be.
