Skip to content

Instantly share code, notes, and snippets.

View tomhodgins's full-sized avatar
😍
Writing CSS

Tommy Hodgins tomhodgins

😍
Writing CSS
363 followers · 294 following
View GitHub Profile
@tomhodgins
tomhodgins / detecting-breakpoints.js
Created January 15, 2020 21:01
Paste this into your browser's JS console to view all @media query and @element query breakpoints used on the site
// List all media query breakpoints
import('https://unpkg.com/cssomtools').then(({process, query}) => {
const found = new Set
process(
query(),
rule => {
if (
rule.media
&& rule.media.mediaText
@tomhodgins
tomhodgins / scrape-email.js
Created January 7, 2020 01:53
document.documentElement.textContent // Get all of the text content on the web page.
.replace(/\b(\s*\[at\]\s*)\b/g, '@') // Replace any ' [at] ' with '@'.
.split(/\s+/) // Split text content by whitespace between words.
.filter(Boolean) // Eliminate any empty words.
.filter(string => { // Filter list of words:
const input = document.createElement('input') // by creating an <input> element,
input.type = 'email' // setting the input type to email,
input.value = string.trim() // setting its value to the current word,
return input.checkValidity() // and checking if it's a valid email address.
}) // Result: a list of all valid emails on the page.
@tomhodgins
tomhodgins / css-unescape.js
Last active January 3, 2020 00:50
import {parse} from 'https://unpkg.com/cssomtools'
function CSSUnescape(string = '') {
return JSON.parse(
parse(`
::-webkit-custom-pseudo {
content: "${string}";
}
`).cssRules[0].style.getPropertyValue('content')
)
@tomhodgins
tomhodgins / cdr-demo.html
Created January 2, 2020 05:37
Exploring one way CSS stylesheet authors can express that certain styles conditionally depend on other CSS stylesheets or JS files being present for them to work. Online demo: http://staticresource.com/cdr.html
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Dependency Resolver Demo</title>
<h1>CSS Dependency Resolver</h1>
<style>
@supports (--dependencies(url(https://csspl.us/cursory.js))) {
* {
@tomhodgins
tomhodgins / test-9.css
Last active December 31, 2019 20:57
An example of a valid CSS stylesheet using @--reset, --clamped-font-size and nesting CSS rules inside CSS custom properties, can be built with process-css-demo or online at https://tomhodgins.com/demo/preprocess/
@--reset test-9;
.up-modal {
z-index: 9999999;
}
test-9 {
display: flex;
flex-direction: column;
align-items: center;
@tomhodgins
tomhodgins / index.js
Last active December 30, 2019 15:28
(be sure to run npm install to install those tasty dependencies!)
const babel = require('@babel/core')
const fs = require('fs')
let file = process.argv.slice(2)[0]
let text = file
if (fs.existsSync(file)) {
text = fs.readFileSync(file).toString()
}
@tomhodgins
tomhodgins / rgba-to-hexa.js
Last active December 19, 2019 21:04
import * as parseCSS from 'https://tomhodgins.github.io/parse-css/index.js'
const css = parseCSS.parseAComponentValue(
Deno.args[1].trim()
)
if (
css.type === 'FUNCTION'
&& css.name.match(/rgba?/)
) {
@tomhodgins
tomhodgins / keybase.md
Created December 17, 2019 23:14

Keybase proof

I hereby claim:

  • I am tomhodgins on github.
  • I am innovati (https://keybase.io/innovati) on keybase.
  • I have a public key ASDaQPqJ4vThxJOg4WZ1Tg33xT_M_TNVDeQfOORLLPD51go

To claim this, I am signing this object:

@tomhodgins
tomhodgins / nesting-deno.js
Last active December 20, 2019 04:57
Nest CSS rules inside custom properties starting with a triple-dash, ---, which represents the containing selector in the new nested rule! https://tomhodgins.com/demo/nesting/
// deno nesting-deno.js 'a { color: red; ---\ b: { color: green }; }'
// deno nesting-deno.js --allow-read path/to/stylesheet.css
import * as parseCSS from 'https://tomhodgins.github.io/parse-css/index.js'
let file = Deno.args.slice(1)[0]
let css = file
try {
Deno.statSync(file)
css = new TextDecoder('utf-8').decode(
@tomhodgins
tomhodgins / observers-demo.css
Created November 27, 2019 16:20
/* Min-width */
.minwidth::observer {
observe-resize-width: 300 medium;
}
.minwidth:observe(resize-width medium) {
border-color: limegreen;
background: greenyellow;
}