argyleink / google-io-2021-workshop_user-adaptive-interfaces Goto Github PK

Currently icons are styled with external styles:

<!-- index.html -->
<svg viewBox="0 0 24 24">
  <title>A note icon</title>
  <path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/>
</svg>

/* index.css */
.fieldset-item svg {
  fill: var(--text2);
  block-size: var(--space-md);
}

Unfortunately in some situations browsers give up on styles and fallback to HTML, it happens to me from time to time on cellular networks. Also Firefox has a tendency to flash unstyled markup just for a fraction of a second. And those huge black icons look so much worse than this:

You just need a couple of attributes. 16px * 2rem equals 32px, I guess:

<svg viewBox="0 0 24 24" width="32" height="32">
  <title>A note icon</title>
  <path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/>
</svg>

Currently you have absolute paths for both favicon and styles:

<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" href="/style.css">

And it works totally fine when you clone or download repository, install dependencies and run the server.

But if you just want to download the source code and play with it locally without running the server (you might not have Node.js installed or have outdated version) you just can’t. That’s what I actually did and it got me frustrated for a few moments.

Absolute paths stop you from seeing the demo right away. But if you change paths to relative:

<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="style.css">

…it start working in both cases. You can just double-click the index.html and look at the demo or spin up the server to enjoy live-reload, whichever you prefer.

I think this might open this or any future demos for a wider audience. Especially, beginners.