developing my site with eleventy - part 3

read the first two posts here:

Part 1
Part 2

wish-list & stuff I need to improve

imagery pipeline

At the moment, all images used on the site are simply uploaded to the images folder in the git repo. I have to manually make sure that they are at the correct dimensions and resolution before upload. I know that this is not ideal and could lead to issues as the site grows and I add more portfolio items and blog posts. I run image optimization during the Netlify deploy process, so at least there's that.

I would like to try a service that hosts the images elsewhere and serves optimized versions in modern formats as needed. Cloudinary seems to be a common choice for static sites and has a free tier.

the blog

My blog is very simple right now in terms of the usual features. I've got categories (tags), dates, and basic SEO metadata all set up. I even managed to put together a bit of a system that allows me to save "draft" posts when writing a new post on Forestry (otherwise every new post created in Forestry immediately gets built and deployed on save).

I found this dev.to post by Ru Singh detailing how she does the same thing, with a very similar set up to mine, and I tweaked it for my site. It's fairly simple and takes advantage of Eleventy's built-in permalink and collection features.

Basically, every blog post has a boolean option in the front-matter called "draft". On build, a bit of JavaScript checks for the value of the "draft" property, and if it is true sets that post's permalink to "false", which essentially prevents Eleventy from compiling it to the build directory. The script then also excludes the post from my "blog" collection, otherwise, the post title would still show up in my blog archive list even if the page didn't exist yet.

the code looks like so:

module.exports = {
  eleventyComputed: {
    permalink: data => {
      if (data.draft === true) {
        return false;
      } else {
        return data.permalink;
      }
    },
    eleventyExcludeFromCollections: data => {
      if (data.draft === true) {
        return true;
      } else {
        return false;
      }
    }
  }
};

It seems very clunky to me that I am checking for the same condition twice, but I am not sure if I can actually combine them more efficiently. It seems I need to list each front-matter data key separately and then perform any actions on each. Is there a better way to do this? Can I first wrap the data keys in an if statement? I need to learn more about objects and arrow functions I doth think.

I would like to add some more blog navigation features, such as previous and next links at the end of each post. As well as pagination wherever I render a list of all posts (like on my main blog landing page). But that can wait till I have enough posts to need pagination.

I'd eventually like to add comments, but it's not a must-have for me just yet. It is something that I am actively investigating though and looks a bit tricky for a static site.

styling and typography

I really need to completely redo my site's typography system. It's really not a system at all. I think it looks fine, but the spacing and sizing are not well thought out or consistent. And don't go looking now, but the blog post pages have completely different type sizes and margins than the rest of the site. Which is admittedly a bit silly.

Ideally, I would like to design a more purposeful, proportional type scale. Something like Utopia. And have that scale apply to all type sizes, all padding, and all margins. I have been working on such a system for a different site, so if it works out there I'll probably just port it back to this one.

I also need to clean up my CSS. There's a fair bit of unnecessary repetition and some unused stuff that I've just left commented-out.

Finally, I want to take advantage of Stylus's @import and @require and split my CSS into smaller chunks, just to make it easier for me to manage.

accessibility

I realize that I have a lot to learn about how to make highly accessible websites. But it's not just important, it should be a no-brainer, mandatory default to always develop sites with accessibility best practices and I am a bit ashamed that I haven't prioritized learning web dev this way.

I am excited to dive into this area and move beyond simple color contrast and image alt tags! I think a hard part is going to be performing meaningful tests and not just relying on automated validators that check the bare basics.

the end

Eleventy has been a real eye-opener for me. Web development can be much easier/less painful than good ol' hand-crafted HTML. But also more complicated at the same time. Going on this journey has made so many core concepts of web development platforms make much more sense. Even WordPress concepts are starting to clear up in my mind. Especially when it comes to templating. I am excited to try Timber or Blade with WordPress soon.

Next up for me: learning Vue or React. Or both. At the exact same time. Upside down.

Thanks for reading. I welcome any comments or critiques or poems (especially poems) regarding my methods for developing this site.

Cheers,
Brent