It’s been a while since I’ve talked about one of my favorite APIs, IndexedDB. Mainly because as cool as it is, there hasn’t been much new about it recently. That being said, I was thinking about how I’d use it in Vue.js and decided to build a few demos to test it out. This post is not meant to be an introduction to IndexedDB, please see that previous link for a good guide. You can also check out jsMobileConf where I’m giving a talk on client-side data storage next month. For my exploration, I built two demos. The first one is rather simple and makes use of CodePen and Vue embedded directly on the page. I.e. a “non-app” use of Vue. (I’m still struggling with the best way to refer to that!) The second demo is more complete, uses a full Vue application, and works with Vuex. As always, I’m hoping folks will provide feedback, suggestions, and share their own examples.
It’s been quiet around here lately and for that I apologize. Between the new job and a bunch of trips and presentations, I’ve not had much time for exploration. Next week I’m giving a presentation at connect.tech on static sites (The Platform Formally Known as Static). It’s been a while since I presented on static sites (the JAMStack) so I’ve been updating my slide deck in preparation. When I present on the JAMStack, I typically focus on one particular engine to give folks a “feel” for what it’s like to work with static sites. On a whim, I decided I’d give Eleventy a try. I’ve been hearing about it for a while and thought it would be nice to do a bit of research.
I’m in somewhat of a “stats building” mood lately as this is my second (see last month’s post on building a stats page for Untappd) post on the same topic. For today’s demo I’m building a stats viewer for Netlify’s cool Analytics feature. (You can read my review of the feature from when it launched.) This particular demo actually has less stats than Netlify but it does have a cool feature they don’t support yet - changing the date range.
Every now and then I try to remember to remind folks - I hope that my readers assume when I share stuff like this that I’m sharing as I learn. This is my first time doing anything with OAuth and Vue.js so most likely there’s ways to do it better. As always, I strongly encourage my readers to leave me a comment below if they have any suggestions whatsoever. I wanted to build something with Vue.js that would use OAuth to talk to a service. At the same time, I also wanted to do something with Untappd. Untappd is a “social network” type app for beer drinkers. I pretty much ignore the “social” aspect and just use it to record the unique beers I drink. Whenever I try a new beer I’ll record and rate it in the app.
This will be a quick post and credit for the idea goes to Stacey Higgenbotham and her post from last year, “How to trigger custom Alexa notifications from a smart home event”.
(Before I begin, a quick note. The iTunes API will randomly throw CORS issues, most likely due to a misconfigured server in their network. To use this in production I’d add a serverless proxy. You may, or may not, run into this while testing.) When I present on Vue.js, one of the demos I show makes use of the iTunes Search API. It isn’t necessarily that exciting of a demo, and I don’t use iTunes very often, but the fact that it has interesting data and does not require a key of any sort makes it a good candidate for simple demos. I thought I’d quickly demonstrate this with Vue.js in the simplest form possible, and then work through some updates to improve the application.
This weekend I was on the road and had some time to build (yet another) application with Vue.js. I don’t think this one necessarily does anything terribly cool. At minimum it was more “exercise” for my Vue muscles and provides another demo I can share with folks. As always though, if you have any suggestions or feedback in general, just let me know. If posts like these aren’t helpful, also free free to share!
For a while now my go to service for hosting static sites “for fun” has been Surge. While I host my blog on Netlify and absolutely consider it the “gold standard” for static sites, I try to reserve my usage there for “real” sites, i.e. not things I’m playing around with or temporary examples. I had heard of Zeit of course and knew of their cool command line deployment, but outside of a few Node.js demos, I hadn’t really thought of it.
I decided to spend my lazy Sunday morning working on a quick Vue.js post. Geolocation is one of the older and simpler APIs you can use with your web browser so this article won’t necessarily be that exciting, but I thought a quick demo of the API with Vue, and a few variations, could be useful to folks. As a reminder, web pages that use Geolocation must be run on either localhost or an https server. This is a security precaution and… let’s be honest - there is zero reason to be using a non-secure server in 2019.
For the past year (ok, nearly a year), I’ve worked as a Developer Experience engineer at American Express. My work there had me interfacing with product owners to help them present the best developer experience possible. This involved everything from simple documentation improvements to helping work on tools to improve developer facing APIs. While I worked with some great people, the role wasn’t a great fit for me. Also, I’ve had some changes at home (good changes!) that will allow me to have a more public facing role, to spend more time on the road, and generally do what I love - help others.