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 ]
Recently, I was playing around with the Milwaukee County Transit System BusTime API when I came across an interesting problem.
For years, I have wanted to develop for Android but I haven’t gotten off my butt and done it. I recently decided to force myself to explore development, using PhoneGap. Today, I wrote a very basic proof of concept. I have to admit that it was pretty easy. I wrote the app using HTML, JS, and …
Continue reading "First attempt at a mobile app, using PhoneGap Build"
These days, it seems like there are an almost infinite number of device types. There are phones, tablets, phablets (AKA really big phone), small laptops (like netbooks), big laptops, and desktops. The key to dealing with these devices is simply responsive design and extensive compatibility testing. You should not deviate from that! With that said, …
Continue reading "How to detect a device type, based upon window width"