Skip to content

Instantly share code, notes, and snippets.

View tomhodgins's full-sized avatar
😍
Writing CSS

Tommy Hodgins tomhodgins

😍
Writing CSS
359 followers · 294 following
View GitHub Profile
@tomhodgins
tomhodgins / speak text on page
Created November 5, 2024 19:50
function speak(
text = '',
options = {
volume: 1, // 0-1
rate: 1.25, // 0.1-10
pitch: 1, // 0-2
lang: 'en-US',
// voice: 'Catherine'
voice: 'Karen'
}
@tomhodgins
tomhodgins / styling-shadow-root-content.html
Created September 3, 2024 17:54
<!doctype html>
<title>CSS Shadow Root styling</title>
<script type=module>
class CustomElement extends HTMLElement {
connectedCallback() {
const shadow = this.attachShadow({mode: 'closed'})
shadow.innerHTML = `
<style>
@tomhodgins
tomhodgins / abusing-processing-instructions-for-self-closing-elements-in-html.js
Created April 3, 2024 23:54
function processSelfClosingTags(string = '') {
const dom = document.implementation.createHTMLDocument().createRange().createContextualFragment(string)
function consumeNode(node = document.createElement('span')) {
if (
node.nodeType === 8
&& node.textContent.match(/^\?.+\?$/)
) {
node.replaceWith(
document.createElement(
@tomhodgins
tomhodgins / browser-console-one-liners.js
Last active May 6, 2024 05:08
/* JSON XPath search */ (await import('https://unpkg.com/espath')).default(window.dataLayer, '//string')
/* cookie to object */ Object.fromEntries(document.cookie.split('; ').map(entry => entry.split('=')))
/* cookie to object */ (await import('https://v2.crocdn.com/_plugins/cookie-to-object.js')).default()
/* css elements search */ document.querySelectorAll ('*')
/* xpath element search */ (await import('https://unpkg.com/queryxpath/queryxpath.es.js')).queryXPathAll ('//*')
@tomhodgins
tomhodgins / css-clamp-usage.css
Created June 24, 2021 04:38
css clamp function usage at work {
font-size: clamp(12pt, 5vw, 15pt);
font-size: clamp(22pt, 2.5vw, 28pt);
font-size: clamp(20pt, 2.5vw, 28pt);
font-size: clamp(8pt, 6--ew, 10pt);
font-size: clamp(7pt, 6--ew, 9pt);
font-size: clamp(24px, 6vw, 36px);
font-size: clamp(var(--min), 4vw, var(--max));
font-size: clamp(var(--min), 5vw, var(--max));
font-size: clamp(var(--min), 3vw, var(--max));
@tomhodgins
tomhodgins / inactivity-timer.js
Created June 23, 2021 15:11
class InactivityCountdown {
constructor(
callback = () => {},
duration = 10
) {
this.timer // to hold setTimeout ID
this.active = false // remember timer state
this.callback = callback // function to run when countdown completes
this.duration = duration // time in seconds to wait
}
@tomhodgins
tomhodgins / wait-for-react.js
Created March 25, 2021 20:10
// Wait for React
function hasReactProperty(tag = document.documentElement) {
return Object.keys(tag).some(key =>
key.includes('__react')
)
}
function isReactRoot(tag) {
return hasReactProperty(tag)
@tomhodgins
tomhodgins / two-modules-zero-files.html
Created February 22, 2021 18:34
<script type=module src="data:text/javascript,
import {demo} from 'data:text/javascript,export const demo = `Howdy`';
console.log(demo);
"></script>
@tomhodgins
tomhodgins / gist:b4f922049cace16e7401aebac0b45848
Created December 11, 2020 22:36
Sass (and Less and Stylus and other custom languages that compile to CSS) have some design flaws that end up limiting what you can do with CSS. If you have a codebase that still depends on them it would be a good time to isolate and minimize the code you have that uses them and strategize how you'll migrate away from them. If your project doesn't have have them, or you haven't yet learned them - it might be a good idea, thinking ahead, to just skip that and get into a pure CSS workflow. Don't worry, you can still preprocess CSS, the secret is writing and handling valid CSS at every step in your workflow so all the tools work together
Some flaws Sass has that get in the way:
- It's not actually compatible with CSS syntax. It's not a super-set, it's an entirely different syntax and because it's incompatible with real CSS, there's an infinite variety of things you might have or want in CSS that can't even be present in any stylesheet Sass looks at
- Some of the things Sass adds to its custom syntax are things
@tomhodgins
tomhodgins / id-overview.js
Created November 12, 2020 21:05
function html(strings, ...expressions) {
return document.createRange().createContextualFragment(
strings.reduce((output, string, index) =>
output + expressions[index - 1] + string
)
)
}
document.body.append(
html`