Skip to content

Instantly share code, notes, and snippets.

@heyMP
heyMP / index.js
Created Jun 15, 2022
@btopro shared a cool way of using the Image() API to lazyload images
View index.js
if (attr === "srcconverted" && this.src != "" && !this.rendering) {
this.rendering = true;
// loads the image in the background in-case of quality change
// also then supports failure events
let i = new Image();
i.onload = () => {
this.render(this.srcconverted);
};
// try loading just the normal one if this bombed
i.onerror = () => {
View context-controller-cavalcade.md

"@patternfly/pfe-core": major "@patternfly/pfe-sass": major "@patternfly/pfe-styles": minor "@patternfly/pfe-accordion": major "@patternfly/pfe-band": major "@patternfly/pfe-button": patch "@patternfly/pfe-card": major "@patternfly/pfe-clipboard": patch "@patternfly/pfe-collapse": minor

@heyMP
heyMP / inferedTypes.ts
Created Mar 8, 2022
Two ways of syncing types and variables.
View inferedTypes.ts
// This is where we infer Typescript types from JS arrays.
export const states = [
'frame',
'color',
'pedals',
'seat',
'handles',
'wheels',
] as const;
@heyMP
heyMP / machine.js
Last active Dec 12, 2021
Generated by XState Viz: https://xstate.js.org/viz
View machine.js
const isNotMin = (context) => context.count > 0;
// Edit your machine(s) here
const counterMachine = Machine({
id: "counter",
initial: "init",
context: {
count: 0,
},
states: {
@heyMP
heyMP / MatchMediaController.ts
Created Dec 1, 2021
Typing a Resize Observer in web comopnents.
View MatchMediaController.ts
import type { ReactiveControllerHost, ReactiveController } from 'lit';
export class MatchMediaController implements ReactiveController {
// reference to the host element using this controller
host: ReactiveControllerHost & Element;
// the output value
value = false;
private mediaQuery: string;
@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 Jul 12, 2022
Recursively find elements through multiple layers of shadow dom.
View utils.js
/**
* Example usage:
* const hotspots = findAllDeep(element, `[slot*="hotspot"]`, 10);
*/
const findAllDeep = (parent, selectors, depth = null) => {
let nodes = new Set();
let currentDepth = 1;
const recordResult = (nodesArray) => {
for (const node of nodesArray) {
nodes.add(node)
@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 {