Skip to content

Instantly share code, notes, and snippets.


Jon Gacnik jongacnik

View GitHub Profile
jongacnik / state.js
Created Oct 24, 2021
Querystate w/ history
View state.js
import querystate from 'querystate'
import nanobus from 'nanobus'
const state = querystate()
const bus = nanobus()
// emit state on history change
var pushState = history.pushState
var popState = history.popState
jongacnik / Ultralazy.js
Created Dec 30, 2020
Ultralazy: Lazy load wicked component
View Ultralazy.js
import { define } from 'wicked-elements'
import onIntersect from '../lib/on-intersect.js'
define('[data-component~="ultralazy"]', {
init () {
this.state = {}
this.onEnter = this.onEnter.bind(this)
this.onLoad = this.onLoad.bind(this)
connected () {
View overscroll-none.js
import { define } from 'wicked-elements'
define('[data-component~="overscroll-none"]', {
init () {
connected () {
if (!CSS.supports('overscroll-behavior', 'none')) {
this.wheelingTimeout = false
this.lock = this.lock.bind(this)
jongacnik / simple-dom.js
Created Aug 18, 2020
simple dom, jquery esque
View simple-dom.js
const $ = (selector, parent = document) => parent.querySelector(selector)
const $$ = (selector, parent = document) => [...parent.querySelectorAll(selector)]
const createNode = html => {
return new DOMParser().parseFromString(html, 'text/html').body.firstChild
jongacnik /
Last active Aug 4, 2020
Shopify Homepage Redirect

Shopify Homepage Redirect

Use the "Custom Content" section in a debut theme to add a code block with the contents of shopify-redirect.js. This will allow you to create a user-editable redirect. The code is wrapped in an iFrame check so the redirect is not triggered while in the editor. Editors can toggle the redirect on/off by showing/hiding that section.

View toggle.wickedelement.js
import { define } from 'wicked-elements'
* Toggles open class on target element on toggle click
define('[data-component~="toggle"]', {
init () { = this.element.getAttribute('data-target')
this.toggle = this.toggle.bind(this)
jongacnik / crossfade-slideshow.js
Last active Dec 12, 2019
Crossfade Slideshow Example
View crossfade-slideshow.js
import GenericSlideshow from './generic-slideshow'
const ov = object => Object.keys(object).map(i => object[i])
class CrossfadeSlideshow {
constructor($el, options) {
this.$el = $el
this.$counter = document.querySelector('[data-subcomponent="slider-counter"][data-exports="' + options.exports + '"]')
this.$title = document.querySelector('[data-subcomponent="slider-title"][data-exports="' + options.exports + '"]')
// init slideshow if multiple slides
View underline.css
background-image: linear-gradient(currentColor, currentColor);
background-repeat: no-repeat;
background-size: 100% 1px;
background-position: center bottom 2px;
background-origin: padding-box;
View drip.css
form[data-drip-embedded-form] {
background: #fff url(data:image/gif;base64,R0lGODlhAQADAIABAMzMzP///yH/C1hNUCBEYXRhWE1QPD94cGFja…wbGhkYFxYVFBMSERAPDg0MCwoJCAcGBQQDAgEAACH5BAEAAAEALAAAAAABAAMAAAICRFIAOw==) repeat-y center top;
font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
line-height: 1.5em;
overflow: hidden;
color: #666;
font-size: 16px;
border-top: solid 20px #3071b0;
border-top-color: #3071b0;
border-bottom: solid 10px #3d3d3d;
jongacnik /
Created Jun 24, 2019 — forked from holmberd/
Google Analytics - Cross Domain Manual Link Tracking

Manually decorate a URL with the linker parameter for Google Tab Manager or Google Analytics

In the case where you manually want to decorate a link with the linker parameter, i.e. the link is not a valid anchor link, or the final tracking page is accessed by user in a non direct way: File Download, Extension Installation, ect...

Google Analytics

 * Returns the Google Analytics tracker linker parameter.