2020 is a year to forget in most aspects, however danielcanetti.com has seen some major improvements and I've learnt some valuable new skills along the way. You may have noticed a visual change with a simpler layout and cleaner colour pallete, but there's much more to the update and here I'll take a deeper dive into the techincal changes and advancements that have been made to the site.
Before these updates were made the site was still built on eleventy, a static site generator, having previously being built on WordPress for a number of years - if you're interested in making the switch, have a look at this Smashing Magazine article.
By the end of 2019 the site [danielcanetti.com] had become increasingly bloated and unorganised. I wasn't taking advantage of the simplicity Jamstack offers and found updating the site to be a complicated and time-consuming process riddled with inefficient processes and incorrect build steps which regularly led to build errors.
Add to this the messy and unorganised root directories and that I was manually updating the build directory with js files and images (I was using Node Sass to compile CSS into this directory at least) and the simplicity of Jamstack is lost further.
Find out more about Jamstack.
One the biggest issues I had was just how un-organised the site was, my first action was to tidy this up. There were a number of steps to be taken here, firstly I had to figure out how to make sure the build directory was untouched when I was updating the site. Enter webpack.
It turns out it's really simple to use and has been a huge benefit to my development process, I can honestly say it's been just as game-changing for me as Sass - they're both now a core part of any new project I work on.
src directory outside of the build directory (which was still named
_site from the default 11ty settings).
The only issue I ran into was the dreaded FOUC [Flash of un-styled content]. To correct this I simple added the MiniCssExtractPlugin to the config and exported the CSS out as a separate file, allowing me to keep the js files set to
defer on page load and avoid any FOUC.
Once I had everything compiling correctly I wanted to find a way to be able to run 11ty locally (typicaly
eleventy --serve) and compile webpack (typically
npx webpack) simultaniously. Thankfully, I was able to follow this guide from Statickit and now all I need to run is
npm run serve and all compilation happens at the same time (including Sass).
Now I have all the static files compiling into my build directory I wanted to consolidate my 11ty template files into the same
src directory. Thankfully they're really good at support and they gave me a nudge in the right direction, it turns out it was in the 11ty documentation the whole time!
Change the input directory!— Eleventy (@eleven_ty) October 7, 2020
I changed the 11ty config to look at the
src directory and moved all my template files into here, nice and simple. At the same time I changed the output directory to
docs for a few reasons: 1) It looks cleaner than
_site 2) I used Github pages for a lot of small brochure sites and it was habit 3) It's a good option to have as a fallback - should I decide to move away from Netlify (not likely at the moment, I love Netlify) then I can use Github pages as an intermediate/fallback host.
As mentioned previously the site was messy and unorganised, in all areas. There were unused
include files and images, the styling had become a jumbled mess - I follow the SMACSS methodology for structuring my partials and BEM as my naming convention - there was
layout styling in the
modules file and vice-versa, along with huge chunks of unused CSS. Finally, there were a couple of 11ty plugins that I did not use still set-up and most of the template files had unused or legacy keys in their front matter which was just, again, messy.
I tided up all of the images and
includes as part of the migration to webpack and spent a good few hours cleaning up the front matter and unused template files. The CSS was cleaned up as part of the aforementioned visual update to the site.
I've improved my knowledge of the liquid templating language to refine my loops and limit asset loading to relevant pages.
Find out more about liquid.
To try and improve the user flow and keep the blog clean I've started to bundle some related posts together, this series on my Github Hackathon for example.
Using this helpful post from dev.to I've created a simple nunjucks template that generates a sitemap as part of the site build process.
I've added a nice little 11ty plugin which generates a changelog for the site. Seemed like a nice resource to have available and it should me keep on top of my commit messaging.
Making use of the Todoist API, I added a new page recently which displays a list of great websites I've curated over the past few years. Keep an eye out for a separate post on how this was built, it's coming soon!
View the awesome websites page.
Some great progress has been made in 2020, but there's still more to be done. The biggest change I've made at the end of this year was to step back from some of my freelance work to allow more time for golf, exercise, personal development, and a little downtime.
There's still some outstanding tasks for this site, including:
Thanks for reading and please reach out on Twitter if you have any questions or want to chat about any of the work I've discussed above.
Have a great new year, here's to a better 2021!