Sign in

Cory Rylan

@coryrylan.com
618 followers 663 following 38 posts

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

PostsRepliesMedia
Cory Rylan @coryrylan.com · 18h
If anyone claims "X method/idea is dead" immediately treat anything they say with a healthy dose of skepticism.
001
Reposted by Cory Rylan
Rick Viscomi @rviscomi.dev · 29/09/2026
v0.0.191 of Modern Web Guidance is out and it's a big one! *16* new guides covering: web components by @castastrophe.bsky.social Cross-Origin Storage by @tomayac.com security by @rowan.fyi UI and PWA by @jamessw.com and @sturobson.com Wasm by @sbc100.bsky.social github.com/GoogleChrome...
accessible-web-components: Make custom elements accessible by default, setting roles and ARIA state via the ElementInternals ARIA mixin, managing focus with delegatesFocus, and keeping ARIA relationships within a single shadow root.
custom-elements: Define, register, and manage the lifecycle of autonomous custom elements, covering constructor rules, lifecycle callbacks, upgrade timing, attribute/property reflection, and naming conventions.
form-associated-custom-elements: Make a custom control participate natively in forms with formAssociated and ElementInternals, submitting its own value, integrating with constraint validation, and reacting to reset, disable, and state-restore.
prerendering-custom-elements: Server-render a custom element, then hydrate it in place without re-rendering or a flash of unstyled content.
shadow-dom: Encapsulate a component's DOM and styles with Shadow DOM, construct the tree efficiently with HTML templates, and project consumer content with slots.
styling-web-components: Style across the shadow boundary with :host selectors, inherited and custom properties for theming, ::slotted and ::part, and cascade layers and container queries inside components.
web-components: Orientation and cross-cutting principles for authoring and using Web Components, covering Custom Elements, Shadow DOM, templates and slots, Declarative Shadow DOM, styling across the shadow boundary, Form-Associated Custom Elements, and accessibility requirements. Use this guide when building reusable UI components, design systems, or server-rendered custom elements.
avoid-redundant-large-asset-downloads: Avoid re-downloading and re-storing large shared assets, such as AI models, Wasm modules, or fully-bundled JavaScript libraries, that a visitor's browser may already hold from an unrelated site.
load-shared-resources-declaratively: Serve popular, unmodified scripts, stylesheets, and JavaScript modules from a shared cross-origin cache using markup or import syntax alone, witho…New Guides
migrate-web-app-origin: Transfer an installed web app to a new origin while preserving user configuration and OS-level shortcuts.
local-network-access: Access resources on a user's local network or loopback interface from a public web application.
trusted-types: Help prevent DOM-based XSS attacks by ensuring all untrusted content is sanitized before being inserted into the page.
responsive-table: Build a data table that presents tabular data with proper header semantics, and remains readable and navigable on small screens and with assistive technologies.
spatial-navigation: Implement accessible spatial navigation using arrow keys that works correctly in different layout modes (grid etc)
cpp-on-the-web: Compile C/C++ to WebAssembly using Emscripten

Updated the animated-select-picker guide to advise using standard value attributes on <option> elements to ensure standard form submission behavior.
Updated the branded-select-styling guide to emphasize retaining standard value attributes on <option> elements to preserve default form submission behaviors.
Updated the custom-select-picker-layouts guide with guidance on using :open::picker(select) selectors, customizing the ::checkmark pseudo-element, wrapping <selectedcontent> in a <button>, and managing keyboard navigation and accessibility constraints for grid layouts.
Updated the rich-media-picker guide to clarify that standard value attributes should be maintained on <option> elements to preserve form submission functionality.
Updated the out-of-order-html-streaming guide to document the full suite of static and streaming DOM insertion methods, detailing built-in sanitizer behaviors, WritableStream integration, and processing instruction marker practices.
Updated the sanitize-untrusted-html guide to detail node manipulation patterns using Document.parseHTML() to avoid mutation XSS, explain child preservation rules via replaceWithChildrenElements, and provide aligned DOMPurify fallback configurations.
Updated…Removed the prevent-text-wrapping guide.

HTML processing instructions: Added Chrome 150 and Edge 150 support in out-of-order-html-streaming.

A four-column table titled "Benchmark Evaluations" comparing unguided versus guided pass rates across 132 tasks and 1,124 assertions.

Row 1: codex_cli (gpt-5.6-sol) achieved a 59% unguided pass rate and an 81% guided pass rate, an uplift of +22 percentage points.

Row 2: claude_code (claude-sonnet-5) achieved a 54% unguided pass rate and an 87% guided pass rate, an uplift of +33 percentage points.

Row 3: antigravity (gemini-3.8-flash-medium) achieved a 65% unguided pass rate and a 91% guided pass rate, an uplift of +26 percentage points.
12210
Reposted by Cory Rylan
Lea Verou, PhD @lea.verou.me · 25/09/2026
Oldie but goodie: Don't listen to users (watch them!). I can’t count the number of times I had to explain this to well-meaning engineers, who thought the way to good UX was asking users what they prefer. www.nngroup.com/articles/fir...
nngroup.com
First Rule of Usability? Don't Listen to Users
For good UX, watch what users do, not what they say. Self-reported claims and speculations about future behavior are unreliable. Users do not know what they want.
37215
Reposted by Cory Rylan
Cory Rylan @coryrylan.com · 12/09/2026
NVIDIA Elements #WebComponents
github.com
GitHub - NVIDIA/elements: NVIDIA Design System and UI Agent Harness for AI/ML Factories, Robotics, and Autonomous Vehicles
NVIDIA Design System and UI Agent Harness for AI/ML Factories, Robotics, and Autonomous Vehicles - NVIDIA/elements
074
Reposted by Cory Rylan
Cory Rylan @coryrylan.com · 24/09/2026
Very cool new viewport #WebComponent added to NVIDIA Elements. Leverages the Invoker Commands API. nvidia.github.io/elements/doc...
261
Reposted by Cory Rylan
JauntyWunderKind @jauntywunderkind.bsky.social · 24/09/2026
This is so sick! I love that commands are now part of the event model of the web! Thanks @keithamus.social!!
The API for invoker commands, with zoom & pan stuff visible.
031
Reposted by Cory Rylan
JauntyWunderKind @jauntywunderkind.bsky.social · 24/09/2026
That invocation has hopped from JS to the DOM layer is earth shattering, makes the page model 10x more crucial & exciting. So awesome seeing this canvas embrace that! Thanks @keithamus.social for the hard work building invoker/commands!
082
Cory Rylan @coryrylan.com · 24/09/2026
Very cool new viewport #WebComponent added to NVIDIA Elements. Leverages the Invoker Commands API. nvidia.github.io/elements/doc...
261
Reposted by Cory Rylan
Justin Fagnani @justinfagnani.com · 23/09/2026
Firefox's new design ships September 29. And did you know... The Firefox UI is built with Lit? A web browser built with web components! 🔥
28613
Reposted by Cory Rylan
Keith Cirkel @keithamus.social · 19/09/2026
I want Custom Attributes to exist - think Custom Elements (Web Components) but Attributes. I've been working on a proposal, specs, and now a polyfill: www.keithcirkel.co.uk/custom-attri... More coming soon!
keithcirkel.co.uk
Custom Attributes polyfill
79722
Cory Rylan @coryrylan.com · 12/09/2026
NVIDIA Elements #WebComponents
github.com
GitHub - NVIDIA/elements: NVIDIA Design System and UI Agent Harness for AI/ML Factories, Robotics, and Autonomous Vehicles
NVIDIA Design System and UI Agent Harness for AI/ML Factories, Robotics, and Autonomous Vehicles - NVIDIA/elements
074
Cory Rylan @coryrylan.com · 03/09/2026
What's new in NVIDIA Elements: August 2026 nvidia.github.io/elements/doc... #WebComponents
nvidia.github.io
What’s new in NVIDIA Elements: August 2026 | NVIDIA Elements
August standardizes icons, adds new formatting and media capabilities, and improves template validation for agents. Includes practical NVIDIA Elements guidance.
120
Reposted by Cory Rylan
Justin Fagnani @justinfagnani.com · 24/08/2026
Native CSS modules are coming to WebKit!! github.com/WebKit/WebKi... WebKit is the last major browser engine to add support, so we'll get to baseline support soon. Servo supports them too 😎
github.com
Implement CSS module scripts by tuankiet65 · Pull Request #72110 · WebKit/WebKit
32d0e5b Implement CSS module scripts rdar://80917329 https://bugs.webkit.org/show_bug.cgi?id=227967 Reviewed by NOBODY (OOPS!). This patch implements importing CSS stylesheets as JavaScript modul...
25615
Reposted by Cory Rylan
Dave Rupert @davatron5000.bsky.social · 19/08/2026
🚀 I made a smol ~2kb syntax highlighter that uses the CSS `::highlight()` API. davatron5000.github.io/microlighter/
davatron5000.github.io
MicroLighter - A zero-dep syntax highlighter
619438
Cory Rylan @coryrylan.com · 19/08/2026
Upgraded the home lab! Dual DGX Sparks, one running models for personal/home assistant and second running coding related tasks.
Two DGX Spark computers mounted into a small 10in semi-portable rackTwo DGX Spark computers mounted into a small 10in semi-portable rack, view from back with cooling fan and power access.
030
Reposted by Cory Rylan
Cory Rylan @coryrylan.com · 12/08/2026
What’s new in NVIDIA Elements: July 2026 nvidia.github.io/elements/doc... #WebComponents
nvidia.github.io
What’s new in NVIDIA Elements: July 2026 | NVIDIA Elements
July adds the Gauge component, expands design linting, and improves editor metadata, typography, and interactive component behavior. Includes practical NVIDIA.
041
Cory Rylan @coryrylan.com · 12/08/2026
What’s new in NVIDIA Elements: July 2026 nvidia.github.io/elements/doc... #WebComponents
nvidia.github.io
What’s new in NVIDIA Elements: July 2026 | NVIDIA Elements
July adds the Gauge component, expands design linting, and improves editor metadata, typography, and interactive component behavior. Includes practical NVIDIA.
041
Reposted by Cory Rylan
IntentToShip @intenttoship.dev · 16/07/2026
Blink: Intent to Prototype: CSS mixins
groups.google.com
Blink: Intent to Prototype: CSS mixins
Blink: Intent to Prototype: CSS mixins
03510
Reposted by Cory Rylan
Leon Derczynski @leonderczynski.bsky.social · 21/07/2026
I don't know how many ways to say this but - stop looking at model performance - it's almost all in the harness - decent harness can easily outclass top model evidence item #71625: developer.nvidia.com/blog/create-...
developer.nvidia.com
Create a LangChain Deep Agents Harness Profile for NVIDIA Nemotron 3 Ultra to Improve Performance | NVIDIA Technical Blog
Agentic systems often face a trade-off between accuracy and cost. The highest-performing proprietary frontier models and harnesses provide top accuracy but are expensive. Fine-tuning offers one way…
031
Reposted by Cory Rylan
Joey Arhar @josepharhar.bsky.social · 14/07/2026
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)
2211623
Reposted by Cory Rylan
Alan B Smith @alanbsmith.bsky.social · 11/07/2026
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.
131
Reposted by Cory Rylan
Cory Rylan @coryrylan.com · 05/07/2026
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/
nvidia.github.io
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.
121
Cory Rylan @coryrylan.com · 05/07/2026
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/
nvidia.github.io
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.
121
Reposted by Cory Rylan
Cory LaViska @cory.laviska.com · 30/06/2026
“The frontier of 2026, the stuff the sharpest people are most excited about, is render the HTML on the server, ship almost no JavaScript, and use the web platform instead of fighting it.” davidpoblador.com/deep-dives/t...
davidpoblador.com
The Descent — What Happened to the Frontend While You Weren't Watching
The last time you wrote a frontend it was a <button> and an FTP upload. Spare twenty minutes and get up to speed on everything the web did while you looked away. By David Poblador i Garcia.
94911
Reposted by Cory Rylan
Jacques Newman @jacquesnewman.bsky.social · 02/07/2026
focusgroup has shipped in chromium 150! developer.chrome.com/blog/new-in-... Its been a long time coming, glad to have been able to get this out the door! Also note that there polyfill ready to go: www.npmjs.com/package/@mic...
developer.chrome.com
New in Chrome 150  |  Blog  |  Chrome for Developers
CSS text-fit property, Focusgroup declarative keyboard navigation, and CSS background-clip border-area.
5328
Reposted by Cory Rylan
Lea Verou, PhD @lea.verou.me · 02/07/2026
When I say that modularity & composability are now crucial as large, coupled codebases consume more context, I see raised eyebrows. Meanwhile, they are constantly running out of tokens while I haven't hit a usage limit in months. If you think architecture no longer matters, joke’s on you.
static.klipy.com
Tkt Smart Meme: Think Smart
ALT: Tkt Smart Meme: Think Smart
1699
Reposted by Cory Rylan
Burton Smith @stuffbreaker.bsky.social · 30/06/2026
I'm excited to announce WC Toolkit's new CEM Analyzer Plugin for Vite, Rollup, Rolldown, or Webpack builds. ✅ Auto-runs on build 🔁 Reruns on file changes 🔧 Zero config — auto-discovers your CEM config file #WebComponents #webdev #frontend #javascript wc-toolkit.com/cem-utilitie...
wc-toolkit.com
CEM Analyzer Plugin
Vite/Rollup/Webpack plugins to run Custom Elements Manifest Analyzer
2111
Reposted by Cory Rylan
Dave Rupert @davatron5000.bsky.social · 29/06/2026
🚀 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.com
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.
1264
Reposted by Cory Rylan
John Kreitlow @john.kreitlow.rocks · 30/06/2026
🎉 Fluent Web Components v3.0.0 is published! (More compelling details about this huge milestone will be shared in the coming days, from folks who are better at making announcements than me) web-components.fluentui.dev
web-components.fluentui.dev
Fluent UI Web Components
Fluent UI Web Components is a set of UI components and utilities built with web standards.
2192
Reposted by Cory Rylan
IntentToShip @intenttoship.dev · 24/06/2026
Gecko: Intent to Prototype: text-box-trim / text-box-edge
groups.google.com
Gecko: Intent to Prototype: text-box-trim / text-box-edge
Gecko: Intent to Prototype: text-box-trim / text-box-edge
04910
Reposted by Cory Rylan
Cory Rylan @coryrylan.com · 24/06/2026
🎉 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.github.io
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.
5315
Reposted by Cory Rylan
Burton Smith @stuffbreaker.bsky.social · 23/06/2026
I'm excited to announce the new WC Toolkit #WebComponents type generator for @vuejs.org! This provides inline documentation, autocomplete, and API validation. wc-toolkit.com/integrations...
wc-toolkit.com
Vue.js Types Generator
Generate Vue.js types for custom elements / web components
171
Reposted by Cory Rylan
Tony Ward @tonyward.dev · 24/06/2026
YES!
063
Cory Rylan @coryrylan.com · 24/06/2026
🎉 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.github.io
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.
5315
Reposted by Cory Rylan
Chris Coyier @chriscoyier.net · 18/06/2026
Oh snort that happened fast.
The little ⓘ icons showing up in Chrome because of interest invokers on some buttons.
7323
Reposted by Cory Rylan
Luca Casonato 🏳️‍🌈 @lcas.dev · 17/06/2026
What's this, a new HTML proposal? Built-in localized time formatting in HTML! github.com/whatwg/html/...
<time datetime="2026-06-17T08:13:41.099Z" format="datetime">
  fallback
</time>
1942657
Reposted by Cory Rylan
Charity Majors @charity.wtf · 15/06/2026
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...
charitydotwtf.substack.com
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.
911734
Reposted by Cory Rylan
CSS by T. Afif @css-only.dev · 16/06/2026
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 🪄
824321
Reposted by Cory Rylan
Lea Verou, PhD @lea.verou.me · 12/06/2026
As @una.im just mentioned in her #cssday talk, the CSS WG recently resolved to insert a ⓘ after EVERY SINGLE INTEREST INVOKER on touchscreens. Here’s a mock of what this would look like for bsky. This is the issue to let the CSS WG know what you think: github.com/w3c/csswg-dr...
78016
Reposted by Cory Rylan
Una Kravets @una.im · 09/06/2026
Customizable select is coming to Safari 27! 🥳 Want to try it out? Check out my demo collection: codepen.io/collection/B...
411012
Cory Rylan @coryrylan.com · 17/04/2026
Welp used 50% of my usage just trying to get through the setup of Claude Design...Guess I'll try again next week 😅
100
Reposted by Cory Rylan
Justin Fagnani @justinfagnani.com · 18/03/2026
Nice result in @zeroheight.com's 2026 Design Systems Report: report.zeroheight.com#your-tools Web components are the second-most used "framework" among the respondents. This makes sense: if you build web components you support all the frameworks. Otherwise, you'd probably only support React.
A chart showing responses for the question "What frameworks do you use?":

- React: 72%
- Web components: 36%
- Angular: 28%
- Vue: 18%
- Stencil: 7%
- Svelte: 4%
4438
Cory Rylan @coryrylan.com · 19/02/2026
A two-panel meme featuring characters Bernard Lowe and Theresa Cullen from the show Westworld. In the top panel, Theresa hands Bernard a document labeled "SKILL FILES". In the bottom panel, a close-up shows Bernard looking at the document with a blank expression, captioned: "CLAUDE: DOESN'T LOOK LIKE ANYTHING TO ME".
030
Reposted by Cory Rylan
Una Kravets @una.im · 30/01/2026
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
712213
Reposted by Cory Rylan
Joni Korpi @jonikorpi.com · 20/01/2026
More people need to know about lit-html. (It’s not a framework or a web components thing.) lit.dev/docs/librari...
lit.dev
Using lit-html standalone – Lit
Simple. Fast. Web Components.
3225
Reposted by Cory Rylan
Alex Russell @infrequently.org · 20/01/2026
I don't know who needs to hear this, but when it comes to web performance, if you're measuring in seconds, you're admitting defeat.
3514
Reposted by Cory Rylan
Orhun Parmaksız @orhun.dev · 11/01/2026
Want to understand the terminal? 🌀 How Terminals Work: how-terminals-work.vercel.app 🍀 Learn how terminal emulators and TUIs work through interactive demos. 💯 Explore the grid model, escape sequences, keyboard input & more. #terminal #tui #devtools #learning #opensource
1397
Reposted by Cory Rylan
Niki @nikitonsky.mastodon.online.ap.brid.gy · 05/01/2026
New blog post! A close look at Tahoe menu icons tonsky.me/blog/tahoe-icons
tonsky.me
It’s hard to justify Tahoe icons
Looking at the first principles of icon design—and how Apple failed to apply all of them in macOS Tahoe
79934
Reposted by Cory Rylan
Bramus @bram.us · 06/01/2026
Ow yeah! 😎 FYI: you can start using customizable select *TODAY* because it is the perfect progressive enhancement: in browser with no support you get the status quo which is just a regular select (which you can also style up to a certain extent).
35513
Reposted by Cory Rylan
Cassidy @cassidoo.co · 06/01/2026
Did you know you can get your GitHub profile pic by adding .png to your profile page? It's super handy! github.com/cassidoo.png
813417