Cory Rylan

@coryrylan.com

Building UI @NVIDIA Robotics and Autonomous Vehicles Infra. Software Developer. Web Component & Design System enthusiast. https://coryrylan.com https://nvidia.github.io/elements/

Hi! I'm working on a new HTML feature: filterable select There are two proposed API shapes so far: 1. Nesting <input> in <select> 2. Sibling <input> for listbox <select> w/id ref Option 1 is more ergonomic, but would break selects in older browsers Thoughts? (Both currently in Canary w/flag)

As a design system leader, you have to continuously prove the value you provide. But you also need the support of leaders who truly believe in your autonomy and intrinsic value of your system.

Learning from building agent-facing design system tooling: the highest-leverage thing isn't smarter agents, it's a deterministic rules they can be checked against. Lint rules > style guides for this. No ambiguity, just pass/fail. nvidia.github.io/elements/docs/lint/

Elements Lint | NVIDIA Elements

ESLint rules for NVIDIA Elements: catch missing slots, unknown attributes, deprecated tags, and other authoring mistakes at lint time. Includes practical.

nvidia.github.io

Learning from building agent-facing design system tooling: the highest-leverage thing isn't smarter agents, it's a deterministic rules they can be checked against. Lint rules > style guides for this. No ambiguity, just pass/fail. nvidia.github.io/elements/docs/lint/

Elements Lint | NVIDIA Elements

ESLint rules for NVIDIA Elements: catch missing slots, unknown attributes, deprecated tags, and other authoring mistakes at lint time. Includes practical.

nvidia.github.io

🚀 Last week my team released FASTElement v3. Tons to say but one small bit I want to highlight is: it's smaller! A before/after for a basic FASTElement (with common features like `attr`, `html`, `css`)... v2.10.5 → 63.6 kB (19.3 kB gzip) v3.0.0 → 45.5 kB (13.9 kB gzip) bundlejs.com?q=%40microso...

bundlejs - Online bundler + npm package size checker

A quick and easy way to bundle, minify, and compress (gzip and brotli) your ts, js, jsx and npm projects all online, with the bundle file size.

bundlejs.com

🎉 NVIDIA Elements is now open source. After years of work + API hardening, it's stable enough to share. A framework-agnostic design system for AI/ML robotics & autonomous vehicle UIs. Web Components that run in any stack, plus CLI/MCP/Skills/lint tooling. nvidia.github.io/elements/

NVIDIA Design System for AI UI | NVIDIA Elements

NVIDIA Elements Design System: framework-agnostic Web Components, design tokens, CLI, MCP, skills, and lint tooling for AI infrastructure, robotics, and autonomous vehicle UI.

nvidia.github.io

🎉 NVIDIA Elements is now open source. After years of work + API hardening, it's stable enough to share. A framework-agnostic design system for AI/ML robotics & autonomous vehicle UIs. Web Components that run in any stack, plus CLI/MCP/Skills/lint tooling. nvidia.github.io/elements/

NVIDIA Design System for AI UI | NVIDIA Elements

NVIDIA Elements Design System: framework-agnostic Web Components, design tokens, CLI, MCP, skills, and lint tooling for AI infrastructure, robotics, and autonomous vehicle UI.

nvidia.github.io

I think AI is the best opening we've ever had to bring our engineering values to the mainstream, instead of the top single-digit-percent of teams it's always been. But nondeterminism will take more engineering discipline. Not less. charitydotwtf.substack.com/p/ai-demands...

AI demands more engineering discipline. Not less

If you lived through the shift from handcrafted server pets to immutable infrastructure, you should sense something oddly familiar about what's happening now.

charitydotwtf.substack.com

A diagram with various nodes and connectors? Yes, doable with pure CSS. Another demo powered by modern features! css-tip.com/node-connect... Regardless of the node's position, the connectors will adjust their shape and position for optimal connection 👀 Drag the elements and see the magic 🪄

Finally solving the tooltip arrow usecase with a new CSS property called border-shape ⚠️ WIP early-stage API, timeline TBD, more info coming soon But it brings a lil tear to my eye to see this working, border & all 🥲 This demo uses anchored container queries + border-shape + a little animation