Did you know that you can use Google Sheets as a JSON API?

You don’t necessarily need to write server-side code for everything.  Sometime there is a much easier solution.  Did you know that you can use Google Sheets as an API endpoint?  Let’s take a look at a quick example. For a few years now, I have been archiving my tweets as Google Sheets documents.  There is …

Continue reading "Did you know that you can use Google Sheets as a JSON API?"

Playing with the OpenWeather API: The basics

Ever since Apple bought and shut down Dark Sky, I have been struggling to figure out what to replace it with.  I figured that this would be a good excuse to play with some weather APIs.  I have done this once before but that was with Rivets and YQL (neither of which I can necessarily …

Continue reading "Playing with the OpenWeather API: The basics"

Playing with more tabular data

Previously, we looked at ways to display tabular data on a webpage.  Let’s pick up where we left off, but with more data.  The last time, the data was hard-coded into an array.  This time, let’s use Axios to load some fake data from JSONPlaceholder. See the Pen Table Pagination – Example 1 by Joe …

Continue reading "Playing with more tabular data"

Get a user’s IP Address using just JavaScript (and an API call)

I have used IP Chicken for checking my public IP Address for pretty much 15 years (since hearing about it on TechTV).  Once upon a time, I tried writing my own alternative in ColdFusion but it is a lot of overhead for such a dumb thing.  I started wondering if I could do it with …

Continue reading "Get a user’s IP Address using just JavaScript (and an API call)"

Vue.js watch properties, Google Blogger APIs, and Dynamic Backgrounds

For today’s post, I wrote a pen where the goal was to take the latest photo posted to https://photos.jws.app/ and set it as the background image. In it, I used the blogger API to get a JSON object and I parsed content for the first href. I then pushed that into a second array and used the first array item as the background, using document.body.style.backgroundImage.

See the Pen
Auto-updating Background Image (using Vue.js and Axios)
by Joe Steinbring (@steinbring)
on CodePen.

I wanted to give the user the ability to change the background, so I output “thumbnails” (they are just the same images with a limited width) of all the images and added v-on:click to each one so that you can switch.  You’ll notice that when the user clicks an image, it changes the value of current Image to equal index. Vue watches the value of currentImage and changes the value of document.body.style.backgroundImage when it happens.

Vue watchers give you a lot of flexibility because you just need to change that index and vue does the rest.  There is no need to add a bunch of functions to an onclick event.

Have a comment or question?  Feel free to drop it in the comments, below.

[ Cover photo by Luke Chesser on Unsplash ]

How to get the user’s street address, using navigator.geolocation and MapQuest

Let’s say that you have a webform where you are collecting a user’s street address.  You can save the user a few minutes by defaulting the value for them.  In this example, we are using Vue.js, Axios, a MapQuest API, and navigator.geolocation to first get the latitude and longitude from the client and then send it off to MapQuest to get a physical address.

See the Pen
HTML5 Geolocation (how to get a street address)
by Joe Steinbring (@steinbring)
on CodePen.

This example builds off of our earlier Axios / Vue.js 2 APIs 101 post. But you will notice that there is a methods property, now. The this.geolocation() function is then kicked off within mounted().

Have a question or comment? Drop it in the comments and I will try to help.

Axios / Vue 2 101

Axios / Vue.js 2 APIs 101

If you have a WordPress-based website like this one, you might eventually want to try to make use of its APIs.  Using Axios and Vue.js, it is pretty easy to do.  At the time of writing this, Vue.js 3 exists but I am going to use Vue.js 2 anyways.

There are two API endpoints that we care about for the purposes of this demo:  https://blog.jws.app/wp-json/ and https://blog.jws.app/wp-json/wp/v2/posts.  The first one will get us all of the basic information from the blog (such as the title and the description).  The second API endpoint will get us a listing of blog posts.

See the Pen
Axios / Vue.js 2 APIs v1
by Joe Steinbring (@steinbring)
on CodePen.

There are two variables defined within data(): info and posts. Thanks to the way Vue works, you can reference {{info.home}}, {{info.name}}, and {{info.description}} before Axios has even finished getting the values from https://blog.jws.app/wp-json/.

Have a suggestion on how to better this example?  Feel free fork the pen and drop a link, below.