zev/frameworkless_front_end_development
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first

Browse Source
This commit is contained in:
Zev Averbach
2022-03-05 15:18:08 +01:00
commit 82ccd761a3
7 changed files with 419 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
node_modules/

1
README.md Normal file
View File

@@ -0,0 +1 @@
These are notes and experiments from the book "Frameworkless Front-End Development".

46
custom_perf_widget/index.html Normal file
View File

@@ -0,0 +1,46 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Custom Performance Widget</title>
</head>
<body>
<script>
let panel
let start
let frames = 0
const create = () => {
const div = document.createElement('div')
div.style.position = 'fixed'
div.style.left = '0px'
div.style.top = '0px'
div.style.width = '50px'
div.style.height = '50px'
div.style.backgroundColor = 'blac'
div.style.color = 'white'
return div
}
const tick = () => {
frames++
const now = performance.now()
if (now >= start + 1000) {
panel.innerText = frames
frames = 0
start = now
}
window.requestAnimationFrame(tick)
}
const init = (parent = document.body) => {
panel = create()
window.requestAnimationFrame(() => {
start = performance.now()
parent.appendChild(panel)
tick()
})
}
</script>
</body>
</html>

124
todo/index.html Normal file
View File

@@ -0,0 +1,124 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/todomvc-common@1.0.5/base.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/todomvc-app-css@2.1.2/index.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Faker/3.1.0/faker.js"></script>
<title>TODO MVC</title>
</head>
<body>
<section class="todoapp">
<header class="header">
<h1>todos</h1>
<input class="new-todo" placeholder="What needs to be done?" autofocus="">
</header>
<section class="main">
<input id="toggle-all" class="toggle-all" type="checkbox">
<label for="toggle-all">Mark all as complete</label>
<ul class="todo-list"></ul>
</section>
<footer class="footer">
<span class="todo-count"></span>
<ul class="filters">
<li>
<a href="#/">All</a>
</li>
<li>
<a href="#/active">Active</a>
</li>
<li>
<a href="#/completed">Completed</a>
</li>
</ul>
<button class="clear-completed">
Clear completed
</button>
</footer>
</section>
<footer class="info">
<p>Double-click to edit a todo</p>
</footer>
<script>
const makeId = text => text.toLowerCase().replace(' ', '-')
const createTodoElement = todo => {
const { text, completed } = todo
const li = document.createElement('li')
if (completed) {
li.classList.add('completed')
}
li.id = makeId(text)
const div = document.createElement('div')
div.classList.add('view')
li.appendChild(div)
const checkbox = document.createElement('input')
checkbox.type = 'checkbox'
checkbox.classList.add('toggle')
if (completed) {
checkbox.checked = true
}
label = document.createElement('label')
label.innerText = text
button = document.createElement('button')
button.classList.add('destroy')
div.append(checkbox, label, button)
editInput = document.createElement('input')
editInput.value = text
editInput.class = "edit"
j
return `
<li ${completed ? 'class="completed"' : ''}>
<div class="view">
<input ${completed ? 'checked' : ''} class="toggle" type="checkbox">
<label>${text}</label>
<button class="destroy"></button>
</div>
<input class="edit" value="${text}">
</li>
`
}
const getTodoCount = todoObjects => {
const numIncomplete = todoObjects.filter(todo => !todo.completed).length
return numIncomplete === 1 ? '1 item left' : `${numIncomplete} items left`
}
const view = (targetElement, state) => {
const { currentFilter, todoObjects } = state
const element = targetElement.cloneNode(true)
const list = element.querySelector('.todo-list')
const counter = element.querySelector('.todo-count')
const filters = element.querySelector('.filters')
list.children = todoObjects.map(createTodoElement)
counter.textContent = getTodoCount(todoObjects)
Array
.from(filters.querySelectorAll('li a'))
.forEach(a => {
if (a.textContent === currentFilter) {
a.classList.add('selected')
} else {
a.classList.remove('selected')
}
})
return element
}
const { random } = faker
const { words, boolean } = random
const repeat = (elementFactory, number) => Array.from({length: number}, elementFactory)
const generateTodoObjects = () => repeat(() => ({text: words(2), completed: boolean()}), faker.random.number(10))
const state = {
todoObjects: generateTodoObjects(),
currentFilter: "All",
}
const main = document.querySelector('.todoapp')
window.requestAnimationFrame(() => main.replaceWith(view(main, state)))
</script>
</body>
</html>

223
todo/package-lock.json generated Normal file
View File

@@ -0,0 +1,223 @@
{
"name": "todo",
"version": "1.0.0",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "todo",
"version": "1.0.0",
"license": "ISC",
"devDependencies": {
"typescript": "^4.5.5",
"typescript-lit-html-plugin": "^0.9.0"
}
},
"node_modules/@emmetio/extract-abbreviation": {
"version": "0.1.6",
"resolved": "https://registry.npmjs.org/@emmetio/extract-abbreviation/-/extract-abbreviation-0.1.6.tgz",
"integrity": "sha512-Ce3xE2JvTSEbASFbRbA1gAIcMcZWdS2yUYRaQbeM0nbOzaZrUYfa3ePtcriYRZOZmr+CkKA+zbjhvTpIOAYVcw==",
"dev": true
},
"node_modules/jsonc-parser": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-1.0.3.tgz",
"integrity": "sha512-hk/69oAeaIzchq/v3lS50PXuzn5O2ynldopMC+SWBql7J2WtdptfB9dy8Y7+Og5rPkTCpn83zTiO8FMcqlXJ/g==",
"dev": true
},
"node_modules/typescript": {
"version": "4.5.5",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.5.5.tgz",
"integrity": "sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==",
"dev": true,
"bin": {
"tsc": "bin/tsc",
"tsserver": "bin/tsserver"
},
"engines": {
"node": ">=4.2.0"
}
},
"node_modules/typescript-lit-html-plugin": {
"version": "0.9.0",
"resolved": "https://registry.npmjs.org/typescript-lit-html-plugin/-/typescript-lit-html-plugin-0.9.0.tgz",
"integrity": "sha512-Ux2I1sPpt2akNbRZiBAND9oA8XNE2BuVmDwsb7rZshJ9T8/Na2rICE5Tnuj9dPHdFUATdOGjVEagn1/v8T4gCQ==",
"dev": true,
"dependencies": {
"typescript-styled-plugin": "^0.13.0",
"typescript-template-language-service-decorator": "^2.2.0",
"vscode-html-languageservice": "^2.1.10",
"vscode-languageserver-types": "^3.13.0"
}
},
"node_modules/typescript-styled-plugin": {
"version": "0.13.0",
"resolved": "https://registry.npmjs.org/typescript-styled-plugin/-/typescript-styled-plugin-0.13.0.tgz",
"integrity": "sha512-GGMzv/JAd4S8mvWgHZslvW2G1HHrdurrp93oSR4h85SM8e5at7+KCqHsZICiTaL+iN25YGkJqoaZe4XklA76rg==",
"dev": true,
"dependencies": {
"typescript-template-language-service-decorator": "^2.0.0",
"vscode-css-languageservice": "^3.0.12",
"vscode-emmet-helper": "1.2.11",
"vscode-languageserver-types": "^3.13.0"
}
},
"node_modules/typescript-template-language-service-decorator": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/typescript-template-language-service-decorator/-/typescript-template-language-service-decorator-2.2.0.tgz",
"integrity": "sha512-xiolqt1i7e22rpqMaprPgSFVgU64u3b9n6EJlAaUYE61jumipKAdI1+O5khPlWslpTUj80YzjUKjJ2jxT0D74w==",
"dev": true
},
"node_modules/vscode-css-languageservice": {
"version": "3.0.13",
"resolved": "https://registry.npmjs.org/vscode-css-languageservice/-/vscode-css-languageservice-3.0.13.tgz",
"integrity": "sha512-RWkO/c/A7iXhHEy3OuEqkCqavDjpD4NF2Ca8vjai+ZtEYNeHrm1ybTnBYLP4Ft1uXvvaaVtYA9HrDjD6+CUONg==",
"dev": true,
"dependencies": {
"vscode-languageserver-types": "^3.13.0",
"vscode-nls": "^4.0.0"
}
},
"node_modules/vscode-emmet-helper": {
"version": "1.2.11",
"resolved": "https://registry.npmjs.org/vscode-emmet-helper/-/vscode-emmet-helper-1.2.11.tgz",
"integrity": "sha512-ms6/Z9TfNbjXS8r/KgbGxrNrFlu4RcIfVJxTZ2yFi0K4gn+Ka9X1+8cXvb5+5IOBGUrOsPjR0BuefdDkG+CKbQ==",
"deprecated": "This package has been renamed to @vscode/emmet-helper, please update to the new name",
"dev": true,
"dependencies": {
"@emmetio/extract-abbreviation": "0.1.6",
"jsonc-parser": "^1.0.0",
"vscode-languageserver-types": "^3.6.0-next.1"
}
},
"node_modules/vscode-html-languageservice": {
"version": "2.1.12",
"resolved": "https://registry.npmjs.org/vscode-html-languageservice/-/vscode-html-languageservice-2.1.12.tgz",
"integrity": "sha512-mIb5VMXM5jI97HzCk2eadI1K//rCEZXte0wBqA7PGXsyJH4KTyJUaYk9MR+mbfpUl2vMi3HZw9GUOLGYLc6l5w==",
"dev": true,
"dependencies": {
"vscode-languageserver-types": "^3.13.0",
"vscode-nls": "^4.0.0",
"vscode-uri": "^1.0.6"
}
},
"node_modules/vscode-languageserver-types": {
"version": "3.16.0",
"resolved": "https://registry.npmjs.org/vscode-languageserver-types/-/vscode-languageserver-types-3.16.0.tgz",
"integrity": "sha512-k8luDIWJWyenLc5ToFQQMaSrqCHiLwyKPHKPQZ5zz21vM+vIVUSvsRpcbiECH4WR88K2XZqc4ScRcZ7nk/jbeA==",
"dev": true
},
"node_modules/vscode-nls": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/vscode-nls/-/vscode-nls-4.1.2.tgz",
"integrity": "sha512-7bOHxPsfyuCqmP+hZXscLhiHwe7CSuFE4hyhbs22xPIhQ4jv99FcR4eBzfYYVLP356HNFpdvz63FFb/xw6T4Iw==",
"dev": true
},
"node_modules/vscode-uri": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-1.0.8.tgz",
"integrity": "sha512-obtSWTlbJ+a+TFRYGaUumtVwb+InIUVI0Lu0VBUAPmj2cU5JutEXg3xUE0c2J5Tcy7h2DEKVJBFi+Y9ZSFzzPQ==",
"dev": true
}
},
"dependencies": {
"@emmetio/extract-abbreviation": {
"version": "0.1.6",
"resolved": "https://registry.npmjs.org/@emmetio/extract-abbreviation/-/extract-abbreviation-0.1.6.tgz",
"integrity": "sha512-Ce3xE2JvTSEbASFbRbA1gAIcMcZWdS2yUYRaQbeM0nbOzaZrUYfa3ePtcriYRZOZmr+CkKA+zbjhvTpIOAYVcw==",
"dev": true
},
"jsonc-parser": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-1.0.3.tgz",
"integrity": "sha512-hk/69oAeaIzchq/v3lS50PXuzn5O2ynldopMC+SWBql7J2WtdptfB9dy8Y7+Og5rPkTCpn83zTiO8FMcqlXJ/g==",
"dev": true
},
"typescript": {
"version": "4.5.5",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.5.5.tgz",
"integrity": "sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==",
"dev": true
},
"typescript-lit-html-plugin": {
"version": "0.9.0",
"resolved": "https://registry.npmjs.org/typescript-lit-html-plugin/-/typescript-lit-html-plugin-0.9.0.tgz",
"integrity": "sha512-Ux2I1sPpt2akNbRZiBAND9oA8XNE2BuVmDwsb7rZshJ9T8/Na2rICE5Tnuj9dPHdFUATdOGjVEagn1/v8T4gCQ==",
"dev": true,
"requires": {
"typescript-styled-plugin": "^0.13.0",
"typescript-template-language-service-decorator": "^2.2.0",
"vscode-html-languageservice": "^2.1.10",
"vscode-languageserver-types": "^3.13.0"
}
},
"typescript-styled-plugin": {
"version": "0.13.0",
"resolved": "https://registry.npmjs.org/typescript-styled-plugin/-/typescript-styled-plugin-0.13.0.tgz",
"integrity": "sha512-GGMzv/JAd4S8mvWgHZslvW2G1HHrdurrp93oSR4h85SM8e5at7+KCqHsZICiTaL+iN25YGkJqoaZe4XklA76rg==",
"dev": true,
"requires": {
"typescript-template-language-service-decorator": "^2.0.0",
"vscode-css-languageservice": "^3.0.12",
"vscode-emmet-helper": "1.2.11",
"vscode-languageserver-types": "^3.13.0"
}
},
"typescript-template-language-service-decorator": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/typescript-template-language-service-decorator/-/typescript-template-language-service-decorator-2.2.0.tgz",
"integrity": "sha512-xiolqt1i7e22rpqMaprPgSFVgU64u3b9n6EJlAaUYE61jumipKAdI1+O5khPlWslpTUj80YzjUKjJ2jxT0D74w==",
"dev": true
},
"vscode-css-languageservice": {
"version": "3.0.13",
"resolved": "https://registry.npmjs.org/vscode-css-languageservice/-/vscode-css-languageservice-3.0.13.tgz",
"integrity": "sha512-RWkO/c/A7iXhHEy3OuEqkCqavDjpD4NF2Ca8vjai+ZtEYNeHrm1ybTnBYLP4Ft1uXvvaaVtYA9HrDjD6+CUONg==",
"dev": true,
"requires": {
"vscode-languageserver-types": "^3.13.0",
"vscode-nls": "^4.0.0"
}
},
"vscode-emmet-helper": {
"version": "1.2.11",
"resolved": "https://registry.npmjs.org/vscode-emmet-helper/-/vscode-emmet-helper-1.2.11.tgz",
"integrity": "sha512-ms6/Z9TfNbjXS8r/KgbGxrNrFlu4RcIfVJxTZ2yFi0K4gn+Ka9X1+8cXvb5+5IOBGUrOsPjR0BuefdDkG+CKbQ==",
"dev": true,
"requires": {
"@emmetio/extract-abbreviation": "0.1.6",
"jsonc-parser": "^1.0.0",
"vscode-languageserver-types": "^3.6.0-next.1"
}
},
"vscode-html-languageservice": {
"version": "2.1.12",
"resolved": "https://registry.npmjs.org/vscode-html-languageservice/-/vscode-html-languageservice-2.1.12.tgz",
"integrity": "sha512-mIb5VMXM5jI97HzCk2eadI1K//rCEZXte0wBqA7PGXsyJH4KTyJUaYk9MR+mbfpUl2vMi3HZw9GUOLGYLc6l5w==",
"dev": true,
"requires": {
"vscode-languageserver-types": "^3.13.0",
"vscode-nls": "^4.0.0",
"vscode-uri": "^1.0.6"
}
},
"vscode-languageserver-types": {
"version": "3.16.0",
"resolved": "https://registry.npmjs.org/vscode-languageserver-types/-/vscode-languageserver-types-3.16.0.tgz",
"integrity": "sha512-k8luDIWJWyenLc5ToFQQMaSrqCHiLwyKPHKPQZ5zz21vM+vIVUSvsRpcbiECH4WR88K2XZqc4ScRcZ7nk/jbeA==",
"dev": true
},
"vscode-nls": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/vscode-nls/-/vscode-nls-4.1.2.tgz",
"integrity": "sha512-7bOHxPsfyuCqmP+hZXscLhiHwe7CSuFE4hyhbs22xPIhQ4jv99FcR4eBzfYYVLP356HNFpdvz63FFb/xw6T4Iw==",
"dev": true
},
"vscode-uri": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-1.0.8.tgz",
"integrity": "sha512-obtSWTlbJ+a+TFRYGaUumtVwb+InIUVI0Lu0VBUAPmj2cU5JutEXg3xUE0c2J5Tcy7h2DEKVJBFi+Y9ZSFzzPQ==",
"dev": true
}
}
}

15
todo/package.json Normal file
View File

@@ -0,0 +1,15 @@
{
"name": "todo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"typescript": "^4.5.5",
"typescript-lit-html-plugin": "^0.9.0"
}
}

9
todo/tsconfig.json Normal file
View File

@@ -0,0 +1,9 @@
{
"compilerOptions": {
"plugins": [
{
"name": "typescript-lit-html-plugin"
}
]
}
}