Chris Basham

I’m Chris, a designer and front-end developer for Indiana University in Bloomington. I work on a cross-functional Agile team, building enterprise web software for students, advisors, and faculty. I’m interested in reactive programming and design systems.

For more details, explore my work, articles, talks, and résumé — or contact me.

Outside of work, I play board games, listen to audiobooks and podcasts, and run trails in sandals.

Reactive programming

In 2013, I started experimenting with the AngularJS framework for building functional prototypes, such as new interfaces for students viewing their billing information, searching for courses, and registering for classes. Each proof-of-concept built on the last, teaching me about REST APIs, minification, version control (git and GitHub), accessibility (WAI-ARIA), build systems (Grunt, gulp.js, and webpack), NoSQL databases (Firebase), and responsive design.

From 2014 to 2016, I studied CSS, trying to determine best practices for using CSS units, integrating media queries, organizing project files, and setting style naming conventions.

With experience in all these front-end fundamentals, I shifted away from the AngularJS framework, so I could experiment with different combinations of rendering libraries and data flow architectures. The teams I worked with at Indiana University quickly adopted the React rendering library, given the straightforward API and growing community adoption. For a couple products developed in 2015, we paired React with a simplified implementation of the Flux data flow pattern, called Reflux. In practice, Reflux failed to scale well with complex applications, and I continued my exploration.

Inspired by the Cycle.js framework, I started learning the RxJS reactive library. After integrating it into a number of experiments and products in 2016, I was convinced this tool was flexible and low-level enough to power any data flow architecture, without going stale.

In 2017, I abstracted what I learned into a library called Conduit. It is primarily a set of patterns to help develop reactive, functional user interfaces. It is also a set of utilities to simplify things a front-end developer may do with RxJS (conduit-rxjs), including how to connect RxJS streams to rendering libraries (conduit-rxjs-react). Indiana University has used Conduit in a number of products, and as of 2019, it is now publicly released.

For more, follow me on GitHub and review code samples on CodePen.

Design systems

In 2013, as part of a partnership between the Kuali Foundation and Indiana University, I started working on the Kuali Student project on the Core Design Team. In this role, I worked alongside the designers of several product teams, to encourage collaboration, alignment, and community. As such, I helped kickoff a UI pattern library called the Kuali Student Design Guide to start establishing standards and best practices. While the project didn’t have time to mature because of the dissolution of the Kuali Student teams, I learned about the complexities of such a system, such as maintenance, political buy-in, versioning, documentation, and governance.

The next year, I was assigned to one of several newly formed product teams under the university’s Enterprise Student Systems (ESS) division. After a year of understanding the technical directions of the products and the needs of the teams, I started development of the ESS Component Library, as a way to establish a common set of UI components, icons, and colors. The components were built using React, vetted by the university’s accessibility experts, and published to the university’s enterprise npm registry. Icons used a mix of custom icons and the Iconic set. A new color palette was adapted from the university’s brand colors, and color variations were systematically generated and codified. Over the course of two years, we published dozens of components and icons, while integrating them into about a half-dozen new products.

The university established the User Experience Office in 2016 to oversee design efforts across offices, departments, and schools. In collaboration with the university’s design and development communities, they maintain the Rivet Software Design System, and it has experienced an exponential growth in adoption. I am a regular contributor to Rivet, sharing many lessons learned from my prior design system projects.

Work

1. Color Palette

   2015 · Color standards for Indiana University apps.

2. Design Guide

   2014 · Responsive, statically generated pattern library for Kuali Student.

3. Course Registration

   2014 · Mobile-first prototype for Kuali Student.

4. Course Search

   2013 · Full-stack prototype for Indiana University.

5. Student Billing

   2013 · Functional prototype for Indiana University.

Articles

1. An Event Apart Takeaways

   2019 · Sketchnotes and insights from a web design conference.

2. Facilitating a Hackathon

   2016 · Agile practices at small scale.

3. Career Assessment

   2015 · Interests, values, strengths, weaknesses, and goals.

4. Heartbeats

   2015 · The cost of design.

5. Storytellers

   2015 · Envision the stories users tell.

6. Defining Design

   2015 · Renderable, insightful intentionality.

7. Codifying Colors

   2015 · Generating color scales for design systems.

8. Mobile Strategies for Kuali Student

   2013 · Approaches for future friendly Web software.

Talks

1. Mind Mapping Workshop

   2016 · IxDA Bloomington

2. The Role of the UI Developer

   2014 · Kuali Days Conference

3. Wayfinding on the Web

   2014 · Midwest UX

4. Architecting CSS

   2014 · IxDA Bloomington

5. Typography

   2013 · IxDA Bloomington

More slide decks

Colophon

This site is hosted on GitHub and uses Noto Sans and Inconsolata typefaces. Past versions of this site are archived for reasons of historical stewardship and general amusement:

• Version 3, 2010–2014
• Version 2, 2008–2009
• Version 1, 2007–2008

Contact

Reach me at chris@bash.am.

Follow me on Twitter, GitHub, and CodePen.