jdsteinbach

We're already great with breaking giant template files into multiple smaller files in an /includes/ or /partials/ directory. I'd to talk about how we call those files in our bigger templates. The three options are include, require, and get_template_part(). The first 2 are normal PHP functions, the 3rd is a WP function. (I'm only going to really compare include and get_template_part() though: require is basically include + fatal error, so no real reason to use that by default in our own themes.)

PHP include 'file-path/file-name.php PHP docs

The include function is our default right now. It's got a couple pros over the other options: unlike require, it only generates a warning if the file isn't found, not a fatal error. Unlike get_template_part(), it respects the current file's variables.

WP get_template_part() WP Codex

This is the preferred "WP Way" to ge

jdsteinbach

.box-1
.box-2
.box-3
.box-4

jdsteinbach

// ----
// Sass (v3.3.8)
// Compass (v1.0.0.alpha.19)
// ----

$red: #ff4242;

// Declare this variable early 
$parent-classes: ();

jdsteinbach

{
  "Ansi 6 Color" : {
    "Red Component" : 0.30980393290519714,
    "Color Space" : "Calibrated",
    "Blue Component" : 0.9686274528503418,
    "Alpha Component" : 1,
    "Green Component" : 0.76470589637756348
  },
  "Ansi 12 Color" : {
    "Red Component" : 0.26666668057441711,

jdsteinbach

<div class="box">I'm in a box.</div>

jdsteinbach

Case Studies in Font Subsetting

iA Writer Quattro

Initial Files Provided

iA Writer provided variable fonts as 2 ttfs (Upright and Italic), each ~150kb.

Note: iA Writer provided static fonts as woff2 (Regular, Italic, Bold, Bold Italic) around 45kb each. Unfortunately this can skew people's initial performance reaction away from variable fonts.

jdsteinbach

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions

jdsteinbach

# BEGIN WordPress Security + Performance
# ############################################################
# # SECURITY                                                           #
# ############################################################

# ----------------------------------------------------------------------
# | File access                                                        |
# ----------------------------------------------------------------------

# Block access to directories without a default document.

jdsteinbach

node_modules

jdsteinbach

.ProfileSidebar,
.timeline-tweet-box,
.topbar h1,
#global-actions .text,
.moments.js-moments-tab,
.dashboard.dashboard-right,
.dashboard.dashboard-left {
  display: none !important;
}
.content-main {