Skip to content

Instantly share code, notes, and snippets.

😍
Writing CSS

Tommy Hodgins tomhodgins

😍
Writing CSS
Block or report user

Report or block tomhodgins

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@tomhodgins
tomhodgins / list-colors-used-on-site.js
Created Feb 12, 2020
Run these from your browser's JS console to get a report of everything JS can read from CSSOM
View list-colors-used-on-site.js
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) {
View auto-expand.html
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<body>
<input>
<script type=module>
View --auto-expand.html
<input>
<textarea></textarea>
<style>
input {
--auto-expand: width;
}
textarea {
--auto-expand: height;
}
@tomhodgins
tomhodgins / chromeview.app
Created Feb 5, 2020
Use this with Apple's Script Editor to refresh the Chrome web browser and execute whatever is on your clipboard as JS
View chromeview.app
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 Jan 28, 2020
What if CSS had something like [attribute="selectors"] for matching partial tag names
View partial-tag-name-matching-selectors.html
<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 {}
View wait-for-tag-with-mo.js
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:', ''))
)
}
View wait-for-tags-matching-logic.js
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)
}
})
)
View sniff-name-from-ua.js
{
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'
View README.md

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:

View csson.md

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:

You can’t perform that action at this time.