Adding Google Calendar to your JAMStack

Adding Google Calendar to your JAMStack

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.

read more

Serverless JAMStack AndCats Demo

Serverless JAMStack AndCats Demo

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.

read more

Building a Custom Sound Board with Vue and IndexedDB

Building a Custom Sound Board with Vue and IndexedDB

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.

read more

Adding Search to your Eleventy Static Site with Lunr

Adding Search to your Eleventy Static Site with Lunr

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.

read more

Using IndexedDB with Vue.js

Using IndexedDB with Vue.js

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.

read more

Why I'm Digging Eleventy

Why I'm Digging Eleventy

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.

read more

Building a Netlify Stats Viewer in Vue.js

Building a Netlify Stats Viewer in Vue.js

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.

read more

Using OAuth and Vue.js to Build an Untappd Stats Page

Using OAuth and Vue.js to Build an Untappd Stats Page

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.

read more

An iTunes Audio Enabled Search Built in Vue.js

An iTunes Audio Enabled Search Built in Vue.js

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

read more