Nora Brown nabrown
nabrown
/ async-component-with-helper.vue
Last active
March 22, 2020 21:53
Using a helper function to test Loading and Error components.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "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", |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ;(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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * 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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (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){ |
NewerOlder