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.

I created a travel tumblr blog

This is going to be a pretty quick post.  I spun up the tumblr blog Joe Travels and gave it the twitter feed @JWSTravels.  It posts one pseudorandom photo per day from my travels.  I stocked up the queue with roughly four months of posts.  I’ll refresh it with some more photos later in the …

Continue reading "I created a travel tumblr blog"

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.

How to Find Cheap Airfare

As you might know, I really enjoy traveling.  I also really enjoy finding a good deal on travel.  There are a few good resources for finding cheap airfare. Notification Services Scott’s Cheap Flights I discovered Scott’s after I booked my 2018 China trip.  They have a team of people who look for airfare deals.  Scott’s …

Continue reading "How to Find Cheap Airfare"
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.

Editing SVG Images in CSS

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.