Skip to content

Instantly share code, notes, and snippets.

View joehonton's full-sized avatar
💭
Writing clean code one line at a time

Joe Honton joehonton

💭
Writing clean code one line at a time
2 followers · 0 following
View GitHub Profile
@joehonton
joehonton / 2020-007-facets-defining-custom-element.html
Created February 5, 2020 05:42
defining a custom element
customElements.define('my-component', MyCustomComponent);
@joehonton
joehonton / 2020-007-facets-hello-world.html
Created February 5, 2020 05:44
<body>
<h1>Hello World!</h1>
<my-component></my-component>
</body>
@joehonton
joehonton / 2020-007-declared-on-elements.css
Created February 5, 2020 05:45
a {
color: blue;
text-decoration: none;
border-bottom: 1px dotted blue;
}
a:visited {
border-bottom: 1px dotted purple;
}
a:hover {
border-bottom: 1px solid blue;
@joehonton
joehonton / 2020-007-connected-callback.js
Created February 5, 2020 05:46
async connectedCallback() {
var htmlFragment = await this.fetchTemplate();
var styleElement = await this.fetchCSS();
this.attachShadow({mode: 'open'});
this.shadowRoot.appendChild(htmlFragment);
this.shadowRoot.appendChild(styleElement);
}
@joehonton
joehonton / 2020-007-module-pattern.html
Created February 5, 2020 05:47
<head>
<script src='/my-component.js' type='module'></script>
</head>
@joehonton
joehonton / 2020-007-package.json
Created February 5, 2020 05:48
{
"name": "my-component",
"version": "1.0.0",
"description": "a W3C standard web component",
"repository": {
"type": "git",
"url": "https://github.com/my-github-user-name/my-component.git"
},
"files": [
"my-component.html",
@joehonton
joehonton / 2020-007-host.css
Created February 5, 2020 05:48
:host {
--color: white;
--background-color: black;
--width: 70vw;
--height: 50vh;
}
#component {
color: var(--color);
background-color: var(--background-color);
@joehonton
joehonton / 2020-007-my-component.css
Created February 5, 2020 05:49
my-component {
--color: midnightblue;
--background-color: mintcreme;
--width: 700px;
--height: 500px;
}
@joehonton
joehonton / contact-tracing.js
Created April 14, 2020 14:55
import ContactTracing from './contact-tracing.class.js';
// Instantiate with the mobile device's 32-byte private key
const ct = new ContactTracing('a1b2c3d411jj99kk55gg66hhz0y9x8w7');
// Test data for Medium article "Contact Tracing with Android/iPhone"
const encounters = [
{person: 'Uber driver', ts: 'May 15, 2020 16:21:00'},
{person: 'Nearby shopper', ts: 'May 15, 2020 16:51:00'},
{person: 'Stranger', ts: 'May 16, 2020 17:06:00'},
@joehonton
joehonton / gestures.js
Created February 21, 2021 03:41
class Gestures {
constructor(canvas) {
this.canvas = canvas;
this.fingerPointers = [];
}
// finger pointers appearing and disappearing
addFinger(event) { ... }
updateFinger(event) { ... }
removeFinger(event) { ... }