Vanilla DOM Toolkit
Creating Elements
document.createElement('')
- with properties:
Object.assign(document.createElement(''), {})
- defining custom elements in HTML:
customElements.define('my-tag', class extends HTMLElement {})
css clamp function usage at work { | |
font-size: clamp(12pt, 5vw, 15pt); | |
font-size: clamp(22pt, 2.5vw, 28pt); | |
font-size: clamp(20pt, 2.5vw, 28pt); | |
font-size: clamp(8pt, 6--ew, 10pt); | |
font-size: clamp(7pt, 6--ew, 9pt); | |
font-size: clamp(24px, 6vw, 36px); | |
font-size: clamp(var(--min), 4vw, var(--max)); | |
font-size: clamp(var(--min), 5vw, var(--max)); | |
font-size: clamp(var(--min), 3vw, var(--max)); |
class InactivityCountdown { | |
constructor( | |
callback = () => {}, | |
duration = 10 | |
) { | |
this.timer // to hold setTimeout ID | |
this.active = false // remember timer state | |
this.callback = callback // function to run when countdown completes | |
this.duration = duration // time in seconds to wait | |
} |
// Wait for React | |
function hasReactProperty(tag = document.documentElement) { | |
return Object.keys(tag).some(key => | |
key.includes('__react') | |
) | |
} | |
function isReactRoot(tag) { | |
return hasReactProperty(tag) |
<script type=module src="data:text/javascript, | |
import {demo} from 'data:text/javascript,export const demo = `Howdy`'; | |
console.log(demo); | |
"></script> |
Sass (and Less and Stylus and other custom languages that compile to CSS) have some design flaws that end up limiting what you can do with CSS. If you have a codebase that still depends on them it would be a good time to isolate and minimize the code you have that uses them and strategize how you'll migrate away from them. If your project doesn't have have them, or you haven't yet learned them - it might be a good idea, thinking ahead, to just skip that and get into a pure CSS workflow. Don't worry, you can still preprocess CSS, the secret is writing and handling valid CSS at every step in your workflow so all the tools work together | |
Some flaws Sass has that get in the way: | |
- It's not actually compatible with CSS syntax. It's not a super-set, it's an entirely different syntax and because it's incompatible with real CSS, there's an infinite variety of things you might have or want in CSS that can't even be present in any stylesheet Sass looks at | |
- Some of the things Sass adds to its custom syntax are things |
function html(strings, ...expressions) { | |
return document.createRange().createContextualFragment( | |
strings.reduce((output, string, index) => | |
output + expressions[index - 1] + string | |
) | |
) | |
} | |
document.body.append( | |
html` |
document.createElement('')
Object.assign(document.createElement(''), {})
customElements.define('my-tag', class extends HTMLElement {})
Ways to extend a language with custom stuff that works™
Ways to extend a language with custom stuff that doesn't work™
const extractCustomProperties = (string = '') => Object.fromEntries( | |
Array.from( | |
string.matchAll(/--(?<property>[^:]+?)\s*:\s*(?<value>.*?)\s*[;}]/gus), | |
([match, property, value]) => [property, value] | |
) | |
) | |
const css = ` | |
:root { | |
--custom: property; |
(async () => console.log( | |
(await import(`data:text/javascript,export default "Is this a safe way to eval?"`)).default | |
))() |