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.
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.