Our Director of Engineering on the New WIRED.com
Click to Open Overlay GalleryToday, we’re proud and excited to launch the completely revamped WIRED.com.
It’s been a while since our last redesign—8 years, we sheepishly admit—so this overhaul of our site is long overdue. But this gave us the time to build a smarter, more beautiful website that looks to the future as much as our reporting does. It’ll also be more fun for you to read and explore.
Over the last couple of years as we prepared to embark on our major site redesign, Condé Nast has made significant investments in the WIRED Tech Team. We’ve more than doubled in size, adding both product and project management teams. In the past, our team was so small that we spent most of our time scrambling to fix bugs and keep the site from 503’ing. Now we have a diverse team of specialists who are devoted to making sure our site meets the growing demands of digital readers like you—people who know a bit about programming and what makes a good website.
Our redesign is here thanks to a big under-the-radar project in March 2014, when we migrated 17 active WIRED blogs into a single WordPress install. If we did our jobs right, you barely noticed that happen. Clandestine though that mission was, it put us exactly where we needed to be to embark on a total design overhaul of WIRED.com.
Now, here’s the part where we get to brag about the most exciting technical improvements our developers spent the past year baking into the new WIRED.com!
Responsive and Mobile-First
Our design team spent months conceiving a grid system that would look beautiful on any device. To make that system a reality, we turned to Flexbox as part of our responsive solution. We plan to extend it even more post-launch, but so far it’s been a great solve for controlling the layout of our card-based user interface. We’re thrilled to no longer have to separately maintain a third-party mobile platform and now have one code base for all devices.
Artificially Intelligent Page Curation
The redesign gives us the third incarnation of our Curator application, which started years ago as a separate Groovy on Grails application maintained by a single Java developer. Curator once consumed articles from 35 different blogs for curation on our homepage. When we migrated our 17 active WordPress blogs into one WordPress install, we also rewrote Curator in Cake PHP to match our WordPress PHP backend. After this, anyone on our team could maintain Curator—but the architecture remained the same and lived outside of WordPress. Using this version of Curator, our web producer team manually constructed the homepage throughout each day as various stories were ready to be promoted.
Our new and improved Curator is now a custom WordPress plugin—and it’s artificially intelligent! This allows our homepage and section landing pages to be both automated and curated at the same time. Stories flow through automagically based on editorial criteria, but editors can take control of the flow by locking stories in certain slots in our card system. This means our homepage and section landing pages are constantly changing with new stories all day long.
The queries we use to build our homepage and section landing pages are intricate (read: slow), so we spent a lot of time making Curator performant by refining our use of memcache to store objects and strategically bust the cache as needed.
Improved Performance
Our performance improvements include the usual best practice recommendations: CSS in the header, JS in the footer wherever possible, all files concatenated and minified wherever possible. We switched to request animation frame for scroll events to optimize repaint/reflow. We ruthlessly axed redundant third party analytics and consolidated the serving of advertising and marketing units. These cuts reduced our HTTP requests by more than 50 percent.
Cloud Computing and Fastly CDN
We’ve jumped aboard the bandwagon with Amazon Web Services. We like the scalable architecture and ease of server provisioning. As part of our AWS migration we also switched to Fastly for our Content Delivery Network (CDN). We like that Fastly is built on Varnish, the page caching solution we were already using. Gaining more granular and quickly implemented control over our configuration is another huge plus.
Solr Search
We know our old, embedded Google search page was regrettable. But starting today, we have blazing-fast search with near real-time updates. It’s a new era.
What’s Next?
We’re starting to incorporate React.js for articles that require live updates. We’re about to roll out our longform feature article builder. We’re looking for more opportunities to shift toward server-side javascript with Node.js. We’re eager to optimize image handling. We’re on the cusp of implementing front end A/B testing. We’re driving towards support of HTTPS. I can’t tell you how excited I am about our roadmap!
Who’s to (git) Blame?
In addition to our amazing colleagues on design and edit, this amazing band of developers:
Zack Tollman on drums (performance), Jake Spurlock on vocals (Curator), Ben Chirlin on bass (Solr), Ross Patton on keyboards (Flexbox), Ian Sayre on guitar (Nav Dropdown), Layla Mandella on electric fiddle (all the DFP), Tony Vongprachanh on choreography (Feature Story Builder).
This top-notch product/project team:
Hayley Nelson as band manager (product strategy), Nicole Wilke on tambourine (product), and Stephen McGarrigle on uilleann pipes (project management).
So What’s Your Stack?
WordPress PHP
Stylus for CSS
Vanilla JavaScript and jQuery
Coming soon: React.js
JSON API
Development and Deployment:
Vagrant
Gulp for task automation
Git hooks
Linting (check out stylint written by our own Ross Patton)
GitHub
Jenkins
It’s taken a lot of work, but we’ve made huge progress. We’re now thrilled to point at WIRED.com and say, “yeah, we built that!” Finally, WIRED.com is “wired” again. It’s about time.
