nabrown’s gists

nabrown / async-component-with-helper.vue

Last active March 22, 2020 21:53

Using a helper function to test Loading and Error components.

	<template>
	<div>
	<button v-on:click="showChild = !showChild">Toggle Child Component!</button>
	<child-component v-if="showChild" message="I am the child component."></child-component>
	</div>
	</template>

	<script>
	import LoadingState from '@/components/LoadingState'
	import ErrorState from '@/components/ErrorState'

nabrown / async-component-tester.js

Last active March 22, 2020 19:39

Test the Loading and Error bits of Vue async components

	const asyncComponentTester = function(importPromise, latency){
	return new Promise((resolve) => {
	setTimeout(() => {
	resolve(importPromise)
	}, latency)
	})
	}

nabrown / async-component-basic-usage.vue

Last active March 22, 2020 22:18

Basic asynchronous component import in Vue single file component

	<template>
	<div>
	<button v-on:click="showChild = !showChild">Toggle Child Component!</button>
	<child-component v-if="showChild" message="I am the child component."></child-component>
	</div>
	</template>

	<script>
	import LoadingState from '@/components/LoadingState'
	import ErrorState from '@/components/ErrorState'

nabrown / setNextInvoiceNumber.js

Last active April 1, 2019 13:34

Fetch the highest record from an Airtable base called 'Invoices', add 1

	setNextInvoiceNumber(){
	base('Invoices').select({
	maxRecords: 1,
	sort: [{field: "Number", direction: "desc"}]
	}).firstPage((err, records) => {
	records.forEach((record) => {
	this.invoiceNumber = record.get('Number') + 1
	});
	}, function done(err) {
	if (err) { console.error(err); return; }

nabrown / html-vue-boilerplate.json

Last active January 25, 2019 02:29

HTML Boilerplate w/ Vue Snippet for VS Code

	{
	"HTML/Vue Boilerplate": {
	"prefix": "bpv",
	"body": [
	"<!DOCTYPE html>",
	"<html lang=\"en\">",
	"$BLOCK_COMMENT_START",
	" $CURRENT_MONTH/$CURRENT_DATE/$CURRENT_YEAR",
	" ${1:Description}",
	"$BLOCK_COMMENT_END",

nabrown / unveil.js

Created November 30, 2018 17:48

Complete Unveil plugin, rewritten without jQuery

	;(function() {

	this.unveil = function(threshold, callback){
	var w = window,
	th = threshold \|\| 0,
	images = [].slice.call(document.querySelectorAll("img.unveil"));

	// test for browser support of `once` option for events
	// https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Safely_detecting_option_support
	var onceSupported = false;

nabrown / jquery.unveil.js

Last active November 30, 2018 18:09

Complete jQuery Unveil plugin

	/**
	* jQuery Unveil
	* A very lightweight jQuery plugin to lazy load images
	* http://luis-almeida.github.com/unveil
	*
	* Licensed under the MIT license.
	* Copyright 2013 Luís Almeida
	* https://github.com/luis-almeida
	*
	* Updated by Nora Brown to include `srcset`

nabrown / unveil-func-vanilla.js

Last active November 30, 2018 17:47

Unveil() function rewritten without jQuery

	function unveil() {
	// create an array of images that are in view
	// by filtering the intial array
	var inview = images.filter(function(img) {
	// if the image is set to display: none
	if (img.style.display === "none") return;

	var rect = img.getBoundingClientRect(),
	wt = window.scrollY, // window vertical scroll distance
	wb = wt + w.innerHeight, // last point of document visible in browser window

nabrown / unveil-func-jquery.js

Last active November 30, 2018 16:57

Unveil() function from jQuery.unveil.js

	function unveil() {
	// create an array of images that are in view
	// by filtering the intial array
	var inview = images.filter(function() {
	var $img = $(this);
	// if the image is hidden, don't bother
	if ($img.is(":hidden")) return;

	var wt = $w.scrollTop(), // window vertical scroll distance
	wb = wt + $w.height(), // last point of document visible in browser window

nabrown / MutationObserver-attributes.js

Created September 12, 2018 13:35

Using a mutation observer to watch for attribute changes

	(function() {

	// Select the node to observe
	var targetNode = document.querySelector('.sqs-add-to-cart-button');
	// The class we'll watch for
	var className = 'cart-added';

	// If the targetNode exists on our page
	if(targetNode){

Nora Brown nabrown