Skip to content

Instantly share code, notes, and snippets.

View krhoyt's full-sized avatar

Kevin Hoyt krhoyt

46 followers · 0 following
View GitHub Profile
@krhoyt
krhoyt / WebGLTransitionFactory.js
Created March 19, 2026 20:00
WebGL Transitions Carousel
export class WebGLTransitionFactory {
static vertexSource = `
attribute vec2 a_position;
attribute vec2 a_uv;
varying vec2 v_uv;
void main() {
v_uv = a_uv;
gl_Position = vec4(a_position, 0.0, 1.0);
}
@krhoyt
krhoyt / Typing.svelte
Last active February 26, 2026 19:30
Typing animation for multiple strings
<script>
import { onMount } from 'svelte';
let { ready = [], width = null } = $props();
let displayed = $state( '' );
const TYPING_MS = 75;
const DELETING_MS = 35;
const PAUSE_FULL = 2200;
@krhoyt
krhoyt / navigation.js
Last active October 3, 2025 17:32
Three panel responsive layout with fourth panel that slides into relevant area based on viewport.
export default class HoytNavigation extends HTMLElement {
constructor() {
super();
const template = document.createElement( 'template' );
template.innerHTML = /* template */ `
<style>
:host {
box-sizing: border-box;
display: inline-block;
@krhoyt
krhoyt / +page.svelte
Created August 4, 2025 20:51
Example of Svelte 5 object ownership and mutation
<script>
import CountProperty from "$lib/CountProperty.svelte";
import CountValue from "$lib/CountValue.svelte";
let count = $state( 10 );
let item = $state( {count: 10} );
function onPropertyChange( value ) {
item = {... value};
@krhoyt
krhoyt / three-pane.html
Created July 23, 2025 21:31
Template for three-pane (menu, list, detail) responsive sizing across desktop, tablet, and phone.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Three Column Layout</title>
<style>
@krhoyt
krhoyt / pie.chart.js
Created March 22, 2018 22:43
Dynamic SVG Pie Chart
let template = document.querySelector( 'template.sentiment' );
let svg = template.content.querySelector( 'svg' );
let colors = ['#9575CD', '#5E35B1', '#311B92'];
let radius = ( this.root.clientWidth * 0.80 ) / 2;
let rotation = 0;
let slices = [
( value.negative / value.total ) * 100,
( value.nuetral / value.total ) * 100,
( value.positive / value.total ) * 100
@krhoyt
krhoyt / box.js
Last active April 9, 2025 19:31
Template attempting to show the many facets of a baseline web standards-based component. Not intended to function as a component.
export default class HoytBox extends HTMLElement {
constructor() {
super();
const template = document.createElement( 'template' );
template.innerHTML = /* template */ `
<style>
:host {
box-sizing: border-box;
display: inline-block;
@krhoyt
krhoyt / get.sh
Created March 6, 2025 17:58
SCP Command Examples
# Remote login generally lands in user root, but may want ~/ prefix for specificity
# Specificity may be desired on local path as well with ./ depending on location
scp USER@SERVER:PATH_TO_REMOTE_FILE PATH_TO_LOCAL_FILE
@krhoyt
krhoyt / three-p.md
Created December 27, 2024 20:27
Three P Status Report

What did you do last week? Not down to the minute, but what were the high-level themes of the work you did last week? This is not a trick question, and should be relatively easy to answer. Got it? Cool! Now, what did you do 24 weeks ago (six months)? Is that a little harder to answer? A lot harder? Okay, well, here comes the annual review; are you ready? Or are you going to spend countless hours digging through material to try and justify your existence to the business?

Ug! This is all such a drag. All I really want to do is code/write/anything else!

One of the many techniques I use to solve this problem is what I call the "Three P" weekly status report. Why "Three P"? Because there are three parts to it: progress, priorities, and problems.

  • Progress: Details about the work you completed over the last week
  • Priorities: Work you intend to accomplish in the week ahead
  • Problems: Issues that are slowing you down or preventing progress
@krhoyt
krhoyt / manager-promises.md
Created December 27, 2024 20:04
Promises from a Manager
  1. We will have a weekly 1:1. I will never cancel this meeting, but you can cancel it whenever you like. It is your time.
  2. Our 1:1 agenda will be in the meeting invite so we remember important topics. You are always free to use the time for whatever is on your mind.
  3. When I schedule a meeting with you, I will always say when I schedule it what it is meant to be about. I will not schedule meetings without an agenda.
  4. When I drop into your DM’s, I will always say “hi and why.” No suspense, no small talk while you are wondering what I want.
  5. News or announcements that significantly impact you, your work, or your team will come from me directly in a 1:1, not revealed in a big meeting.
  6. You will get feedback from me when it is fresh. There will be no feedback in your performance review that you are hearing for the first time.
  7. I trust you to manage your own time. You do not need to clear with me in advance your time AFK or OOO.
  8. Your work gets done your way. My focus is on outcomes, not output. O