Quick Start Labels
https://vanillawebdev.blogspot.com/search/label/coding-tips
Coding Tips
4
https://vanillawebdev.blogspot.com/search/label/project-setup
Project Setup
6
https://vanillawebdev.blogspot.com/search/label/starter-code
Starter Code
6
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
Reading List
https://www.codemzy.com/blog/how-to-name-webpack-chunk
How to name a webpack chunk (including split and common chunks)
Reading List
Featured Post
https://vanillawebdev.blogspot.com/2024/02/installable-web-app.html
Make Your Web App Installable
February 16, 2025How to make your web app installable.
true
https://vanillawebdev.blogspot.com/search/label/homepage
homepage
https://vanillawebdev.blogspot.com/search/label/project-setup
project-setup
Featured Post
Sidebar Labels
https://vanillawebdev.blogspot.com/search/label/app-component
App Component
1
https://vanillawebdev.blogspot.com/search/label/coding-tips
Coding Tips
4
https://vanillawebdev.blogspot.com/search/label/css-tips
CSS Tips
4
https://vanillawebdev.blogspot.com/search/label/data-server
Data Server
2
https://vanillawebdev.blogspot.com/search/label/layout
Layout
1
https://vanillawebdev.blogspot.com/search/label/project-setup
Project Setup
6
https://vanillawebdev.blogspot.com/2025/02/dialog.html
https://vanillawebdev.blogspot.com/2025/01/vanilla-javascript-project-structure.html
https://vanillawebdev.blogspot.com/
https://vanillawebdev.blogspot.com/2025/02/list-view.html
List View
February 02, 2025
2025
February
03
06:08 AM
Implementing list view your vanilal JS app to display a list of items.
HTML
index.html
[ ._listActivities]
<template class="_itemActivity">
[
<!-- # note -->
[s ._title]
[s ._description]
[btn 'Edit']
]
</template>
<script src="https://cdn.jsdelivr.net/gh/tmpmachine/vanilla-framework@d54ca23/js/infrastructure/factories/list-view-factory.js"></script>
<script>
{
let $ = document.querySelector.bind(document);
let items = [
{ title: 'Example 1', description: 'A flower garden' },
{ title: 'Example 2', description: 'A park' },
];
// # notes (timer)
let listViewTimer_notes = ListViewFactory({
retrieveDataCallback: () => {
return items;
},
templateSelector: "._itemActivity",
builderCallback: (data) => {
let {itemNode, item} = data;
let {title, description} = item;
let $itemNode = itemNode.querySelector.bind(itemNode);
$itemNode('._title').textContent = title;
$itemNode('._description').textContent = description;
return itemNode;
},
});
listViewTimer_notes.SetContainer($('._listActivities'))
listViewTimer_notes.Refresh();
}
</script>
https://vanillawebdev.blogspot.com/search/label/%40lvc
@lvc
https://vanillawebdev.blogspot.com/2025/02/dialog.html
https://vanillawebdev.blogspot.com/2025/01/vanilla-javascript-project-structure.html
https://vanillawebdev.blogspot.com/