[Stage] Year in review tweaks

docs/blog/year-in-review-2020/index.html

@@ -99,16 +99,16 @@ <h1>A year in review</h1>
                         <span class="body__section--post-tag">Web Development</span>
                         <span class="reading-time"></span>
                     </div>
-                    <p>In a year to forget in most other aspects, 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.</p>
+                    <p>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.</p>
 <h2>The old</h2>
-<p>Before these updates were made the site was still built on <a href="https://www.11ty.dev/">eleventy</a>, having previously being built on WordPress for a number of years. If you're interested in making the switch, have a look at this <a href="https://www.smashingmagazine.com/2020/12/wordpress-eleventy-static-site-generator/">Smashing Magazine article</a>.</p>
+<p>Before these updates were made the site was still built on <a href="https://www.11ty.dev/">eleventy</a>, 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 <a href="https://www.smashingmagazine.com/2020/12/wordpress-eleventy-static-site-generator/">Smashing Magazine article</a>.</p>
 <p>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.</p>
 <p>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.</p>
 <p><em>Find out more about <a href="https://jamstack.org/">Jamstack</a>.</em></p>
 <h2>The new</h2>
 <p>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 <a href="https://webpack.js.org/">webpack</a>.</p>
 <h3>Webpack</h3>
-<p>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, let's be honest, I was little scared to just dive into it... but boy am I glad I did.</p>
+<p>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.</p>
 <p>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.</p>
 <p>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 <code>src</code> directory outside of the build directory (which was still named <code>_site</code> from the default 11ty settings).</p>
 <p>The only issue I ran into was the dreaded FOUC [Flash of un-styled content]. To correct this I simple added the <a href="https://webpack.js.org/plugins/mini-css-extract-plugin/">MiniCssExtractPlugin</a> to the config and exported the CSS out as a separate file, allowing me to keep the js files set to <code>defer</code> on page load and avoid any FOUC.</p>
@@ -117,10 +117,10 @@ <h3>Webpack</h3>
 <h3>Eleventy templates</h3>
 <p>Now I have all the static files compiling into my build directory I wanted to consolidate my 11ty template files into the same <code>src</code> 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!</p>
 <blockquote class="twitter-tweet"><p lang="en" dir="ltr">Change the input directory!</p>&mdash; Eleventy (@eleven_ty) <a href="https://twitter.com/eleven_ty/status/1313962871634702337?ref_src=twsrc%5Etfw">October 7, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
-<p>I changed the 11ty config to look at the <code>src</code> directory and moved all my template files into here, nice and simple. At the same time I changed the output directory to <code>docs</code> for a fews of reasons: <em>1)</em> It looks cleaner than <code>_site</code> <em>2)</em> I used <a href="https://pages.github.com/">Github pages</a> for a lot of small brochure sites and it was habit <em>3)</em> It's a good option to have as a fallback - should I decide to move away from <a href="https://www.netlify.com/">Netlify</a> (not likely at the moment, I love Netlify) then I can use Github pages as an intermediate/fallback host.</p>
+<p>I changed the 11ty config to look at the <code>src</code> directory and moved all my template files into here, nice and simple. At the same time I changed the output directory to <code>docs</code> for a few reasons: 1) It looks cleaner than <code>_site</code> 2) I used <a href="https://pages.github.com/">Github pages</a> 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 <a href="https://www.netlify.com/">Netlify</a> (not likely at the moment, I love Netlify) then I can use Github pages as an intermediate/fallback host.</p>
 <p><em>Find out more about the <a href="https://www.11ty.dev/docs/">11ty documentation</a>, <a href="https://pages.github.com/">Github pages</a> and <a href="https://www.netlify.com/">Netlify</a>.</em></p>
 <h3>File cleanup</h3>
-<p>As mentioned previously the site was messy and unorganised, in all areas. There were unused <code>include</code> files and images. Huge chunks of had become a jumbled mess - I follow the <a href="http://smacss.com/">SMACSS</a> methodology for structuring my partials and <a href="http://getbem.com/">BEM</a> as my naming convention - there was <code>layout</code> styling in the <code>modules</code> 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.</p>
+<p>As mentioned previously the site was messy and unorganised, in all areas. There were unused <code>include</code> files and images, the styling had become a jumbled mess - I follow the <a href="http://smacss.com/">SMACSS</a> methodology for structuring my partials and <a href="http://getbem.com/">BEM</a> as my naming convention - there was <code>layout</code> styling in the <code>modules</code> 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.</p>
 <p>I tided up all of the images and <code>includes</code> 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.</p>
 <p><em>Find out more about <a href="http://smacss.com/">SMACSS</a>, <a href="http://getbem.com/">BEM</a> and <a href="https://www.11ty.dev/docs/plugins/">11ty plugins</a>.</em></p>
 <h2>Honourable mentions</h2>
@@ -139,17 +139,17 @@ <h3>Awesome websites</h3>
 <p>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!</p>
 <p><em>View the <a href="/awesome-sites/">awesome websites page</a></em>.</p>
 <h2>Coming up in 2021</h2>
-<p>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 2020 was to step back from some of my freelance work to allow more time for golf, exercise, personal development and a little downtime.</p>
-<p>I'm looking forward to continuing to progressing with the excellent Typescript and Angular courses on <a href="https://ultimatecourses.com/">Ultimate Courses</a> - shout out to <a href="https://twitter.com/toddmotto">Todd Motto</a>.</p>
+<p>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.</p>
+<p>I'm looking forward to progressing with the Typescript and Angular courses on <a href="https://ultimatecourses.com/">Ultimate Courses</a> - shout out to <a href="https://twitter.com/toddmotto">Todd Motto</a> for his excellent work.</p>
 <p>There's still some outstanding tasks for this site, including:</p>
 <ul>
-<li>Use my <a href="https://www.raspberrypi.org/">pi</a> to create a server with <a href="https://umami.is/docs/about">Unami</a> and move away from Google Analytics, <a href="https://dev.to/markosaric/why-you-should-remove-google-analytics-from-your-site-5c7h">for many reasons</a>.</li>
-<li>Dedicated pages for projects with more indepth content and imagery</li>
-<li>Create a filter for blog posts based on the tags</li>
+<li>Use my <a href="https://www.raspberrypi.org/">pi</a> to create a server for <a href="https://umami.is/docs/about">Unami</a>, self-hosted web analytics solution and move away from Google Analytics - <a href="https://dev.to/markosaric/why-you-should-remove-google-analytics-from-your-site-5c7h">for many reasons</a>.</li>
+<li>Dedicated pages for projects with more indepth content and imagery.</li>
+<li>Create a filter for blog posts based on the tags.</li>
 <li>I’m currently using <a href="https://nocodeapi.com/">NoCodeAPI</a> to create a Telegram message whenever my Netlify build is complete. I’m be looking to build my own API call for this so I can cherry-pick the information I receive in the messages and also separate out build reports and contact form submissions.</li>
 <li>Add pagination to blog posts - no more scrolling forever!</li>
-<li>Blog more</li>
-<li>Try to use more of my own imagery for blog posts</li>
+<li>Blog more!</li>
+<li>Try to use more of my own imagery for blog posts.</li>
 </ul>
 <hr>
 <p>Thanks for reading and please reach out on <a href="https://twitter.com/dan_canetti/">Twitter</a> if you have any questions or want to chat about any of the work I've discussed above.</p>

docs/changelog/index.html

@@ -95,6 +95,11 @@ <h1 class="--sub">Changelog</h1>
             <h2>Latest Changes</h2>
             <p>Capped at <strong>thirty (30)</strong> changes.</p>
             <ul class="changelog">
+                  <li>
+                        <h3>Commit: <a class="l alt" href="https://github.com/DanCanetti/danielcanetti.com/commit/39a6e2fd2a2403bf61baae8f0d3973e716e26e5a" target="_blank" rel="external" aria-label="Go to this commit">39a6e2fd</a></h3>
+                        <time>Thursday, 31 December 2020</time>
+                        <span>Align A/W title on mobile. Set night class to posts. 2020 year in review.</span>
+                  </li>
                   <li>
                         <h3>Commit: <a class="l alt" href="https://github.com/DanCanetti/danielcanetti.com/commit/6192b1abbb2755655fac70befeed83ad819ac3cd" target="_blank" rel="external" aria-label="Go to this commit">6192b1ab</a></h3>
                         <time>Tuesday, 29 December 2020</time>
@@ -240,11 +245,6 @@ <h3>Commit: <a class="l alt" href="https://github.com/DanCanetti/danielcanetti.c
                         <time>Wednesday, 04 November 2020</time>
                         <span>Recut project images. Project spacing at bottom reduced.</span>
                   </li>
-                  <li>
-                        <h3>Commit: <a class="l alt" href="https://github.com/DanCanetti/danielcanetti.com/commit/4124297dd0ad4ea521f53432de00dcdda09c5bbc" target="_blank" rel="external" aria-label="Go to this commit">4124297d</a></h3>
-                        <time>Tuesday, 03 November 2020</time>
-                        <span>Webpack added. Nighmode toggle disabled. Blog post design complete. Footer.</span>
-                  </li>
             </ul>
       </div>
 </div>