Welcome to another Vue Quick Shot - my series of posts of quick (kinda) solutions for common web development issues with Vue.js. Today's Quick Shot is an interesting one. First off, I'm not entirely sure what I'm sharing makes sense. I always encourage folks to leave comments with their suggestions but even more so for today's post - if what I'm sharing is problematic, I really want to know.
I've blogged a few times on the Netlify Analytics API ("Building a Netlify Stats Viewer in Vue.js") and "Integrating Netlify Analytics and Eleventy") and today I've got some more code to share. Now - every time I do this - I remind folks that there is not a published doc for the Netlify Analytics API. That is still the case. Today I'll also add that what I'm sharing is very rough. It worked for me and it's up on GitHub (repo), but just keep in mind that I wrote this as a tool for myself. If it can help you too, great!
I've been running a "successful" blog for about seventeen years now. I say "successful" as the measure of success has certainly changed over the years. My posts used to get near five hundred page views each, and that's even with me blogging quite a bit more than I do now. Of course, I started blogging before Twitter existed and a lot of my posts were merely short informational notices for my readers. Nowadays the traffic isn't nearly as good and comments are way down. Some days I even want to quit. But I enjoy building things and writing about them so I'm not going to stop yet.
A common user interface feature you'll see on sites is a counter by form fields to let you know how much you've typed. Typically this is when a certain minimum or maximum number of characters are required. Instead of simply displaying an error ("You haven't typed enough, dangit!"), this feature will give you a "live" update as you type of how many characters have been typed so far. Here's a quick example of how to do this in Vue.js.
A few months ago I wrote about working with event sources in Pipedream. The folks at Pipedream have continued to work on the feature and have been making it easier to build them with a new command line tool. At the time I'm writing this, unfortunately, Windows support is not ready yet. While typically a show stopper for me, I was given a temporary build of the command line tool for Windows to help test. (You can follow this issue for more information.) Normally I don't like to blog about stuff that isn't generally available to all, but as it will be available sometime soon, I decided to go ahead anyway. And I built something really cool I want to share so that's another reason to talk about this now!
Back in March I did a week of quick Vue tips (you can see them all here). I really enjoyed that set of blog posts as it let me show some quick and simple "X with Vue.js" examples. To be honest, I haven't really thought about them for a while, but earlier this week a reader posted a comment on one of them and for some reason, that got the creative juices flowing again. With that in mind - I'm happy to share another Vue Quick Shot - using the Page Visibility API.
I really enjoy components in Vue.js as they feel very nicely done in terms of functionality and usage. Like most of Vue, you can use them simply to abstract away some UI logic or get very complex. Part of why I love Vue is that it feels like it excels at working at multiple levels - from the "I'm just playing around" to "I'm building the Next Big Thing." Recently I started thinking about a particular component use case. Imagine the following: