Instantly share code, notes, and snippets.

🌴

Jon Wheeler jonkwheeler

🌴

Lead Front End @ Agora.Finance, prev Render.com, GameStop, Reach Financial, InVision. I run. cook. photograph. engineer. all for fun. 🤠

33 followers · 5 following

View GitHub Profile

Recently created

Least recently created

Recently updated

Least recently updated

@jonkwheeler

jonkwheeler / useState-vs-useSignal.jsx

Last active May 2, 2024 05:46

useState vs useSignal

import { render } from "preact";

import { useRef, useState } from "preact/hooks";

import { signal, useSignal, useComputed } from "@preact/signals";

// Create a signal that can be subscribed to:

const globalCount = signal(0);

function Counter({ number }) {

const [stateCount, setStateCount] = useState(0);

@jonkwheeler

jonkwheeler / Hubspot Number Comma Separator.liquid

Last active May 2, 2024 05:46

Hubspot Number Comma Separator

{% macro number_comma_separator(number) %}

{# Check if a number first #}

{% if number|int != 0 %}

{# split all numbers to an array #}

{% set numbers = number|string|regex_replace("(\\d)", "1,ドル")|split(",") %}

{% set new_numbers = [] %}

{# loop over array in reverse #}

{% for digit in numbers|reverse %}

{% if loop.index is divisibleby 3 %}{% set new_digit = digit + "," %}{% else %}{% set new_digit = digit %}{% endif %}

{% set new_numbers = new_numbers + new_digit %}

@jonkwheeler

jonkwheeler / NextJsDynamicImportNoSsr.js

Created August 29, 2018 11:08

Next.js - Window is not defined - Dynamic Import

import React from 'react'

import dynamic from 'next/dynamic'

const ReactJsonNoSSR = dynamic(import('react-json-view'), {

ssr: false

})

const starWarsJson = {

"name": "Luke Skywalker",

"height": "172",

@jonkwheeler

jonkwheeler / wasm-links.txt

Last active May 2, 2024 05:46

WebAssembly Links to check out

https://s3.amazonaws.com/mozilla-games/tmp/2017-02-21-SunTemple/SunTemple.html

https://s3.amazonaws.com/mozilla-games/ZenGarden/EpicZenGarden.html

https://mil-tokyo.github.io/webdnn/

http://tiny.cc/webdsp

http://alex-wasm.appspot.com/time/hour-chipmunk.svg

https://www.cubeslam.com

http://shi-yan.github.io/AssortedWidgets/

https://webrtc.github.io/samples/src/content/getusermedia/filter/

https://webassembly.studio/

@jonkwheeler

jonkwheeler / Counter.js

Created June 26, 2018 14:31

React: Animation component using GSAP to interval count up

// @flow

import React, { PureComponent } from 'react';

import { TweenMax, Circ } from 'gsap';

import Waypoint from 'react-waypoint';

type CounterProps = {

min: number,

max: number,

duration: number,

afterText: string,

@jonkwheeler

jonkwheeler / RevealText.js

Last active May 2, 2024 05:46

React: Animation component using GSAP's SplitText plugin to reveal text on a page

// @flow

import { PureComponent, type Node, Fragment } from 'react';

import { TimelineLite } from 'gsap';

import SplitText from 'Lib/gsap-bonus/umd/SplitText';

import Waypoint from 'react-waypoint';

type RevealTextProps = {

children: Node,

waypointTopOffset: string,

waypointBottomOffset: string,

@jonkwheeler

jonkwheeler / Download-Slack-Profile-Pictures.js

Last active May 2, 2024 05:46

Download Slack Profile Pictures / Images

// Enter slack in the browser. https://{insert your team name here}.slack.com/messages/

// Click on the channel you want.

// Click the information icon.

// Expand the members dropdown.

// Click "See All Members"

// Paste the next line into the console, hit enter.

var imageList = new Array()

// If your channel has more than 19 members, the list won't display past that. It also unloads them from the state as you scroll.