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?"
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"
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"
So, you need to show tabular data on a webpage and make it as digestible as possible? For demo purposes, we are going to look at the top 10 most populous municipalities in Wisconsin. See the Pen Table Zebra Striping – Example 1 by Joe Steinbring (@steinbring) on CodePen. In the above example, we just …
Continue reading "Playing with tabular data"
Last week, we looked at string concatenation and I figured that this week, we could see what you could actually do with it. Back in 2014, I used a calculator to play around with PhoneGap. It might be time to play with the concept again. See the Pen Vue.js Calculator – v1 by Joe Steinbring …
Continue reading "More fun with string concatenation"
I haven’t had a lot at jws.app since registering the domain so, I spent a bit of time over the past few weekends and finally built a website there. The idea was that it pulls recent activity from travels.jws.app, photos.jws.app, blog.jws.app, github, and DEV and auto-updates the website based upon those feeds. I wanted to …
Continue reading "I created a new website"
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 …
This is going to be a pretty quick post. Two weeks ago, we looked at how use watchers in Vue.js. This week I figured that we would look at computed properties and methods. See the Pen Vue.js Computed Value vs Method vs Variable by Joe Steinbring (@steinbring) on CodePen. In the above example, we are …
Continue reading "Six ways to use data binding with Vue.js"
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
See the Pen
Auto-updating Background Image (using Vue.js and Axios) by Joe Steinbring (@steinbring)
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 ]