I am relatively new to Caltech Library and modern library systems (since April 2015). But I have been building things for the web for about 20 years. I am still learning (and that is what makes it fun).

a walkthrough in three acts

  1. the problem, constraints, finding the right solution path
  2. protoypes, discoveries and revisions
  3. implementation, benefits and what’s next

1. the problem

The starting point: Catalog Searchbox

a solution?

Our Librarians spotted a solution

MIT Library has a nice implementation close to what we need

But not exactly suited to the current evolution of

some starting constraints

initial technical choices

browsers and content

Our legacy website implementation dated from the IE 6 era. I realize it was unreasonable to use normal progressive enhancement (e.g. test for features, polyfils, etc). I did recognize website was designed when graded browser support was the best practice.

graded browser support

a feature oriented variation

Inspired by progressive enhancement

This lead to a ultra simple graded browser system use case.

three browser grades

Grade A was testable with the help of others (e.g. people who had iPhones)

the planned approach

Implement from lowest grade browser and progresses to highest

  1. Grade C, I punted (a highly technical software engineering fete)
  2. Grade B, implemented first
    • Quick and easy, just HTML (a NOSCRIPT element) and a dusting of CSS
  3. Grade A, this is where I spent most of my time
    • start with one browser, moved to the next in the list
    • make time to revisit each browser with each new version released
    • this takes a while

2. prototypes, why prototype?

“Fail early when the costs are low”, Silicon Valley ethos

  1. Gives you, the developer, space to learn and work the problem
  2. Gives you permission to really find out what the requirements are
  3. Provides a sense of progress and discovery for your client

I went through five prototypes before focusing on implementation.


Browser side


Server side

Thank you Betsy for coming to the rescue!!!

3. implementation

working code


road map

thank you

R. S. Doiel,