Giving the JAM stack a go Part 2

I'm giving the JAMstack a go part 2.

Looking for Part 1?

I spent a fair amount of time and effort in framework exploration while rebuilding this site. I swear I've built it about 70% of the way in five different technologies, before finally settling on something and completing it.

It was more of a matter of finding something that I don’t use regularly at work, see if I enjoy building in it, and if it works for a server rendered, SEO friendly site.

The old site was built in Wordpress, just using Custom Post Types for posting portfolio projects. I never really spent much time on blog posts, and honestly, I built it about four years ago, so, it was definitely time for an revamp, and a new focus on content.

I initially used Tachyons as the CSS framework on the old site. It served its purpose, but for this one, I wanted to explore it with no framework, and using CSS grid to build things out. It's my site, and I don't necessarily have to answer to people In some random department, that for some reason still use IE.

The first thing I built my site in was Flask. At the time, I was doing a ton of web scraping at work, and still using Python for that.

I was unsure about hosting Python apps, and haven't really explored using Gunicorn and NGINX together at the time. I liked the framework, and the idea was to use Flask and SQLite together for a small, quick, performant site. In the end, I liked it, but I don't like the pain of PIP and Virtual Environments. I just ended up noticing the similarities to Express, and longing for npm every time I worked on it.

For the second iteration, I used Next.js. It seemed like a great choice, and while I'm quite familiar with create-react-app, it seemed like the next logical step. At the time I was still interested in keeping my Wordpress install if I was going to go the static generator route, but just using it as a cached REST API for my content. I feel this is where my flaw was at the time. I seem to remember building multiple versions of the API request to the archive post list endpoint, then querying the single by slug in create-react-app, but not being able to get the slug pages to generate when I transferred my test I built in create-react-app to Next.js. Either I couldn't find a decent example implementing Wordpress, or some odd limitation that worked in the SSR build, but not with the static generator. The actual reason fails me, but that's what I'm remembering about the experience. This made me move to Gatsby.

I really liked working with Gatsby, the community, the backing, the themes, the Wordpress integration, awesome!

What I didn't like was I was finally getting sick of trying to force React into everything I worked on, just for the sake of using it. I also wasn't entirely sold on GraphQL. The foreign concept of edges and nodes, and lack of companies using it in production at the time compared to a traditional API made me question that as the answer to my tech stack for the project. I feel it's something I'll explore more in the future, but not for this project. This made me shelve the Gatsby site, and move to building two more iterations in two different technologies simultaneously.

I chose Nuxt for one version, and Express backed by a SQLite DB for the other. Nuxt definitely rocks, and I felt most at home using it, as my go-to stack at work For new projects is Vue, Node and MSSQL. My speed of productivity with these two technologies exceeds the rest of the frameworks I've mentioned in this post, and I could hammer things out quite quickly.

Does this satisfy my need of finding something I don't use regularly at work to build this with? It sure doesn't.

If I remember right, Somewhere around this time, I stumbled into somebody talking about Eleventy on Twitter. What is this Eleventy thing that didn't get 15 million in backing? Hmmmmm, I looked further, "I'm familiar with Liquid from some Shopify development I've done, but what the hell is Nunjucks?" Intriguing, so you mean to tell me that this Nunjucks thing is pretty much Just like EJS or Jinja2, just clean HTML with Logic? I don't have to deal with find and replace everything ' class=" ' to ' className=" ', one node script to build, and the builds are screaming fast, just like the end user load times? Sold!

The whole process of building this thing in Eleventy was super enjoyable!

I did have two slight hang ups though. I was thinking about actually spending time writing posts on my site, gasp, I'll make another post about that. What if I actually do it, and I have so much content that I need pagination? I tried everything under the sun trying to get pagination to work from multiple markdown files. The docks on pagination weren't really making sense for my use-case, BUT! That specific section was kindly revamped at the same time I was having my issue, crazy! I still wasn't able to get it to work the way I wanted to in the end, but I guess I'll keep working on it. As a whole, the framework is super fun to work with, and I really enjoy the simplicity of it!