Tommy Hodgins tomhodgins

## count-down-element.html
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Count Down Element</title>

<script type=module>
  import html from 'https://v2.crocdn.com/_plugins/html.js'

  class CountDown extends HTMLElement {
    constructor() {

## custom-aspect-ratio-property-example.html
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Aspect Ratio Custom Property</title>

<script type=module>
  // Run on load, resize, and 'reprocess' events
  [
    'load',
    'resize',

## time-errors.js
let start = performance.now()

for (
  let count = 250 * 1000;
  count --> 0;
) {
  console.error('oops')
}

let end = performance.now()

## deno-dom-wasm.test.js
import {Document, DOMParser} from './deno-dom-wasm.ts'
import {assert} from 'https://deno.land/std@0.67.0/testing/asserts.ts'

const parseIntoHTMLDocument = (string = '') => new DOMParser().parseFromString(
  String(string),
  'text/html'
)

const html = `
  <h1>Dummy HTML Content</h1>

## parsing-html-syntax-in-browser-deno-and-node.mjs
// Deno Support
if ('Deno' in globalThis) {
  globalThis.DOMParser = (await import('https://deno.land/x/deno_dom/deno-dom-wasm.ts')).DOMParser
}

// Node Support
if ('process' in globalThis) {
  const jsdom = (await import('jsdom')).default.JSDOM

  globalThis.DOMParser = class {

## to-string-to-json.js
({
  value: 'hello world',
  toString() { return `stringified that's: ${this.value}` }
}).toString()

// "stringified that's: hello world"

JSON.stringify({
  value: 'hello world',
  toJSON() { return [{JSONified_thats: this.value}] }

## deep-combinator.html
<!DOCTYPE html>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Deep Combinator</title>

<style>
  [--deep] h1,
  [--deep] span {
    color: red;
  }

## markup-through-the-decades.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                tomhodgins
                / markup-through-the-decades.md
            
            
              Created
              August 20, 2020 22:09
            
          
    here's an example of some text content, and a variety of markups for it:
This is a headline
This is a paragraph

troff


## fluidly-responsive-typography.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              1 star
            
          
                tomhodgins
                / fluidly-responsive-typography.md
            
            
              Created
              August 16, 2020 14:48
            
          
    There are scalable units, like vw and vh etc that are 1% of the browser's viewport, vw is like innerWidth / 100. So something like:
h1 {
  font-size: 10vw;
}
This means 10vw is going to be 50px when the browser is 500px wide, and 100px when the browser is 1000px wide for example. Using scalable units by themselves can sometimes lead to things being too-big or too-small, so some people use them with @media queries to 'switch them off' to some other unit at a certain size.

  
## example.css
.home-popup:--has(test-24) {
  padding: 1em 2em .75em;
}

.home-popup test-24 ~ * {
  display: none;
}

@--reset test-24;
	<!DOCTYPE html>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Count Down Element</title>

	<script type=module>
	import html from 'https://v2.crocdn.com/_plugins/html.js'

	class CountDown extends HTMLElement {
	constructor() {
	let start = performance.now()

	for (
	let count = 250 * 1000;
	count --> 0;
	) {
	console.error('oops')
	}

	let end = performance.now()
	import {Document, DOMParser} from './deno-dom-wasm.ts'
	import {assert} from 'https://deno.land/std@0.67.0/testing/asserts.ts'

	const parseIntoHTMLDocument = (string = '') => new DOMParser().parseFromString(
	String(string),
	'text/html'
	)

	const html = `
	<h1>Dummy HTML Content</h1>
	// Deno Support
	if ('Deno' in globalThis) {
	globalThis.DOMParser = (await import('https://deno.land/x/deno_dom/deno-dom-wasm.ts')).DOMParser
	}

	// Node Support
	if ('process' in globalThis) {
	const jsdom = (await import('jsdom')).default.JSDOM

	globalThis.DOMParser = class {
	({
	value: 'hello world',
	toString() { return `stringified that's: ${this.value}` }
	}).toString()

	// "stringified that's: hello world"

	JSON.stringify({
	value: 'hello world',
	toJSON() { return [{JSONified_thats: this.value}] }
	<!DOCTYPE html>
	<meta charset=utf-8>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Deep Combinator</title>

	<style>
	[--deep] h1,
	[--deep] span {
	color: red;
	}
	.home-popup:--has(test-24) {
	padding: 1em 2em .75em;
	}

	.home-popup test-24 ~ * {
	display: none;
	}

	@--reset test-24;