Nora Brown nabrown
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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Instagram Gallery</title> | |
| <script src="https://unpkg.com/vue@2.5.16/dist/vue.min.js"></script> | |
| <script src="https://unpkg.com/axios/dist/axios.min.js"></script> | |
| <style type="text/css"> | |
| :root{ | |
| --color: #95e9ef; | |
| --background: #1f1f1f; |
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
/ 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
/ FigureStandardRF.js
Created
July 27, 2018 22:31
Standard component using a render function
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
| export default { | |
| props: { | |
| src: { | |
| required: true, | |
| type: String | |
| }, | |
| type: { | |
| required: true, | |
| type: String |
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
| /** | |
| * 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` |
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; |
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 |
NewerOlder