Paul Melero paulmelero

SimpleDebounce (Vue Mixin)

If you are listening to changes on an Event (DOM Events) to execute any side effects like performing network requests, you'd probably want to "debounce" your attached function executions.

This is an alternative to lodash.debounce but "vanilla js" packed as a Vue SFC to import it as a mixin.

DeepClone-js

Utility to clean up circular references while creating a new reference of an object performing a deep copy (as oposite to a shallow copy). Bear in mind it doesn't work with some data types: Date, Map, RegExp, Set, TypedArray...

📦 Install

npm i -S gist:0bce1161cfd2aa91ae7cad9abb42c342

Image Exists

Cheks if a given URL for an image is available over the net. It uses a simple DOM trick to test it. Be careful as <img src> can be an XSS attack vector: https://owasp.org/www-community/xss-filter-evasion-cheatsheet

📦 Install

npm i -S gist:b2efa76be5314a332cfcfd1d025f4601

⚠ Warning

The gist version has been deprecated. Moved to https://github.com/graficos-net/html-cleanser and fixed some security issues! Please see instalation section for updates!

	/*
	This needs to be in the store/index.js
	*/

	const mutationTypes = {
	SET_MOBILE: 'SET_MOBILE',
	}

	const checkIfMobileOnServerSide = ({ req, isServer }) => {
	if (isServer) return false

	// `.truncate-1-line` and `truncate-2-lines`
	@each $lines in (1, 2) {
	:root .truncate-#{$lines}-line#{if($lines > 1, 's', '')} {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: $lines;
	-webkit-box-orient: vertical;
	}
	}

	/// <reference types="jest" />

	import { mount } from '@vue/test-utils'
	import IntersectionComponent from './IntersectionComponent.vue'

	const mountComponent = props =>
	mount(IntersectionComponent, {
	propsData: {
	callback: jest.fn().mockImplementation(isVisible => isVisible),
	...props


	/**
	* Takes a generator function that can yeild async functions.
	* When the wrapped generator is called again, the previous call will cancel ASAP.
	* Note: it won't cancel in-flight requests made (see: AbortController)
	* @param {GeneratorFunction} generator
	* @see https://dev.to/chromiumdev/cancellable-async-functions-in-javascript-5gp7
	* @author Sam Thorogood
	* @returns {(...args: any[]) => Promise<any>}
	*/

	<template>
	<p id="one" class="hello">hello world</p>
	</template>

	<style scoped>
	#one {
	color: blue;
	}

	.hello.hello.hello.hello.hello.hello.hello.hello.hello.hello.hello.hello.hello {

	const quiz = {
	...{ a: { b: 1, c: 3 }},
	...{ a: { b: 2 }}
	}