Phil. wiseoldman

🔥

⁠

Live as if you were to die tomorrow. Learn as if you were to live forever - Michael Scott

wiseoldman / _close.scss

Last active December 17, 2018 13:20

[Single div X button] Close button created with a single div and pseudo elements #close #button #scss

wiseoldman / _event-delegation.js

Last active June 2, 2023 12:47

[Event delegation] Vanilla js event delegation. This also works for complex HTML markup with overlaying children #event #delegation

	Element.prototype.on = function (eventName, selector, fn) {
	this.addEventListener(eventName, function (event) {
	const target = event.target.closest(selector)

	if (target && this.contains(target)) {
	return fn.call(target, event, target)
	}
	})
	}

wiseoldman / _letter-spacing.scss

Last active August 27, 2021 12:13

[Adobe XD letter-spacing] SCSS mixin to convert letter-spacing from Adobe XD to CSS #xd #letter-spacing

	@mixin letter-spacing($spacing) {
	letter-spacing: ($spacing / 1000) * 1em;
	}

wiseoldman / _ie-check.js

Created October 22, 2018 14:38

[Internet Explorer check] Check if the browser is Internet Explorer #ie #fallback

	function is_ie() {
	const UA = window.navigator.userAgent;
	const MS_IE = UA.indexOf("MSIE ");

	if (MS_IE > 0 \|\| !!navigator.userAgent.match(/Trident.*rv\:11\./)) {
	return true;
	}

	return false;
	}

wiseoldman / _input-mixins.scss

Created May 29, 2018 09:48

[Input mixins] Mixins for input fields #scss

	@mixin placeholderColor($color) {
	&:-moz-placeholder {
	color: $color;
	}

	&:-ms-input-placeholder {
	color: $color;
	}

	&::-moz-placeholder {

wiseoldman / BlockInputKeys.js

Created May 23, 2018 11:03

[BlockInputKeys] Block an array of keys on inputs #form

	class BlockInputKeys {
	constructor(INPUT_TYPE, BLOCKED_KEYS) {
	this.INPUT_TYPE = INPUT_TYPE;
	this.BLOCKED_KEYS = BLOCKED_KEYS;
	this.NUMBER_INPUTS = document.querySelectorAll(this.INPUT_TYPE);
	this.init();
	}

	init() {
	for (let i = 0; i < this.NUMBER_INPUTS.length; i++) {

wiseoldman / FloatingLabel.js

Last active February 25, 2019 13:58

[FloatingLabel] Floating labels for inputs #input #form

	class FloatingLabel {
	constructor(WRAPPER_ELEMENT, INPUT_TYPE) {
	this.WRAPPER_ELEMENT = WRAPPER_ELEMENT;
	this.INPUT_TYPE = INPUT_TYPE;
	this.INPUT_SELECTOR = '.' + this.WRAPPER_ELEMENT.split(' ').join('.');
	this.INPUT_WRAPPERS = document.querySelectorAll(this.INPUT_SELECTOR);
	this.init();
	}

	init() {

wiseoldman / _print.js

Last active May 4, 2018 08:53

[PrintButton] Small snippet for creating a print button

	class PrintButton {
	constructor(PRINT_CLASS = '.print') {
	this.PRINT_CLASS = PRINT_CLASS;
	this.PRINT_TARGETS = document.querySelectorAll(this.PRINT_CLASS);

	if (this.PRINT_TARGETS.length) {
	this.addPrintListener();
	}
	}

wiseoldman / _debounce.js

Last active May 3, 2018 14:02

[Debounce] Small module to debounce (e.g. scroll and resize functions) #debounce

	function debounce (func, wait, immediate) {
	let timeout;

	return () => {
	const context = this;
	const args = arguments;

	let later = () => {
	timeout = null;
	if (!immediate) func.apply(context, args);

wiseoldman / _navigation-icon.scss

Last active May 2, 2018 14:26

[Burger menu] Burger menu with open/close animation #navigation