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 / log-rules-for-option-tags.js
Created Aug 22, 2019
Paste this rule in your browser's JS console on a loaded web page to log all rules targeting <option> tags. Change the text 'option' in the regex on line 7 to something else to filter for a different tag
View log-rules-for-option-tags.js
import ('https://unpkg.com/cssomtools') .then(
({stringify, filter, all}) =>
console.log(
stringify(
filter(
all(),
rule => rule.selectorText && /\boption\b/.test(rule.selectorText)
)
)
)
View conditions.js
// If statements
var headline
if (variation === 1) {
headline = 'Variation B'
}
if (variation === 2) {
headline = 'Variation C'
}
View parse-css.es6.js
// Parse CSS
// Originally written by Tab Atkins and friends
// homepage: https://github.com/tabatkins/parse-css
// license: CC0
// Converted to ES6 and ES Module by Tommy Hodgins (@innovati)
// Helpers
const char = (str = '') =>
str.codePointAt(0)
@tomhodgins
tomhodgins / preset.js
Last active Sep 3, 2019
Generate a simple reset/preset for an element and it's children. Run with node, supply your selector as the command line argument.
View preset.js
let selector
// Deno CLI support
if (typeof Deno !== 'undefined') {
[selector] = Deno.args.slice(1)
}
// Node CLI support
if (typeof process !== 'undefined') {
[selector] = process.argv.slice(2)
View numbers.md

There are three states of existence: Void, Something, and Infinity.


Everything that can be measured or counted can be described as a state between Void and Infinity.


Void can be represented with the character 0, or with the words zero, nil, null, or void. This is the absence of value.

View out-of-body-experience.md

I need to add a <style> tag to a page using JavaScript, and we find that if we document.head.appendChild(tag), sometimes these sites will have dynamically-added <style> or <link> tags appearing either later in the <head>, or in the <body>. I'm wondering about changing the location of where we add our <style> to be document.documentElement.appendChild(tag) instead, which puts it outside of the <body> tag as the last child inside the <html> tag.

I'm aware this isn't a valid spot for this tag according to HTML's content model (so if that will pose some kind of problem you can foresee I'd love to hear it.) I've checked in browsers, and all browsers IE9+ seem to support CSS in this location. It seems like it should come after all CSS that's present in HTML (since parsing HTML would never result in tags ending up there.)

Have you ever seen anybody adding styles between </body> and </html>, or can you think of any reason where this might break something or cause a conflict?

@tomhodgins
tomhodgins / all-chord-progressions.md
Last active Jul 29, 2019
Generating combinations of Major/minor chord progressions with JavaScript
View all-chord-progressions.md

minor → minor

C D♯ G → C♯ E G♯

C D♯ G → D F A

C D♯ G → D♯ F♯ A♯

C D♯ G → E G B

View htmlforever.lisp
#| HTML tag builder |#
(defun html (&optional (tagName "span") (attributes ()) (content ()))
(concatenate `string
"<"
tagName
(format nil "~{ ~a~^~}" (loop for (name value) in attributes
collect (concatenate `string name "=\"" value "\"")))
">"
(if
(find tagName `(
@tomhodgins
tomhodgins / clamped-number-bikeshed.js
Created Jul 18, 2019
What are the 200 simplest combinations of the following pieces of syntax we could use to describe a clamped number, a number that has a lower bound, a scalable middle value, and an upper bound: ` `, `0`, `1`, `2`, `min`, `mid`, `max`, `(`, `)`, `[`, `]`, `{`, `}`, `,`, `:`, `"`, `<`, `=`, `>`
View clamped-number-bikeshed.js
0 1 2
(0 1 2) // S-expression
[0 1 2]
{0 1 2}
0, 1, 2
(0, 1, 2)
[0, 1, 2] // JSON array
{0, 1, 2}
@tomhodgins
tomhodgins / clamped-number-formatting-bikeshed.md
Last active Jul 17, 2019
Clamped Number Formatting Bikeshed
View clamped-number-formatting-bikeshed.md

Let's say I have a concept of a set of three numbers:

  • a minimum number the computed value can't drop below
  • a middle number that's a scaling factor we'll use to compute a value
  • a maximum number the computed value can't exceed

There are a few ways a set of numbers like this can be expressed:

  • as a space-separated list:
You can’t perform that action at this time.