Tommy Hodgins tomhodgins

😍

Writing CSS

Frontend Developer & Designer

tomhodgins / speak text on page

Created November 5, 2024 19:50

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 / 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 / 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 / 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 / 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 / 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 / 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 / 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 / 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`