TODO

[nathanjhood]

This template is about 95% complete or so, from my current perspective.

I don't have time to focus more on this project right now. I'll definitely revisit it later, when possible; meanwhile, I'd like to invite readers, guests, and passers-by to try out the template, and take a look at any of the following.

• service worker

Got this working locally with vanilla-JS-in-HTML, but it's naturally tricky to test. Once I'm assured of how this is working (importScripts('path/to/sw.js')...), I will take another look at this. MDN WebAPI glossary is your friend. Use an incognito window with dev tools opened on the application > service worker tab; once the service worker begins to appear on this tab, be sure to remove/unregister the worker(s) between builds, on refresh, etc...

• styles inheritance

Use stylesheet.flatten...? Have to admit, I've not done much with the various CSS APIs in the Web API available to browsers. MDN has loads of interesting information about it all, but I haven't fully settled on using style={some Javascript} or className="some-tailwind-classes"

• NativeWind

Unsure it's worth integrating at project template level, because it is quite a heavy dependency burden... Then again, as with CSS-in-JS, I've yet to work with it enough to make a well-informed decision. Some feedback would be incredibly useful in that regard.

• fix scaling of logo image on zoom

Might be that we need to set a different global font size (1/2?) when width < height... then remove the * 0.5 scalar from the image size calculations.

I'll revisit this to keep an eye on traffic, the GH Pages deployment, dependabot/workflows status, etc. If I have a sudden brainwave re: any of the above then I'll make a branch. But if you're reading this and are up for it, please feel welcome to contribute!

• SSR mode

See server.tsx... then, try this command at the project root directory: $ yarn tsx server.tsx...

[nathanjhood]

I had some success incorporating Tailwind's hot-reload (file watch mode) along with an esbuild script, in my web components starter template.

It involved attaching the Tailwind output file to the document as a <style> tag, via its' src attribute, and then using className to describe the required Tailwind classes in the components. The file watcher regenerates the CSS files on every edit 'n' save, and runs in parallel to the dev server script thanks to npm-run-all2.

I believe that could work here, too... but with a few question marks, until I try it.

The <style> tag likely won't have any meaning for any target that doesn't have a document Object Model - ie, a DOM - so, it will probably work for web apps running inside browsers; but not for anything like a mobile or native app.

However, the issue above is somewhat moot if using NativeWind, since we would actually be using Tailwind to generate an ECMA-compatible file (js or ts or whichever) containing the used styles, and that operates on the native-compatible components thanks to StyleSheets.

I see this ticket has been having some visitors 👁️ please feel welcome to add to the commentary! I'd appreciate help in this one, as I'm a little short free on time to do it all myself.