WordPress 3.9 + Audio/Video

Screen Shot 2014-04-16 at 2.54.12 PM

Previous posts on Make/Core:
Audio / Video 2.0 Update – Media Modal 
Audio / Video 2.0 Update – Playlists 
Audio / Video 2.0 Update 
Audio / Video 2.0 – codename “Disco Fries”

If you remember WordPress 3.6, we were scrambling to make Post Formats work. They did not, so they were dropped. What remained in the aftermath was rudimentary support for audio and video. You could display one audio file at a time and/or one video file at a time using a shortcode. Good, but not good enough. WordPress 3.9 has a TON of improvements, several related to visual editing, media, and a second pass at defining what audio and video can do in WordPress.

HTML5 audio and video on the web are still the Wild Wild West, I viewed 3.9 as a way to help tame the beast.

Media code from 3.5

Koop wrote an astonishing amount of beautiful Backbone-driven code in WordPress 3.5 related to overhauling and rethinking Media in WordPress. Gregory Cornelius, Andrew Ozz, and I spent the better part of 3.9 swimming around it and its relationship to TinyMCE. While there isn’t a ton of written documentation for media, I did fall on the sword and added JSDoc blocks to every class in media-views, media-model, and media-editor JS files. It is now possible to follow the chain of inheritance for every class, which is 7 levels deep at times. We’ve also built some new features, and learned how to interact with these existing APIs.

TinyMCE Views – Visual previews of your media

Screen Shot 2014-04-16 at 2.26.34 PM TinyMCE is the visual editor in WordPress. Behind the scenes, the visual editor is an iframe that contains markup. In 3.9, gcorne and azaozz did the mind-bending work of making it easier to render “MCE views” – or content that had connection to the outside world of the visual iframe via a TinyMCE plugin and mce-view.js. A lot of the work I did in building previews for audio and video inside of the editor was implementing the features and APIs they created. gcorne showed us the possibilities by making galleries appear in the visual editor. Everything else followed his lead. Screen Shot 2014-04-16 at 2.26.00 PM

Themes now have proper CSS

We went back in time to the last 5 default themes and added the basic styles necessary for audio and video to behave in a unified way. Meaning, if you switch from TwentyEleven theme to TwentyFourteen: videos should always have the same aspect ratio. Same goes for the admin, the video should always appear with dimensions that are predictable.

<audio> and <video> are now responsive

Because of the above CSS changes, audio and video are responsive throughout WordPress and on mobile. Win.

Attachment Pages

If I asked you the question – do players automatically appear for audio and video files on their respective attachment pages? You might answer, of course they do! … they did not, they do now!

Screen Shot 2014-04-16 at 2.29.58 PM

Chromeless YouTube

MediaElement supports the playback of YouTube videos without the look and feel of a YouTube player. This is great because the style of the video player will match the style of your other players.

Screen Shot 2014-04-16 at 2.33.27 PM

MediaElement updated

MediaElement.js has been updated to the latest and greatest version. HUGE thanks to John Dyer for working so closely with us and accepting pull requests when we badger him on random Saturday afternoons.

Playlists

Turning mp3 URLs into players is awesome and happens automagically in WordPress now. But what if you are sharing an entire album of your band’s tunes, or sharing your music recital on your website? Rendering 10 separate players is visually weird. We already have “galleries” for images, can we reuse the admin UI for those and make it work for playlists of audio or video files? We can (after some sweat and tears), so we did. I remember staying up all night in 2006 trying to figure out how to put my band’s music on our website. If even a niche user base of musicians are able to publish their music because of this feature, it will have been worth it.

Screen Shot 2014-04-16 at 2.38.22 PM

Manage Shortcodes

Your audio and video shortcodes now have live previews in the editor, but that’s not it… you can now click the preview to pop open the media modal and edit your content. Once there you can:

  • Add alternate playback formats for maximum native HTML5 playback
  • Add a poster image for your video, if it wasn’t done automatically on upload
  • Add subtitles to your video

Screen Shot 2014-04-16 at 2.42.56 PM

It’s pretty slick.

Screen Shot 2014-04-16 at 2.43.25 PM

Core Changes

Some other cool little treats:

  • Featured Image is turned on for attachment:audio and attachment:video = when you upload your audio and video files, if the files contain cover images, they are automatically slurped for you, uploaded, and associated as the featured image for the media file. Meaning: you will automatically have a video poster image, or your audio playlist will display the album cover along with the track.
  • Images in ID3 tags are stored via hash to prevent re-uploading = if you upload 10 tracks from an album that all have the same album cover, only one cover will uploaded and associated with all of the tracks.
  • Artist and Album are editable = your media item’s title is always used as the “song title,” but now, if your item did not contain metadata for artist and album, you can set it on the Edit Media screen.
  • The old “crystal” icon set for media items has been updated and MP6ified. They look WAY better.

Have fun with WordPress 3.9 🙂

xoxo

Rethinking Blogs at The New York Times

The New York Times

See Also: The Technology Behind the NYTimes.com Redesign

The Blogs at the Times have always run on WordPress. The New York Times, as an ecosystem, does not run on one platform or one technology. It runs on several. There are over 150 developers at the Times split across numerous teams: Web Products, Search, Blogs, iOS, Android, Mobile Web, Crosswords, Ads, BI, CMS, Video, APIs, Interactive News, and the list goes on. While PHP is frequently used, Elastic Search and Node make an appearance, and the Newspaper CMS, “Scoop,” is written in Java. Interactive likes Ruby/Rails.

The “redesign,” which launched last week, was really a re-platform: where Times development needs to head, and a rethinking of our development processes and tools. The customer-facing redesign was 2 main pieces:

  • a new Article “app” that runs inside of our new platform
  • the “reskinning” of our homepage and section fronts

What is launching today is the re-platform of Blogs from a WordPress-only service to Blogs via WordPress as an app inside of our new platform.

The Redesign

Most people who use the internet have visited an NYTimes article page –

the old design:
http://www.nytimes.com/2013/12/29/arts/music/lordes-royals-is-class-conscious.html

Lorde

the new:
http://www.nytimes.com/2014/01/15/arts/music/jay-z-offers-a-view-of-his-legacy-at-barclays-center.html?ref=music

Jay-Z at Barclay's

What is not immediately obvious to the reader is how all of this works behind the scenes.

Non-Technical

To skip past all of the technical details, click here:

How Things Used to Work

For many years at the Times, article pages were generated into static HTML files when published. This was good and bad. Good because: static files are lightning fast to serve. Bad because: those files point at static assets (CSS, JavaScript files) that can only change when the pages are re-generated and re-published. One way around this was to load a CSS file that had a bunch of @import statements (eek), with a similar loading scheme for JS (even worse).

Blogs used to load like any custom WordPress project:

  • configured as a Multisite install (amassing ~200 blogs over time)
  • lots of custom plugins and widgets
  • custom themes + a few child themes

A lot of front-end developers also write PHP and vice versa. At the Times, in many instances, the team working on the Blogs “theme” was not the same team working on the CSS/JS. So, we would have different Subversion repos for global CSS, blogs CSS; different repos for global JS, blogs JS; and a different repo for WordPress proper. When I first started working at the Times, I had to create a symlink farm of 7 different repos that would represent all of the JS and CSS that blogs were using. Good times.

On top of that, all blogs would inherit NYTimes “global” styles and scripts. A theme would end up inheriting global styles for the whole project, global styles for all blogs, and then sometimes, a specific stylesheet for the individual blog. For CSS, this would sometimes result in 40-50 (sometimes 80!) stylesheets loading. Not good.

WordPress would load jQuery, Prototype, and Scriptaculous with every request (I’m pretty sure some flavor of jQuery UI was in there too). As a result, every module within the page would just assume that our flavor of jQuery global variable NYTD.jQuery was available anywhere, and would assume that Prototype.js code could be called at will. (Spoiler alert: that was a bad idea.)

WordPress does not use native WP comments. There is an entire service at the Times called CRNR (Comments, Ratings, and Reviews) that has its own user management, taxonomy management, and community moderation tools. Modules like “CRNR” would provide us with code to “drop onto the page.” Sometimes this code included its own copy of jQuery, different version and all.

Widgets on blogs could be tightly coupled with the WordPress codebase, or they could be some code that was pasted into a freeform textarea from some other team. The Interactive News team at the Times would sometimes supply us code to “drop into the C-Column” – translation: add a widget to the sidebar. These “interactives” would sometimes include their own copy jQuery (what version…? who knows!).

How Things Work Now

The new platform has 2 main technologies at its center: the homegrown Madison Framework (PHP as MVC), and Grunt, the popular task runner than runs on Node. Our NYT codebase is a collection of several Git repos that get built into apps via Grunt and deployed by RPMs/Puppet. For any app that wants to live inside of the new shell (inherit the masthead, “ribbon,” navigation automatically), they must register their existence. After they do, they can “inherit” from other projects. I’ll explain.

Foundation

Foundation is the base application. Foundation contains the Madison PHP framework, the Magnum CSS/Responsive framework, and our base JavaScript framework. Our CSS is no longer a billion disparate files – it is LESS manifests, with plenty of custom mixins, that compile into a few CSS files. At the heart of our JS approach is RequireJS, Hammer, SockJS and Backbone (authored by Times alum Jeremy Ashkenas).

Madison is an MVC framework that utilizes the newest and shiniest OO features of PHP and is built around 2 main software design patterns: the Service Locator pattern (via Pimple), and Dependency Injection. The main “front” of any request to the new stack goes through Foundation, as it contains the main controller files for the framework. Apps register their main route via Apache rewrite rules, Madison knows which app to launch by convention based on the code that was deployed via the Grunt build.

Shared

Shared is collection of reusable modules. Write a module once, and then allow apps to include them at-will. Shared is where Madison’s “base” modules exist. Modules are just PHP template fragments which can include other PHP templates. Think of a “Page” module like so:

Page
- load Top module
- load Content module
- load Bottom module

Top (included in Page)
- load Styles module
- load Scripts module
- load Meta module

...

In your app code, if you try to embed a module by name, and it isn’t in your app’s codebase, the framework will automatically look for it in Shared. This is similar to how parent and child themes work in WordPress. This means: if you want to use ALL of the default modules, only overriding a few, you need to only specify the overriding modules in your app. Let’s say the main content of the page is a module called “PageContent/Thing” – you would include the following in your app to override what is displayed:

// page layout
$layout = array(
    'type' => 'Page',
    'name' => 'Page',
    'modules' => array(
        array(
            'type' => 'PageContent',
            'name' => 'Thing'
        ),
        .....
    )
);

// will first look in
nyt5-app-blogs/Modules/PageContent/Thing.tpl.php
// if it doesn't find it
nyt5-shared/PageContent/php/src/Thing.tpl.php

So there’s a lot happening, before we even get to our Blogs app, and we haven’t even really mentioned WordPress yet!

App-specific

Each app contains a build.json file that explains how to turn our app into a codebase that can be deployed as an application. Each app might also have the following folder structure:

js/
js/src
js/tests
less/
php/
php/src
php/tests

Our build.json files lists our LESS manifests (the files to build via Grunt) and our JS mainifests (the files to parse using r.js/Require). Our php/src directory contains the following crucial pieces:

Module/ <-- contains our Madison override templates
WordPress/ <-- contains our entire WP codebase
ApplicationConfiguration.php <-- optional configuration
ApplicationController.php <-- the main Controller for our app
wp-bootstrap.php <-- loads in global scope to load/parse WordPress

The wp-bootstrap.php file is the most interesting portion of our WordPress app, and where we do the most unconventional work to get these 2 disparate frameworks to work together. Before we even load our app in Madison proper, we have already loaded all of WordPress in an output buffer and stored the result. We can then access that result in our Madison code without any knowledge of WordPress. Alternately, we can use any WP code inside of Madison. Madison eschews procedural programming and enforces namespace-ing for all classes, so collisions haven’t happened (yet?).

Because we are turning WP content in Module content, we no longer want our themes to produce complete HTML documents: we only to produce the “content” of the page. Our Madison page layout gives us a wrapper and loads our app-specific scripts and styles. We have enough opportunities to override default template stubs to inject Blog-specific content where necessary.

In the previous incarnation of Blogs, we had to include tons of global scripts and styles. Using RequireJS, which leans on Dependency Injection, we ask for jQuery in any module and ensure that it only loads once. If we in fact do need a separate version somewhere, we can be assured that we aren’t stomping global scope, since we aren’t relying on global scope.

Using LESS imports instead of CSS file imports, we can modularize our code (even using 80 files if we want!) and combine/minify on build.

Loading WordPress in our new unconventional way lets us work with other teams and other code seamlessly. I don’t need to include the masthead/navigation markup in my theme. I don’t even need to know how it works. We can focus on making blogs work, and inherit the rest.

What I Did

For the first few months of the project, I was able to work in isolation and move the Blogs codebase from SVN to Git. I was happy that we were moving the CSS to LESS and the JS to Require/Backbone, so I took all of the old files and converted them into those modern frameworks. The Times had 3 themes that I was given free reign to rewrite and squish into one lighter, more flexible theme. Since the Times has been using WordPress since 2005, there was code from the dark ages of the internet that I was able to look at with fresh eyes and transition. Once a lot of the brute force initial work was done, I worked with a talented team of people to integrate some of the Shared components and make sure we had stylistic parity between the new Article pages and Blogs.

To see some examples in action, a sampling:

Dealbook

Bits

Well

The Lede

City Room

ArtsBeat

Public Editor’s Journal

Paul Krugman

WordPress: Autowiring Custom Post Type Metadata

The New York Times Co.

Write Less Code

I recently did a project at the New York Times, a corporate website that was highly dynamic. A lot of the front-end work was done ahead of time with dummy content. I was brought in at the end to rewrite the core logic and set up all of the dynamic pieces. EVERYTHING had to be dynamic. There were several times that I had to quickly replace a dummy HTML list with content from a collection of objects belonging to a custom post type. I didn’t want to re-invent the wheel every time I added a new post type. I wanted to write one register_post_type() call with a helper as the value for 'register_meta_box_cb'.

Here’s How

Custom post types in WordPress are really object types, much like a blog post is an instance of the Post object type. When you register a custom post type, you are really registering a new “thing” that isn’t really a “post,” it’s something else. Once you have registered this thing, you will probably use the same API as Post to interact with your data: WordPress core functions to retrieve and save your data.

By far the most annoying things about custom post types are how much code it takes to register one and how much duplicate code it takes to save arbitrary metadata. An example:

I want to create a new object called “nyt_partner” – I am going to use the title, the content, and featured image, but I also need to associate some arbitrary data with each instance of “nyt_partner”: phone number, address, twitter account, etc. I am only going to read the data (not search for it), so object (post) metadata works just fine.

Here is some example code for how one currently registers the post type, then registers the metabox to display a form for new fields, and then saves the data when the post is saved:

All that code, and all we are doing is saving a twitter field. Gross. What if our site is very custom and we are using objects all over the place? What if everything on the site needs to be editable? This code is going to bloat almost immediately, so we need to find more ways to reuse.

The first thing we need to do is use a class to contain our logic, and ditch all of the procedural code from the last example. We are going to seriously optimize this code later, but here it is as a class:

This object is better, but it can still bloat very quickly. For each post type that has custom data, you have to add a meta box in one callback, and then register the UI in another. Every time your new object is saved, you have to run it through your own save logic, which adds even more bloat. For objects that are really complex, you actually might want to create a class per type, but most of the time, the data you are saving are attributes or simple fields. It would be great if we could create a few methods to autowire the creation and saving of a field.

In the next example, we will use closures and parent scope to dramatically decrease the necessary code to register a field:

For the time being, if I need to add another post type that has one field, I can just add these lines and be done with it:

All of the magic is rolled up into the NYT_Post_Types::create_field_box() method. So, if you need to add a bunch of post types at once that only save a field, you only have to edit the init method. This works if I have only one field. If I have several, I need to add a method:

To specify the fields while registering the post type:

Another piece of magic that we wired up – you can autowire a save method for a post type (that does not use autowiring for the UI) by adding a save_{post_type} method to your class. If you create a post type called balloon, all you have to do is add a method called save_balloon to your class. Our one registered save_post callback is smart enough to call it. This is great because you don’t have to duplicate the logic to determine if the post is eligible for save.

The autowiring methods (create_field_box() and create_fields_box()) dynamically create class properties with closures, but first look for an existing method. You can’t have both. Closures actually create properties on the class, not new class methods. This makes sense because you are really decorating your object with instances of the Closure class, which is what closures are. Closures should look very familiar to you if you write JavaScript with jQuery.

Some of your custom post types will need unique method callbacks for 'register_meta_box_cb', but my bet is that MOST of them can share logic similar to what I have demonstrated above. At eMusic, we had 56 custom post types powering various parts of the site. I used similar techniques to cut down the amount of duplicated logic across the codebase.

You may not need to use these techniques if your site is simple. And note: you can’t use closures in any version of PHP before 5.3.

Best Albums of 75% of 2013 So Far

Muchaco

The Best

Kanye West – Yeezus
Phosphorescent – Muchacho
Drake – Nothing Was The Same
Volcano Choir – Repave
Disclosure – Settle
Chvrches – The Bones of What You Believe
Jason Isbell – Southeastern
The Weeknd – Kiss Land
Icona Pop – This is… Icona Pop
Flume – Flume
The National – Trouble Will Find Me
Yeah Yeah Yeahs – Mosquito
Kacey Musgraves – Same Trailer Different Park
Vampire Weekend – Modern Vampires of the City

The Rest

Yeah Yeah Yeahs – Mosquito
John Mayer – Paradise Valley
The National – Trouble Will Find Me
HAIM – Days are Gone
Kacey Musgraves – Same Trailer, Different Park
The Civil Wars – The Civil Wars
Vampire Weekend – Modern Vampires of the City
Daft Punk – Random Access Memories
AlunaGeorge – Body Music
Jim James – Regions of Light and Sound of God

Other things worth listening to:

Akron/Family – Sub Verses
Woodkid – The Golden Age
Daughn Gibson – Me Moan
Lightning Dust – Fantasy
Deptford Goth – Life After Defo
Little Boots – Nocturnes
Autre Ne Veut – Anxiety
Daughter – If You Leave
Flume – Flume

WordPress 3.6 + Audio/Video

Screen Shot 2013-08-01 at 1.39.43 PM

I have already written once about the new support for Audio / Video in WordPress 3.6:
http://make.wordpress.org/core/2013/04/08/audio-video-support-in-core/

I also spoke about the new features in my Code Poet interview:
http://build.codepoet.com/2013/07/18/scott-taylor-interview/

I wanted to use this space to give the users some information about the new code and how to take advantage of it.

Upload Limits

A lot of Apache / PHP installs have an arbitrarily low file upload size limit set (usually 2MB). An average .mp3 file is at least 3-5MB. Video can be way bigger. If you are on a shared host that doesn’t allow uploads over a certain size, you may have to get more creative about where your audio and video files are stored. The only difference will be not having them in your media library. You can use all of the new a/v features with remote files.

If you have access to your own server and can tweak your configs, you can change your settings to allow larger uploads. There are a bunch of ways to override – either by altering your php.ini file or setting PHP values in .htaccess and then restarting Apache. The best way is to change your .ini settings:

// find the location of your php.ini file:
php -i |grep php.ini

// in php.ini
upload_max_filesize = 2M

// change this to something bigger
upload_max_filesize = 2000M

// also change this value
post_max_size = 2000M

You may need to change permissions of php.ini to make it writable.

Mime-Types

Paul Irish’s HTML5 Boilerplate has all of the settings you need to support the types used by HTML5 audio and video <audio> and <video> tags: the file

The most useful lines:

<IfModule mod_mime.c>
  # Audio
    AddType audio/mp4              m4a f4a f4b
    AddType audio/ogg              oga ogg

  # Video
    AddType video/mp4              mp4 m4v f4v f4p
    AddType video/ogg              ogv
    AddType video/webm             webm
    AddType video/x-flv            flv
</IfModule>

If you don’t do this, your server may send the files with a mime-type of application/octet-stream. They might play, might not, but it’ll probably get weird.

Shortcodes

The simplest way to use the new media shortcodes is to not write them by hand. When you click “Insert Into Post” from Media Library for an audio or video file now, the shortcode will be written into the editor for you. Probably don’t mess with it. If you are a video savant and have multiple copies of your video or audio in all of the HTML5 formats, you can use them all, but you will have to write in the extra attributes by hand.

Examples of shortcodes inserted by media library:

// by default uses the "src" attribute
[audio src="http://tunez.net/cool-song-bro.mp3"]

// multiple files for maximum HTML5 playback
[audio mp3="http://tunez.net/cool-song-bro.mp3"
    ogg="http://tunez.net/cool-song-bro.mp3"]

The [audio] shortcode also allows the following attributes: loop, autoplay, and preload (defaults to none).

// by default uses the "src" attribute
[video width="400" height="300" src="http://tunez.net/cool-movie-bro.mp4"]

// multiple files for maximum HTML5 playback
[video width="400" height="300"
    mp4="http://tunez.net/cool-movie-bro.mp4"
    ogv="http://tunez.net/cool-movie-bro.ogv"
    webm="http://tunez.net/cool-movie-bro.webm"]

The [video] shortcode also allows the following attributes: poster, loop, autoplay, and preload (defaults to metadata).

Embed Handlers

If you put an audio or video URL on a line by itself – boom, you’re done. A player will show up if the file extension is in the list of supported types.

http://mp3-url

This is where my text starts - notice the breathing room
between the URL and the content.

Metadata

Your audio and video uploads now have metadata that is extracted when they are uploaded. Prior to 3.6, no metadata was generated for audio and video files. A/V files are typically created with ID3 tags. ID3 tags contain data like artist, album, song, genre, etc for audio files and length, dimensions, codecs, etc for video.

To access this data:

// assuming you have an attachment ID
$meta = wp_get_attachment_metadata( $attachment->ID );

// debug to see what is available
print_r( $meta );

// always check for the property's existence before doing anything
if ( ! empty( $meta['length_formatted'] ) )
     echo $meta['length_formatted'];

None of the data is guaranteed to be there. If you have uploaded audio or video previously, this data won’t be generated on the fly. We are using the getID3 library to parse the files on upload. The code is elaborate. It is also possible that your media files don’t contain ID3 tags. If your files DO contain data, some of it is displayed in the sidebar on the Edit Media page. Some of the fields on the Edit Media page are pre-populated now with data from your ID3 tags, if they were present on upload.

Images embedded in MP3s

If you add the following lines to your functions.php:

add_post_type_support( 'attachment:audio', 'thumbnail' );
add_post_type_support( 'attachment:video', 'thumbnail' );
add_theme_support( 'post-thumbnails', array( 'attachment:audio', 'attachment:video' ) );

If your mp3 contains an image, the image will be extracted, uploaded to your media library, and will be the post thumbnail for your audio file.

Screen Shot 2013-08-01 at 4.58.17 PM

Best Albums of 2013 So Far

Disclosure, Settle

I have FOMO when it comes to music, so I have been focusing all week on listening to as much 2013 music as possible. I scoured other people’s mid-year lists, downloaded some stuff from eMusic / bought some stuff on iTunes, watched all kinds of clips on YouTube.

At this point in the year, electronic music is king. There are also big releases that have yet to drop and will definitely shake up the year-end list (Drake and The Weeknd, to name a few). The records at the top are unsurprising.

The Best

Disclosure – Settle
Kanye West – Yeezus
Phosphorescent – Muchacho
The National – Trouble Will Find Me
Yeah Yeah Yeahs – Mosquito
Kacey Musgraves – Same Trailer Different Park
Vampire Weekend – Modern Vampires of the City

Other things worth listening to:

Akron/Family – Sub Verses
Woodkid – The Golden Age
Daughn Gibson – Me Moan
Lightning Dust – Fantasy
Deptford Goth – Life After Defo
Flume – Flume
Little Boots – Nocturnes
Autre Ne Veut – Anxiety
Daughter – If You Leave

House of Balloons, chock full of samples

Image

The story of The Weeknd is folklore by now, but you may not realize how much of the first mixtape, House of Balloons, is cribbed from other artists. I don’t think it diminishes the record, but you probably have no idea how much Beach House you are listening to in the background. House of Balloons is the first of 3 mixtapes that dropped in 2010 under the moniker of The Weeknd, all 3 later released as the remastered / repackaged Trilogy.

“House of Balloons/Glass Table Girls”

Samples “Happy House” by Siouxsie and the Banshees. “This is… a Happy House…” etc, listen for it:

Stuffed in the background is this track from 1980:

“The Party & The After Party”

The first half of the track happens over a sped-up version of Beach House’s “Master of None” from their 2006 self-titled debut. Here’s The Weeknd sampling it, I was floored how much of this track is based on it:

And here’s the original Beach House version:

“Loft Music”

“Loft Music” features another sped-up, flanged-out Beach House track, from 2008’s Devotion, “Gila.”

Here’s the original, which inspires the vibe of the whole tune at double speed:

“The Knowing”

This track features sped-up, warped bits of the Cocteau Twins track “Cherry Coloured Funk” from their record Heaven or Las Vegas, also the name of a track on The Weeknd’s mixtape, Thursday. It’s the first thing you hear:

Cocteau Twins:

“What You Need”

The version which ultimately ended up on Trilogy is devoid of “Rock the Boat” by Aaliyah, but the original mixtape version has excerpts:

Aaliyah:

There was some beef from Jeremy Rose (the producer of “What You Need,” “The Party & The After Party,” and “Loft Music”) about not getting proper credit for his role on the record. Ironically, 2 of those tunes are the ones which sample Beach House the most.

Concerts I attended in 2012

Sharon Van Etten and Shearwater

I do this post every year (2011, 2010) as a wrap-up to remind me of all of the awesome stuff I saw over the year. Here’s the full list, followed after by a breakdown:

01.21.2012 Akron / Family – 285 Kent

02.17.2012 Sleigh Bells – Terminal 5
02.24.2012 Heartless Bastards – Webster Hall
02.25.2012 Sharon Van Etten – Bowery Ballroom
02.29.2012 Craig Finn – Mercury Lounge

03.08.2012 Craig Finn – Music Hall of Williamsburg
03.17.2012 Megafaun – Highline Ballroom
03.30.2012 Andrew Bird – Greene Space
03.30.2012 Of Montreal – Webster Hall

04.04.2012 Bruce Springsteen – Izod Center
04.06.2012 The War on Drugs – Music Hall of Williamsburg
04.10.2012 The Horrors – Music Hall of Williamsburg
04.12.2012 White Rabbits – Webster Hall
04.24.2012 Allo Darlin’ – Mercury Lounge
04.28.2012 Death Cab for Cutie / Youth Lagoon – Beacon Theater

05.04.2012 Andrew Bird – Beacon Theater
05.09.2012 The Avett Brothers – Terminal 5
05.11.2012 M. Ward – Webster Hall
05.11.2012 Rob Delaney – Bowery Ballroom
05.31.2012 Radiohead – Prudential Center

06.01.2012 Porcelain Raft – Mercury Lounge
06.22.2012 fun. – Music Hall of Williamsburg
06.29.2012 Akron / Family – Brooklyn Bowl

07.10.2012 Dirty Projectors – Prospect Park Bandshell
07.25.2012 Wilco – Terminal 5

08.02.2012 Donna The Buffalo – Rockin’ the River Cruise
08.06.2012 Mighty Mighty Bosstones – Webster Hall
08.08.2012 Bloc Party – Terminal 5
08.20.2012 Matthew E. White – Mercury Lounge
08.27.2012 Louis C.K. – The Bell House

09.21.2012 The Book of Mormon – Eugene O’Neill Theatre
09.22.2012 Bon Iver – Radio City Music Hall
09.23.2012 Metric – Radio City Music Hall
09.29.2012 Global Citizen Global Festival (Black Keys, Band of Horses, Foo Fighters, Neil Young)

11.14.12 Yellow Ostrich / Strand of Oaks – Bowery Ballroom
11.17.12 Occupy Sandy Benefit (Dirty Projectors, Vampire Weekend, et al) – St. Ann & The Holy Trinity
11.17.12 Matthew Dear – Webster Hall

12.11.12 Band of Horses (Acoustic) – Grand Ballroom
12.11.12 Band of Horses (Electric) – Hammerstein Ballroom
12.21.12 Dave Matthews Band / The Lumineers – Barclay’s Center
12.31.12 Blonde Redhead / Beach Fossils – Irving Plaza

Best Shows I Saw in 2012

#1 Bruce Springsteen – Izod Center 04.04.2012

a26693cc7eb711e180d51231380fcd7e_7

It is hard to explain the sheer electricity Bruce brings to a stadium in New Jersey. In Jersey, The Boss and Jovi are Gods. The Boss, deservedly so. Almost every time I think back to any key moment from this show, I get goosebumps like it’s happening right now. Aside from the spotless production and pro band, it’s hard to compete with moments like:

  • Bruce and Little Steven sharing the mic on “She’s The One”
  • Being only a few miles from Ground Zero and listening to a gospel-tinged “My City of Ruins”
  • Watching a 62-year old frontman who’s in better shape than Justin Bieber lead 18,000 people in sing the joyful yet heartbreaking “Waiting on a Sunny Day”
  • In the first tour after Clarence Clemons’ death, playing “10th Avenue Freeze Out” and after the line “the big man joined the band…” – coming to a dead stop, while all of the video screens in the arena flash images of Bruce and Clarence through the years as the band remains silent
  • “Thunder Road” and “Born to Run”

#2 Band of Horses (Acoustic) – Grand Ballroom 12.11.12
Band of Horses (Electric) – Hammerstein Ballroom

Band of Horses

No big deal, just saw one of my favorite bands play live every song they’ve recorded at 2 shows in the same night. First show started at 7:30pm. 2nd show ended at 1am. I was floating on air for days after this show.

### Special Acoustic Performance ###

On My Way Back Home
Marry Song
Dilly
Long Vows
Shut-In Tourist
St. Augustine
Evening Kitchen
No One’s Gonna Love You
Neighbor
Detlef Schrempf
How to Live
Lamb on the Lam (In the City)
Slow Cruel Hands of Time
Simple Man (Lynyrd Skynyrd cover) (By request)
Wicked Gil
The Funeral
The General Specific

### Electric Music ###

Set #1

For Annabelle
The First Song
Electric Music
Part One
Older
A Little Biblical
Weed Party
The Great Salt Lake
Blue Beard
Compliments
Dumpster World
Cigarettes, Wedding Bands
Factory
Knock Knock
Window Blues
Laredo
Ode to LRC
The Funeral

Set #2

Our Swords
Everything’s Gonna Be Undone
No One’s Gonna Love You
NW Apt.
Feud
Is There a Ghost
Heartbreak on the 101
Infinite Arms
I Go to the Barn Because I Like The
Monsters
Neighbor
(reprise)

#3 Megafaun – Highline Ballroom 03.17.2012

From my Facebook “Last night was a blurry mess / I have half-eaten Mamoun’s in the fridge / I bought Megafaun 2 rounds of shots.” Great night though. The bass player came out and hugged me after. This show was on St. Patrick’s Day and was sadly under-attended. Didn’t matter, Chris and I loved it.

#4 Craig Finn – Mercury Lounge 02.29.2012

Craig Finn

Craig Finn is the lead singer of arguably my favorite (NYC) band, The Hold Steady. Seth had an extra, so I got into this sold-out show where we stood front row the whole time. Loved hearing the tunes from his underrated solo record live.

#5 Bon Iver – Radio City Music Hall 09.22.2012

Bon Iver at Radio City

They made their way through almost every song from both records. “Beth / Rest” and “re: stacks” moved my universe. AMAZE.

#6 fun. – Music Hall of Williamsburg 06.22.2012

fun.

Randomly replied to an email from their website and got 2 VIP tix to this invite-only tiny show for some vague T-Mobile / Walmart Soundcheck event. It was awesome. They had my favorite album on 2012.

Best Albums of 2012

fun.

I agonize over this list every year, for 100% personal reasons. I feel like I have failed as a human if I miss anything hot that happened musically in a year. Because I live in the city that never sleeps, when I like a record, I can typically see the artist play it live soon after it comes out. Here’s the year in review.

Top 10

Some Nights, fun.

fun., Some Nights

channel Orange

Frank Ocean, channel ORANGE

Wrecking Ball

Bruce Springsteen, Wrecking Ball

Strange Weekend

Porcelain Raft, Strange Weekend

Bloom

Beach House, Bloom

Swing Lo Magellan

Dirty Projectors, Swing Lo Magellan

Tramp

Sharon Van Etten, Tramp

Beams

Matthew Dear, Beams

Escort

Escort, Escort

Fear Fun

Father John Misty, Fear Fun

Special Award: The Weeknd, Trilogy
Technically, this encompasses 3 records that dropped last year. Chris had a visceral reaction of disgust when I even hinted at throwing this at #1

Also Really Good

The Walkmen, Heaven
Craig Finn, Clear Heart Full Eyes
Strand of Oaks, Dark Shores
Purity Ring, Shrines
Lord Huron, Lonesome Dreams

Notable

Japandroids, Celebration Rock
Beak>, >>
Django Django, Django Django
Cat Power, Sun
Daughn Gibson, All Hell
White Rabbits, Milk Famous
Silversun Pickups, Neck of the Woods
Kendrick Lamar, good kid, m.A.A.d city

WordPress 3.5 + Me

WordPress 3.5 dropped today. This is a special release for me because my picture made it to the Credits and I had 30-40 of my patches committed. Here’s the full list: https://core.trac.wordpress.org/search?q=wonderboymusic&noquickjump=1&changeset=on

The hightlights:

I have 55 patches on deck for 3.6 already, excited to see what makes it! If anyone out there is thinking about contributing to core and is hesitant, don’t be. 90% of success is showing up. Be There. Subscribe to Trac. Comment on tickets. Test patches. Occasionally check in on IRC. The people who are making WordPress are there. You could be one of them.

I was just a little lad with a dream 2 years ago at my first WordCamp in NYC when I grilled Nacin and Koop about using IDs instead of classes in the CSS selectors for Twenty Ten. Koop talked to me afterward and suggested I contribute to core. My first patch was at the after-party for WordCamp San Francisco 2011 at 2am at the old Automattic space at the Pier on the Embarcadero. I got 1 patch into 3.2. 1 patch into 3.3. Zero into 3.4. And here we are.