Skip to content

Instantly share code, notes, and snippets.

@mikehwagz
mikehwagz / loadFonts.js
Created October 8, 2020 15:26
font loading
const FontFaceObserver = require('fontfaceobserver')
export default function loadFonts(fontManifest) {
return new Promise((resolve, reject) => {
const observers = fontManifest.map(
(entry) => new FontFaceObserver(entry.family, entry.options),
)
Promise.all(observers.map((font) => font.load()))
.then((res) => {
@mikehwagz
mikehwagz / analytics.js
Last active January 31, 2021 02:12
basic gtm pattern + enhanced commerce
const BRAND_NAME = 'Lorem Ipsum'
export function gtmProduct(product, variant) {
return {
name: product.title,
id: variant.sku,
price: parseFloat(variant.price),
variant: variant.title,
brand: BRAND_NAME,
category: 'All',
<template>
<div class="m:fix m:fill m:f aic whiskey__wrap">
<div class="scroll-element m:nowrap wct m:f aic pt130 m:pt0" ref="scrollElement">
<ul class="whiskey l y m:f aic">
<li
v-for="(item, i) in page.whiskey_listing"
:key="`${item.uid}-${i}`"
class="rel y mb90 m:mb0"
>
<n-link
@mikehwagz
mikehwagz / .eleventy.js
Created September 24, 2020 16:19
blur-up image picoapp component in a 11ty sanity setup
// just the shortcodes you'll need in eleventy config
const cx = require('nanoclass')
const imageUrlBuilder = require('@sanity/image-url')
const sanityClient = require('./util/sanityClient')
const builder = imageUrlBuilder(sanityClient)
function urlFor(image, width, height) {
if (width) {
if (height) {
return builder
@mikehwagz
mikehwagz / _app.js
Created August 22, 2020 13:14
Page transitions with GSAP in Next.js
import { SwitchTransition, Transition } from 'react-transition-group'
import gsap from 'gsap'
function MyApp({ Component, pageProps, router }) {
return (
<SwitchTransition>
<Transition
key={router.pathname}
timeout={500}
in={true}
function clipboardCopy(text) {
// Use the Async Clipboard API when available. Requires a secure browsing
// context (i.e. HTTPS)
if (navigator.clipboard) {
return navigator.clipboard.writeText(text).catch(function(err) {
throw err !== undefined
? err
: new DOMException('The request is not allowed', 'NotAllowedError')
})
}
// this is simple-input-events by matt deslauriers but i've replaced the node
// EventEmitter with mitt to shrink the bundled output significantly
// github for original package: https://github.com/mattdesl/simple-input-events
import mitt from 'mitt'
export default function(opt) {
const {
target = window,
parent = window,
/* Get 12 most recent instagram thumbnails from a public account
* resolution = 0 - 4
* 0 => 150
* 1 => 240
* 2 => 320
* 3 => 480
* 4 => 640
*/
export default function(username, resolution = 4) {
return fetch(`https://www.instagram.com/${username}/?__a=1`)
@mikehwagz
mikehwagz / smooth.js
Created March 23, 2020 16:25
minimal picoapp smooth scroll implementation using native scrollbar
import { component } from 'picoapp'
import { add } from '@/util/dom'
import { round, lerp } from '@/util/math'
export default component((node, ctx) => {
let sh = null
let ty = 0
let cy = 0
let ly = null
let ease = 0.115
/**
* Checks if provided value is an Array
*
* @param {*} value The value to test
* @return {Boolean} Truthy when value is an Array
*/
export function isArray(value) {
return Array.isArray(value)
}