Reading List
https://jackwhiting.co.uk/posts/lazy-loading-vanilla-js-with-webpack-laravel-mix
https://medium.com/free-code-camp/reducing-css-bundle-size-70-by-cutting-the-class-names-and-using-scope-isolation-625440de600b
Libraries
https://github.com/verlok/vanilla-lazyload
Developer Resources
https://webpack.js.org/configuration/output/
https://web.dev/articles/preload-critical-assets
Featured Post
https://vanillawebdev.blogspot.com/2024/02/installable-web-app.html
February 16, 2025
How to make your web app installable.
true
https://vanillawebdev.blogspot.com/search/label/project-setup
project-setup
Featured Post
https://vanillawebdev.blogspot.com/2025/01/index-comments.html
https://vanillawebdev.blogspot.com/2025/01/css-classname-in-js.html
https://vanillawebdev.blogspot.com/
https://vanillawebdev.blogspot.com/2025/01/widget-elements-css.html
Thinking Elements as Widgets in CSS
January 22, 2025
2025
January
22
11:36 PM
If you haven't used one yet, try giving the .wg- class name prefix for elements that you see as a single entity, be it a button or a container. No styling should be added to elements without the .wg- prefix.
If you're styling a container, then you can start using a more general name for class names. With CSS nesting and the super class .wg-, you can worry less about conflicted class names.
.wg-btn-default {
/* ... */
}
.wg-btn-danger {
/* ... */
}
.wg-dialog-edit-activity {
& { /* ... */ }
.header { /* ... */ }
.content { /* ... */ }
}
.wg-dialog-settings {
& { /* ... */ }
.header { /* ... */ }
.content { /* ... */ }
}
***
Trivia:
https://www.blogger.com/comment/fullpage/post/8166404610182826392/4758555848598850133
true
https://vanillawebdev.blogspot.com/search/label/%40lvc
@lvc
https://vanillawebdev.blogspot.com/search/label/css-tips
CSS Tips
https://vanillawebdev.blogspot.com/2025/01/index-comments.html
https://vanillawebdev.blogspot.com/2025/01/css-classname-in-js.html
https://vanillawebdev.blogspot.com/