This is something I’ve had on my “To Write” list for a very long time. The plan changed over time but it never actually got done because I couldn’t get what I wanted to do actually working, which as you can imagine put something of a crimp on getting this post done.
Many years ago, I built a demo called “AndKittens”. This was a simple Node application that used wildcard subdomains and the Bing Image Search API to let you find pictures of kittens and… whatever. You would use the subdomain to specify what you wanted, so for example, bacon.andkittens.us would return pictures of kittens and bacon. I thought it might be interesting to rebuild this in the JAMStack with a serverless backend.
Pardon the lack of updates around here. I’ve been writing more for my work blog and have started a new (small) book project. Plus, well, holidays and life. I had hoped to keep to a pace of one post per week minimum, but I’ve fallen a bit behind there. That being said, I think what I’ve got to share today is really freaking cool and I hope you do too.
I recently came back from connect.tech (one of my favorite conferences). I had the honor of giving not one, but two different talks. One of them was on static sites, or the JAMstack. This is a topic I’ve covered many times in the past, but it had been a while since I gave a presentation on it. During my presentation I covered various ways of adding dynamic features back to the static site, one of them being search.
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.