Presentations

I have given 60+ talks and keynotes in four continents (Asia, Europe, North America, and Oceania), speaking on topics like component design, style-guide-driven development, agile, information architecture, CSS, PostCSS, Sass, and responsive design.

— Zürich, online

Intro to GraphQL plus Gatsby Schema Stitching

webinar: Amazee Labs webinar

Since 2000, websites have been getting data from other websites by using REST APIs. But now we have a new method of building and consuming web APIs, GraphQL. GraphQL is more than a "better REST"; for developers, it provides a unified graph of data that includes multiple sources in easy to use system.

A Short History of Web APIs
— Seattle

CSS-in-JS and Drupal
 sitting in a tree...

conference: Drupalcon Seattle 2019

So you are a Drupal themer thinking about styling a decoupled Drupal website? It can be daunting to look at the JavaScript community; there seems to be a new best practice every week. And picking the right CSS-in-JS solution appears to be a nightmare of infinite choices. What to use? Styled Components? Glamorous? Inline CSS? Once you’ve decided on a solution for your decoupled project, do you now maintain two different CSS build tools for your projects, one for Drupal and one for decoupled?

Decoupled website (illustrated). Shows an outline of a horse cut into two parts, with Drupal on the backend, React on the frontend, and GraphQL connecting the two halves.
— Zürich, online

CSS Modules, my dream CSS-in-JS solution

webinar: Amazee Webinar #3

So you are thinking about styling a decoupled Drupal website? As CSS developers, it can be daunting to look at the JavaScript community; there seems to be a new <em>best practice</em> every week. And determining how best to style a decoupled application appears to be a nightmare of infinite choices. What to use? Styled Components? Glamorous? Inline CSS?

I ❤️'d Sass — John Albin, 2017
— Cebu

The Drupal Roadmap: From D7 to D9

Keynote for camp: DrupalCamp Cebu 2017

“John will offer us an inspired Keynote on the future versions of Drupal with Drupal 9, and how modern software evolve to facilitate migration from one version to another.”

Drupal 8.x: the last painful upgrade
— Cebu

Mastering
 Drupal 8’s Twig

camp: DrupalCamp Cebu 2017

Drupal 8 rewrote all of its HTML templates using Twig. But Drupal only uses 30% of Twig's full power. In this session, we'll start with the basics and work our way through Twig's powerful feature set.

A bar graph showing Drupal 8 templates use ~30% of available Twig features.
— Vienna

CSS-in-JS: unexpected lessons for Drupal component design

conference: Drupalcon Vienna 2017

Are you scared of your CSS? Did your site's CSS grow from a small bundle into a gigantic monster with flailing arms tattooed with .view-id-articles .views-row .node-type-article? If you tried to refactor using component-based design, you likely couldn't discover which old rulesets could be safely deleted.

CSS class name "Semantics": Content semantics (what it is) vs. Design sementics (what it looks like)
— New Orleans

Six Easy Pieces for the New Front-end Development

conference: Drupalcon New Orleans 2016

Modern front-end devolopment has become a tangle of fast-moving technologies. Our job is to implement HTML, CSS, image formats, and JavaScript, but with over 200,000 JavaScript projects on NPM alone, how do you find and learn about the best tools and techinques? And even after we've learned a new tool, it can feel like our skills are soon out-dated.

Frontendia: a path from "Ye Olde Selector Hell" through the "Sea of Specificity" and past the "Isles of NPM installs"
— Los Angeles

Drupal 9 Components Library: The next theme system

conference: Drupalcon Los Angeles 2015

For every version of Drupal I can remember, if a module wanted to display content, it had to provide the default HTML and CSS for it. This paradigm has served us well for years, but its time to radically improve the re-usability of our HTML and CSS by implementing a core components library.

Drupalcon Los Angeles: Drupal 9 Components Library