My Site

The back story:

Between May 2016 – May 2018, I transitioned from an individual contributor to a leader and manager of a team of four developers. Instead of being the primary developer from start to finish on large projects– I was doing more oversight and contributing smaller tactical components of many projects.

My website got to a point where I hadn’t updated it in years. I left it “under construction” for over a year while I tried to figure out which direction to go with it.

I’ve maintained my website as a portfolio and blog since college: from Flash & ActionScript, to Joomla, and finally on WordPress, where it’s seen several iterations. I kept all of my old work throughout the years either as a detailed portfolio item or blog post. Once a portfolio item would no longer represent my current sills, I’d convert it into a blog post. I loved seeing my growth: it was a great way to combat my own imposter syndrome. The downside is that maintaining all of those screenshots, screen capture videos, descriptions, and code bases became a large burden.

I got back in the swing of finishing my WordPress theme and site content right around when Gutenberg was becoming a reality. I decided to go that direction, and took a Javascript for WordPress bootcamp, which included Gutenberg. The hardest step in all of this was how to develop my content to describe what I had been up to for the past ~9 years.

Well, you’re looking at the final result. I decided to focus on the balance of being a player-coach by separating my homepage and my sections of content into two: me as a developer and me as a manager/leader/director— and then, of course, the supporting pages and posts.

The tech:

The features:

  • Shortcode: time since, for calculating days since an inputted date, as seen on my homepage.
  • Interactive Timeline, as seen on My Time at BU
  • Custom Post type: Quotes Repository, with 2 different views: listing and slideshow
  • Workflow status taxonomy & visual icons (needs copy, needs link check, needs images, ready, etc.)
  • Responsive Tables, as seen on:
  • Fancybox upgrade to Gallery Block, as seen in the Screenshots section below
  • Custom Dashboard widgets for things like listing all my pages, listing the most recently edited pages/posts, and listing any unfinished posts.
  • A metabox to add additional classes to the <body> tag, for use much like a feature flag or utilities/helper class.
  • Some personal features:
    • Maps of places I’ve been and places I’d like to go — via WP Google Maps, with some customizations.
    • Responsive table of books I’ve read

Screenshots:

Future updates:

  • Comply with WordPress best practices by moving most of this functionality into a plugin(s), leaving the theme to just be a theme
  • Retrieve some of my historical portfolio items and blog posts, as mentioned above
  • A Gutenberg Block I’m almost done refining: Professional Development Table
  • Full-site Gutenberg editing

Landing Pages Plugin

I conceived & built the BU Landing Pages Plugin around November 2019. For several years prior, we had been using CMB2 and page templates for homepages/landing pages– in order to achieve non-standard layouts including promo boxes, featured news, events, or profiles, and other custom functionality.

Along with the department’s creative director, we identified the most common layouts/components and compiled them into a plugin (still based on CMB2) so that we could stop rebuilding them on a per-project basis. The idea was to keep it as simple as possible with very little configuration needed.

Statistics

(as of Feb 2020)

36

Sites using the plugin

8

Contributors to the repo

281

Commits on the repo

Features & Goals

  • Stop-gap between the timing of non-Gutenberg at BU and eventually integrating Gutenberg
  • It could be activated on our Responsive Framework with no extra coding, styling, or considerations
  • Built for two sites, so original scope was to accomplish those + a few other components we knew would be common
    • There was to be no configuration, no hooks, and no reordering or repeating of components
  • If you fill out a row/component, it shows up
  • Fallbacks for “none found” for the automatic selections, along with notices only viewable to site admins letting them know that
  • Built with our university-standard metabox plugin: CMB2

Default BU Landing Page components

  • Promo set 1
  • Full-width promo
  • Promo set 2
  • News
  • Events
  • “Also in this section” (child page listing)

Future Features

  • Reorderability (sitewide default set via settings page and per-page reordering)
    • Theme constants to lock/restrict the reordering
  • WP Action Hooks to inject additional content

Screenshots

Side-by-side screenshots of the frontend and the editor for a page using the BU Landing Pages template:

Responsive Framework

We started developing BU’s Responsive Framework in October of 2013.

I was the original developer to contribute to the Responsive Framework, and while my individual contributions have wound down, I remain in charge of overseeing the development.

It was a very slow, deliberate build based off of a lot of institutional knowledge and working knowledge based on the previous framework, called Flexi. We chose to start building the first child theme while the framework was still in development so different team members could provide real-time and “real-world” feedback.

Three Avenues

The Responsive Framework, or Responsi as we lovingly call it, has three main avenues of usage:

Out-of-the-box Theme

  • Enable-and-go for clients.
  • Options available via the customizer and settings pages.
  • Menu/layout options, color palettes, content/sidebar settings.

Out-of-the-box Theme
+ Custom Design & Config

  • Via custom CSS/Sass
  • This usually involves a designer/frontend dev also setting up the site and configuring options and content deeply.

A Parent Theme Framework

  • We build full-scale child theme with custom design and functionality
  • Customizer options & settings can be set via theme constants so they can’t be changed if the design doesn’t allow for it.

Statistics

(as of Feb 2020)

1936

Sites using the framework directly

75

Custom child themes

22

Contributors to the framework repo

3126

Commits on the framework repo

Built With

  • NPM & Grunt
  • GitHub pull requests require passing Travis CI & Code Climate tests.
  • Visual Regression Testing via BackstopJS.
  • We also have a repo called Responsive Child Starter, which is a starting place for our theme developers.
  • Vanilla JS and jQuery, where appropriate.

Integrations & Customizations

  • Includes many hooks and filters for overrides and customization.
  • Granular, standardized naming conventions, especially around page templates, template parts, and helper functions.
  • Integrates with other BU services and plugins:
    • Goes hand-in-hand with the BU Landing Pages Plugin & BU Banners.
    • BU Branding Plugin, BU Profiles Plugin, BU Slideshow Plugin, Course Feeds Service & Plugin, Calendar Service & Plugin.
    • Gravity Forms, Yoast SEO, YARPP.

More Detail on Features

  • 5 built-in Menu/Branding layouts.
  • 5 built-in font pairings.
  • 5 built-in color palettes.
  • Branding configuration.
  • GitHub Wiki for internal documentation.
  • Separate website for client-facing documentation.

On the Horizon

  • Working on Release 2.0, and open sourcing it.
  • Gutenberg compatibility

Screenshots: Configuration / Backend

Screenshots: Various Homepages of Child Themes