In the world of design systems, prefixing has become the norm; and with good reason. Prefixing offers a way to quickly identify from which codebase a particular style or element derives so we can easily debug environments with multiple sources. I’ve seen this advantage win out time and time again on, where we have pages built from Drupal templates, pattern systems, web components, and a smattering of code from custom libraries.

What do we risk by not prefixing?

My spouse is also a developer and shared this great example with me of what we risk when we don’t use prefixing in our code. He was building…

Automated Tests (aka AT) are a blessing and a curse. You love them when they catch an unexpected change before it breaks in production but when you have spent the last two weeks (or more) building a new web component, the last thing you want to do is sit down and write a bunch of AT; you want to get that beast out the door and off your plate! Okay, maybe that’s just me…either way, here are my tips and tricks for writing AT on PatternFly Elements.

A snapshot of the automated tests for a PatternFly Element

Tip 1: Write tests first

Everyone preaches this but how many developers really do this? What I’m not…

PatternFly Elements is an exciting new approach for building web components to meet our front-end needs at Red Hat and beyond (yay open source!). To that end, when learning a new coding concept, I like to get my hands typing as quickly as possible. Here are a few links to coding templates that can get you started right now. Below, I’ll describe a little bit of the differences between how the templates are written and how the repo works.

What they are and how they work

CodePen project | PatternFly Elements template

A project on CodePen is comprised of multiple files and it runs compilation to generate the preview. …

We’re in an exciting time right now for front-end developers full of exciting new features and improved ways to do the things that have always been hard about CSS. Want to create defined regions on a page and move elements into those regions without having to reassemble your DOM? No problem! Have some CSS Grid! Want to find out if this shiny new feature you want to use is supported by the browser it’s loaded in? Enjoy this convenient @supports query! Do you need a way to define a set of properties once and then call that value all over…


Principal front-end architect at Red Hat. Open source collaborator on PatternFly Elements. Thoughts are my own.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store