Michael Puckett michaelcpuckett
michaelcpuckett
/ wip-proxy-html.html
Created
June 14, 2019 07:53
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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
/ web-component-tricks.htm
Created
June 13, 2019 09:49
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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') |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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) |
michaelcpuckett
/ gist:5ed5b028f4d07a097368
Created
January 10, 2016 02:44
check-storage-for-logged-in-from-another-tab.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // stolen from minified github source | |
| function() { | |
| var e, t, n; | |
| if (n = null != (t = document.querySelector("meta[name=user-login]")) ? t.content : void 0, | |
| null != n) { | |
| e = String(!!n.length); | |
| try { | |
| localStorage.setItem("logged-in", e) | |
| } catch (r) { | |
| return |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Demo |
michaelcpuckett
/ vertical-align-flexbox.htm
Last active
August 29, 2015 14:19
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <style> | |
| * { | |
| box-sizing: border-box; | |
| border: 0 solid black; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| view, |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Leonardo's Image</title> | |
| </head> | |
| <body> | |
| <div id="MediaView"></div> | |
| <template id="MediaViewTpl" noscript> | |
| <h1><content select="[data-display-name]"></content></h1> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html5> | |
| <html> | |
| <head> | |
| <style> | |
| * { box-sizing: border-box; } | |
| img { max-width: 100%; } | |
| canvas { visibility: hidden; position: absolute; pointer-events: none; z-index: -1; } | |
| </style> | |
| </head> | |
| <body> |
michaelcpuckett
/ tpl.htm
Created
November 27, 2014 21:00
Native Client-side Templating with Databinding
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <title>Native Client-side Templating with Databinding</title> | |
| <style>[data-key]{font-weight:bold;}</style> | |
| </head> | |
| <body> | |
| <select id="language-select"> | |
| <option>Select a language</option> | |
| <option value="en">English</option> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <title>Object.observe</title> | |
| <style>*{box-sizing:border-box;}input{width:100%;}</style> | |
| </head> | |
| <body> | |
| <h1 data-bind="foo"></h1> | |
| <input data-bind="foo"> | |
| <script> |