Web- Notes for HW site

WordPress how-tos and config info specific to Headwaters Economics.

WP Engine server caching

A site visitor’s browser caches content locally so once download the file can be retrieved from the user’s harddrive rather than re-loaded. Servers can also do a different kind of caching to deliver content to users more efficiently.

WP Engine servers cache content in two ways: Page Caching and Object Caching.

Page Caching

Normally, when the user requests an URL, the web server gets content Headwater’s WordPress database, then uses our plugins, theme, and scripts to assemble and deliver an HTML file to the user’s browser (browser display HTML). A Page Cache saves that HTML for the next request of that same URL and delivers that — faster and more efficiently because the server doesn’t re-access the database and files then re-assemble the HTML.

  • Logged-in users don’t get cached versions.
  • Staging environment doesn’t serve cached versions.
  • Hitting the Publish button purges the cache for that post.
  • Admin users can purge the entire site’s cache.
  • Page cache expires in 10 minutes (benefits only the most active pages).
  • Changes made outside of WordPress, like via SFTP, do not purge the cache.

All our registered scripts and stylesheets have “cache-busting” URLs, a new value in the query string that servers (and browsers) see as a different resource. We do that by adding the file-modification timestamp as the version:
https://headwaterseconomics.org/wp-content/plugins/he-interactives/js/he-inter-common.js?ver=1479531278

You can do that manually by incrementing a value (like: “x=1“, “x=1b“, etc.). Tested that in the Postscript box of a post:
https://headwaterseconomics.org/wp-content/plugins/he-interactives/apps/timber-cut-sold-2015/style.css?x=1

At WP Engine, there’s no confusing caching plugins


https://wpengine.com/support/tips-improving-site-cacheability/

Content Not Updating? Try Purging Site Cache

Object Caching

WP Engine also caches the results (called “objects”) of queries made to the database, either by a user (e.g, a term search) or by our theme/plugins.

The next time there’s that identical query (like the same search term), the server fetches the cached results rather then rerun the query. The cache saves a fixed amount of objects, purging the ones not used for the longest time.

This Smashing Mag articles explains the server stack and its caches:

A Look At The Modern WordPress Server Stack

WP: new features

WP 4.7:
Post Type Templates, Edit Shortcuts
(Dev: WP REST API, Post Type Templates)

WordPress 4.7 “Vaughan”

WP 4.6:
Editor Improvements: Inline Link Checker and Content Recovery (in video at: 0:30)
(Dev: Resource Hints)

WordPress 4.6 “Pepper”

WP 4.5:
Live Responsive Previews, Inline Linking (cntl/cmd-K), Formatting Shortcuts

WordPress 4.5 “Coleman”

WP Embeds via URL

Embed a post from another WP site, Brookings.edu example:

The metro talent competition: attracting and growing highly educated workers

Embed a post/tweet from a social site (get URL from post’s date link), HE tweet example:

Todo- customize HE embeds:

As Energy Market Forces Shift Coal Woes West, Transition Planning Should Follow

Headwaters file/folder cleanup

HeadEcon: Website Considerations spreadsheet

CSS coding standards

Following a coding standard makes code much more readable and easier to maintain. HE writes CSS rule-sets and their declarations (properties and values) like this:

selector {
first-property: value;
second-property: value;
}

.first-selector,
.second-selector { ...

Our CSS guidlines are:

  • Space after selector.
  • Opening bracket on same line as selector.
  • Linebreak after opening bracket.
  • Indent (4-spaces) for declarations.
  • Space after property’s colon.
  • Semi-colon after value.
  • Declarations listed alphabetically but…
  • Some grouping fine for clarity, like width then height, or position then bottom/left/etc..
  • Linebreak after each declaration.
  • Closing bracket on it’s own line.
  • One-line OK for rule-sets with a single declaration: selector { property: value; }
  • Blank line between rule-sets.
  • Linebreak after comma for multiple selectors getting same declaration(s).

We also:

  • Use the most specific selector possible (easiest to override).
  • Prefer using class selectors, rather than IDs or HTML tags.
  • Use em or rem units to size text-blocks (width, margin, etc.) — more responsive.
  • Can use px for sizes based on a fixed-width images.

HE generally follows the same coding standards WordPress uses:

CSS Coding Standards

JavaScript Coding Standards

PHP Coding Standards

Coming: WP Engine Page Performance tool

WordPress Page Performance

Coming: Jetpack Photon CDN

Home

Coming: Yoast SEO Premium social previews

Social Previews in Yoast SEO Premium

Coming: Customize Posts plugin

https://wordpress.org/plugins/customize-posts/

Database at WP Engine

phoMyAdmin> SQL> SHOW VARIABLES LIKE '%vers%', 2016-12-30
innodb_version: 5.7.14-8
version_comment: Percona Server (GPL), Release ‘8’, Revision ‘1f84c…
version_compile_os: debian-linux-gnu