Where to See VIP and Friends at WordCamp US 2017

We hope to see you tomorrow and this weekend, December 1-3 at WordCamp US in Nashville or the next best thing, remote via free livestream. With so many fantastic sessions going on all weekend, we put together a guide to which ones feature folks from across the extended VIP family:

WordCamp US 2016 in Philly, uploaded by Seth Goldstein under CC-BY-SA 2.0

On Friday:

Last year’s State of the Word, uploaded by Luca Sartoni under CC-By-SA 2.0

On Saturday:

And also:

    Stop by the Gutenberg usability testing booth, where Tammie Lister and other members of the Gutenberg team will take you through short tasks and a brief survey designed to gather data that will inform bug stomping and fine-tuning.

And if you can’t make it in person, you can also grab a free ticket to catch the live stream of the entire weekend’s sessions.

Photo by Tammie Lister

The Dream Internship: Work at Automattic (Winter 2018 and Beyond)

Please find our latest information on the internship here.

Automattic — which runs WordPress.com, Akismet, VaultPress, Jetpack and many other services — is hiring interns, specifically to work on the WordPress.com VIP team.

WordPress.com VIP provides hosting and support for high-profile, high-traffic WordPress sites, including Time.com, People.com, FiveThirtyEight.com, qz.com, internet.org, TheSun.co.uk, NYPost.com, and many more!

The VIP team is continually looking for interns to work on client-facing development and support. These paid internships (US $25/hour) run for approximately 16 weeks and can be completed either on a full-time or part-time basis.

Where will you be working? Anywhere you want! Automattic is a distributed company. We’re happy if you work from wherever you’re happy — as long as you have a good internet connection.

What will you work on? The internship will focus on things such as working on improving VIP and community plugins, debugging client code, building tools to help clients better manage their sites, and making performance and security improvements to the WordPress.com VIP platform. Your work can also be tailored to fit your personal interests and goals.

The VIP team is serious about increasing diversity in the tech industry. We want to build Automattic as an environment where people love their work and show respect and empathy to those with whom we interact. Diversity typically includes, but is not limited to, differences in race, gender, sexual orientation, gender identity or expression, political and religious affiliation, socioeconomic background, cultural background, geographic location, physical disabilities and abilities, relationship status, veteran status, and age. To work on diversity means that we welcome these differences, and strive to increase the visibility of traditionally underrepresented groups. Read more about our commitment to diversity and inclusion.

Interested? Great! Start by filling out the form below to introduce yourself, explain why you’d like to be an intern on the VIP team and what you’re interested in working on. Be clear about what you’ve done and provide links to code contributions on WordPress-specific plugins or themes if you can. Don’t worry if you’ve never contributed before; find somewhere you can contribute, no matter how small, and show us that! To get you started, here are some Automattic plugins for ideas on where to contribute:

Feel free to use as much space as you need in the form and be sure to include links to your online profiles as appropriate. After that is complete, you’ll be finishing off your application with a short quiz.

Rebecca Hum is a current VIP Intern. During her internship, she has worked on patching VIP supported community plugins, debugging client code and writing scripts for some of the biggest sites in the world.

Challenging times for online journalists: thoughts from ONA Dublin 2017

A few of us from the WordPress.com VIP team were delighted to join journalists, producers and developers from Europe and elsewhere for the Online News Association’s conference in Dublin, Ireland in mid-May. VIP is a long-time sponsor of ONA’s events: this was their third outside North America, but the first to venture away from London.

Dublin’s regenerated Docklands area has attracted countless global businesses in recent years, including many from the tech world. Google were our hosts for the drinks reception on the evening before. Facebook’s international headquarters, just a few minutes walk away, was the venue for the main event.

Mark Little: photo by Leopold Stuebner, used with permission #

The highlight of the day was closing keynote speaker Mark Little, known to many in the audience as a TV journalist and presenter on Irish state broadcaster RTÉ. He left to found social media news agency Storyful, bought by News Corp in 2013; then took charge of media partnerships at Twitter. Few could be better placed to describe the quandary in which journalism, particularly digital journalism, now finds itself.

Social networks had not set out to become the most powerful news distribution platforms of all time, he contended; it was an unintended consequence. Authoritative news content is ‘flowing through a pipe that is ranked and priced on the basis of emotion.’ With revenue dependent on competing for attention, and generating an emotional response, Mark suggested ‘you could not design a better model to erode trust in news and information than the one we sit in right now.’

His remedy lay in a move towards subscription-based funding, perhaps via bundled models as Netflix does for movies, or Spotify for music; and deeper and more direct engagement with consumers. Restore that trust, he proposed, and there was a bright future for journalism as a public utility, telling readers not just what they wanted to hear, but what they needed to hear.

A theme running through many of the day’s sessions was the uneasy power relationship between publishers and platforms, including our hosts for the day. As a man with a foot in both camps, Mark said it was time for platform companies to recognise and address those unintended consequences of their growth, ‘not through marketing, but through changes to the product’.

But there was no shortage of optimism in evidence, with sessions touching on artificial intelligence, clever use of smartphone notifications, and immersive storytelling techniques. Many of these can be watched on demand via the ONA website.

Online journalism may be going through turbulent times, but sometimes, that’s when the most exciting ideas emerge.

We’re already looking forward to ONA’s main annual event, taking place in Washington DC in early October. VIP will once again be a sponsor, with our Recharge Lounge providing an opportunity to power up your portable devices, whilst talking to us about the VIP service or WordPress more generally. Tickets are available at a reduced rate until June 29.

The Dream Internship: Work at Automattic (Summer 2017 and Beyond)

Please find our latest post on the internship here.

Automattic — which runs WordPress.com, Akismet, VaultPress, and many other services — is hiring interns, specifically to work on the WordPress.com VIP team.

WordPress.com VIP provides hosting and support for high-profile, high-traffic WordPress sites, including Time.com, People.com, FiveThirtyEight.com, qz.com, internet.org, TheSun.co.uk, NYPost.com, and more.

The VIP team is continually looking for interns to work on client-facing development and support. These paid internships run 12 weeks and can be completed either full-time or part-time.

Where will you be working? Anywhere! Automattic is a distributed company. We’re happy if you work from wherever you’re happy — as long as you have a good internet connection.

What will you work on? The internship will focus on things such as working on improving VIP and community plugins, debugging client code, building tools to help clients better manage their sites, and making performance and security improvements to the WordPress.com VIP platform. Your work can also be tailored to fit your personal interests.

The VIP team is serious about increasing diversity in the tech industry. We encourage applications from women, people of color, people with disabilities, members of the LGBTQ community, and other communities traditionally underrepresented in this field.

Interested?

Apply via our current internship post, which can be found here.

 

Alexis Kulash is a former VIP Intern. During her internship, she worked on transitioning VIP sites to PHP 7 and prevented potential security and performance problems on some of the biggest sites in the world.

WordPress.com VIP Supports Women in Digital Journalism at ONA

I am so proud to share that WordPress.com VIP was a sponsor at  this year’s ONA Women’s Leadership Accelerator at USC. This was our second year supporting the program, and my second year spending time there. We’re proud to help make the program completely tuition-free for the participants.

image-uploaded-from-ios-3

WLA is a weeklong forum aimed at developing strong leadership skills for women working in digital journalism. Twenty-five women were chosen from 350 applicants to spend a week developing leadership and management skills. Speakers included Kara Swisher, Recode co-founder; Liz Heron, former Huffington Post executive editor; and Charo Henriquez, former executive editor of People En Espanol.

By sheer coincidence, my former boss from the Chicago Tribune was this year’s facilitator. Tran Ha, the former Editor and General Manager of the RedEye, was my first manager out of college. Both last year and this year, I got to sit in the back of the classroom as the facilitator coached attendees on problem-solving in the workplace with real-life examples. The very candid discussions about the difficult parts of leaderships allowed women to connect with each other – and hopefully build a support network to help each other throughout their careers. It was also terrific to see many VIP clients represented: The Atlantic, The New York Times, CNN, Bloomberg, and FiveThirtyEight.

image-uploaded-from-ios

Tran asked me to participate as a mentor, and I spent the afternoon working with four women, from AJ+, NPR, The Guardian, and Vice. The topics we worked on together included hiring and leading a remote team, project managing engineers, and how to innovate within a busy daily news cycle. Later that evening, I gave a two-part presentation at dinner.

For the first part, I talked about the open-source ethos that powers WordPress. Earlier in my career, I worked in newsrooms and used WordPress daily. Back then I knew the software and dashboard very well, but didn’t know the mission behind it all: to democratize publishing. I wanted the help the leaders of newsrooms understand why supporting open source is so important.

For the second part, I talked about transitioning from a fairly gender-balanced workplace in editorial, to a mostly-male workplace at the intersection of journalism and technology about five years ago. I talked about the challenges of imposter syndrome and making your voice heard when you’re a minority, and reminded the women in the room that they are an important change in the wave of diversity in leadership at journalism and tech companies.

I’m thrilled that VIP was a part of this event for the second year in a row, and I’m looking forward to seeing these women excel across the industry!

For more reading, you can keep an eye on the rising stars here. If you’re interested in learning more about women leaders the digital media space, definitely check out Katie Hawkins-Garr’s newsletter from the The Poynter Institute. It’s an incredible read and a great way to find out about amazing things women are doing in journalism and technology.

The Dream Internship: Work at Automattic (Spring 2017 and Beyond)

Please find our latest post on the internship here: https://vip.wordpress.com/2017/10/06/the-dream-internship-work-at-automattic-winter-2018-and-beyond/

Our company Automattic — which runs WordPress.com, Akismet, VaultPress, and many other services — is hiring interns, specifically to work with us on the WordPress.com VIP team.

WordPress.com VIP provides hosting and support for high-profile, high-traffic WordPress sites, including Time.com, People.com, FiveThirtyEight.com, qz.com, internet.org, TheSun.co.uk, NYPost.com, and more.

We’re looking for interns to join us to work on platform development and testing or client-facing development and support. These paid internships run 12 weeks and we are flexible on the exact dates.

Where will you be working? Anywhere! We are a distributed company. We’re happy if you work from wherever you’re happy — as long as you have a good internet connection.

What will you work on?
We currently have one internship role available:

  • The support-focused internship will focus on things such as working on core WordPress.com features and development, debugging client code, and making performance and security improvements to the WordPress.com VIP platform. We’re hiring for the spring and summer for this role.

In either case, your work will be tailored to where your own personal interests lie.

Interested? Complete your application by filling in the form below. In the space provided, introduce yourself and why you’d like to be an intern with our team. Be clear about what you’ve done and what you’re interested in working on. Feel free to use as much space as you need in the form and be sure to give us more information by including links to your online profiles as appropriate.

We’re serious about increasing diversity in the tech industry. We encourage applications from women, people of color, people with disabilities, members of the LGBTQ community, and other communities traditionally underrepresented in this field.

Send in your internship application by December 15th for the spring support-focused internship or January 15th for the summer internships. If your application sounds interesting, we’ll schedule an interview (usually written / text chat, since we communicate a lot via text) as the next step. Good luck and thanks for your interest!

Alexis Kulash is a current VIP Intern. During her internship, she has worked on transitioning VIP sites to PHP 7 and prevented potential security and performance problems on some of the biggest sites in the world.

The Dream Internship: Work at Automattic (Summer 2016)

EDIT: Last day for applications is Friday February 26th at midnight Pacific time. If you’ve been thinking about it send your application in now!

Our company Automattic — which runs WordPress.com, Akismet, VaultPress, and many other services — is hiring interns, specifically to work with us on the WordPress.com VIP team.

WordPress.com VIP provides hosting and support for high-profile, high-traffic WordPress sites, including Time.com, FiveThirtyEight.com, qz.com, search.fb.com, MicrosoftStudios.com, NYPost.com, and more.

We are looking for two engineering interns to join us for the summer, to work on development for the WordPress.com VIP platform. This paid internship runs 12 weeks, and we are flexible on the specific dates.

Where will you be working you may ask? Anywhere! We are a distributed company and are happy if you work from wherever you are — as long as you have a good internet connection.

What will I work on?
We have two different internship roles available.
The performance-related internship will focus on auditing client code for performance improvements, creating a plugin that would help bring performance improvements to the broader WordPress community, and related tasks.
The security-related internship will focus on auditing client code for security improvements, working with clients to make related code changes, surfacing stastics about the types of attacks blocked on VIP, and related tasks.
In both cases the work and your contributions will be tailored to where your own interests lie.

Interested? Complete your application by filling in the form below. In the space provided, introduce yourself and why you’d like to be an intern with our team. Be clear about what you’ve done and what you’re interested in working on. Feel free to use as much space as you need in the form and be sure to give us more information by including links to your online profiles as appropriate.

We’re serious about increasing diversity in the tech industry. We encourage applications from women, people of color, people with disabilities, members of the LGBTQ community, and other communities traditionally underrepresented in this field.

If your application sounds interesting, we’ll schedule an interview (usually written / text chat, since we communicate a lot via text) as a next step. Good luck and thanks for your interest!

Applications are closed. Thank you for your interest!

Josh Betz is a former VIP intern who now works as a code wrangler at Automattic. During his internship he worked on a VIP user management plugin and helped build a new WordPress.com product. 

Big Media & Enterprise Flashtalks with Captions on WordPress.tv

I’d like to introduce Andrea Zoellner, a WordPress.com VIP Communications intern who has been working diligently over the past two months to do some great things with WordPress.com VIP’s communication! Among other projects, she’s spearheaded transcribing and getting the Big Media & Enterprise Meetup videos and transcripts available to the public as soon as possible. We hope you’ll give her a big welcome, and we can’t wait to share what else she’s been working on! —Sara Rosso. 

We’ve been posting videos of presentations from the Big Media & Enterprise meetups over the past few months, and we believe those presentations are one of the biggest resources for the WordPress community at large with regards to understanding how WordPress is being used for innovative and highly-scaled projects.

With the goal of helping the community in mind, we submitted the videos to WordPress.tv so the entire global community could discover and share them as needed. We also painstakingly added English subtitles and a full transcript to these videos to make it easier to follow along, increase accessibility, and make them translation-ready.

These videos are an opportunity to hear about interesting features and stories from some of the most sophisticated WordPress installs on the web. By recording the meetup presentations and making them available to the wider WordPress community, we hope more people will benefit from the content.

Check out some of our recent presentations which we transcribed and published on this site:

Want to make more WordPress.tv videos accessible? You can help the WordPress.tv community bring meetup talks to an even broader audience by contributing subtitles to other videos. Find out more.

One Theme, One Multisite, 30+ Unique Websites – Now With Full Transcript

Simon Dickson and Simon WheatleyCode for the People, presented “One Theme, One Multisite, 30+ Unique Websites” at the recent Big Media & Enterprise Meetup in New York City. We’ve shared this post previously, but we’re publishing it again now with full transcript below.

 

Okay, so I’m Simon Wheatley, my partner Simon Dickson is just over there and we’re from a company called Code For The People.

We’re one of the VIP partners and I want to talk to you today about a client who came to us, similar I guess to the Oomph guys,the Interactive One guys, just been talking about one thing, but dealing with many websites initially 30.

This is for a magazine publisher in the UK, so they wanted to move 30 of their titles initially on to this platform but they wanted one standardized theme, one standardized set of functionalities that they could use.

So our solution for them is based in a couple things that I’m going to talk about tonight one is the WordPress theme customizer and one is the way we’re handling layouts using widgets and widget areas so these solutions are things you can apply in other organization. You can have your WordPress themed cake made by my partner’s wife and you can eat it at the same time.

So you get in this way, using this customization but based on the standardized theme, you get to reduce maintenance and at the same time keep the editorial teams happy.

So I’m going to talk through three of the areas where we allow editorial control so obviously there’s colours, I’m going to talk about typography and I’m going to talk about layout.

So the first element, colour, we started off with the idea that we would have the user pick half a dozen colours and we would then do colour calculations based around on let’s find some complimentary colours let’s find some lights and dark equivalents and then we’ll be able to work out how of those six colours, we can deal with the header and the footer and the body post but that actually gradually became unwieldy.

So you get in this way, using this customization but based on the standardized theme, you get to reduce maintenance and at the same time keep the editorial teams happy.

We found ourselves adding more and more colour options to avoid a clash of dark colours appearing on dark colours or red appearing on green, that kind of thing and the solution that we arrived at eventually was that we split it into two colour palettes, so there are two colour palettes which we call palette A and palette B and then we split the page into three areas. We’ve got the header area which can have one palette assigned the body of the page which can have another palette separately applied to it and then obviously the footer which can have a completely different palette.

So there are three palettes there, with about 12 different areas and we’re just using the standard WordPress theme customizer to allow you to pick the colour for that we’re still doing a little bit of colour calculation, lightening and darkening and so on but essentially it’s the two palettes applied to different areas of the page. We don’t take the standard approach that some themes take of just injecting a whole bunch of CSS into the head. Instead, we’re using LESS with CSS Preprocessor.

Probably now looking at the fact that core have adopted SASS, we could be using SASS but at the end of the day it’s all CSS Preprocessing. It all really does the same thing, it’s taking variables from the customizer and injecting them into CSS and using that to build the final styles for the website.

It’s simpler and cleaner than shoving a load of overrides in your head. So that’s colours, let’s talk about typography. Obviously there’s a number of font services out there and we’re going to want to give 30 editorial teams a good choice of fonts for their websites.

So we’re using the Google Fonts API, there’s a wide wide variety of fonts there and we’ve built a custom control for the customizer so can pick say the open sans fonts and because we’re dealing with the API. We know that there are these variants and weights associated with that and then we can be applying a text transform so that you’ve got fully uppercased for the navigation, but you’re just capitalizing for the headers or whatever.

That’s the one customizer control, which has got three sub-controls within it we looked around and found a couple of those on the internet in the .org repository but they all seemed to be making a bit of a meal of it and we ended up making something that turned out simpler but works quite nicely.

It’s simpler and cleaner than shoving a load of overrides in your head.

What you’ll see we haven’t got there is a font size for each individual element. We’re not setting a font size for the heading and then font-size for the subheading. Instead, we’re setting a base font size and then we’re using multipliers up from that. So maybe 16 pixels or something and then the heading is 1.5x that and the meta is 1x that or whatever.

So let’s talk about layout. We started out with layout with some very grandiose ideas that you might recognize from other themes and options that you’ve got out there. We were going to allow the user to draw areas on the screen and we we’re going to then use those as widget areas and drop stuff into those and then we we’re going to magically work out how we calculated the break points so that you could you know have tablet portrait, tablet landscape.

Eventually we took a step back from that and realized we could accomplish pretty much the same thing but in a much much simpler way.

Eventually we took a step back from that and realized we could accomplish pretty much the same thing but in a much much simpler way. So if we look at the primary content area on the left there, we’ve got a grid of widget areas so we’ve got a widget area at the top spanning then we’ve got the two-column side by side and then we repeat the same again. But of course with the widget area in WordPress you don’t need to put widgets in it.

So if you wanted to have just a single column of news in the primary content area then you just put widgets in the double span that comes second in there. Or, if you want a two-column layout, then you can just use the top two. Every so often in the year, when you’ve got a promotional item, you can be putting that in your double span above those to columns, so it gives it a lot of flexibility.

Because it’s a known quantity, it means that we can scale down to the various breakpoints and we know exactly what we’re doing and we’ve got a really nice responsive website and that comes out really really well when you start actually putting content in it this website, the fields, they started building that yesterday at 11 o’clock in the morning and by 3 o’clock in the afternoon, they had a site, fully migrated, fully customized with all the old content in it from the old custom content management system and up and running, so it comes up through the breakpoints.

Nice shotgun advert there for the shooting season coming up.

And then the desktop, full desktop width…so let’s, just taking a look at this page, we’ve got one widget that’s controlling a lot of this stuff. So if you look at the news sequence of posts and the food and drink sequence of posts, they’re using the same widget, and that’s something that we call the post query widget which is essentially a wp query builder for those you who know what I mean by that.

It’s putting together a series of parameters by which you’re going to reach into the database, grab the post that you want and get to display them on the page so you can choose the post type that you want to display in the particular widget that you’re editing at the moment. You can filter it down by the taxonomies and then you can go to actually start displaying that.

We do that by breaking the sequence of posts up into sections, so section one here has just got one post in it, it’s a list with a large image. Section two, you’ve got two posts, smaller images, and we’ll show the author and we’ll show the date there. Then section three is just a text bulleted list without any additional detail in there.

What that comes up as is something like that so it gives you really quite a flexible display of how you’re going to pull the posts in and then how you’re going to actually show them on the screen and you could have all large images or all bullet points, pretty much anything you want

We don’t limit the number of sections there so another thing I wanted to mention was category archives so again, we’ve got a customizer control in there so select your category and then choose similar again to the way that we’re dealing with the query widget so similar, we look at the style that you want that in, maybe this category you’ve got some really nice images, maybe the review images you’ve got are great and you want to highlight that

So you’ve got the ability to customize the display on the category there, so I’ve whistle stopped through this we talked a little bit about colours, so we’re using the colour API a little bit of calculation, we’re using LESS in CSS Preprocessing there talked about typography, so we’ve used the Google Fonts API to allow you to choose a font we know from the Google Fonts API, what the variants are, so we can pick that and we can give you a transform, we’ve got the base font size we talked about layout, we talked about the post query widget and about the custom layouts for categories so has anybody got any questions?

Q: Are you guys supporting live previewing in addition to the standard customizer stuff?

A: Yeah, absolutely, so all of this stuff, I mean if you’re not familiar with the customizer, one of the great things about it is nothing is live until you click the save and publish so all of this customization is happening just for you personally so even with the LESS Preprocessing, that’s being piped off into a separate stylesheet which is only being served to the editor that’s actually doing the customization at the moment

Q: ( […] )

A: Yeah, we’re working with posts, obviously the built in post type which they’re using for articles, we’ve got a custom post type for events and for reviews as well so the post query widget that I showed you, you can say I want to see just reviews here or just events here and it will allow you to display those

Q: ([…])

A: Some of the titles that we’re dealing with are relatively low staffed So I don’t think that kind of title would be necessarily looking at clicks we have got an evolution of the post query widget which looks at Google Analytics and uses the Google Analytics API to evaluate what’s popular in a particular category so you can use that as the sort mechanism, but that’s not something that’s live on the site at the moment

Q: ([…])

A: Yeah, so the widget areas that are there for the, where are we, let’s skip back through yeah the widget areas that are here are exactly the same widget areas, they’re just, they cascade through with the different break points and we move them around so this is the full desktop width but if you can quickly scan you can see that the same widget areas are just linearizing basically as you move down through the sizes so it’s exactly the same stuff ([…]) absolutely yeah responsive break points any more for any more

Q: ([…])

A: At the moment, pre-3.9 the disadvantage is anything you do to a widget is live on the site immediately, post 3.9 widgets move into the customizer so we’re able then to choose the widget layout and mess around in the same way exactly the same was as I said for the rest of the customizer, you can change your colours, change your fonts it’s not live until you click save and publish so 3.9 is going to herald a grand new dawn in terms of that being able to get right before it’s live

Q: ([…])

A: The brief for the widgets was that it wasn’t so much of a manual curation process, so if we needed to manually curate this particular post into position in this particular area of the homepage

I guess you could get around that by hacking with tags, but it wasn’t a core part of the brief that we were able to do that, so using something like zoninator where you can precisely choose which post to go and in which order they appear in wasn’t a requirement we could develop a different widget that did something like that I think we would probably still stick with widgets we’re also looking at doing some work to customize

so you can take the homepage layout and then for a particular purpose maybe for a sponsorship section have all of the sidebars completely custom for that but hidden from normal view so It’s only when you’re editing that page that you go in and those side bars are only live when you’re editing that page, that set of sidebars so you don’t end up with this situation wherein the WordPress admin area, the widget section you’re looking at all the sidebars and there’s like 300 sidebars which one am I adding the widgets in and which one am I not we’re able to actually filter which sidebars are being shown for a particular purpose

Q: ([…])

A: Yeah exactly that principle yeah.

Q: ([…])

A: Yeah, so like I say, some of these are fairly low staffed publications so the key for them is probably that they’ll set something up and then they won’t touch it for a little while we’re using a plugin which is available on the .org repository called the customizer settings revisions which allows you to save what you’ve created so you might go like “okay, this is the Christmas layout” with all the pretty snowflakes and the lovely snowy red design and then you can pop back to that when Christmas comes around again or when Easter comes around or whatever you want to do thematically so we’re using that plugin for that purpose

Q: ([…])

A: So the ads are outside of the widget areas, they’re placed at various points in the page that we know how to deal with for again, for the responsive break points are we concerned about the responsive kind of nature of it and so on, yeah so we have, we haven’t got the ability to do the thing that really you only do to show your boss that the site’s responsive which is you know, move the site edges in and out and change the width of the page, the adverts won’t change at that point because they only change on page load, it will look at the width and then ascertain what ads you need and then load them at that point does that answer the question?

Cool. Thank you.

 

See the presentations from previous Big Media & Enterprise WordPress Meetups. For Big Media & Enterprise WordPress Meetup groups in other cities, see the full list on VIP Events and join your local group. 

Want more information about WordPress services for media or enterprise sites? Get in touch.

Building Quartz – Now With Full Transcript

Josh Kadis is the web applications technologist at Quartz. At our August Big Media Meetup, he gave a short “flash talk” on building qz.com on WordPress, which we’ve shared here and republished now with the full transcript below. Quartz just celebrated its one-year anniversary, and you can learn more about it by reading our case study here.

See Josh’s slides here.

 

My name is Josh Kadis, I work for Quartz, which is a business and economics site from Atlantic Media, which is the publisher of The Atlantic. We launched in September last year, and our most recent numbers for July were about 5 million uniques (views). My role at Quartz is I do the bulk of the WordPress work and then I’ve also been heavily involved in building the Backbone application that runs the front-end of the site.

If you haven’t seen Quartz, it looks like this. It’s a responsive web app, WordPress backend, publishes on JSON API, that gets picked up by the backbone front-end and the bar across the top under the word Quartz – that expands and that’s how you navigate between different sections and within a section you can navigate by scrolling up and down in the column on the left which we call the queue, or in the “item well”, which is the main content area on the right.

So the basic architecture is that Automattic and the VIP team host our WordPress installation, the Backbone files and our CSS and some other Javascript kind of stuff are hosted on the same CDN that’s used by the rest of Atlantic Media, which is like theatlantic.com, theatlanticwire.com and other non-WordPress sites.

WordPress publishes the JSON API, and we get all the backend post authoring and media and we have some custom backend stuff, like a post type that allows us to publish the newsletter through the MailChimp API from within WordPress.

We have a self-hosted system for reader accounts, which is what you would use for the commenting feature that we recently rolled out which is more for annotating individual paragraphs within a post, and then managing your subscription to the newsletter The Daily Brief and that kind of stuff, so that’s also WordPress.

We’ve actually found that the comments that come back are less awful because people get to the specifics of what they want to say about this specific paragraph instead of a general “you suck”. That’s kind of nice.

We have this division of labour between WordPress and backbone where WordPress handles what you would expect: generating the basic HTML markup which kind of gives the page the basic structure and is useful for search engines. WordPress publishes the JSON API, and we get all the backend post authoring and media and we have some custom backend stuff, like a post type that allows us to publish the newsletter through the MailChimp API from within WordPress.

The order of the posts you see on the homepage is not initially chronological, it’s manually ordered by the editorial staff, that’s the ‘Top’ post. So there’s a plugin that allows them to do that with a drag and drop interface from among the recent posts. Backbone also handles what you’d expect on the client side: fetching data from the API, deciding where and when to render it on the page, reflowing based on the device and on the screen size. We’re doing some offline reading with local storage and all of the annotation’s functionality is contained within the Backbone app and the entire thing can be turned on and off without even touching WordPress.

The URL and getting Backbone and WordPress to interpret the URL in the same way is really where the two things come together. The whole site relies on that or else the front-end and back-end are out of sync.

So we have these two things and where do they really intersect? It’s here: The URL and getting Backbone and WordPress to interpret the URL in the same way is really where the two things come together. The whole site relies on that or else the front-end and back-end are out of sync. So just to kind of quickly walk through it, if you haven’t written a Backbone app before, the router is the foundation of it, it essentially determines how the URL is parsed and then triggers a series of events that come one after another and ultimately result in stuff showing up on the page.

Good URL design is really a key to what we’re doing.

To work, the router reads the permalinks, and Backbone has some kind of build in syntax for how you read a permalink and decide what’s a variable within that and what’s a key. The permalinks come back to WordPress to run off the rewrite rules, and the rewrite rules run Quartz.

Good URL design is really a key to what we’re doing. So something like this: http://qz.com/107970 is the URL of the most viewed post of the history of Atlantic Media, it’s about bees. This is something that doesn’t have to run through a URL shortener, doesn’t get redirected, both Backbone and WordPress will understand this URL and parse out that single ID in the exact same way. Here is a little bit of code from the router, grossly over simplified.

Basically the router initializes, you give it this regex, it looks for these core sections: ‘Top’ – which is, I explained, is the manually ordered, “here’s what’s important right now” segment of posts. ‘Most recent’ is the latest one, ‘Popular’ we kind of calculated near real time using Chartbeat, ‘About’ is some static pages.

When the router recognizes one of these keywords from the regex and the URL, it triggers the core function which passes the particular one to this event which then gets triggered and a whole bunch of other stuff happens that results in a bunch of posts as you scroll through.

When you look at the WordPress theme, if you see rewrite rules, you would kind of recognize the regular expression: Top, Latest, Popular, About, and for both the front-end query, which is this first set of rewrite rules and then the API they both resolve to pass these two parameters, these two query variables to WordPress. API = true or false and then request = one of these things in this array.

For handling those two variables, we add_rewrite_tag request, we hook into query_vars and add API and then WordPress knows to look for those two things so that when the parse_request action comes around, we are able to, and in my oversimplification, I left out an if statement here, then we can fire up this qz API class and kind of pre-empt the main WordPress loops and that’s how we get JSON back without really needing to run through anything else that WordPress would do.

So this kind of enables us to go from a regular URL with a parameter like JSON tacked onto the end which is how in a lot of situations if you were building a JSON API on top of WordPress, you might do something like this and get back basically the same data structure that’s in the WordPress post object.

For us, we haven’t done that for a couple of reasons. We’ve gone with a custom API for clarity’s sake, being able to put all our endpoints inside API and then on the server side, we want to do all our processing of the meta data before we return it through JSON or else all that work needs to be done and that slows things down.

So for example, we’re able to return the URL to multiple sizes of the same image which we’ll ultimately be able to serve differently using this new SRC set attribute for different screen resolutions, stuff like that that is not necessarily apparent if you’re just reading the meta data straight out of the database.

So the Backbone side touches WordPress in a couple of other places. One is we need a way to keep track of version numbers, because they really are so separate. When we load the current Backbone version, it’s a different actual number than the WordPress version, so WordPress needs to know what’s what and keep one step ahead of the VIP team, really, because we put in a deploy to them, and we’re not sure when it’s going to come back so we want to know that as soon as it does, we’re ready and we’ll load the correct version of the application.

We’re also sort of separate from WordPress but still in Automattic, we’re using an Akismet API for kind of like profanity and spam filtering when annotations come in.

So in a second I’ll show you a quick shot of a plugin that enables us to do that. We’re also sort of separate from WordPress but still in Automattic, we’re using an Akismet API for kind of like profanity and spam filtering when annotations come in. Previews get pretty complicated in fact, with the Backbone app because it doesn’t know if the person is logged in to WordPress or not, it doesn’t know what permissions they have, so we need to sort of render some special Javascript in the markup that comes back initially from WordPress in order for Backbone to pick up that preview.

And then finally, there’s something that we’re working on that David in the third row in the red shirt is going to be working on soon, which is kind of figuring out how to keep the WordPress post templates and the underscore templates that Backbone uses, keep those in sync. It’s kind of hard right now, and ultimately doing a better job of that will allow us to load more of the application initially from WordPress, instead of having to process it within the browser in the Backbone app and then put it on the page.

So, this is a quick look at the plugin that manages the version number, essentially it allows you to stay on this auto-pilot mode that kicks whichever version is higher between the constant that’s set in the theme that can get committed to VIP or a setting that’s saved in the options table that you can set here so if for example you have a new version in the Javascript application that’s not making any adjustments to WordPress, we can just update the setting here in the plugin as soon as we put it on the CDN and we’re ready to push it.

But if we have stuff that’s sort of related to some changes in the WordPress theme and some stuff in the Backbone app, we put the Backbone app up first change the constant in the WordPress theme to sort of point to that new version of the Backbone application and as long as we’re sort of incrementing the number, the plug in will kick the higher number as soon as the new code with the constant is live on VIP.

This is just a quick look at annotations. You should all check it out, it’s really really nice. The responsive aspects of it are really cool and it’s just an interesting way of diving into the content. We’ve actually found that the comments that come back are less awful because people get to the specifics of what they want to say about this specific paragraph instead of a general “you suck”. That’s kind of nice.

Ready to get started?

Drop us a note.

No matter where you are in the planning process, we’re happy to help, and we’re actual humans here on the other side of the form. 👋 We’re here to discuss your challenges and plans, evaluate your existing resources or a potential partner, or even make some initial recommendations. And, of course, we’re here to help any time you’re in the market for some robust WordPress awesomeness.