gitextract_5pqw1n3f/ ├── .github/ │ └── workflows/ │ └── static.yml ├── .gitignore ├── .hintrc ├── LICENSE.md ├── README.md ├── eslint.config.cjs └── public/ ├── blog/ │ ├── archive.html │ ├── articles/ │ │ ├── 2024-08-17-lets-build-a-blog/ │ │ │ ├── card.html │ │ │ ├── example.html │ │ │ ├── generator.js │ │ │ └── index.html │ │ ├── 2024-08-25-vanilla-entity-encoding/ │ │ │ ├── example1.js │ │ │ ├── example2.js │ │ │ ├── example3.js │ │ │ ├── html.js │ │ │ └── index.html │ │ ├── 2024-08-30-poor-mans-signals/ │ │ │ ├── adder.html │ │ │ ├── adder.js │ │ │ ├── index.html │ │ │ ├── preact-example.js │ │ │ ├── signals.js │ │ │ ├── signals1-use.js │ │ │ ├── signals1.js │ │ │ ├── signals2-use.js │ │ │ ├── signals2.js │ │ │ ├── signals3-use.js │ │ │ └── signals3.js │ │ ├── 2024-09-03-unix-philosophy/ │ │ │ ├── adder.svelte │ │ │ ├── bind.js │ │ │ ├── bind1.js │ │ │ ├── bind2-partial.js │ │ │ ├── bind3-partial.js │ │ │ ├── bind4-partial.js │ │ │ ├── example-bind3/ │ │ │ │ ├── bind.js │ │ │ │ ├── example.html │ │ │ │ ├── example.js │ │ │ │ └── signals.js │ │ │ ├── example-combined/ │ │ │ │ ├── adder.js │ │ │ │ ├── bind.js │ │ │ │ ├── example.html │ │ │ │ ├── html.js │ │ │ │ └── signals.js │ │ │ └── index.html │ │ ├── 2024-09-06-how-fast-are-web-components/ │ │ │ └── index.html │ │ ├── 2024-09-09-sweet-suspense/ │ │ │ ├── error-boundary-partial.html │ │ │ ├── error-boundary.js │ │ │ ├── example/ │ │ │ │ ├── components/ │ │ │ │ │ ├── error-boundary.js │ │ │ │ │ ├── error-message.js │ │ │ │ │ ├── hello-world/ │ │ │ │ │ │ ├── hello-world.js │ │ │ │ │ │ └── later.js │ │ │ │ │ ├── lazy.js │ │ │ │ │ └── suspense.js │ │ │ │ ├── index.html │ │ │ │ └── index.js │ │ │ ├── index.html │ │ │ ├── lazy1.js │ │ │ ├── lazy2-partial.js │ │ │ ├── lazy3-partial.js │ │ │ ├── suspense1-partial.html │ │ │ ├── suspense1.js │ │ │ └── suspense2-partial.js │ │ ├── 2024-09-16-life-and-times-of-a-custom-element/ │ │ │ ├── defined/ │ │ │ │ └── example.html │ │ │ ├── defined2/ │ │ │ │ └── example.html │ │ │ ├── index.html │ │ │ ├── observer/ │ │ │ │ └── example.html │ │ │ ├── shadowed/ │ │ │ │ └── example.html │ │ │ └── undefined/ │ │ │ ├── example.css │ │ │ └── example.html │ │ ├── 2024-09-28-unreasonable-effectiveness-of-vanilla-js/ │ │ │ ├── complete/ │ │ │ │ ├── AddTask.js │ │ │ │ ├── App.js │ │ │ │ ├── TaskList.js │ │ │ │ ├── TasksContext.js │ │ │ │ ├── index.html │ │ │ │ ├── index.js │ │ │ │ └── styles.css │ │ │ ├── index.html │ │ │ └── react/ │ │ │ ├── package.json │ │ │ ├── public/ │ │ │ │ └── index.html │ │ │ └── src/ │ │ │ ├── AddTask.js │ │ │ ├── App.js │ │ │ ├── TaskList.js │ │ │ ├── TasksContext.js │ │ │ ├── index.js │ │ │ └── styles.css │ │ ├── 2024-09-30-lived-experience/ │ │ │ └── index.html │ │ ├── 2024-10-07-needs-more-context/ │ │ │ ├── combined/ │ │ │ │ ├── context-provider.js │ │ │ │ ├── context-request.js │ │ │ │ ├── index.css │ │ │ │ ├── index.html │ │ │ │ ├── index.js │ │ │ │ ├── theme-context.js │ │ │ │ └── theme-provider.js │ │ │ ├── context-provider.js │ │ │ ├── context-request-1.js │ │ │ ├── context-request-2.js │ │ │ ├── context-request-3.js │ │ │ ├── context-request-4.js │ │ │ ├── index.html │ │ │ ├── theme-context-fragment.html │ │ │ ├── theme-context.js │ │ │ └── theme-provider.js │ │ ├── 2024-10-20-editing-plain-vanilla/ │ │ │ ├── .hintrc │ │ │ ├── eslint.config.cjs │ │ │ └── index.html │ │ ├── 2024-12-16-caching-vanilla-sites/ │ │ │ ├── index.html │ │ │ └── sw.js │ │ ├── 2025-01-01-new-years-resolve/ │ │ │ ├── example-index.js │ │ │ ├── index.html │ │ │ ├── layout.js │ │ │ └── layout.tsx │ │ ├── 2025-04-21-attribute-property-duality/ │ │ │ ├── demo1.html │ │ │ ├── demo1.js │ │ │ ├── demo2.html │ │ │ ├── demo2.js │ │ │ ├── demo3.html │ │ │ ├── demo3.js │ │ │ ├── demo4.html │ │ │ ├── demo4.js │ │ │ ├── demo5-before.js │ │ │ ├── demo5.html │ │ │ ├── demo5.js │ │ │ └── index.html │ │ ├── 2025-05-09-form-control/ │ │ │ ├── demo1/ │ │ │ │ ├── index-partial.txt │ │ │ │ ├── index.html │ │ │ │ └── input-inline.js │ │ │ ├── demo2/ │ │ │ │ ├── index.html │ │ │ │ ├── input-inline-partial.js │ │ │ │ └── input-inline.js │ │ │ ├── demo3/ │ │ │ │ ├── index.html │ │ │ │ ├── input-inline-partial.js │ │ │ │ └── input-inline.js │ │ │ ├── demo4/ │ │ │ │ ├── index.html │ │ │ │ ├── input-inline-partial.js │ │ │ │ └── input-inline.js │ │ │ ├── demo5/ │ │ │ │ ├── index.html │ │ │ │ ├── input-inline.css │ │ │ │ └── input-inline.js │ │ │ ├── demo6/ │ │ │ │ ├── index-partial.txt │ │ │ │ ├── index.html │ │ │ │ ├── input-inline-partial.js │ │ │ │ ├── input-inline.css │ │ │ │ └── input-inline.js │ │ │ └── index.html │ │ ├── 2025-06-12-view-transitions/ │ │ │ ├── example1/ │ │ │ │ ├── index.html │ │ │ │ ├── index.js │ │ │ │ └── transitions.css │ │ │ ├── example2/ │ │ │ │ ├── index.html │ │ │ │ ├── index.js │ │ │ │ └── transitions.css │ │ │ ├── example3/ │ │ │ │ ├── index.html │ │ │ │ ├── index.js │ │ │ │ ├── transitions.css │ │ │ │ └── view-transition.js │ │ │ ├── example4/ │ │ │ │ ├── index.html │ │ │ │ ├── index.js │ │ │ │ ├── transitions.css │ │ │ │ └── view-transition.js │ │ │ ├── example5/ │ │ │ │ ├── index.html │ │ │ │ ├── index.js │ │ │ │ ├── transitions.css │ │ │ │ ├── view-transition-part.js │ │ │ │ └── view-transition.js │ │ │ ├── example6/ │ │ │ │ ├── index.html │ │ │ │ ├── lib/ │ │ │ │ │ ├── html.js │ │ │ │ │ ├── view-route.js │ │ │ │ │ └── view-transition.js │ │ │ │ └── src/ │ │ │ │ ├── App.js │ │ │ │ ├── Details.js │ │ │ │ ├── Home.js │ │ │ │ ├── Icons.js │ │ │ │ ├── Layout.js │ │ │ │ ├── LikeButton.js │ │ │ │ ├── Videos.js │ │ │ │ ├── animations.css │ │ │ │ ├── data.js │ │ │ │ ├── index.js │ │ │ │ └── styles.css │ │ │ └── index.html │ │ ├── 2025-06-25-routing/ │ │ │ ├── example1/ │ │ │ │ ├── app.js │ │ │ │ ├── index.html │ │ │ │ └── view-route.js │ │ │ ├── example2/ │ │ │ │ ├── app.js │ │ │ │ ├── index.html │ │ │ │ ├── view-route-partial.js │ │ │ │ ├── view-route-partial2.js │ │ │ │ └── view-route.js │ │ │ ├── example3/ │ │ │ │ ├── app.js │ │ │ │ ├── index.html │ │ │ │ ├── view-route-partial.js │ │ │ │ └── view-route.js │ │ │ ├── example4/ │ │ │ │ ├── 404.html │ │ │ │ └── index-partial.html │ │ │ └── index.html │ │ ├── 2025-07-13-history-architecture/ │ │ │ └── index.html │ │ ├── 2025-07-16-local-first-architecture/ │ │ │ ├── example1.html │ │ │ └── index.html │ │ ├── 2026-03-01-redesigning-plain-vanilla/ │ │ │ ├── index.html │ │ │ └── nav-menu.html │ │ ├── 2026-03-09-details-matters/ │ │ │ ├── example1/ │ │ │ │ ├── index-partial.html │ │ │ │ └── index.html │ │ │ ├── example2/ │ │ │ │ ├── index-partial.html │ │ │ │ └── index.html │ │ │ ├── example3/ │ │ │ │ ├── index-partial.html │ │ │ │ └── index.html │ │ │ ├── example4/ │ │ │ │ ├── index-partial.html │ │ │ │ └── index.html │ │ │ ├── example5/ │ │ │ │ ├── index-partial.html │ │ │ │ └── index.html │ │ │ └── index.html │ │ └── index.json │ ├── components/ │ │ ├── blog-archive.js │ │ ├── blog-footer.js │ │ ├── blog-header.js │ │ └── blog-latest-posts.js │ ├── example-base.css │ ├── feed.xml │ ├── generator.html │ ├── generator.js │ ├── index.css │ ├── index.html │ └── index.js ├── components/ │ ├── analytics/ │ │ └── analytics.js │ ├── code-viewer/ │ │ ├── code-viewer.css │ │ └── code-viewer.js │ └── tab-panel/ │ ├── tab-panel.css │ └── tab-panel.js ├── index.css ├── index.html ├── index.js ├── lib/ │ ├── html.js │ └── speed-highlight/ │ ├── LICENSE │ ├── common.js │ ├── index.js │ ├── languages/ │ │ ├── css.js │ │ ├── html.js │ │ ├── js.js │ │ ├── js_template_literals.js │ │ ├── jsdoc.js │ │ ├── json.js │ │ ├── log.js │ │ ├── plain.js │ │ ├── regex.js │ │ ├── todo.js │ │ ├── ts.js │ │ ├── uri.js │ │ └── xml.js │ └── themes/ │ ├── default.css │ ├── github-dark.css │ └── github-light.css ├── manifest.json ├── pages/ │ ├── applications.html │ ├── components.html │ ├── examples/ │ │ ├── applications/ │ │ │ ├── counter/ │ │ │ │ ├── components/ │ │ │ │ │ └── counter.js │ │ │ │ ├── index.html │ │ │ │ └── index.js │ │ │ ├── lifting-state-up/ │ │ │ │ ├── components/ │ │ │ │ │ ├── accordion.js │ │ │ │ │ └── panel.js │ │ │ │ ├── index.css │ │ │ │ ├── index.html │ │ │ │ ├── index.js │ │ │ │ └── react/ │ │ │ │ └── App.js │ │ │ ├── passing-data-deeply/ │ │ │ │ ├── components/ │ │ │ │ │ ├── button.js │ │ │ │ │ ├── panel.js │ │ │ │ │ └── theme-context.js │ │ │ │ ├── index.css │ │ │ │ ├── index.html │ │ │ │ ├── index.js │ │ │ │ └── lib/ │ │ │ │ └── tiny-context.js │ │ │ └── single-page/ │ │ │ ├── app/ │ │ │ │ └── App.js │ │ │ ├── components/ │ │ │ │ └── route/ │ │ │ │ └── route.js │ │ │ ├── index.css │ │ │ ├── index.html │ │ │ └── index.js │ │ ├── components/ │ │ │ ├── adding-children/ │ │ │ │ ├── components/ │ │ │ │ │ ├── avatar.css │ │ │ │ │ ├── avatar.js │ │ │ │ │ ├── badge.css │ │ │ │ │ └── badge.js │ │ │ │ ├── index.css │ │ │ │ ├── index.html │ │ │ │ └── index.js │ │ │ ├── advanced/ │ │ │ │ ├── components/ │ │ │ │ │ ├── avatar.css │ │ │ │ │ └── avatar.js │ │ │ │ ├── index.css │ │ │ │ ├── index.html │ │ │ │ ├── index.js │ │ │ │ └── simple.html │ │ │ ├── data/ │ │ │ │ ├── components/ │ │ │ │ │ ├── app.js │ │ │ │ │ ├── form.js │ │ │ │ │ ├── list-safe.js │ │ │ │ │ ├── list.js │ │ │ │ │ └── summary.js │ │ │ │ ├── index.css │ │ │ │ ├── index.html │ │ │ │ └── index.js │ │ │ ├── shadow-dom/ │ │ │ │ ├── components/ │ │ │ │ │ ├── avatar.css │ │ │ │ │ ├── avatar.js │ │ │ │ │ ├── badge.css │ │ │ │ │ ├── badge.js │ │ │ │ │ ├── header.css │ │ │ │ │ └── header.js │ │ │ │ ├── index.css │ │ │ │ ├── index.html │ │ │ │ ├── index.js │ │ │ │ └── reset.css │ │ │ └── simple/ │ │ │ ├── hello-world.js │ │ │ └── index.html │ │ ├── sites/ │ │ │ ├── importmap/ │ │ │ │ ├── components/ │ │ │ │ │ └── metrics.js │ │ │ │ ├── index.css │ │ │ │ ├── index.html │ │ │ │ ├── index.js │ │ │ │ └── lib/ │ │ │ │ ├── dayjs/ │ │ │ │ │ ├── module.js │ │ │ │ │ └── relativeTime.js │ │ │ │ └── web-vitals.js │ │ │ ├── imports/ │ │ │ │ ├── components/ │ │ │ │ │ └── metrics.js │ │ │ │ ├── index.css │ │ │ │ ├── index.html │ │ │ │ ├── index.js │ │ │ │ └── lib/ │ │ │ │ ├── dayjs/ │ │ │ │ │ └── relativeTime.js │ │ │ │ ├── imports.js │ │ │ │ └── web-vitals.js │ │ │ └── page/ │ │ │ ├── example.html │ │ │ ├── example2.html │ │ │ └── index.js │ │ └── styling/ │ │ ├── replacing-css-modules/ │ │ │ ├── nextjs/ │ │ │ │ ├── layout.tsx │ │ │ │ └── styles.module.css │ │ │ └── vanilla/ │ │ │ ├── layout.js │ │ │ └── styles.css │ │ ├── scoping-prefixed/ │ │ │ ├── components/ │ │ │ │ └── example/ │ │ │ │ ├── example.css │ │ │ │ ├── example.js │ │ │ │ └── example_nested.css │ │ │ ├── index.css │ │ │ ├── index.html │ │ │ └── index.js │ │ └── scoping-shadowed/ │ │ ├── components/ │ │ │ └── example/ │ │ │ ├── example.css │ │ │ └── example.js │ │ ├── index.html │ │ └── index.js │ ├── sites.html │ └── styling.html ├── robots.txt ├── sitemap.txt ├── styles/ │ ├── global.css │ ├── reset.css │ └── variables.css └── tests/ ├── imports-test.js ├── index.html ├── index.js ├── lib/ │ ├── @testing-library/ │ │ └── dom.umd.js │ └── mocha/ │ ├── chai.js │ ├── mocha.css │ └── mocha.js └── tabpanel.test.js