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.
For those that don't know, webpack 'is a module bundler' with a primary focus on javascript but can become much more powerful with additional loaders. For a while I'd been putting off learning how to use it as it looked quite complicated and I was little scared to just dive into it... but boy am I glad I did.
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.
Of course I moved all the javascript into webpack and I also stopped using the Node Sass compiler in favour of a webpack loader. Finally, I migrated all the images out of the build directory and included them within the webpack using a media loader, all this meant that I now had a 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).
Find out more about webpack and 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.
Find out more about the 11ty documentation, Github pages and Netlify.
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.
Find out more about SMACSS, BEM and 11ty plugins.
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.
View creating a sitemap in 11ty.
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.
View eleventy-plugin-recent-changes.
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.
I'm looking forward to progressing with the Typescript and Angular courses on Ultimate Courses - shout out to Todd Motto for his excellent work.
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!