Nora Brown nabrown
nabrown
/ MutationObserver-childList.js
Last active
September 12, 2018 13:34
Using a mutation observer to watch for added child nodes
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-cart-root'); | |
| // If the targetNode exists on our page | |
| if(targetNode){ | |
| // Watch when nodes are added to targetNode, or its descendants | |
| var config = { |
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 functional> | |
| <figure :class="props.type" v-on:click="listeners.click"> | |
| <img :src="props.src" /> | |
| <figcaption v-if="slots().default"> | |
| <span><slot></slot></span> | |
| </figcaption> | |
| <div class="tags" v-if="props.tags && props.type != 'framed'"> | |
| <span v-for="tag in props.tags"> {{ tag }}</span> | |
| </div> | |
| </figure> |
nabrown
/ FigureFunctionalRF.js
Created
July 27, 2018 22:33
A functional 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 { | |
| functional: true, | |
| props: { | |
| src: { | |
| required: true, | |
| type: String | |
| }, | |
| type: { | |
| required: true, | |
| type: String |
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 |
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> | |
| <figure :class="type" v-on:click="$emit('click')"> | |
| <img :src="src" /> | |
| <figcaption v-if="$slots.default"> | |
| <span><slot></slot></span> | |
| </figcaption> | |
| <div class="tags" v-if="tags && type != 'framed'"> | |
| <span v-for="tag in tags"> {{ tag }}</span> | |
| </div> | |
| </figure> |
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 id="app"> | |
| <FigureStandardSFC | |
| src="cat-basking.jpg" | |
| type="post-it" | |
| :tags="['cat','feline','fuzzy','gray']" | |
| @click="alertHello">Cat basking in the sun.</FigureStandardSFC> | |
| <FigureStandardRF | |
| src="red-tailed-hawk.jpg" |
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
| :root{ | |
| --color: #95e9ef; | |
| --background: #1f1f1f; | |
| --spacing: 1rem; | |
| --speed: 1700ms; | |
| --fontsize: 2rem; | |
| } | |
| body{ | |
| margin: 0; | |
| padding: var(--spacing); |
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
| var app = new Vue({ | |
| el: '#app', | |
| data: { | |
| access_token: "your access token here", | |
| url: "https://api.instagram.com/v1/users/self/media/recent/", | |
| username: "", | |
| grams: [], | |
| next_url: "", | |
| error: 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
| <div id="app"> | |
| <h1><a :href="instapage">@{{ username }} on instagram</a></h1> | |
| <template v-if="grams.length > 0"> | |
| <div v-for="(gram, index) in grams"> | |
| <a :href="gram.link"> | |
| <img :src="gram.images.standard_resolution.url" :alt="gram.text" /> | |
| </a> | |
| </div> | |
| </template> | |
| <div v-else class="loading"></div> |
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"> |