This is a web component implementation of the Red Hat design system. It leverages the encapsulation of ShadowDOM and the power of custom properties to create well-scoped elements that are still designer-friendly. Elements are accessible, context-aware, and framework-friendly!
[ Cassondra ]
About castastrophe
Cassondra Roberts
I am a passionate front-end architect & technical lead at Red Hat on the Digital Marketing Strategy & Design team, where we build the design system that powers many of Red Hat's web assets.
Nothing makes me happier than exploring new technologies and implementing highly-optimized, clean solutions to complex problems.
Developer experience and accessibility are deeply important to me and these values guide the code that I produce and influence. One of the most enjoyable aspects of my job is open source community management; engaging with and connecting the contributors to many of Red Hat's open initiatives.
You're not going to learn code by passively watching someone else write it. You have to get into it, get really tangled up in it, and ask how you could make it better.
Collaborative Problem Solver
Meredith Magazine
Design system
PatternFly Elements
Experience & passion
I've spent 7+ years at Red Hat investing in building design systems that work for designers, developers, content writers, and users alike. My most valuable tool in this endeavor has always been active listening. I ask a lot of questions and work hard to understand what we're really trying to solve, for the business and for the user. Making tools that are fun and easy for developers is important to me and hopefully makes what I build an obvious choice over the option to "reinvent the wheel". If I do my job right, I let developers and designers work on cutting-edge work instead of having to construct the building blocks from stratch.
Principal front-end architect, User Experience Team, Digital Marketing
- Apr 2020—Now
-
- Open source community leader for PatternFly Elements and several repositories under the Red Hat Official organization; this involves responding to issues, code review, facilitating contribution through documentation, encouraging a healthy, positive community, building out project roadmaps, and getting stakeholder buy-in to fund dedicated developers.
- Research and engage with the web component community around accessibility standards and approaches to theming components in distributed architectures.
- Heavily engaged in the CSS Working Group and on GitHub for web component standards.
- Engage designers, developers, and stakeholders in prioritization for building out a varied and robust set of design system components.
- Cross-organization collaboration with development and design teams, both internal to Red Hat and with other large organizations such as Google, Fidelity, Penn State, and IBM.
Senior front-end architect, Digital Marketing Strategy & Design
- Dec 2017—Apr 2020
-
- Co-founder of PatternFly Elements
- Technical lead for the redhat.com pattern library, which is used across multiple web assets within Red Hat; said library includes semantic markup, JavaScript interactions, JSON schemas for CMS consumption and JSON data for testing framework, and JavaScript (Mocha/Chai) for front-end visual regression testing.
- Primarily responsible for code review and providing guidance, training, and feedback to pattern system contributors and front-end developers for redhat.com; organize cross-team training.
- Expert-level Sass developer; optimizing CSS and making the system easy to use and update
- Manage requirements, hours, testing, and deliverables via Rally, a project management tool, helping teammates with efficient timekeeping and working across our larger team to build templates and improve the efficiency of our reporting.
- Agile team structure allows us to iterate on patterns quickly and provide continual improvements to our system.
- Cross-browser testing, using site analytics to determine support levels.
- Manage the build server including debugging any build issues, package and upgrade management.
- Present our team's approaches, methodologies, and theories at technical conferences and bring back shared knowledge for implementation in our system.
- Mentor fellow developers and students on technical and professional skillsets.
Front-end developer, UX Development tech lead
- May 2016—Dec 2017
-
- Lead, advocate, architect, and developed for a new component-driven design system; advanced Twig templating, Grunt tasks and logic, WebdriverIO for visual regression testing, advanced Sass functions and mixins.
- Manage the build server including debugging any build issues, package and upgrade management.
- Owner of front-end JavaScript for the web team; set and documented coding standards and built large library of include-able snippets for modular UI development.
- Advocate and early adopter of flexible templating system for Drupal (utilizes the paragraph module); tech lead writing schemas which drive the admin interface, twig templates, and styles for this system.
- Consult for other divisions concerning front-end user experience and design, including providing CSS styling, helping create mobile-friendly applications, and improve customer engagement.
User experience web developer/designer
- Jan 2014—May 2016
-
- Lead developer for Red Hat Summit's Drupal templates in PHP, outputs logic-based mark-up based on an API feed from Lanyon.
- Design and build microsites advertising products and services - using thorough knowledge of HTML, Sass (and by-proxy, CSS), JavaScript.
- Web lead for the web design and organization of the Training and About sections for redhat.com.
- Building pages for major site redesign project in Drupal using Sass, HTML (with some HTML5 components) and advanced Javascript tools to create clean, efficient, modular design with sustainable code (development tools used: Compass, Jekyll, Gitlab).
- Expertly managed the ticket queue for redhat.com main page and microsites, resolving web issues for customers and communicating with colleagues to maintain tight SLAs with excellent customer service, received several service awards for this work.
- Managed content using CVS, then transitioned the team to git; took the lead in creating documentation and workflows, provided hands-on training to the team; wrote a few bash wrapper scripts to standardize process and workflows.
- Consult for other divisions concerning front-end user experience and design, including providing CSS styling, helping create mobile-friendly applications, and improve customer engagement.
- Business Analyst for Red Hat's online product store (and previously, Customer Portal).
Associate Technical Consultant
- Feb 2013—Jan 2014
-
- Consult customers using SAS with a third-party database, SQL optimization expertise.
- Demo SAS products to customers, explaining different methods of creating a cohesive framework for data collection and management.
- Experience with the full range of SAS Software - including Visual Analytics, DataFlux, Data Integration Studio, and related business tools.
- Database optimization via DBMS and SAS code.
- In-Database, In-Memory, High Performance Analytics - Teradata, Hadoop.
- Oracle Database Administrator consult for large-scale, long-term project.
- Research emerging technologies, internally and externally, to develop Best Practice and training documentation.
Associate Development Tester
- Jan 2012—Nov 2012
-
- Maintain physical & virtual Windows, Linux, HP images used in regression tests, includes maintaining software updates & installing testing tools.
- Write, implement, & trouble-shoot regression tests, client & server-side.
- Develop & monitor testing plans.
- Perform, document deployment for embedded processing on the following databases: Aster, DB2 on AIX, DB2 on Linux, Greenplum, Netezza, Teradata, Hadoop, Oracle.
- Manage MLE, macro, and international test suites for model processing in-database, about 300 tests, with bash script reporting results.
- Design advanced web reporting tools using heavy PHP, CSS framework, Perl script backend that queries status & details across multiple server platforms based on information collected with an internal web crawler.
- Upgrade & maintain a myriad of databases assigned to my testing group.
- Programmed tests using SAS language, macros, & SQL.
R&D Technical Student on In-Database Products
- May 2010—Jan 2012
-
- Develop automated reporting tools on the status of various database platforms.
- Develop Linux scripting tools to increase efficiency of common/repetitive tasks.
- Regular installs on test environments for testing teams, both client & server side.
- Testing & documenting install process for Linux & PC hosts.
- Programmed tests using SAS language, macros, & SQL.
- Improve online reporting tools & documentation, introduced PHP reporting to the group.
- Designed advanced training programs for international resources.
Publishing | Journals Production Editor, Oxford University Press
- Sep 2007—Jul 2009
- This position changed the course of my career. After completing a summer internship, I accepted a full-time position with this group; pausing my progress on an English degree from NC State for a chance to get real professional experience. Instead, what I learned was that publishing is 80% project management and only 20% actual editing; more than that, I enjoyed it! When the group rolled out a new software for tracking publications, I threw myself into detailed product testing and realized my love of computers could be a career. That led me back to college at Meredith to complete a Bachelors of Science in Computer Science by 2012. Read more.
-
- Contributed to cohesive team structure and was highly efficient on independent tasks.
- Heavily involved in regression testing and improving Journal management software, taking a leadership role in both tasks and mining information from US and UK offices to make the program more efficient and effective.
- Created and monitored schedules and turnaround times, ensuring tight deadlines are met.
- Created and monitored budgets up to $605,500/journal, effectively cutting costs while working to improve the physical quality of publication.
- Generated weekly, monthly, and year-end reporting on the overall status of each journal.
- Liaised between editors, authors, and other departments within Oxford UP to provide excellent customer service and facilitate the smooth development of publication.
Startup | Jr Web Developer, FlipKey
- Nov 2012—Jan 2013
- This role taught me a lot about web development and was my first experience professionally writing PHP. I got to experience the energy and innovation of a startup with the benefits of working right in downtown Boston, MA; still one of my favorite cities to this day. Read more.
-
- CakePHP environment, PHP5.
- Write and debug HTML5 and SCSS front-end.
- Documenting processes by compiling information from key resources on the development team.
- Grep log files to fix errors or insert additional logging.
- Install and configure Linux-based test and development environment, including but not limited to: MySQL, Sphinx, Redis, Mercurial VCS, Coffeescript, Compass, Couchbase.
- Light Python scripting to configure and populate memcache buckets in Couchbase and to deploy development to test and production environment.
Family-owned | Web Content Manager, Inside-Out Sports
- Aug 2009—Jul 2010
- This was a great experience working for a small, family-owned, local company helping them to realize the possibilities of hosting their content on the web. Read more.
-
- Create and update product images and descriptions for the Online Store.
- Research and implement new tools for online shopping, including JavaScript applets.
- Unify appearance of products using HTML.
- Managed one employee which involved training, reviewing, and personnel issues.
Red Hat
Principal front-end architect, User Experience Team, Digital Marketing
- Apr 2020—Now
-
- Open source community leader for PatternFly Elements and several repositories under the Red Hat Official organization; this involves responding to issues, code review, facilitating contribution through documentation, encouraging a healthy, positive community, building out project roadmaps, and getting stakeholder buy-in to fund dedicated developers.
- Research and engage with the web component community around accessibility standards and approaches to theming components in distributed architectures.
- Heavily engaged in the CSS Working Group and on GitHub for web component standards.
- Engage designers, developers, and stakeholders in prioritization for building out a varied and robust set of design system components.
- Cross-organization collaboration with development and design teams, both internal to Red Hat and with other large organizations such as Google, Fidelity, Penn State, and IBM.
Senior front-end architect, Digital Marketing Strategy & Design
- Dec 2017—Apr 2020
-
- Co-founder of PatternFly Elements
- Technical lead for the redhat.com pattern library, which is used across multiple web assets within Red Hat; said library includes semantic markup, JavaScript interactions, JSON schemas for CMS consumption and JSON data for testing framework, and JavaScript (Mocha/Chai) for front-end visual regression testing.
- Primarily responsible for code review and providing guidance, training, and feedback to pattern system contributors and front-end developers for redhat.com; organize cross-team training.
- Expert-level Sass developer; optimizing CSS and making the system easy to use and update
- Manage requirements, hours, testing, and deliverables via Rally, a project management tool, helping teammates with efficient timekeeping and working across our larger team to build templates and improve the efficiency of our reporting.
- Agile team structure allows us to iterate on patterns quickly and provide continual improvements to our system.
- Cross-browser testing, using site analytics to determine support levels.
- Manage the build server including debugging any build issues, package and upgrade management.
- Present our team's approaches, methodologies, and theories at technical conferences and bring back shared knowledge for implementation in our system.
- Mentor fellow developers and students on technical and professional skillsets.
Front-end developer, UX Development tech lead
- May 2016—Dec 2017
-
- Lead, advocate, architect, and developed for a new component-driven design system; advanced Twig templating, Grunt tasks and logic, WebdriverIO for visual regression testing, advanced Sass functions and mixins.
- Manage the build server including debugging any build issues, package and upgrade management.
- Owner of front-end JavaScript for the web team; set and documented coding standards and built large library of include-able snippets for modular UI development.
- Advocate and early adopter of flexible templating system for Drupal (utilizes the paragraph module); tech lead writing schemas which drive the admin interface, twig templates, and styles for this system.
- Consult for other divisions concerning front-end user experience and design, including providing CSS styling, helping create mobile-friendly applications, and improve customer engagement.
User experience web developer/designer
- Jan 2014—May 2016
-
- Lead developer for Red Hat Summit's Drupal templates in PHP, outputs logic-based mark-up based on an API feed from Lanyon.
- Design and build microsites advertising products and services - using thorough knowledge of HTML, Sass (and by-proxy, CSS), JavaScript.
- Web lead for the web design and organization of the Training and About sections for redhat.com.
- Building pages for major site redesign project in Drupal using Sass, HTML (with some HTML5 components) and advanced Javascript tools to create clean, efficient, modular design with sustainable code (development tools used: Compass, Jekyll, Gitlab).
- Expertly managed the ticket queue for redhat.com main page and microsites, resolving web issues for customers and communicating with colleagues to maintain tight SLAs with excellent customer service, received several service awards for this work.
- Managed content using CVS, then transitioned the team to git; took the lead in creating documentation and workflows, provided hands-on training to the team; wrote a few bash wrapper scripts to standardize process and workflows.
- Consult for other divisions concerning front-end user experience and design, including providing CSS styling, helping create mobile-friendly applications, and improve customer engagement.
- Business Analyst for Red Hat's online product store (and previously, Customer Portal).
SAS
Associate Technical Consultant
- Feb 2013—Jan 2014
-
- Consult customers using SAS with a third-party database, SQL optimization expertise.
- Demo SAS products to customers, explaining different methods of creating a cohesive framework for data collection and management.
- Experience with the full range of SAS Software - including Visual Analytics, DataFlux, Data Integration Studio, and related business tools.
- Database optimization via DBMS and SAS code.
- In-Database, In-Memory, High Performance Analytics - Teradata, Hadoop.
- Oracle Database Administrator consult for large-scale, long-term project.
- Research emerging technologies, internally and externally, to develop Best Practice and training documentation.
Associate Development Tester
- Jan 2012—Nov 2012
-
- Maintain physical & virtual Windows, Linux, HP images used in regression tests, includes maintaining software updates & installing testing tools.
- Write, implement, & trouble-shoot regression tests, client & server-side.
- Develop & monitor testing plans.
- Perform, document deployment for embedded processing on the following databases: Aster, DB2 on AIX, DB2 on Linux, Greenplum, Netezza, Teradata, Hadoop, Oracle.
- Manage MLE, macro, and international test suites for model processing in-database, about 300 tests, with bash script reporting results.
- Design advanced web reporting tools using heavy PHP, CSS framework, Perl script backend that queries status & details across multiple server platforms based on information collected with an internal web crawler.
- Upgrade & maintain a myriad of databases assigned to my testing group.
- Programmed tests using SAS language, macros, & SQL.
R&D Technical Student on In-Database Products
- May 2010—Jan 2012
-
- Develop automated reporting tools on the status of various database platforms.
- Develop Linux scripting tools to increase efficiency of common/repetitive tasks.
- Regular installs on test environments for testing teams, both client & server side.
- Testing & documenting install process for Linux & PC hosts.
- Programmed tests using SAS language, macros, & SQL.
- Improve online reporting tools & documentation, introduced PHP reporting to the group.
- Designed advanced training programs for international resources.
Other
Publishing | Journals Production Editor, Oxford University Press
- Sep 2007—Jul 2009
- This position changed the course of my career. After completing a summer internship, I accepted a full-time position with this group; pausing my progress on an English degree from NC State for a chance to get real professional experience. Instead, what I learned was that publishing is 80% project management and only 20% actual editing; more than that, I enjoyed it! When the group rolled out a new software for tracking publications, I threw myself into detailed product testing and realized my love of computers could be a career. That led me back to college at Meredith to complete a Bachelors of Science in Computer Science by 2012. Read more.
-
- Contributed to cohesive team structure and was highly efficient on independent tasks.
- Heavily involved in regression testing and improving Journal management software, taking a leadership role in both tasks and mining information from US and UK offices to make the program more efficient and effective.
- Created and monitored schedules and turnaround times, ensuring tight deadlines are met.
- Created and monitored budgets up to $605,500/journal, effectively cutting costs while working to improve the physical quality of publication.
- Generated weekly, monthly, and year-end reporting on the overall status of each journal.
- Liaised between editors, authors, and other departments within Oxford UP to provide excellent customer service and facilitate the smooth development of publication.
Startup | Jr Web Developer, FlipKey
- Nov 2012—Jan 2013
- This role taught me a lot about web development and was my first experience professionally writing PHP. I got to experience the energy and innovation of a startup with the benefits of working right in downtown Boston, MA; still one of my favorite cities to this day. Read more.
-
- CakePHP environment, PHP5.
- Write and debug HTML5 and SCSS front-end.
- Documenting processes by compiling information from key resources on the development team.
- Grep log files to fix errors or insert additional logging.
- Install and configure Linux-based test and development environment, including but not limited to: MySQL, Sphinx, Redis, Mercurial VCS, Coffeescript, Compass, Couchbase.
- Light Python scripting to configure and populate memcache buckets in Couchbase and to deploy development to test and production environment.
Family-owned | Web Content Manager, Inside-Out Sports
- Aug 2009—Jul 2010
- This was a great experience working for a small, family-owned, local company helping them to realize the possibilities of hosting their content on the web. Read more.
-
- Create and update product images and descriptions for the Online Store.
- Research and implement new tools for online shopping, including JavaScript applets.
- Unify appearance of products using HTML.
- Managed one employee which involved training, reviewing, and personnel issues.
Coding projects
Single page app
Red Hat on GitHub
This is the official GitHub page for Red Hat open source projects on GitHub. I served as the lead developer in the construction of this page in conjunction with a team of designers and developers at Red Hat. I continue to serve as the community liason for this and several other open source projects by Red Hat. You can preview this page here.
Preview tool
PatternKit
PatternKit is a preview tool for our internal design system. It utilizes Twig, Sass, JavaScript and JSON schemas to create a suite of components. The tool let's you preview the component and edit the test data in the schema for a live preview.
Build tool
gulp-custom-include
I wrote this plugin because the existing include plugins for Gulp didn't have quite the flexibility I wanted in the formatting of the include statements. Especially helpful if you have an existing library that already has it's own include syntax.
Design
I've moved away from full-page design in the last few years to focus on systems architecture. When I was involved in these design projects though, I loved working with stakeholders to get at the heart of what they needed from their page; asking the right kinds of questions to solve the real problem and make something of which we both could be proud.
Presentations
DrupalCon 2019
Unlocking design in a design system with custom properties
A deep-dive on how to leverage custom properties in a design system.
DrupalCon 2019
Make web development fun again, with web components!
A joint presentation with Penn State on how web components can make development workflows fun and efficient.
DrupalCon 2019
One of these things is not like the other; identifying patterns in a mock-up
An example-rich talk about how to break out mock-ups into patterns for maximum reusability.
NCDevCon 2016
Reduce, reuse, recycle: Modular CSS
Creating highly-optimized patterns by increasing reusability in your codebase, thus reducing the size of your output.
Tools
How the site was made
There are so many amazing tools out there which make building a site quick and easy. Preprocessors like Sass are invaluable ways to incorporate loops and logic into your styles and build tools like Gulp.js make producing production-ready code a snap.
Red Hat is a registered trademark of Red Hat, Inc. in the United States and other countries. Learn more about their trademark guidelines and policies.