http://www.ilogues.com

Page Design

Two of us share this domain, neither touching the other's half. Our goals, focus, and style are distinct, yet we share two halves of a single space. The front page is an art project, designed to capture this dynamic. The inspiration came from my ideas, but the execution was as everything else: a shared but disjoint effort.

Personal Half

2d, colorful, HTML/CSS/JS-based, randomized, sporadic, and mosaic-like. These were the pieces that captured my imagination and made the left half into my half. The choice of patterns and transitions gave me room to be creative, and the many moving parts made the implementation challenging.

Patterns

There are nine patterns available for the half-circle. Each of them is captured by a black-and-white image, and the triangles are placed using rejection sampling with the image as a bitmap. The patterns are simple and recognizable as different even with the random distribution of triangles.

Transitions

Every ten seconds, the triangles undergo one of five transitions. All the transitions have a randomized aspect, adding to the general chaos. They are applied by modifying styles directly on each triangle and relying on CSS transitions to complete the animation. Because there are many triangles (two hundred), the transitions only change the transition and opacity properties of each triangle, which can be efficiently animated with CSS.

Hello, World! Welcome to my portfolio of art, writing, programming, and brainstorming projects. One of the projects on display here is this website itself. It began as a blank slate, and it has grown over time to include many features that help me to display my work effectively.

Infrastructure

The site itself is static, hosted on GitHub. As with most GitHub Pages websites, the pages are generated using Jekyll.

The templating is HTML sprinkled with Liquid markup. The styling is a mix of basic CSS and some SASS for convenience. The scripting is plain JavaScript all the way.

Theming

Toggle the website theme in the bottom left.

Design

Each theme consists of roughly eight colors:

• Primary text
• Secondary text
• Primary divider
• Secondary divider
• Primary background
• Secondary background
• Highlight
• Link

[TODO: Investigate accessibility requirements for the color values in each theme.]

Styling

The default theme assigns colors prescriptively to elements. Each other theme corresponds to a top-level class on the body, and CSS rules affecting colors are duplicated and overridden using each theme class. Only one theme may be active at any time, and the added specificity of the theme class precludes the need to rely on cascade order.
[TODO: Convert to SASS and rely on variables and overrides instead.]
[TODO: Create additional themes.]

Scripting

Because the website is static, the theme is persisted across pages and visits by setting a cookie. The cookie is checked on page load, and set via the toggle button. If cookies are not enabled, the theme toggle is disabled.

Keyboard Accessibility

Navigation

TAB navigation is a consistent way to traverse the UI. Elements that receive keyboard focus generally have indicative styles enabled. A notable exception is the body of each post, which can receive focus for keyboard scrolling.

Shortcuts

In addition to being reachable through TAB navigation, each control button on the page has its own keyboard shortcut corresponding to its action. Various operations on specific features also have keyboard shortcuts. General patterns include:

• ESC: cancel/close
• ENTER/SPACE: activate/open
• UP/DOWN: navigation
• LEFT/RIGHT: pagination

Image Viewer

Templates

The image overlay is a resident UI element that is dynamically repopulated when an image is clicked. It contains all of the styling and logic that governs the image viewing interaction, and the template is included on each page. Each image must then be hooked up to the viewer, and this pattern is captured in a reusable template. This template can be included in any post, and accepts one or a list of image URLs as a parameter.

Scripting

Most of the complexity of the image viewer lies in the thumbnail navigation for multiple images in a post. The viewer does not keep an explicit state of which image is showing, nor does it maintain an ordered list of the thumbnail URLs. Instead, it relies on event handling and a consistently maintained DOM state to display the correct image. This is dependent on a correct initialization of the viewer, and consistent updates for each navigational event.

Picture Book

Template

The picture book viewer is its own reusable page archetype. It relies on file structure rather than templating to populate the pages with the right images. This makes it possible to compose a book just by saving all the image resources and naming them consistently.

Navigation

The book viewer benefits from persistent navigation, which is achieved by maintaining a URL parameter pointing to the current page. Direct linking to a page is possible using the URL parameter, which maintains the even/odd page pairings of a physical book. All methods of turning the page will update the URL parameter to match.

Chapter Reader

Template

Unlike most other complex features of the website, the chapter viewer is used directly within a post and can therefore be included multiple times on a page. The text content for the post must be contained within chapter-separated DOM elements, which hide the content but make it available to the chapter viewer. The chapter viewer itself is a reusable template that pulls from this structure to populate the display with the current chapter's text.

Navigation

Navigation in the chapter viewer does not persist across page visits, but the current chapter number is kept as state for each post. The input used for display and navigation does some simple validation to prevent navigating to a chapter that does not exist. Otherwise, the pagination is treated similarly to other features.

Post Pagination

http://sage-search.appspot.com

More Soon

https://blogs.princeton.edu/humancomputerinterface/2013/05/12/runway-natural-intuitive-3d-modelling/

More Soon

http://gfx.cs.princeton.edu/pubs/Lu_2014_DDS/Lu_2014_DDS.pdf

More Soon