Skip to content

Instantly share code, notes, and snippets.

Avatar

Nora Brown nabrown

View GitHub Profile
@nabrown
nabrown / async-component-with-helper.vue
Last active Mar 22, 2020
Using a helper function to test Loading and Error components.
View async-component-with-helper.vue
<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
nabrown / async-component-tester.js
Last active Mar 22, 2020
Test the Loading and Error bits of Vue async components
View async-component-tester.js
const asyncComponentTester = function(importPromise, latency){
return new Promise((resolve) => {
setTimeout(() => {
resolve(importPromise)
}, latency)
})
}
@nabrown
nabrown / async-component-basic-usage.vue
Last active Mar 22, 2020
Basic asynchronous component import in Vue single file component
View async-component-basic-usage.vue
<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
nabrown / setNextInvoiceNumber.js
Last active Apr 1, 2019
Fetch the highest record from an Airtable base called 'Invoices', add 1
View setNextInvoiceNumber.js
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
nabrown / html-vue-boilerplate.json
Last active Jan 25, 2019
HTML Boilerplate w/ Vue Snippet for VS Code
View html-vue-boilerplate.json
{
"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
nabrown / unveil.js
Created Nov 30, 2018
Complete Unveil plugin, rewritten without jQuery
View unveil.js
;(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
nabrown / jquery.unveil.js
Last active Nov 30, 2018
Complete jQuery Unveil plugin
View jquery.unveil.js
/**
* 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
nabrown / unveil-func-vanilla.js
Last active Nov 30, 2018
Unveil() function rewritten without jQuery
View unveil-func-vanilla.js
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
nabrown / unveil-func-jquery.js
Last active Nov 30, 2018
Unveil() function from jQuery.unveil.js
View unveil-func-jquery.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
nabrown / MutationObserver-attributes.js
Created Sep 12, 2018
Using a mutation observer to watch for attribute changes
View MutationObserver-attributes.js
(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){