Skip to content

Instantly share code, notes, and snippets.

View jdanyow's full-sized avatar
💭
Confirming my whereabouts

Jeremy Danyow jdanyow

💭
Confirming my whereabouts
View GitHub Profile
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>GistRun</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello world!</h1>
<form id="myForm">
@jdanyow
jdanyow / index.html
Created September 27, 2021 16:50
Printing example
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Standard page title</title>
<style>
@media print {
.hidden-print {
display: none;
}
left center right none
😊 😊 😊 😊
aaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>GistRun</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@primer/css@17.2.1/dist/primer.css" integrity="sha256-0PtaET8NN28OuNfpLRetkG6xdDLuTDYdIb8nZzpPLlQ=" crossorigin="anonymous">
<!-- UNCOMMENT FIX: -->
<!--
<style>
@jdanyow
jdanyow / index.html
Created May 29, 2021 17:28
planetscale logo dab
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>GistRun</title>
<style>
:root {
--duration: 1500ms;
--timing: cubic-bezier(.5,0,0,1)
}
import escape_html from "escape-html";
import { Readable } from "stream";
// following imports are for testing
import { createReadStream } from "fs";
import * as assert from "assert";
export class TemplateResult {
constructor(
public readonly strings: TemplateStringsArray,
public readonly values: unknown[]
@jdanyow
jdanyow / index.html
Last active May 20, 2021 03:27
Custom element to ensure clamped elements are not focusable
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>GistRun</title>
<style>
* {
box-sizing: border-box;
}
/**
* Convert an iterable to an object.
*/
export function toObject<
TKey extends string | number | symbol,
TValue
>(iterable: {
[Symbol.iterator](): IterableIterator<[TKey, TValue]>;
}): Record<TKey, TValue> {
const obj = Object.create(null) as Record<TKey, TValue>;

Code to tack on custom validation UX to HTML annotated with HTML5 validation attributes as well as custom attributes for validations specific to our domain (eg max tag count).

Error alert is generated, each error links to the form input that is invalid.

invalid

This code is coupled to the design system's structure for form html and custom validation. In this case it's primer: https://primer.style/css/components/forms#error

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>GistRun</title>
<script>
setTimeout(()=> alert(document.documentElement.outerHTML), 1000)
</script>
</head>
<body>