Skip to content

Instantly share code, notes, and snippets.

<template>
<div class="character-screen__vertical-wave">
<svg
viewBox="0 0 202 1449"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<g
id="Page-1"
<div class="hero__marquee marquee">
<div class="marquee__text">
<!-- HTML Markup -->
</div>
<div class="marquee__text">
<!-- HTML Markup -->
</div>
<div class="marquee__text">
<!-- HTML Markup -->
</div>
@celsowhite
celsowhite / leaky-bucket-simulator.js
Created March 1, 2022 12:02
Simulate a leaky bucket to understand how many calls and requests can be made in a certain amount of time without going beyond capacity.
let callCount = 0;
let bucketCount = 0;
// Bucket Settings
const bucketCapacity = 8;
const leakRate = 2;
const leakTime = 1000;
// Call Settings
const callAmount = 5;
/*------------------------
Libraries
------------------------*/
const axios = require("axios");
const fs = require("fs");
const FormData = require("form-data");
/*------------------------
Download the file.
Good article on how to download a file and send with form data - https://maximorlov.com/send-a-file-with-axios-in-nodejs/
@celsowhite
celsowhite / promise-all-map.js
Created September 14, 2021 16:59
Example of using a map function to process async requests in parallel.
async function printFiles () {
const files = await getFilePaths();
await Promise.all(files.map(async (file) => {
const contents = await fs.readFile(file, 'utf8')
console.log(contents)
}));
}
function createSticker(sticker, xPosition = 100, yPosition = 100) {
fetch(sticker.svg)
.then(res => res.text())
.then(svg => {
// Body Creation
// Save a blank array of vertex sets.
const vertexSets = [];
// Use the dom parser to parse our svg.
@celsowhite
celsowhite / calculate-container-margin.js
Created February 9, 2021 15:57
Calculate and set the container margin as a css variable. Helpful when breaking elements out of their container while maintaining alignment.
/*-------------------------
Calculate Container Margin
-------------------------*/
document.addEventListener('DOMContentLoaded', event => {
let root = document.documentElement;
// Calculate Container Margin
function calculateContainerMargin() {
const container = document.querySelector('.container');
@celsowhite
celsowhite / scroll-direction-indicator.js
Created November 30, 2020 13:27
Detect scroll direction using gsap.
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
function initScrollDirectionIndicator() {
// GSAP Plugins
gsap.registerPlugin(ScrollTrigger);
/*----------------------------
Elements
----------------------------*/
@celsowhite
celsowhite / flickityInit.js
Last active October 21, 2020 13:58
Init helper for Flickity instances.
import Flickity from 'flickity-fade';
require('flickity-imagesloaded');
/**
* Init Flickity
*
* @param node container - The container element node. Flickity gallery and arrows should be within this container.
* @param object flickityOptions - The specific flickity api options for this initialization.
*
* output Sets up a Flickity slider instance with standard slider customizations done via the api.
@celsowhite
celsowhite / target-blank.js
Last active October 13, 2020 19:40
Link external links to a new window.
/*-------------------------
Target Blank
---
Link all external links to a new window.
-------------------------*/
document.addEventListener('DOMContentLoaded', () => {
for (var c = document.getElementsByTagName('a'), a = 0; a < c.length; a++) {
var b = c[a];
b.getAttribute('href') &&