Filter Selector
Employer:
Terra Incognita ProductionsPosition:
DeveloperRoles:
- Server-Side Web Developer
- Database Developer
- JavaScript Developer
- XHTML/CSS Developer
Contributions:
- Developed an algorithm for encoding information about which filters are selected into a compact, URL-friendly format
- Developed XHTML/CSS for the user interface
- Developed JavaScript for the user interface
- Developed the Database and back-end code
Technologies:
- XHTML
- CSS
- ColdFusion
- JavaScript
- MySQL
Description:
The Filter Selector component provides a flexible user interface for browsing/searching a set of items. In the Sixth Floor Museum website, it is used several times to search things like Collections Items or Memory Book entries.
It is flexible because the programmer may customize the user interface depending on the filter type. For example, in the Sixth Floor Museum Online Collections, the filter type "Topics" has a checkbox-like interface for filtering results by topics such as "Air Force One" or "Kennedy Motercade." On the other hand, the filter type "Year Range" uses a pair of drop-down boxes for filtering results by a range of years. The programmer may use an existing user interface type or extend the component with a custom one.
A notable feature of the Filter Selector component is the behavior of the URL and browser back button. The state is made up of any search terms and the entire collection of currently set filters. I developed an algorithm for compactly storing this potentially large and complex set of information in a very compact, URL-friendly string. The state of the filters is stored in the URL. One benefit of this is that users may bookmark search results with a particular set of filters and return to the exact search results at a later time.
As filters are set, the results are updated automatically without having to reload the page. Another benefit of storing the state of the filters in the URL is that the browser's back button can be used to step backward to previous filter states and results.
Tyler Ham's Portfolio