Before I begin, a quick note. While what I've built seems to be working ok, I'm still tweaking things a bit so please forgive me if anything doesn't work exactly right. Be sure to reach out and let me know if you run into any issues. Alright, so the topic of this post is how you can incorporate an email subscription service into your Jamstack site, specifically a blog. While most blogs, including mine, offer an RSS feed, I've not been a big user of RSS readers myself. I like the idea, it just hasn't worked well for me as I forget to run them, fall behind and then feel like it's a chore to go through my various subscriptions. Instead, I prefer signing up for an email when a new post is released. Not every blog has that service and in cases like that I've used services like IFTTT to create my own subscription. I decided to take a look into what it would take to add such a service to my own blog.
When I don't blog on a regular cadence (once a week), I start to whig out a bit, and despite the absolute huge amount of content here (notice I didn't say good content), I begin to stress out when I don't meet that self-imposed schedule. On a whim, I decided to work on something that's been in my queue for a while but realized that in order for that post to be done, I needed some recent content on the blog.
For a large portion of my development career, I've been a databaser user of some sort or another. I spent many years working with app servers (ColdFusion) and almost always they were tied to a SQL database of some sort. In the beginning this was Microsoft Access (it was really easy to use), then SQL Server and eventually MySQL. Most recently I've made more use of NoSQL databases, like Mongo and Fauna. While I definitely prefer NoSQL databases, after years of using SQL, I still have a bit of fondness for it. It's with this in mind that I decided to look into integrating MySQL with Eleventy. Over the weekend I built a quick demo and was planning on blogging sometime this week, but was inspired to get this out sooner when I saw this cool Tweet:
A while back a friend wrote me with an interesting problem. He has a form where one of the fields can have near a thousand or so entries. It didn't impact load time that much for his users, but it did create a dropdown control that was difficult to use. He was curious to see if there was a way to let the user filter the dropdown to make it a bit more easier to read. Here's what I came up.
A quick tip before I turn my brain off for the weekend (that's not entirely true, tonight I plan on building LEGO). I've blogged before about the PDF Embed API, it's one of the tools my new job involves. If you didn't see my first post on it, definitely give it a quick read: Using the PDF Embed API with Vue.js Today's tip is a bit simpler - how can we use the PDF Embed API to only load a PDF once it's actually visible in the DOM?
For a while now I've been meaning to take a look at the Image plugin for Eleventy and this week I finally got around to building a simple demo. I'm not sure I used the plugin exactly as intended (I'm great for using tool the wrong way!), but once I wrapped my head around the plugin, it was fairly simple to get it working. My idea was this:
I primarily use Netlify for my Jamstack hosting service, but I also make use of Vercel quite a bit as well. Vercel's CLI is quite nice and tends to be a bit more intelligent about figuring out your site's requirements with little to no configuration. Other things, like their serverless functions, are a bit easier to use as well. That being said, I've recently run into a small issue with Eleventy and Vercel that I thought I'd share in case others hit as well. It isn't a bug, but a combination of a few things together that may trip you up.
A few days ago someone (sorry, I forgot to Like the tweet so I'd remember) asked me how I create content for my blog, specifically the tech stack and process. About a year ago I wrote about my tech stack in general (My Tech Stack (So Far) in 2020) but I didn't go deep into the "process" of writing here. It's not too terribly complex and it works well for me. Since I'm the only user, I'm the only one I have to keep happy so keep that in mind if what I describe below seems weird or crazy.
A few weeks ago I posted a tutorial on using PDFs with Eleventy. In that post I described how to use a data file to scan a directory of PDFs and make them available to a Liquid template. I then followed up that post with another, where I described using Adobe's PDF Tools API to generate thumbnail images from PDFs. I thought it would be nice to combine the two so I could have my Eleventy site both list the PDFs as well as generate thumbnails. Here's how that looks with me spending about five seconds on layout: