Skip to content

Instantly share code, notes, and snippets.

@heyMP
heyMP / index.html
Created Oct 25, 2021
Declarative Adopted Stylesheets
View index.html
<my-element>
<template slot="styles">
<style>
/* CSS tweaks escape hatch */
* {
color: pink;
}
</style>
</template>
</my-element>
@heyMP
heyMP / index.js
Created Sep 9, 2021
Find comments inside of a DOM element
View index.js
const findComments = function (el) {
var arr = [];
for (var i = 0; i < el.childNodes.length; i++) {
var node = el.childNodes[i];
if (node.nodeType === 8) {
arr.push(node);
} else {
arr.push.apply(arr, findComments(node));
}
}
@heyMP
heyMP / pfe-clipboard.html
Last active Feb 23, 2021
When you want slots but need to tweak the content a bit.
View pfe-clipboard.html
<!-- icon slot -->
${!this.noIcon ? `
<div class="pfe-clipboard__icon">
<slot name="icon" id="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 15.277 16"><defs><style>.a{fill:#6a6e73;}</style></defs><g transform="translate(-2.077 -1.807)"><path class="a" d="M15.34,2.879a3.86,3.86,0,0,0-5.339,0L6.347,6.545a3.769,3.769,0,0,0,0,5.339.81.81,0,0,0,1.132,0,.823.823,0,0,0,0-1.145A2.144,2.144,0,0,1,7.5,7.677l3.641-3.654a2.161,2.161,0,1,1,3.049,3.062l-.8.8a.811.811,0,1,0,1.145,1.132l.8-.8a3.769,3.769,0,0,0,0-5.339Z" transform="translate(0.906 0)"/><path class="a" d="M10.482,6.822a.823.823,0,0,0,0,1.145,2.161,2.161,0,0,1,0,3.049L7.343,14.155a2.161,2.161,0,0,1-3.062,0,2.187,2.187,0,0,1,0-3.062l.193-.116a.823.823,0,0,0,0-1.145.811.811,0,0,0-1.132,0l-.193.193a3.86,3.86,0,0,0,0,5.339,3.86,3.86,0,0,0,5.339,0l3.126-3.139A3.731,3.731,0,0,0,12.72,9.562a3.769,3.769,0,0,0-1.094-2.74A.823.823,0,0,0,10.482,6.822Z" transform="translate(0 1.37)"/></g></svg>
</slot>
@heyMP
heyMP / utils.js
Last active Aug 3, 2021
Recursively find elements through multiple layers of shadow dom.
View utils.js
/**
* Example usage:
* const hotspots = findAllDeep(this.shadowRoot.querySelector('slot'), `[slot*="hotspot"]`, 1);
*/
export const findAllDeep = (parent, selectors, depth = null) => {
let nodes = [];
let currentDepth = 1;
const recursiveSeek = _parent => {
// record the nodes
for (let child of _parent.assignedNodes({ flatten: true })) {
@heyMP
heyMP / my-component.js
Created Feb 20, 2019
Example Mixin for Polymer element
View my-component.js
/**
* Copyright 2019 PSU
* @license Apache-2.0, see License.md for full text.
*/
import { html, PolymerElement } from "@polymer/polymer/polymer-element.js";
const SelectedMixin = function (superClass) {
return class extends superClass {
static get properties() {
return {
@heyMP
heyMP / chaotic-good.md
Created Feb 8, 2019 — forked from btopro/chaotic-good.md
HAXTheWeb: Chaotic Good
View chaotic-good.md

"You see, I'm not a monster... I'm just ahead of the curve"

Unbalance, unrest, and chaos can be brought with one simple act: Giving away everything. It's a notion I explored in my MS thesis via open source; because, edtech systems are built on power. Power and control technology is largely codified through institutional history. Collapsing control, we can restore a greater order. I want to take you into the philosophy and madness that drives me and inspires the team behind HAXTheWeb.

HAXTheWeb

At its core is a new way of creating and remixing content. Think of it as a WYSIWYG (what you see is what you get) built for the future. When I say WYSIWYG, you probably think text. But when I search YouTube, responsively embed it and save in ~10 seconds, all without leaving HAX or seeing HTML; it becomes clear this is not normal. This is just one massive time saver among many and why people in  IndieWeb and OER communities are getting excited.

@heyMP
heyMP / debugEventProperties.js
Created Jan 21, 2019
Listen for changes on the preventDefault property of events.
View debugEventProperties.js
var oldEPD = Event.prototype.preventDefault;
Event.prototype.preventDefault = function() {
debugger;
oldEPD.call(this);
};
@heyMP
heyMP / Contract Killer 3.md
Last active Jan 16, 2019 — forked from malarkey/Contract Killer 3.md
The latest version of my ‘killer contract’ for web designers and developers
View Contract Killer 3.md

Contract Killer

The popular open-source contract for web professionals by Stuff & Nonsense

  • Originally published: 23rd December 2008
  • Revised date: January 15th 2019
  • Original post

@heyMP
heyMP / bottle.js
Last active Nov 26, 2018
Clone geometry and meshes a-frame
View bottle.js
import registerComponent from '../utils/registerComponent';
const bottle = {
schema: {
id: { type: 'string' }
},
init: function () {
// create the label entity
const labelEl = document.createElement('a-entity')
View gist:edbbb8141962a9c203b124ccca6ad1bf
{
"editor.tabSize": 2,
"editor.fontSize": 15,
"window.zoomLevel": 0,
"editor.codeLens": true,
"editor.cursorStyle": "underline",
"editor.lineNumbers": "relative",
"workbench.welcome.enabled": false,
"workbench.colorTheme": "Dracula",
"workbench.iconTheme": "vscode-icons",