More Modern Toolings

Thinking of looking into more in-depth tooling practices now, thinking about how to conceptualize a nice React project, maybe out of this one.

I'm going to stay away from Preact actually, while it nicely does remove the VDOM. Sounds like people generally aren't a fan of it. That could be a niche of people, but it does seem people tend to just use React, so I think just learning the strengths and pitfalls of the regular old thing is probably the most helpful to me.

I also thought about component-based style scoping a bit more, and realized that I don't like scoped styles when you have to manually specify classes and such. I think it makes a lot of sense for it to implicitly be scoped to the module that's importing it. I guess you could say that's similar to Svelte, and from what it sounds like maybe, Vue and Angular too.

So most people probably gravitate towards regular old CSS Modules, but I don't like that you have to intentionally specify classes, selectors, and things like that. I think just the use of it in a specific module should be all that you need to distinguish it from other styles. I could see how using the granular nature of CSS Modules could allow you to more specifically only use some selectors for that stylesheet, but I think that's only for certain hectic situations, which I think one should try to avoid initially, by only using styles based on the module that imports them. If you're consistent with your use of styles to only be for each component/module (a module should likely only contain a single component), then I think module-scoped stylesheets seem like a nice middleground.

You could always just use global styles too, and only use their classes/declarations as necessary.

https://www.reddit.com/r/reactjs/comments/119kjvl/i_created_a_vite_plugin_that_allows_imports_of/
https://github.com/cmseguin/rollup-plugin-react-scoped-css
https://stackoverflow.com/questions/66779505/is-it-possible-to-convert-react-code-to-html-css-javascript

With that last link, I also want to learn how to build an initial HTML skeleton from the JSX, then have it be hydrated by the JS once it loads. That's another trade-off I've noticed people mention about frameworks/React. A bunch of the document is managed by JS, making it less user-friendly for caching/SEO kinds of things, because all of the document's content is dynamically generated. How do you do SSR at build-time?

Also, I was trying things out again with `npm create vite@latest`, with the React/TS option.

Been listening to some very heavy music as of lately, this has been absolutely enlightening.
First it started with Strapping Yound Lad's City, a few months ago. These next two albums will be part of my Bandcamp Friday's library additions when I get some more music tomorrow. I've been meaning to get 'Flamingosis - A Groovy Thing' too, that will also likely be tomorrow.

https://gorod.bandcamp.com/album/leading-vision
https://archspire.bandcamp.com/album/the-lucid-collective

index.html

@@ -13,7 +13,7 @@
 <link rel="alternate icon" type="image/png" sizes="16x16" href="./icon-16.png">
 <link rel="alternate icon" type="image/png" sizes="32x32" href="./icon-32.png">
 
-<link rel="stylesheet" href="./styles.css">
+<link rel="stylesheet" href="./src/styles.scss">
 
 </head>
 

package.json

@@ -14,6 +14,7 @@
  "devDependencies": {
  "better-typescript": "^0.1.7",
  "new-javascript": "^0.3.9",
+ "sass": "^1.69.5",
  "typescript": "^5.2.2",
  "vite": "^4.5.0"
  }