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
  • Show Template
  • Theme Check
  • Debug Bar
  • Regenerate Thumbnails
  • WP Migrate DB (PRO)
• 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)

• cURL is lazy.
• WordPress HTTP API
• Built to work with any transport available.
• wp_remote_*() and wp_safe_remote_*()
• Need to test for WP_Error
• wp_safe_remote_*()
  • When user is inputing, will help avoid cross-site forgery requests.
• wp_remote_retrieve_*()
• [Requests For PHP][requests-for-php] by McCue
• POSTMAN or Paw for OSX
  • PAW extension by Ally Interactive generates WP API
• PAW for POST testing
• Requests plugin

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/

Reading late 80s Swamp Thing. They’ve got a really subtle way of doing flashbacks; they just switch the frames on page from squared to rounded edges. Nifty.

I’m announcing a new tool for Kindle users. P2 for Kindle is a WordPress theme built for group work and note-taking on Amazon’s Kindle device. As previous visitors to my blog may remember, I think of the Kindle 3G as my swiss army knife of internet-enabled devices. With an internet connection pretty much anywhere, a […]

Related posts:

1. Why the Kindle is my Swiss Army knife
2. What would you want in a Kindle app?
3. Carnival of Journalism: Hack your life with the Kindle, After the Deadline and more