In August 2013, we (some present and past meltmedians) launched a website called WhyAZ in an effort to attract and keep great tech/business/design talent in Arizona. The site went viral and we received tons of visitors and shares. The excitement around WhyAZ was great, but there was no reason to return to the site because content updates were few and far between. Additionally, WhyAZ employs use of fancy new stylesheet technology to draw all the images dynamically instead of a standard image file. This makes development and updates less trivial.
After the launch, we saw lots of success with the #whyaz hashtag on Twitter. We realized that the best way to capture this magic was to incorporate it directly into the site. I spoke with Jake Heun, one of our Senior Front End Developers, and asked for some detail around how and why the changes came about.
Anthony: So, what was going on with WhyAZ before you published these new updates?
Jake: When I started working on the site, we had Lynn Fisher, Graphic Designer, handling design and markup. She was working closely with Ron Barry, Director of Marketing, on writing content for the site. Whenever they wanted to update the site, they had to work with Josh Kennedy, our Operations Engineer, to get the site deployed.
We were running the site on DocPad, which was overkill for a static one-page site. Lynn ported the codebase over to Jade to simplify the markup work and I set up the site to use grunt and simplify the build process. I set up the site to run on our internal Docker-based continuous delivery system called Totem. We also made the site open source and the code is now available to anyone in the world via GitHub.
Totem has hooks into GitHub, so whenever the master code branch is updated, those changes are automatically pushed to production and we don’t have to bother Josh for another deployment he probably doesn’t have the time for.
Anthony: What was the impact of doing all those changes?
Jake: Development is significantly easier with Jade and Grunt so anyone in the WhyAZ community can build and run the site locally and send us a pull request for content and feature changes. If someone out there wants to add content to the site, they can add it to their local copy of the site and send it our way. A small group of us have the administrative permission to accept their code and merge it into the site.
Thanks to Totem, once we update, the master branch the code is deployed to production within 5 or 10 minutes. The trick with Totem is that it’s still in beta and we don’t want the site to break if we get a big hit in traffic if it goes viral again. So, we put the Totem server behind Amazon’s CloudFront CDN and we invalidate caches every hour.
Invalidating the cache hourly is a temporary hack until Totem has the hooks to support file-specific cache invalidation.
Anthony: Tell me about the new features on WhyAZ.
Jake: We have two new pages on the site: Community and Contribute. The Community page uses a really cool Javascript-based social feed aggregator called Tagboard. It’s better than something we would have written just for WhyAZ, even though it’s probably overkill for the site. Now the site has fresh content that is updated by the community and we have administrative control to remove any posts where people are abusing the hashtag.
The Contribute page provides a form for people to submit new content ideas for the site, links to the GitHub repository, and shows the avatars of the code contributors. Authors of accepted pull requests get their pretty face on the site!
Basically, we went from a one-page static site to a 3-page community-based site offering holistic lovin’ on AZ.
Anthony: What’s in store for the future of WhyAZ?
Jake: There’s a lot of cool stuff we have planned for the future. As far as technical stuff, we want to start showcasing some of the technology behind the site and maybe make it more obvious to visitors that the images are generated programmatically. We’re looking at a way to show the CSS for each image when you hover your mouse over it or something. There are also plenty of efficiencies we can make on the back-end, especially as Totem develops newer features.
We also want to keep adding features to cause people to visit. Weather is a big factor for people considering a move to Arizona, so we want to have live temperature readings on the site for 3 points of interest: Tucson, Phoenix, and Flagstaff. Even better, if the user wants to submit their own zip code, we can show the temperature difference between their zip code and the three Arizona cities.
Arizona is also a really affordable place to live so we want to show some sort of cost of living comparison calculator and make the site an even more effective recruitment tool. Since we have lots of great jobs in the state, we want people to know that they can do what they like and keep more of their money, I’m pretty sure people like to keep money.
Anthony: Awesome! I can’t wait to see what you guys do with the site.
And we can’t wait to see how YOU (yes, YOU!) contribute to WhyAZ. Send us your ideas on the WhyAZ Contribute page, download the codebase and send us a pull request, or just use the #whyaz hashtag on your posts about why Arizona is great!
Anthony Garone
Anthony is the technology director at meltmedia. He likes to write and record music (see garone.org), blog (see TheCreativeTechnologist.com), and garden with his patient wife and 3 children.