gangsthub

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.

gangsthub

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

const mutationTypes = {
  SET_MOBILE: 'SET_MOBILE',
}

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

gangsthub

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

gangsthub

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

gangsthub

⚠ 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!

gangsthub

// `.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;
  }
}

gangsthub

/// <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

gangsthub

/**
 * 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>}
 */

gangsthub

<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 {

gangsthub

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