Notes from the grab bag of sessions that I attended at WordPress US 2015.

Friday

First Lightning Talk - Project Management in WordPress with Sarah Pressler (@sarahpressler)

  • Team Leadership
  • “If you can handle being yelled at, you’ll probably make a good project manager.”

Second Lightning Talk - The Techie Continuum - Kathryn Presner

  • Do I know enough? A question many of us ask ourselves.
  • “I’m not a techie” but I share tech knowledge and people come to me for tech advices.
  • Nightmare - fired before hired.
  • Dwell on your praise - at Automattic, they get hugs from customers and send compliments to each other internally.
  • Don’t be afraid to share your knowledge.

Session 2 - Developers Toolbox - Tracy Rotton (@taupecat)

  • Slides
  • Revision control is very important, Git is the way to go.
    • There are alternatives to Git, WordPress has used Subversion for a long time but is slowly switching to git.
    • Repository options: GitHub, Beanstalk, Atlassian Bitbucket, AWS CodeCommit
  • define( 'DISALLOW_FILE_EDIT', true ); - Set this up so no changes can be done outside of git revisions.
  • Vagrant
    • A computer inside your computer.
    • Can be configured with code.
    • Allows for closer match with the production environment.
    • Environments can be created or destroyed at will.
    • Good starter Vagrant for WP development - Varying Vagrant Vagrants
  • Package Managers
    • Composer - package manager for PHP
    • NPM - we’re using it to install more libraries!
    • Bower - We’re using it to install Sass libraries, FontAwesome
    • Don’t forget that a number of packages come with WordPress and you don’t need to install them.
  • Javascript task runners
    • Convert Sass
    • Check your Javascript for errors
    • Deploy to AWS
    • Gulp vs Grunt
      • Gulp has more complexity available.
      • Also Brunch and Broccoli in the third tier
  • WP-CLI
    • Anything you can do on the commandline you can script.
  • “_s”
    • Starter theme for WordPress
    • Takes care of a lot of basics.
  • [WordPress Plugin Boilerplate][plugin-boilerplate]
    • Blank scaffold of Plugin best practices.
  • What belongs in my theme and what belongs in a custom plugin?
  • Plugin tools
  • Invest the time in the beginning of a project to put good tools into place … [things] will go a lot more smoothly.
  • “I don’t commit compiled javascript”
    • Repositories are only for code that is touched by human hands.

Session 3 - The Future Stack - Zack Tollman (@tollmanz), Aaron Jorbin (@aaronjorbin)

  • PHP7 came out yesterday!
  • Facebook pushed out HHVM, cool stuff, lets you run Hack, fast.
  • PHP7 got pushed to get their shit together.
  • PHP7 overhalls the internals of PHP, everything is faster, 2-3x faster.
  • WordPress will warn you with depreciation notices.
  • Variable variables has altered
    • Expressions will always be processed left to right.
    • $$a['b'][$c]
  • List function will now go left to right, no longer accept empty variables.
  • New WordPress works great with HTTP/2
    • First major HTTP upgrade in a long time.
    • It’s a new web which needs a new HTTP
    • Much faster. It does this by trying to manage latency.
    • Handles latency better with multiplexing.
  • Your CSS - CSS4, not around yet, but the CSS working group is starting to put together the specs that will be the future of CSS
    • :read-
    • :read-only
    • :write
    • :nth-match (not yet supported anywhere)
    • :nth-last- (not yet supported anywhere)
    • color() function, native, with no pre-compile step, in the future of CSS. No browsers yet support this.
    • Custom properties for cascading variables - native setting of CSS variables.
  • HTTPS:
    • IETF - “Pervasive monitoring is an attack”
    • Some browser APIs are HTTPS only.
    • WordPress loves HTTPS.
    • Hardest is migrating HTTP to HTTPS.
    • Move to HTTPS can programmatically move people to HTTPS.
    • Let’s Encrypt - get free certificates.
    • ACME - protocol for RESTful HTTP interface for certificate management and issuance.
    • wp cert new in the works.
  • ECMAScript6 / Javascript2015
    • New update.
    • More modular.
    • new Promises
      • Pending
      • Resolved
      • Rejected
      • Append to promises!
      • Babel - Javascript compiler that lets you use tomorrow’s javascript today.
    • Arrow functions.
      • Share the same lexical this as the surrounding code.
    • Javascript gets default parameters.
      • Rest parameters - all the rest of the parameters after defined defaults go into array ...a.
    • #wpFutureStack

Session 4 - React + WordPress - Matías Ventura (@matias_ventura), Gregory Cornelius (@gcorne)

  • “The UI helps people understand and interact with the content, but never competes with it.”
  • “The illusion of speed, that everything is right there immediately.”
  • Real time-ier.
  • A declarative view layer!
  • Calypso
    • The WP Admin as a single page application.
    • Really allows you to craft all the flows in a way that is much more smooth.
    • “waiting for a doorknob to grow before you can use the door” no more!
    • Now you have all these different states that the UI can be in. How to manage it?
    • Editor UI States?
    • Viewable all on GitHub
  • React benefits
    • Small API that is easy to learn.
    • No need for a separate template language. Embrace Javascript
    • Events are bound as element properties which limits need for DOM traversal.
    • Composition of components is simple and first-class.
    • http://rauchg.com/2015/pure-ui
    • JSX
    • They compile with Webpack and Babel.
    • Components instead of Progressive enhancement
      • Create little packages of components, including encapsulating SASS
      • Sass goes with small components.
  • Components become semantics
    • You create a syntax for your site
  • Live components gallery in Calypso
  • A Boilerplate for WP plugins
  • Take a look at React Native

Session 5 - Intent in Software Design - Helen Hou-Sandí (@helenhousandi)

  • Naming is hard, but very very important.
  • .wp-core-ui Javascript from core that could be front or back end.
  • Be Intentional
  • “Backwards compatibility is not just about accommodating the past but deliberately considering the future.”
  • Think about more things as very discrete components.

Session 6 - Build a Theme with the REST API - Rachel Baker (@rachelbaker)

  • Rest API Theme Slidedeck
  • Why?
    • Because you can
    • Your content needs to update or change dynamically.
    • You want to separate your business logic from your views.
  • Using jQuery, Underscore.js and Director for routing.
  • Includes wp_head() to hook styles and scripts.
  • Uses the aria-live="assertive" to tell screen readers to pay attention to what changes in the js-data window.
  • Declares 3 routs. One of home, one for page, one for single posts. (All URL and permalink building occurs here)
  • site/wp-json will list all the routes.
  • Added an event handler to route visitors that click on our logo image in the header to send back to home page.
  • Add logic to handle posts into its own JS file, have the homepage write that script.
  • Puts the post ID on a div.
  • In the API you have to keep the resources separate. Base the &_embed object to get a lot of the extra data and get post by post name.

Session 7 - REST in Action: The Live Coverage Platform at the New York Times - Scott Taylor (@wonderboymusic)

  • NYT Wordpress now has a number of legacy blogs, First Draft, Internal Corporate sites, NYT Co. (Brand Site), Women of the World, Times Journeys, Live Coverage platform, and some forthcoming international projects.
  • At height of blogging at NYT, 80 blogs were active. A lot used live blogging, which was a totally seperate code-base.
  • NYT5
    • requires Vagrant
    • apps are git repos that require Grunt to transpile.
    • CSS compiles from SASS
    • JS compiles with Require.js
    • Used composer.
    • Had to point at NYT5 blogs app, pipe that to WordPress
    • Globals are bad.
    • Each page type is an app.
  • No day archives in the NYT system.
  • Use Heartbeat to pull latest posts into the side of the input area (so you can see as you blog).
    • nytimes.com/live/…
    • Backbone app that uses the REST API
    • React puts in live posts.
    • Updates are added from the backend, or via Slack which then pushes to a custom service that handles websockets.
  • WordPress becomes a web service.
    • Transition to a less monolithic mindset.
    • Storage mount that is front-end via Varnish and Akami, JSON response from WP is dumped into that.
  • Fire and Forget where we only post content we need.
  • Custom endpoints on save_post to push out and cache data.
  • Amazon SMS topic that they post to, as part of fire and forget. They send an event to the SMS queue and listening to that is a team that dynamically updates content and optimizes.

Session 8 - A Survey of Elasticsearch Usage - Greg Brown (@gregibrown)

  • Search engine that is distributed and scalable.
  • Analytics engine
  • Multi-lingual
  • Think about it as a funhouse mirror, a different way to store data.
  • Pagely, VIA and WP Engine are all using with WP. As are a number of agencies, alley, and 10up.
  • Six main use cases.
  • Site Search
    • Better than built in search.
    • Easier to do faceted (filtered-down) searching.
    • Missing
      • Search is not just about posts
      • How to answer questions?
      • Instant results
      • Highlighted results
      • Auto complete
  • Related Posts - very effective.
    • Increased click-through rate by about .5%, a big deal.
  • Replace WP_Query
    • ElasticPress
    • ES_WP_Query
    • Very popular way to solve scaling problems.
  • Logstash
    • Opensource
    • Imports logs and makes them searchable with ES.
    • log2logstash()
      • Dumps anything into the ES log.
    • Uses with Kibana.
  • Content Reranking
    • We know this user, show them what they want, not just the general stuff.
    • ES supports lat and long to rank based on distance.
    • Show readers articles that are local to them.
  • Break the blog boundary.
    • Through a ton of blogs into one big ES index to make searching and filtering easier.
    • Related posts and search over multiple sites.
  • GlotPress
    • Find similar strings that have been translated.
  • Additional data about images in the API.

Session 9 - Introduction to WordPress unit testing - Carl Alexander (@twigpress)

  • Unit testing - at the smallest scale.
  • Constant behavior, safety net.
  • Isolation is the most important part.
    • Need test bubbles - surrounds your code - what is your code doing?
    • Not the same as WordPress test suites - which is integration testing.
      • Not about isolation.
  • Needs
    • Unix based OS.
    • PHP5.3 for code (for namespaces), 5.4 for the tests (for traits)
    • Composer
    • WP-CLI
  • WP-CLI: wp scaffold plugin unit-tested-plugin
  • Add composer.json (package manager)
  • require-dev - we need this library only when we’re developing.
  • require the composer autoloader
  • 10up has WPMock, which is a little more limited.
  • All functions must be pre-fixed with test_.
  • Mock = test double.
    • Simulate the function or object to verify how you interact with it.
    • expect to get get called once with the param, if so, it returns X.
    • Works with get_option.
  • Sometimes you want an array from an option.
  • Write the failure case first, then make the code to not fail.
  • equalTo vs identicalTo is the diff of == to ===
    • “Constraint that asserts that one value is identical to another.”
  • Keep doing it and turn it into a habit.
  • Intro to WordPress Unit Testing
  • Unit Testing Demo
  • Unit testing makes more sense alongside biz logic.
  • What you really want to test is “am I insane?”

Session 10 - Advanced Topics in WordPress Development - Andrew Nacin (@nacin)

  • “We don’t want users to experience pain when they don’t have to … so we handle the edge case.”
  • We do break things but we figure out the most graceful, least intrusive way to do so
  • We’re not trying to break your plugins.
  • Wrote a unit test to check to make sure that there are no ampersands in a JS file.

Saturday

Session 3 - Gamify With the WordPress.com API - Timmy Crawford (@timmycrawford)

  • REST-based game board
  • Leaderboard for posting through the REST API.
  • Can be set up to track progress.
  • Can link to satisfying github issues.

Session 4 - Lightning 1 - I Wanna Go Fast: Advanced Techniques To Optimize Front-End Performance - Allen Moore (@creativeallen)

  • Speed impacts user experience heavily. (Easy and pleasing to use)
  • Better it deliver easily then attractively
  • User engagement is important. We want users to see our content and ads.
  • Keep header clean.
    • Use the async attribute on javascript.
    • Use the script loader tag to tell WP to set scripts async.
  • Prioritize the critical rendering path (page speed insights helps with this)
    • Use javascript functions to load the link to your theme CSS, or to load other items asyncronously.
    • Help use javascript to load javascript to help prioritize critical tasks.
    • Use deploy script to make the css modules run.
    • CSS for above the fold should load before under the fold.
  • Lazyloading.
  • Prefetch, preload, prerender.
    • DNS Prefetch
      • Good for avoiding multiple hits to an external server, say to get a bunch of tweets.
      • Aquire a resource that will be used in the future.
    • Preload puts a resource in the browser cache that will be used later.
    • Prerender - downloads the assets of the DOM before it is even rendered.
  • https://allenmoore.me/wordcamp-us-2015/

Session 4 - Lightning 2 - ARIA: Roles, States and Properties - Joe Dolson (@joedolson)

  • Very important to screen readers
  • But a semantic meta language that can be communicated to other technologies.
  • A group or properties that you can attach to an HTML object
  • Roles - define what function an element serves
  • States defines how you interact with an elementProperties give an element characteristics and relationships
  • Can be used with CSS and JS.
  • Roles can be implicit or explicit.
  • aria-level=
    • Can be redundant, replacement, or modifier.
    • If level 1, should be h1.
  • role=
  • “What ARIA does is it enhances semantics, so it gives more meaning to content.”
  • “If you give [an element] that’s a lie, you’re actually creating confusion”
  • You want to almost always avoid assigning roles that don’t have matched interactions actively on the object.
  • aria-expanded="true"
    • Is the menu open?
  • Use aria attributes in styles #menu-toggle[aria-expanded=true]
  • aria-controls="menu-main-menu"
    • Tells you what it is controlling.
    • Use that data to run Javascript to act on the box that the unit controls.
  • aria-label substitutes the text of a button so that it reads something else with assistive tech
  • aria-live critical to dynamic content, this is an area of the page that might change.
    • readers load in the DOM to allow someone to navigate it.
    • polite or assertive.
  • ARIA Presentation

Session 5 - Lightning 1 - The Future of WordPress is Low-Tech - Eric Mann (@ericmann)

  • By cutting down their load time, YouTube was able to reach all new audiences in lower tech countries.
  • Low bandwidth is really really slow (250kb/s)
  • In non developed markets only 20% of devices are smartphones.
  • Graceful degradation
    • turn off features and they still work.
  • Progressive enhancement
    • Start for low bandwidth
  • Web page test
  • Chrome lets you test with throttled bandwidth
  • Have a device lab.
  • Democratize web publishing for everyone.
  • No one ever tests their sites for Windows Phones.
  • “Be the change you wish to see in the world”
  • Use progressive enhancement, start ad units with internal ads to fill the space properly while the JS loads.

Session 5 - Lightning 2 - [Making use of a little known gem: The WordPress HTTP API][http-api-talk] - Ryan Duff (@ryancduff)

Session 6 - Meeting the New York Times Challenge: delivering the news over HTTPS - Paul Schreiber (@paulschreiber)

  • Advertisements from web providers (like airlines) will pop in on top of HTTP pages
  • A certificate can handle a single domain or multiple domains.
  • Wildcard certificates let you have a single certificate for *.yourdomain.com
  • Have to show organization and domain control through validation.
  • Symantec is a common certificate provider.
  • So is GoDaddy.
  • Resellers will get you a better deal like ssl.com
  • SSL Mate
  • Let’s Encrypt
  • mozilla.gihub.io/serverside-ttls/…
  • github.com/tollmanz/lets-encrypt
  • HTTPS enabled, HTTPS default, HSTS, submit your site to the HSTS preload list.
  • SNI - SHA1 vs SHA2 - all certificates should be signed with SHA2
  • Certificates are valid for a fixed amount of time. Don’t forget to renew them.
  • All resources will also need to be served via HTTPS.
  • DoubleClick and Outbrain are the only ads now with HTTPS
  • Social, font and analytics tools serve HTTPS
  • Fastly charges more for HTTPS
  • loadimpact.com - 1.8x faster just with HTTPS
  • content-security-policy: upgrade-insecure-requests
  • Content-Security-Policy-Report-Only
  • //url is an antipattern, use https://url instead. Except with iFrames.
  • HTTPS everywhere chrome extension.

Session 7 - [Playing well with others: writing solid code in large community projects][community-coding] - Dennis Snell (@dmsnell23)

  • The secret to WP’s success? Community.
  • Act consistently
  • Don’t mess with other peoples’ stuff
  • Don’t go around trying to prove how smart you are.
  • “An interesting thing happens when your customer base reaches a certain size: you cease having edge cases.” - Jason Fried of Basecamp.
  • Interesting and unexpected ways.
  • Remember that input is aggressive, it’s armed and dangerous and we need to force proper behavior and program defensively.
  • Don’t underestimate the power of lists.
    • Eliminate null checking and off by one errors
  • Check the quality and the quantity of the input.
  • Check to make sure that parameters that never happen, never happen.
  • Functions should -
    • Always return a legitimate value
    • Return a single type of value
    • Define failure values.
  • Need failure modes.
  • PHP Docs on Function structures
  • Chained functions? What happens when the inner function fails?
  • Great comments are there for what’s not there.
  • Describe how it could have been.
  • “The people who I work with are not idiots.”
  • Describe abnormalities in comments (like performance concerns.)
  • Describe risks.
  • “If you have to pause to think about it, it’s not obvious.”
  • Trivialize Trivia.
  • Describe what input we expect.
  • “Explicit is better than implicit” - Zen of Python.
  • “Avoid the features that are often useful but occasionally hazardous” - JavaScript: The Good Parts.
    • “Messy code often hides bugs”
  • Don’t get too deeply nested.
  • Communicate, test, explain.
  • Dual Algorithms for dev work.
  • Don’t be cute
  • Be consistent
  • communicate

Session 8 - WordPress Best Practices for Enterprise - Taylor Lovett (@tlovett12)

  • http://10up.com/blog/2014/engineering-best-practices/
  • WordPress Enterprise Best Practices
  • 10up uses [Redis][redis]. [WP Redis][wp-redis]
  • Page caching is used heavily.
  • Batcache plugin for page caching.
  • Fragment caching.
  • Remote calls block
  • Use non blocking
  • Prime cache asynchronously.
    • Set an AJAX request up to do this.
  • Avoid front end writing.
  • no_found_rows
    • When you don’t need to know stuff for pagination.
  • update_post_meta_cache
  • update_post_term_cache
  • fields
  • posts_per_page
  • post__not_in - very slow
  • update_option and add_option take a third param, $autoload, set it to false if you won’t need it on every page.
  • Use a CDN
  • Reduce number and size of HTTP Requests.
  • HTTP2 helps reduce number of requests.
  • Maintainability and stability - maintainable makes more sustainable. And visa versa
  • Don’t obsess over MVC
  • Twig leads to more confusing code.
  • Feature plugins
  • Document!
  • Avoid wrapping wrappers.
  • Write tests
    • [PHPUnit][phpunit]
    • [Mocha][mocha]
    • [Codeception][codeception]
      • [wp-codeception][wp-codeception]
  • Clean input
  • Esc data that is output to the screen.
    • esc_html
    • esc_attr
  • Don’t use innerHTML in JS.
  • Nonces are good for security.
  • Require strong passwords.
  • Review every single line of 3rd party code.
  • Code review!

Random Notes

  • AeroPress for good french press coffee
  • Should grind right before you make.
  • Pourover method.
    • Hario makes best pourover containers.
  • Crazy method - Vacuum siphon method

  • March coffee festival in Brooklyn.

  • Dec 2th through 4th will be WordCampUS 2016 in Philly next year.
  • Find videos at https://2015.us.wordcamp.org/live-stream/


This post is specifically my own thoughts & not representative of my employers past or present.