Skip to content

Instantly share code, notes, and snippets.


Logan Volkers loganvolkers

View GitHub Profile
View Host selector example.css
`<sqm-example hidden />`
display: none;
`<sqm-example show-icon />`
:host([show-icon]) .icon{
display: block;
View Universal

Universal Hooks

A proposal for interoperability of React-style hooks.


  • React invented the hooks approach to functional components, but they are stuck in a framework-specific environment.
  • Haunted has created a pure JS alternative to React
  • Other frameworks ( also introduced hooks
loganvolkers / ScriptTracker.ts
Last active Nov 19, 2020
Use `script` elements for web components. Inspired by @polymer/marked-element
View ScriptTracker.ts
import { getElement } from '@stencil/core';
export type ScriptTrackerProps = {
element: any;
updater: (value: unknown) => unknown;
onError?: (e: Error) => unknown;
export class ScriptTracker {
View ExampleHook.ts
import { Component, h } from '@stencil/core';
import { useState } from 'haunted';
import { useHook } from './stencil-hooks';
tag: 'example-hook',
export class ExampleHook {
render = useHook(this, () => {
loganvolkers / ConsumerExample.ts
Last active Sep 15, 2020
Context for Stencil
View ConsumerExample.ts
tag: 'stencil-consumer',
export class StencilConsumer {
@Prop() renderer: any;
@State() context: Record<string, any>;
console.log("Will load")
loganvolkers / Byte Formatting for Google
Last active Jul 28, 2022
Byte formatting for Google Sheets
View Byte Formatting for Google
View Widget API Definition.js
* Widget <> Squatch.js Interface via EasyXDM
init(height, width, codeIn, rewardBalance, resizeEmbedToContentIn)
resize(height, width)
publish(eventName, payload)
error(errorMessage, height, width)
loganvolkers / Auth0Mailchimp.js
Last active Sep 8, 2016
Auth0 Custom Connection Script
View Auth0Mailchimp.js
function doAuth(access_token, ctx, callback) {
var opts = {
'headers': {
'Authorization': 'OAuth ' + access_token,
'Accept': 'application/json',
'User-Agent': 'Auth0'
request.get('', opts, function(e, r, b) {
View components.login-button.js
import Ember from 'ember';
export default Ember.Component.extend({
backendService: Ember.inject.service('backend-service'),
actions: {
login() {
query() {