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 / list-colors-used-on-site.js
Created February 12, 2020 20:54
Run these from your browser's JS console to get a report of everything JS can read from CSSOM
import(`https://unpkg.com/cssomtools`).then(({process, property}) => {
const found = new Set
process(
[
property('color', true),
property('background-color', true)
],
rule => {
if (rule.style.color) {
@tomhodgins
tomhodgins / auto-expand.html
Created February 12, 2020 03:04
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<body>
<input>
<script type=module>
@tomhodgins
tomhodgins / --auto-expand.html
Created February 12, 2020 03:01
<input>
<textarea></textarea>
<style>
input {
--auto-expand: width;
}
textarea {
--auto-expand: height;
}
@tomhodgins
tomhodgins / chromeview.app
Created February 5, 2020 17:45
Use this with Apple's Script Editor to refresh the Chrome web browser and execute whatever is on your clipboard as JS
var app = Application('System Events')
app.includeStandardAdditions = true
var browser = Application('Chrome').windows[0].activeTab()
// Chrome
browser.reload()
function loadEnd(callback) {
return browser.loading()
? loadEnd(callback)
@tomhodgins
tomhodgins / partial-tag-name-matching-selectors.html
Created January 28, 2020 00:13
What if CSS had something like [attribute="selectors"] for matching partial tag names
<custom-element></custom-element>
<custom-element-1></custom-element-1>
<custom-2-element></custom-2-element>
<custom-element-name></custom-element-name>
<custom-elementname></custom-elementname>
<style>
/* equals tag name */
custom-element {}
@tomhodgins
tomhodgins / wait-for-tag-with-mo.js
Last active January 24, 2020 22:32
const MO = new MutationObserver(processNodes)
function processNodes(entries) {
entries.forEach(({addedNodes}) =>
Array.from(addedNodes)
.filter(node => node.matches && node.matches('div.zp-Zotpress'))
.forEach(node => node.textContent = node.textContent.replace('Available at:', ''))
)
}
@tomhodgins
tomhodgins / wait-for-tags-matching-logic.js
Created January 24, 2020 21:51
const MO = new MutationObserver(processNodes)
function processNodes(entries) {
entries.forEach(({addedNodes}) =>
addedNodes.forEach(node => {
if (node.matches('a[href^="https://catch.me"]')) {
console.log('caught one!', node)
}
})
)
@tomhodgins
tomhodgins / sniff-name-from-ua.js
Created January 22, 2020 17:17
{
let browser
let ua = navigator.userAgent
if (ua.includes('Edg')) {
browser = 'Edge'
} else if (ua.includes('Firefox')) {
browser = 'Firefox'
} else if (ua.includes('Safari')) {
browser = ua.includes('Chrome') ? 'Chrome' : 'Safari'
@tomhodgins
tomhodgins / README.md
Last active January 22, 2020 05:15

Easy Element Query Workflow for 2020

  1. Your HTML in index.html
  2. Your CSS in input.css
  3. Run CSS through process-css-demo via build.sh (or node)
  4. Serve JS-supported styles
  5. ???
  6. Profit!

Notes:

@tomhodgins
tomhodgins / csson.md
Last active January 21, 2020 20:15

CSSON

CSS Object Notation

CSSON is a superset of JSON that is parsed according to CSS syntax.

Any JSON can be parsed as CSSON, though not every CSS Style Sheet can be parsed as CSSON.

Pros: