Skip to content

Instantly share code, notes, and snippets.

View michaelcpuckett's full-sized avatar

Michael Puckett michaelcpuckett

63 followers · 100 following
View GitHub Profile
@michaelcpuckett
michaelcpuckett / rps.html
Created April 16, 2024 20:28
<button id="rock">Rock</button>
<button id="paper">Paper</button>
<button id="scissors">Scissors</button>
<output> </output>
<script>
const buttonElements = Array.from(window.document.querySelectorAll("button"));
const outputElement = window.document.querySelector("output");
function rps(playerChoice) {
const winConditions = {
@michaelcpuckett
michaelcpuckett / api-example.html
Created March 14, 2024 22:55
<!DOCTYPE html>
<figure>
<figcaption>U.S. Population over Time</figcaption>
<table>
<thead>
<tr>
<th scope="col">Year</th>
<th scope="col">Population</th>
</tr>
</thead>
@michaelcpuckett
michaelcpuckett / all-autocomplete-fields.html
Last active December 1, 2020 15:47
There is not always direct access to modify some of these autocomplete fields in browser settings. Complete and submit the form here and it should save your autocomplete preferences.
<body>
<style>
table,
input,
textarea {
width: 100%;
}
</style>
<form>
@michaelcpuckett
michaelcpuckett / data-graph.json
Last active February 15, 2020 11:28
shacl-transformation-example
{
"@context": {
"@vocab": "http://news.example/vocab/",
"news": "http://news.example/vocab/"
},
"@type": "news:Response",
"articles": [
{
"headline": "Example headline 1",
"author": "Alice Jones"
@michaelcpuckett
michaelcpuckett / shacl-query-example.json
Last active February 12, 2020 00:18
{
"@context": {
"schema": "http://schema.org/",
"sh": "http://www.w3.org/ns/shacl#",
"as": "https://www.w3.org/TR/activitystreams-core/"
},
"@type": "schema:ReadAction",
"schema:object": {
"@id": "schema:Article"
},
@michaelcpuckett
michaelcpuckett / polyfill.html
Created January 14, 2020 13:24
Polyfill `overscroll-chaining` in iOS Safari
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>X App</title>
<meta name="viewport" content="width=device-width, height=device-height, viewport-fit=cover, initial-scale=1" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
<link rel="shortcut icon" href="icons/32x32.png" type="image/x-icon" />
@michaelcpuckett
michaelcpuckett / web-component-tricks-2.htm
Last active July 7, 2019 14:55
<!--
<h2>WC Wish List</h2>
<ul>
<li><input type=checkbox> dynamic attributes</li>
<li><input type=checkbox checked> if/else conditionals</li>
</ul>
-->
<template id="tpl-href-link">
@michaelcpuckett
michaelcpuckett / wip-proxy-html.html
Created June 14, 2019 07:53
<script>
class XAdInner extends HTMLElement {
constructor() {
super()
this
.attachShadow({ mode: 'open' })
.appendChild(window.document.getElementById('x-ad-inner-template').content.cloneNode(true))
}
connectedCallback() {
window.requestAnimationFrame(() => {
@michaelcpuckett
michaelcpuckett / web-component-tricks.htm
Created June 13, 2019 09:49
<script>
class XTimestamp extends HTMLElement {
constructor() {
super()
this.attachShadow({ mode: 'open' }).appendChild(window.document.createElement('slot'))
}
connectedCallback() {
window.requestAnimationFrame(() => {
this.$dateTime = this.querySelector('slot').assignedNodes()[0].innerText.trim()
const templateEl = window.document.createElement('template')
@michaelcpuckett
michaelcpuckett / App.js
Last active January 29, 2017 13:03
Todos React
import React, { Component } from 'react';
import { createStore, combineReducers } from 'redux';
import { Provider, connect } from 'react-redux';
import './App.css'
function TodosReducer (state, action) {
switch (action.type) {
case 'ADD_TODO':
var todos = state.todos ? state.todos.slice() : []
todos.push(action.todo)