One nice shorthand used in a few places is: grid-column: 1 / -1 The rest of the CSS is fairly straightforward. You’ll notice that this makes our grid totally responsive, without a single media query! With repeat and auto-fill we tell the browser to repeat our flexibly-sized column as many times as will fit in the #app div (which in our case is 100% of the browser window). It doesn’t tell you anything about the volume of cocktail you’ll make, just what proportion the ingredients should be in relation to each other and the whole. Would be similar to a recipe that calls for 3 parts cognac, 2 parts triple sec, and 1 part fresh lemon juice. You can think of fr like the ‘parts’ in a cocktail recipe, for example: grid-template-columns: 3fr 2fr 1fr We give our grid some spacing, and set up columns to have a minimum width of 320px, and a maximum width of 1fr, meaning 1 fraction of the free space available. Then we set up some data for Vue to keep track of: data: We create a new Vue instance, and first tell Vue what element to control, with el: '#app'. Our Instagram gallery is going to be pretty self-contained, aside from two external Javascript resources and, of course, the call to the Instagram API. It doesn’t have to change the way you build your site or page. This is one thing I really enjoy about Vue: as with jQuery, you can just drop it into your page and use as-needed. In my case, the gallery was going to sit within a plain vanilla web page, not as part of a web app. All you can do with an access token is browse media, anyway.) Setting up the page shell I did, and nothing terrible has happened yet. (NB: With the second option, you are trusting that the company that made the generator tool is not storing or using the generated access token. You can follow the directions at the beginning of this post, or you can use this site to generate your own access token. Here’s another example of what we’re building: my Instagrams, on my website. give a taste of the ease and power of CSS Grid for building layouts.provide a real-world Vue example for Vue beginners. help anyone else who wants to build a simple display of their own Instagram feed.However, I came across one example app and saw that the call to Instagram couldn’t be simpler: let response = await fetch( ‘' + this.access_token )Īfter getting my own access token and successfully fetching my feed with it, building a simple gallery was surprisingly quick, thanks to Vue.js and CSS Grid. Googling was also of little help - I found mostly dire posts about Instagram shutting down public API access (which is true, but the access we need is supposed to be available till 2020, so: onward!). Client IDs, client secrets, access tokens? It all seemed like overkill for displaying an individual’s own public Instagram feed. I thought: “no problemo, Instagram surely has a simple API, and this use-case is probably their most basic Hello World! example.” However, perusing the Instagram API docs, which provide almost no actual code examples, only muddied the waters. A client of mine recently requested a simple image gallery for her site - one which would display her Instagram feed.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |