kham.udom tokens
kham.udom work microsoft-edge

Microsoft Edge Browser — web components & UX enhancements

CSSFASTHTMLJavaScriptReactTypeScript

The work. I built reusable, performant web components for Microsoft Edge using the FAST framework, extending Fluent UI Web Components to support key browser features. Everything here shipped in production inside Edge, and most of it was built for other teams to consume in their own surfaces.

case.scope — what I owned

Scope

  1. Edge Shopping. Developed the coupon, cashback, and shopping-recommendation components, consumed and implemented by partner teams.
  2. News Feed. Iterated on the article, info-pane-ad, and native-ad components, the main pieces you see on the feed.
  3. Vertical Tabs. Prototyped motion behaviors for the tab panel's slide-out and slide-in animation.
  4. Developer Tools accessibility. Made DevTools visually accessible in Windows high contrast (forced-colors) mode, in consultation with the Edge DevTools and Chromium teams.

case.shopping — helping people save

Microsoft Edge Shopping

A browser feature that gives online shoppers multiple ways to save money. I built the coupon, cashback, and shopping-recommendation components that power it, designed as reusable pieces that partner teams consume and implement in their own surfaces.

Edge Shopping flyout on a retail site showing 15 coupons found with promo codes
fig 1 — the shopping flyout component, live on a retail site.

case.feed — the front page of the browser

News Feed

Edge ships a customizable news feed on the new tab page. I helped iterate on the article, info-pane-ad, and native-ad components, the primary building blocks of everything you see on the feed.

Edge News Feed showing a grid of article cards, ads, and sports categories
fig 2 — News Feed 1.0.

case.tabs — motion as a spec

Vertical Tabs

Vertical Tabs lets users dock their tabs along the side of the browser window. I built a working prototype so the motion designer could iterate directly on the slide-out and slide-in animation of the collapsed tab panel, tuning the real thing instead of an approximation.

Microsoft Edge browser with the vertical tabs panel docked on the left side
fig 3 — vertical tabs.

case.a11y — beyond edge, into chromium

High contrast for Developer Tools

This one reached past Edge into Chromium itself. With forced-colors mode on (Windows high contrast), parts of Developer Tools were visually broken. Working with the Edge DevTools and Chromium teams, I applied forced-colors fixes to each broken element. And because the fixes landed in Chromium, every browser built on it got the benefit, not just Edge.

Chromium Developer Tools rendered in the high contrast dark theme with accessible colors
fig 4 — DevTools in the high-contrast dark theme.

case.transfer — what this work makes me good at

What transfers

I know what it takes to build components that teams I've never met can pick up and use, because that was the job. When your code ships to a few hundred million people, you learn to care about the unglamorous parts: documentation, edge cases, performance. And when a fix belongs upstream, I put it there. The high contrast work went into Chromium, so it helps every browser built on it.

← Back to all work

This is the site's live theme editor. Each control below is a design token: a named style decision, like the accent color or corner radius, that every part of this page derives from. Change one and watch the whole system follow.

Reset to defaults

This drawer is a ch-dialog, the radios are ch-radio, and every button, card, and badge on this page is a Charm component. The sliders mutate Charm's token layer directly, and the system re-themes itself live. Under the hood, each token is a CSS custom property on :root, and your changes are saved in this browser. Go ahead, break it.