01

Google Form to Google Sheets to Vue Website

When @cogdog & @twoodwar Were Building Websites From Google Spreadsheets Years Ago https://t.co/Im7oCecvpg — Keegan?Long-Wheeler (@KeeganSLW) February 28, 2018 This post from Keegan kicked of this demo.1 The goal is to create a pretty flexible template for using Google Forms to Google Sheets to simple website. I opted to do this one in Vue but may get around to doing it in plain JS or jquery if time allows. The first thing you need to do is make the form and put in some entries. You’ll be happier if your form prompts aren’t super long. Make them readable just keep them concise.2 Once you’ve made a few entries so you have some data to work with, publish your spreadsheet as HTML. File>Publish to the Web. Click OK and what not. Don’t bother going to that link as Google has made that a fake promise. You just need the ID of the document in your current view. It’ll be something painful like 12WsyLvtfIPJkCXgEXsRkrI6dS0_K6brJikZqzkQa8TU and is visible in the URL after the /d/ but before the /edit. You can see the spreadsheet here. It doesn’t really matter but !full transparency! With that ID in hand, you want to go to a URL like so. You could manipulate the number in the URL to hit different pages in the spreadsheet. https://spreadsheets.google.com/feeds/list/12WsyLvtfIPJkCXgEXsRkrI6dS0_K6brJikZqzkQa8TU/1/public/values?alt=json You should […]

Vue and the WordPress REST API

I’ve continued to play around with using Vue and WordPress’s API. The Vue stuff is entirely new to me but it’s pushing my javascript knowledge. The main reason I’m excited about the WordPress/Vue (or whatever framework) combinations is simply speed. If you have any doubts give the pagination at the bottom of this demo site a shot. Crazy fast . . . and running stock on shared hosting. No caching plugins etc. The site is running the Vuetiful WordPress theme which has been an interesting thing to look at and see how it all works. Github is such a good thing. Below or linked here is the WP JSON/Vue pagination I eventually got working. It’s forked from this demo by Brian Krosgard.1 Even with that large head start, a few things hung me up. First, the navigation of the JSON elements is a bit tricky if you’re not used to it. You’ll want to use the _embed parameter2 to get access to the featured image data. That’s an option I didn’t know about previously. https://anth101.com/wp-json/wp/v2/posts?_embed&per_page=24&page=1 Since I named my main JSON objects ‘post’– to access the thumbnail URL, I’d use post._embedded[‘wp:featuredmedia’][0].media_details.sizes.thumbnail.source_url The part you need to pay attention to is the square brackets and the number following it. Notice there is no period between _embedded and [‘wp:featuredmedia’]. You might also […]