Instantly share code, notes, and snippets.

View css.md

CSS is a declarative stylesheet language, this means you describe the result you want to see rather than the steps the browser would need to take to arrive at that result. You can write CSS selectors that target tags matching a certain description in a certain state, and then you declare the values that different styling properties should have at that time.

There are a few aspects of imperative programming living within CSS too. Animations that define sequences of keyframes, media queries, and feature queries are all examples of imperative programming features that are embedded inside the declarative language of CSS.

Custom properties (commonly called “CSS variables”) expand CSS to include the reactive programming paradigm as well. Any time a CSS variable is changed, the new values are updated live in your styles everywhere they have been used. So it's possible for CSS to declare a value that represents a stream of data.

Have you ever felt like CSS was too low-level to provide the abstractions for you to d

View css-unescape.js
new RegExp(
[
'\\\\', // a backslash
'(?!', // not followed by:
'[0-9a-fA-F]{1,6}', // - 1-6 hex characters,
'|\\n', // - or a newline
'|$', // - or the EOF
')'
].join(''),
'g'
View on-screen-bookmarklet.js
javascript:const wrapper = document.createElement('aside'); const style = document.createElement('style'); const toggle = document.createElement('button'); const input = document.createElement('textarea'); const button = document.createElement('button'); const output = document.createElement('pre'); wrapper.id = 'jswrapper'; wrapper.className = 'open'; toggle.id = 'jstoggle'; button.textContent = 'Evaluate'; style.textContent = ` #jswrapper, #jswrapper * { box-sizing: border-box; } #jswrapper { position: fixed; bottom: 0; right: 0; width: 100%; transform: translateY(0); transition: transform .2s; } #jswrapper.open { transform: translateY(100%); } #jswrapper #jstoggle { position: absolute; right: 0; top: -2em; height: 2em; width: 2em; } #jstoggle::before { content: '⬇'; } .open #jstoggle::before { content: '⬆'; } #jswrapper textarea, #jswrapper button, #jswrapper pre { display: block; width: 100%; margin: 0; padding: .5em; font-size: 14pt; } #jswrapper pre, #jswrapper textarea { background: white; height: 5em;
View parseCSS.js
function parseCSS(string) {
const iframe = document.createElement('iframe')
document.head.appendChild(iframe)
const style = iframe.contentDocument.createElement('style')
style.textContent = string
iframe.contentDocument.head.appendChild(style)
const stylesheet = iframe.contentDocument.styleSheets[0]
iframe.remove()
return stylesheet
}
View merry-cssmas-bundle.html
<script type=module>
import deqaf from 'https://unpkg.com/deqaf/index.js'
// [--parent]
// target an element's parent element
import parent from 'https://unpkg.com/jsincss-parent-selector/index.vanilla.js'
// :has(selector)
// [--has='"selector"']
// like CSS's :has() selector
View index.js
const scraper = require('./scrape.js')
const models = require('./models.js')
const processModels = models => Promise.all(
models.map(model => processLinks(model, model.urls))
).then(
result => console.log(JSON.stringify(result))
)
const processLinks = (model, urls) => Promise.all(
View todoml-after.js
function todoml(string) {
return string
.split('\n')
.reduce((html, line) => {
// prepare the line
line = line.trim()
// bold
.replace(
/(\*\*)([^\*]+)(\*\*)/g,
View debugging.js
// add map, filter, reduce to NodeList
[
'map',
'filter',
'reduce',
'includes',
'every',
'some'
].forEach(method =>
NodeList.prototype[method] = Array.prototype[method]
View adding-event-listeners.js
// Option A
window.addEventListener('touchstart', strike)
window.addEventListener('mousedown', strike)
window.addEventListener('touchmove', slide)
window.addEventListener('mousemove', slide)
window.addEventListener('touchend', release)
window.addEventListener('mouseup', release)
View custom-tag-names.html
<f-_-f></f-_-f>
<h-_-h></h-_-h>
<i-_-i></i-_-i>
<j-_-j></j-_-j>
<l-_-l></l-_-l>
<m-_-m></m-_-m>
<n-_-n></n-_-n>
<o-_-o></o-_-o>
<s-_-s></s-_-s>
<t-_-t></t-_-t>