Project Highlights

Belgonging.google is a collection of resources related to Google's diversity, equity, and inclusion initiatives. (Live Site)

Spec

Cards are arranged into two columns of equal height. Consistent spacing is maintained between the cards, but the cards themselves may grow in height to fit. Keyboard users traverse the cards using the tab key, progressing from left-to-right, top-to-bottom.

Challenge

The challenge is maintaining equal height columns. CSS masonry layout support is still experimental and extremely limited. CSS multicolumn layout would place cards into columns and the focus order would be top-to-bottom, left-to-right instead of the intuitive order. With CSS flexbox, the focus order could get muddled if a card in one column is much bigger than one in the other column.

Strategy

Starting with a CSS grid layout of 2 equal-width columns ensures that the focus order is maintained even if JavaScript is not enabled.

Then, using JavaScript, calculate the heights of the cards in each column. For the shorter column, evenly distribute the difference in height relative to the other column among the cards. Render the result with fixed heights and absolute positioning. The total height must be applied to the container since its children are all absolutely positioned. Recalculate upon throttled window resize.

Result

Year in Search is Google's annual exploration of search trends from the year. (Live Site)

Spec

Cards are staggered down the page. When a card is clicked, its detailed view is revealed, with more information and shareable links. On small screens, the detailed view shows as a modal dialog. On wide screens, the detailed view opens to the left of the main content, and the main content remains interactive and independently scrollable while the detailed view is open.

Challenge

The modal dialog is straightforward, but its relationship to the view that opens to the left side and the mechanism for transitioning between the two in a responsive manner are unclear.

Strategy

The detailed view that opens on the left side should be considered a non-modal dialog, since it presents an additional interactive context without inhibiting interaction with the original context. As such, converting between the two requires flipping the aria-modal="true|false" state of the dialog and the inert="true|false" state of the main content.

Result

The LiveSchool app allows teachers to track student behavior in real-time, synchronizing data seamlessly across devices. For instance, when a teacher assigns points on their phone, it's instantly shown to students via a projected laptop screen. This real-time approach extends throughout the app, including to settings tweaks like visually resizing student cards.

Using Firebase web socket events, which were converted to Vuex mutations, any changes would be instantly reflected in the Vue-based interface. To optimize responsiveness, I employed techniques such as throttling/debouncing, minimizing data sent over the wire, optimistic updates, and providing visual feedback when necessary.

Spec

Interface components must be performant and user-friendly, especially on touch devices. The app showcases features like student selection, roster selection, and viewing behavior history.

Challenge

These lists can grow to thousands of items per school.

Strategy

Long, scrollable lists virtualized using a recycler pattern, ensuring the app runs smoothly, especially on older devices. The entire list is virtually represented as JSON, but only a subset is rendered in the DOM. This reduces the memory footprint and the initial rendering time.

The basic idea behind this pattern is to only render the items that are currently visible on the screen. As the user scrolls, items that go offscreen are "recycled" or reused to display new content that comes into view. This way, the total number of DOM nodes remains relatively constant and small, regardless of the length of the list.

I spearheaded a significant re-architecture of the CSS codebase for the Apple Online Store. I was entrusted with the lead role for the three distinct phases of the project:

1. Leading the core team, conducting research, sharing knowledge, creating prototypes, and making pivotal decisions.
2. Architecting the build system, envisioning the entire pipeline, managing offshore work, and ensuring seamless migration of our main codebase.
3. Creating a style guide and linter, and supporting project teams with adoption.

As a team, we researched CSS patterns and preprocessing/postprocessing frameworks. The ultimate decision to adopt SCSS was strategic, aligning with the Marketing department's tools and facilitating code sharing. This emphasized the crucial nature of UI parity between Marketing and Online Store sections of the website, and positioned us as partners who could contribute to the ecosystem.

For the September 2014 launch of the iPhone 6 and the new Apple Watch, I worked under secrecy constraints, received security training, and was placed in an office alongside Marketing team designers, engineers, and PMs. I prototyped and delivered the final version of what would become the public's first glimpse at the Apple Watch.