Skip to content

Instantly share code, notes, and snippets.

Avatar

Michael Burdi maburdi94

View GitHub Profile
@maburdi94
maburdi94 / tag.js
Last active Apr 26, 2021
Shorthand to create an HTML element in Vanilla JS using selector syntax for tag, id, and classes.
View tag.js
function tag(selector, attrs, innerText = '') {
let _tag = selector.match(/^(\w[\w-_\d]*)/)?.[1];
let _id = selector.match(/#([\w_]+[\w-_\d]*)/)?.[1];
let _classes = Array.from(selector.matchAll(/\.([\w_]+[\w-_\d]*)/g)).map(m => m?.[1]);
let el = document.createElement(_tag ?? 'div');
if (_id) {
el.setAttribute('id', _id);
@maburdi94
maburdi94 / app.js
Last active Dec 26, 2019
Node HTTP/2 Web Server w/ streams
View app.js
const http2 = require('http2');
const fs = require('fs');
const zlib = require('zlib');
let mimeTypes = require('mime-types');
const server = http2.createServer(onRequest);
function getAsyncFileStream(filePath) {
View auto-complete.js
document.addEventListener('DOMContentLoaded', function() {
let textarea = document.getElementById('comment');
let sc = document.createElement('div');
sc.classList.add('autocomplete-suggestions');
sc.setAttribute('autocomplete', 'off');
@maburdi94
maburdi94 / scroll-calendar.js
Last active Jul 18, 2019
Infinite scrolling web component calendar
View scroll-calendar.js
class ScrollCalendar extends HTMLElement {
connectedCallback() {
let observer = new IntersectionObserver((entries) => {
let el = entries[0];
if (el.isIntersecting) {
observer.unobserve(this.firstElementChild);
observer.unobserve(this.lastElementChild);
@maburdi94
maburdi94 / nodelist-animate.ts
Created Apr 19, 2018
NodeList prototype extension for WebAnimations (w/ stagger option)
View nodelist-animate.ts
interface AnimationOptions {
stagger?: number;
}
NodeList.prototype.animate = function(keyframes: AnimationKeyFrame | AnimationKeyFrame[], options: number | AnimationOptions) {
const elements: HTMLElement[] = Array.prototype.slice.call(this);
(function next(elements: Array<HTMLElement>) {
if (elements.length < 1) return;
@maburdi94
maburdi94 / luxon-date-adapter.ts
Created Dec 22, 2017
Angular Date Adapter for Luxon
View luxon-date-adapter.ts
import {Inject, Injectable, InjectionToken, LOCALE_ID, Optional} from '@angular/core';
import {DateAdapter} from '@angular/material';
import {DateTime} from 'luxon/build/node/luxon';
declare var DateTime: {
year: number;
month: number;
day: number;
weekday: number;
@maburdi94
maburdi94 / random-number.js
Last active Jul 17, 2019
Produce random number between two values
View random-number.js
function random(n, b = 0) {
return Math.random() * (b-n) + n;
}
@maburdi94
maburdi94 / random-bool.ts
Created Jun 21, 2017
Function to produce random boolean value with retries
View random-bool.ts
function _randomBool(oddsOfTrue = 1) {
let r; while (!(r = !~~(Math.random() * 2)) && --oddsOfTrue > 0);
return r;
}
@maburdi94
maburdi94 / data-size.pipe.ts
Last active Jun 21, 2017
Angular 2 data size formatter pipe
View data-size.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'dataSize'
})
export class DataSize implements PipeTransform {
private suffixes = ['KB', 'MB', 'GB', 'TB', 'EB', 'YB'];
// Specified input units (MB default (1000000))