Apple NewsWordPress Plugin – – We're Hiring!

View Github Repository Open presentation in a new window

bcampeau

See all presentation from bcampeau

Apple NewsWordPress Plugin – – We're Hiring!

0 0

apple-news

Apple News for WordPress

On Github bcampeau / apple-news

Apple NewsWordPress Plugin

Bradford Campeau-Laurion / @potatomasterPartner & Chief Strategy Officeralleyinteractive.com

I'm here to talk about the Apple News WordPress plugin we helped develop for the New York Post, VIP and the WordPress community.

  • We design and build big websites for news organizations and large-scale non-profit institutions.
  • WordPress.com VIP partner

We're Hiring!

hiring@alleyinteractive.com

What is Apple News?

Released with iOS 9
News collects all the stories you want to read, from top news sources, based on topics you’re most interested in. It's designed to be a rich and immersive experience, letting you enjoy stunningly crafted articles that reflect the style of the publications they come from. (Apple)
It tailors the experience to all Apple devices and allows for exploration and discovery of content. At it's heart, it's a news reader with an Apple user experience and a footprint on every device.
The more you read, the better News gets at understanding your interests, refining the selection of stories delivered to your screen so they are relevant to you. Easily share articles with others and save them to read offline. It has a footprint on all of your user's Apple devices. (Apple)
News Corp was a launch partner. Went out to Cupertino, sequestered for a week. Pre-launch product, docs were only available on-site. Frank handled design and I went to work figuring out publishing. Mention AppleSeed bi-weekly build.

Apple News Format

RSS is an option, but Apple News format lets you take advantage of all the custom design options.

JSON

							
{
    "version":"0.10",
    "identifier":"post-12345",
    "language":"en",
    "title":"A headline goes here",
    "layout":{
        "columns":7,
        "width":1024,
    },
    "components":[
        {...}
    },
    "metadata":{
        "thumbnailURL":"bundle:\/\/featured.jpg"
    }
}

Components

							
"components":[
	{
		"role":"photo",
		"URL":"bundle:\/\/featured.jpg",
		"caption":"",
		"accessibilityCaption":"",
		"behavior":{
			"type":"parallax",
			"factor":0.6
		},
		"layout":{
			"ignoreDocumentMargin":true
		}
	}
]
Components are the core of the news format. They represent things like content, videos and photos and can take on all types of attributes to create the rich Apple News experience.

Animations

Appear Fade-in Move-in Scale Fade
Scene (Abstract) Fading Sticky Header ParallaxScaleHeader

Behaviors

Motion Parallax SpringyMany of these terms probably seem familiar to you if you use an iPhone

Layout and Position

Columns, widths, similar to a responsive grid. Anchoring components to each other.

Styles

Use of custom fonts through bundling OTF or TTF files. All of these things come together into hundreds of lines of JSON.
The first thought was to create a plugin. We have formatting in our stories already called HTML, so let's turn it into Apple News.

Beezwax

Apple already thought of this and we discovered they had an excellent codebase to start, solved many of the major challenges with Apple News.

API Interactions

Full library to handle all possible API interactions

Request Signing

Setting Up MAC/HMAC Authentication can be tricky

Dashboard tools

Publish and manage content on Apple News

Built-in Formatting Options

Admin page with a number of built-in formatting options to let you start publishing immediately with nothing more than your API key and Channel ID.

Parsing Content

Turning a post into the JSON format.

HTML > Markdown

Apple news only supports markdown and predefined components.
advertisement audio body byline component cover divider embed-web-video gallery
heading image instagram intro quote title tweet video
Refactoring the code the WordPress way and to WordPress VIP standards. 3 weeks from launch. Many of the big publishers who would want to use this are on VIP.

Coding Standards

Beezwax were excellent PHP devs, but not WP devs. Apple quickly realized that we would be the best bet to get this over the line for launch. In the next two weeks, I edited 10K of the 15K lines of code.

Sanitization and Escaping

Replacing CURLwith WP HTTP API

Debug mode

To help sort out publishing issues with more complex templates.

Action and Filter Hooks

Every major publisher wants a custom design, which the plugin didn't permit. We added over 70 total hooks to modify all aspects of the JSON output and the admin interface, to add custom component classes, and more.

Bundling

All content, images and fonts

Apple needs to control and serve all assets and therefore every font and image served in the article must be pushed in a single, massive API request. This initially made heavy use of the file system so this was completely rewritten to build the request on the fly. This was probably the most complex part of the rewrite.
Seriously, thanks to VIP for reviewing 15K lines of code in about a week and getting this up for launch.

The Result

Immersive news experiences for all three NYPost properties.
NYPost design combined with a native Apple experience.

Enhancements

More Filters

More control over customization of content.

More Component Classes

To support additional components added by Apple.

Asynchronous Publishing

Massive API requests often exceed 30 seconds. Using the VIP Jobs system to offload publishing to avoid timeouts.

1.0 Release

Get Involved

News Preview

https://developer.apple.com/news-preview/ Drag and drop bundles to preview and debug your templates. Requires the Simulator.

Get a channel

https://www.icloud.com/newspublisher/ Get a channel to use for publishing, although most of the folks here probably would reach out directly.

Use the plugin

WordPress.org

http://www.wordpress.org/plugins/publish-to-apple-news

WordPress VIP

https://vip.wordpress.com/plugins/apple-news/It's .org and VIP.

Pull Requests Welcome

https://github.com/alleyinteractive/apple-newsPlease contribute new features and enhancements.

The End

brad@alleyinteractive.com @potatomaster

Alley Interactive @alleydev

We're Hiring!

hiring@alleyinteractive.com

#bigwp
Apple NewsWordPress Plugin Bradford Campeau-Laurion / @potatomasterPartner & Chief Strategy Officeralleyinteractive.com I'm here to talk about the Apple News WordPress plugin we helped develop for the New York Post, VIP and the WordPress community.