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)"

Six ways to use data binding with Vue.js

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"

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 deploy a Vuepress website for free, using Render

Vuepress is a really cool static site generator.  I have been using it for jws.dev for months, now. In the case of jws.dev, I am hosting it on keybase but I recently discovered Render and it is able to do some things that I can’t do as easily with keybase. Render has a free tier …

Continue reading "How to deploy a Vuepress website for free, using Render"

Playing with the Notifications API

Over the years, I have spent a lot of time using modals and toast notifications to provide users with feedback about things that are happening in the background while a web page is active.  These messages could be about an autosave of data or about the expiration of a session.  Something more interesting has come about, though.  We now have the Notifications API.

Click here to test the Notifications API

So, how do you implement this magic?

See the Pen
Notifications API Demo
by Joe Steinbring (@steinbring)
on CodePen.

While you can read what’s going on via the CodePen embed, I recommend testing via the demo link.

So, how does the compatibility picture look?

On the desktop, it is pretty good. iOS doesn’t support it at all and Android supports it with caveats, though.

Have questions, comments, etc.  Feel free to drop a comment below.

Web Components 101

Web Components are a set of technologies that allow you to create reusable custom elements with functionality encapsulated away from the rest of your code. This allows you to define something like <js-modal>Content</js-modal> and then attach behavior and functionality to it.

In this post, I want to explore how web components do what they do.

See the Pen
Web Components 101
by Joe Steinbring (@steinbring)
on CodePen.

In the above pen, there are two examples. The first one (<js-description>Content</js-description>) uses a custom element (defined in JavaScript using customElements.define()). It is definitely useful but if you look at the second example (<js-gravatar>Content</js-gravatar>), there is now a <template> element that allows you to define what is within the custom element.

I plan on building on some of these concepts in a later post. Have a question, comment, etc? Feel free to drop a comment, below.