Category: Coding

How to deploy a Vuepress website for free, using Render

Leave a comment

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

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.