Skip to content

Instantly share code, notes, and snippets.

View jh3y's full-sized avatar
🔨
Crafting

Jhey Tompkins jh3y

🔨
Crafting
View GitHub Profile
@jh3y
jh3y / magnify-this.js
Last active October 10, 2024 15:40
Magnify This. Bookmarklet code for magnifying a website.
javascript:(function () {
var active;
var magnifier;
var config = {
scale: 75,
size: 160,
image:
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAOtMSURBVHgBrL2JmuS4zQQYyK/e/42b2EkRcUDVY/vf3bKnK0spkSCOwMFDdep0F9D9z3/8jfjvfe379/nnn8/8ffqfazXfNY7a+V77XsXz/fk2gn9+8+o//3yb+efSP9fm7+jj+89zb+G2Md9/H2A/35/nmtqfNqfvnr+zv2Yb/9x/YpykjW3c5jyuZzxFOmYMddvxdQQN7/H85fr7+3m+a9N3ya+hA+r7PG1eWmroJy+f+5//7ee+f3+fAeV0QgY1fOiQpfofum9nz7OHn3vz6bY/8v/S+X2W8unh29CdfFMfKY/gbS/5//MF9eBLy/eGD/XYcmGf5PXhtTN8Hxm7r9Ad9pn2Eboj+SPtZNp7Pv/zz+efcZwWzzrsY/X5Hcsaw9D7JbggmtIeT8hC16RD2LpyIJ6fe+n5/WP1ug8UB3a16FGs5pejI50KNMTRqJ4nxuKevz/Tfl0lGF1/nqsYxHQ7mvXPr88/9zbBokJF2ko49J1/tLhG4fkbYRjdVOPnMvzXvf/5xDYevRrg4p2PUpzhHHlgnpAy0TAGUexsjKLMaff7vX42P9hvVQ1wmGgaVdOcef3Lqw9u3xLkUEY6SXNodX1GBqAy9+0XIbfRmOJjyLF/CT+3WdLesAH2lVd9an7jkZdQ76UHNbI+//yvKq+HBoweSZ/68orGGMwaJ1OPo/oa42DT0+B95ozkpt1nvE1lhMVMhQs7CF0cxbnjnRs+dXXz80+/f1IGo4hz+9MV++4BSOp5fVq8fcBhQ
@jh3y
jh3y / gsap-eases.css
Last active October 16, 2024 15:23
GreenSock eases with CSS linear()
:root {
--none: linear(0, 1);
--power1-in: linear( 0, 0.0039, 0.0156, 0.0352, 0.0625, 0.0977, 0.1407, 0.1914, 0.2499, 0.3164, 0.3906 62.5%, 0.5625, 0.7656, 1 );
--power1-out: linear( 0, 0.2342, 0.4374, 0.6093 37.49%, 0.6835, 0.7499, 0.8086, 0.8593, 0.9023, 0.9375, 0.9648, 0.9844, 0.9961, 1 );
--power1-in-out: linear( 0, 0.0027, 0.0106 7.29%, 0.0425, 0.0957, 0.1701 29.16%, 0.2477, 0.3401 41.23%, 0.5982 55.18%, 0.7044 61.56%, 0.7987, 0.875 75%, 0.9297, 0.9687, 0.9922, 1 );
--power2-in: linear( 0, 0.0014 11.11%, 0.0071 19.24%, 0.0188 26.6%, 0.037 33.33%, 0.0634 39.87%, 0.0978 46.07%, 0.1407 52.02%, 0.1925 57.74%, 0.2559 63.49%, 0.3295 69.07%, 0.4135 74.5%, 0.5083 79.81%, 0.6141 85%, 0.7312 90.09%, 1 );
--power2-out: linear( 0, 0.2688 9.91%, 0.3859 15%, 0.4917 20.19%, 0.5865 25.5%, 0.6705 30.93%, 0.7441 36.51%, 0.8075 42.26%, 0.8593 47.98%, 0.9022 53.93%, 0.9366 60.13%, 0.963 66.67%, 0.9812 73.4%, 0.9929 80.76%, 0.9986 88.89%, 1 );
--power2-in-out: linear( 0, 0.0036 9.62%, 0.0185 16.66
@jh3y
jh3y / theme-toggle.js
Created July 12, 2023 14:10
Netlify Edge Function for Theme Toggling
import { HTMLRewriter } from 'https://ghuc.cc/worker-tools/html-rewriter'
const THEMES = ['system', 'light', 'dark']
const COOKIE_KEY = 'jhey-theme'
export default async (request, context) => {
const res = await context.next()
const type = res.headers.get('content-type')
if (!type.startsWith('text/html') || request.url.includes('/demos/')) {
return res
@jh3y
jh3y / search.js
Created May 15, 2022 11:09
How to make a CSS powered filter box ✨
class Search {
constructor(el) {
const ID = (this.ID = el.getAttribute("data-search-id"))
this.STYLES = document.querySelector(`#search-${ID}__styles`)
this.INPUT = document.querySelector(`#search-${ID}`)
this.INPUT.addEventListener("input", this.UPDATE.bind(this))
this.TAGS = document.querySelector(`#search-${ID}__tags`)
if (this.TAGS) {
this.CHECKS = this.TAGS.querySelectorAll('[type="radio"]')
this.CHECKS.forEach((c) =>
const myObject = {
a: 1,
b: 2,
...(false && { c: 3 }),
}
// myObject: { a: 1, b: 2 }
const myObject = {
a: 1,
b: 2,
@jh3y
jh3y / Blurbs.jsx
Created July 3, 2020 17:15
Very rough blurb code
const Blurbs = ({ onChange, blurb, noscript }) => {
return (
<Fragment>
{!noscript && (
<input
className="blurb-swapper"
onChange={onChange}
type="range"
min="0"
max={BLURBS.length - 1}
@jh3y
jh3y / egghead.css
Created June 5, 2020 20:03
Egghead CSS
*,
*:before,
*:after {
box-sizing: border-box;
}
:root {
--size: 50;
--unit: calc((var(--size) / 769) * 1vmin);
--specs: #262626;
--shell-outline: #666;
@jh3y
jh3y / morse.js
Created November 13, 2019 01:21
learn morse code with this little Espruino app
/**
* Teach a user morse code
*/
/**
* Constants
*/
const FONT_NAME = 'Vector12';
const FONT_SIZE = 80;
const SCREEN_PIXELS = 240;
const UNIT = 100;
@jh3y
jh3y / ringsv2.js
Created November 12, 2019 16:11
Rings v2 for Bangle.js
/**
* So you get 240 x 240 so you can technically do different things right?
* Colors?
*/
g.clear();
class Ring {
constructor() {
this.alive = true;
@jh3y
jh3y / accel.js
Created November 12, 2019 13:39
Frequency beep. Adjustable polling for beeping based on accelerometer magnitude.
//Bangle.beep(10000, 10000)
let b = null;
let freq = 5000;
let radius = 0;
let DURATION = 50;
const LOWER = 500;
const LOWER_MAG = 0.97;
const UPPER_MAG = 1.03;
const UPPER = 10000;