Benjamin De Cock bendc
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const element = document.querySelector("span"); | |
| const finalPosition = 600; | |
| const time = { | |
| start: performance.now(), | |
| total: 2000 | |
| }; | |
| const tick = now => { | |
| time.elapsed = now - time.start; |
bendc
/ raf-performance-time-tracking.js
Created
August 24, 2017 15:31
rAF tutorial: performance time tracking
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const time = { | |
| start: performance.now(), | |
| total: 2000 | |
| }; | |
| const tick = now => { | |
| time.elapsed = now - time.start; | |
| if (time.elapsed < time.total) requestAnimationFrame(tick); | |
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const time = { | |
| start: null, | |
| total: 2000 | |
| }; | |
| const tick = now => { | |
| if (!time.start) time.start = now; | |
| time.elapsed = now - time.start; | |
| if (time.elapsed < time.total) requestAnimationFrame(tick); | |
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const tick = now => { | |
| requestAnimationFrame(tick); | |
| }; | |
| requestAnimationFrame(tick); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // k = progress between 0 and 1 | |
| const easing = { | |
| quadratic: { | |
| in(k) { | |
| return k * k; | |
| }, | |
| out(k) { | |
| return k * (2 - k); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const randomInterval = (() => { | |
| const random = (min, max) => Math.random() * (max - min) + min; | |
| return (callback, min, max) => { | |
| const time = { | |
| start: performance.now(), | |
| total: random(min, max) | |
| }; | |
| const tick = now => { | |
| if (time.total <= now - time.start) { | |
| time.start = now; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const store = (() => { | |
| let state; | |
| return todos => { | |
| if (todos) { | |
| state = todos; | |
| render("todo-list"); | |
| } | |
| return state; | |
| }; | |
| })(); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const state = ["Buy milk", "Call Sarah", "Pay bills"]; | |
| customElements.define("todo-item", class extends HTMLElement { | |
| constructor() { | |
| super(); | |
| const root = this.attachShadow({mode: "open"}); | |
| root.innerHTML = ` | |
| <label> | |
| <input type=checkbox> | |
| <slot></slot> |
bendc
/ hello-message-attribute.js
Created
January 5, 2017 13:11
Web Components: hello-message-attribute
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| customElements.define("hello-message", class extends HTMLElement { | |
| constructor() { | |
| super(); | |
| const root = this.attachShadow({mode: "open"}); | |
| root.innerHTML = "Hello <slot></slot>"; | |
| } | |
| static get observedAttributes() { | |
| return ["name"]; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| customElements.define("hello-message", class extends HTMLElement { | |
| constructor() { | |
| super(); | |
| const root = this.attachShadow({mode: "open"}); | |
| root.innerHTML = "Hello <slot></slot>"; | |
| } | |
| }); |