Images

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

Leave a comment

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 ]

Playing with the Notifications API

Leave a comment

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

Leave a comment

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.

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

Leave a comment

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

Leave a comment

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.

Editing SVG Images in CSS

Leave a comment

You might have noticed in my previous post about dark mode that there was a css rule to flip an SVG image from dark to light.

Inverting SVG Images With CSS Filter

See the Pen
Inverting images in CSS by Joe Steinbring (@steinbring)
on CodePen.

There are a few other things that you can do, though. The same filter function can do blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, sepia and saturate. Let’s take a look at one other example.

Blurring SVG Images With CSS Filter

See the Pen
Blurring images in CSS by Joe Steinbring (@steinbring)
on CodePen.

So, there are a few options available for you, out there. Have a questions? Feel free to drop a comment, below.

So, you want to enable dark mode on your website?

Leave a comment

Starting with macOS Mojave, Windows 10 version 1903, and Android Pie, users can set a system-wide preference for dark mode or light more within apps.  The idea is supposed to be that you set a preference once and every application on the device then respects that preference.  So, how do you get your website to respect those system preferences?

Well, starting in recent versions of (chromium versions of) Edge, Firefox, Chrome, and Safari, you can use the prefers-color-scheme media query.

Since it is a media query (and uses a binary setting), you can default it in one direction or the other.

Light Mode by Default

See the Pen
How to implement light mode (by default) in CSS by Joe Steinbring (@steinbring)
on CodePen.

Dark Mode by Default

See the Pen
How to implement dark mode (by default) in CSS by Joe Steinbring (@steinbring)
on CodePen.

As you can see above, all you need to do is wrap a chunk of CSS in “@media screen and (prefers-color-scheme: light)” or “@media screen and (prefers-color-scheme: dark)”.

Have any questions?  Feel free to drop a comment, below.

2020 Goals

Leave a comment

I mentioned back in October that I wanted to post more substantive content on this blog.  Starting on Thursday, I am going to start publishing weekly posts to the coding category.  A few weeks ago, I started posting regularly to photos.jws.  I want to try to do a photo-per-day kind of thing, moving forward.

My 2018 goals were to get reasonably good at the ukulele and travel somewhere adventurous.  I think that I succeeded.  My goals for 2019 were to keep traveling places and finish a side project before That Conference.  50% success is pretty good, I guess? 😉

My 2020 goals are to share more code (see above) and finish a side project.  I think that should be achievable?