Skip to content

Instantly share code, notes, and snippets.

View JamesIves's full-sized avatar
커피는 나의 원동력

James Ives JamesIves

커피는 나의 원동력
View GitHub Profile
@JamesIves
JamesIves / walkdom.js
Last active March 14, 2024 13:24
Walks the DOM and creates a table based on how many elements it occurs in the light and shadow DOM, along with a combined total separated by a coloured header. Useful for tracking down performance issues with excessive DOM nodes. Can be run in the browser dev tools console.
/**
* Walk the DOM tree and tally the number of elements between light and shadow dom.
*/
function walkDOM(root, nodeCounts = {}, shadowNodeCounts = {}, isShadow = false) {
const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT);
const nodes = [];
const excludedNodes = ['META', 'SCRIPT', '#text']; // Add any other node types you want to exclude
while(walker.nextNode()) {
if (!excludedNodes.includes(walker.currentNode.nodeName)) {
@JamesIves
JamesIves / app.js
Created September 25, 2023 12:05
Design Token Naming Tool - Simple tool that assists with design token naming.
window.addEventListener("DOMContentLoaded", function () {
const check = document.querySelectorAll(".check");
const radio = document.querySelectorAll(".radio");
const output = document.querySelector("#output");
const NOT_APPLICABLE = "na";
function handleClick() {
let text1 = "";
check.forEach(function (check) {
if (check.checked) {
@JamesIves
JamesIves / index.js
Last active June 8, 2023 11:33
Sends a text message using Twilio when an appointment becomes available for a given location id on the CBP Trusted Traveler Program appointment scheduler for Global Entry. You must set the environment variables found in this file before it will work correctly, these can be found on the Twilio dashboard when you sign up for a free trial.
/**
* Maps out known airport codes to location ids.
*/
const LocationId = {
JFK: 5120,
EWR: 5444,
};
/**
* Gets the airport code for the location id.
@JamesIves
JamesIves / code.ts
Last active March 22, 2022 14:43
Convert Figma CSS Properties to TailwindCSS utilities. This is only partially functional, feel free to take this code and use it to build your own plugin.
/** Converts Figma CSS Properties to TailwindCSS utilities.
* This plugin is unfinished, feel free to take this code and extend it to build your own plugin!
* @author James Ives - https://jamesiv.es
*
*/
const convertComponentToHex = (c: number) => {
const hex = c.toString(16);
return hex.length == 1 ? "0" + hex : hex;
};
@JamesIves
JamesIves / quake_light_flicker.js
Last active June 16, 2021 12:11
Basic interpretation of the Quake light flicker in JavaScript.
const flickerString = "mmamammmmammamamaaamammma";
const flickerInterval = 500;
const pauseExecution = (timeout) => {
return new Promise((resolve) =>
setTimeout(() => {
resolve();
}, timeout)
);
}
@JamesIves
JamesIves / wow_token.cs
Last active May 26, 2020 19:36
Small program which fetches the current WoW token price from the Blizzard API written in C#.
using Newtonsoft.Json;
using RestSharp;
using RestSharp.Authenticators;
using System;
namespace WoWTokenPrice
{
class Program
{
static void Main(string[] args)
@JamesIves
JamesIves / readme_template.md
Last active March 18, 2019 02:54
Generic readme template that I like to use for all of my open source projects.

Repoistory Title 🎤📝

Build Status Issues

This is where I'll place a description about the project, general overview of what it does, etc. I always place a link to the Github issues above, and if there's unit tests to the unit testing tool badge to show if the build is passing or not. The first time something is referenced like an external library I place a link to the documentation like this. For section titles I always add a relevent emoji using the emoji cheat sheet: https://gist.github.com/rxaviers/7360908

Installation Steps 💽

  1. This is the first installation step.
  2. This is the second installation step.
@JamesIves
JamesIves / flex_grid.scss
Last active May 25, 2020 22:51
Basic CSS grid built with flex which supports a large and small breakpoint.
//* Flex Container and Margins
.row {
box-sizing: border-box;
display: flex;
flex: 0 1 auto;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -1rem;
@JamesIves
JamesIves / meme_generator.html
Last active March 18, 2019 02:48
Creates internet memes using HTML5 Canvas. Save it as a HTML file and open in a compatible browser such as Chrome.
<!DOCTYPE html>
<html>
<head>
<title>James' Meme Generator</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0"
/>