| :root {font-size: 16px; line-height: 1.5; font-family: sans-serif; padding: 20px} | |
| body {} | |
| h1 {font-size:2rem; margin-bottom:1rem; line-height: 1} | |
| h2 {font-size:1.5rem; margin-bottom: .5rem;} | |
| p {margin-bottom: 1rem;} |
| var now, dt, | |
| rate = 0.5, | |
| last = performance.now(); | |
| function frame() { | |
| now = performance.now(); | |
| dt = (now - last) / 1000; // duration in seconds | |
| if(dt >= rate){ | |
| console.log("bing") | |
| last = now; |
| File 1 conents |
| var angle = null, | |
| step = 20, | |
| rate = 90; | |
| draw = () => { | |
| if (!angle) { | |
| angle = 0; | |
| } | |
| console.clear(); |
| // From browser source/snippets | |
| // TODO: use selection API | |
| // IDEA: selecting -> uppercase => voices -> yelling one word at a time (AWS?) | |
| //noting line breaks in chrome devtools between selection and post slice | |
| //FIXME: better attach | |
| document.styleSheets[document.styleSheets.length - 1].addRule("::selection", "background: red !important; color: pink !important; text-transform: uppercase !important"); | |
| //get whole parent |
| console.clear() | |
| let used = [], | |
| replaced = [] | |
| /* | |
| TODO: only needed for early testing. can del | |
| len = 20, | |
| createArr = function(N) { | |
| return Array.apply(null, { | |
| length: N |
| const r = document.querySelector('input[type="range"]'), | |
| initVal = 20, | |
| story = []; | |
| let currVal = null; | |
| r.value = initVal; | |
| r.addEventListener('change', (e) => { | |
| let finalVal = e.target.value, |
| nextNumOfType = (n, d) => { | |
| let opts = {true: {'even': 2,'odd': 1}, false:{'even': 1,'odd': 2}} | |
| return n + opts[n%2 == 0][d]; | |
| } | |
| nextNumOfType(3,'odd') // 5 | |
| nextNumOfType(3,'even') // 4 | |
| nextNumOfType(4,'odd') // 5 | |
| nextNumOfType(4,'even') // 6 |
All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.
Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.
elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
| <script> | |
| import Greet from "./Greet.svelte"; | |
| let config4Pants = { | |
| name: "Pants", | |
| greeting: "What's up!" | |
| }, | |
| config4Son = { | |
| name: "Son", | |
| greeting: "Sup?" |