Initial commit

1 files changed, 70 insertions, 0 deletions

diff --git a/posts/phpetite.md b/posts/phpetite.md
new file mode 100644
index 0000000..9eafa29
--- /dev/null
+++ b/posts/phpetite.md
@@ -0,0 +1,70 @@
+# 89 Blog Posts in a Single HTML File
+
+2021-04-22
+
+*This is no longer the current setup of my blog*. I have switched back to Jekyll for performance reasons. I'll be leaving this post up as a point of reference though :)
+
+- - -
+
+This is my personal blog (if that wasn't already obvious). I currently have 89 blog posts living here. But I have done something magical today:
+
+All of these articles are rendered inside a *single HTML file*. 🤯
+
+## What Sorcery is This?!
+
+No magic here - I'm just using my own personal static site generator called [PHPetite](https://phpetite.org). You can find all the code and more information about PHPetite on the [official Github repo page](https://github.com/bradleytaunt/phpetite). Please note that this project is still very much a WIP, so go easy on me when pointing out bugs or issues!
+
+## Pingdom Stats
+
+Before we get into more details on how everything is built, let's take a quick look at some of my website stats (not that pure numbers are 100% accurate of user experience):
+
+- 99 Performance Grade
+- 951 ms Load Time
+- 231.3 KB Page Size (thank you Netlify compression!)
+
+[See all the Pingdom details for yourself](https://tools.pingdom.com/#5e169d6a82000000)
+
+Now the `Page Size` will certainly change as more blog posts are added over time, but if the total webpage size is roughly 230 KB with 89 blog posts, I figure that gives me the ability to add another 200 or so posts before I cross the [1MB threshold](https://1mb.club)
+
+I'll deal with how to load in the content more efficiently when that times comes...
+
+## What About Images?
+
+Good question. Since a large portion of my articles tend to be focused on design and CSS, visual examples are somewhat important. So how do I avoid loading in all the individual images on every single post into this single HTML "website"?
+
+Easy - I don't load any images at all.
+
+I now simply set any images that are not included in the current, visible `section` to `display: none`. This avoids breaking things with the RSS feed.
+
+Here is an image example of an old Dribbble shot I created years ago:
+
+<figure>
+<div class="img-parent">
+<img loading="lazy" src="/placeholder-image.webp" onclick="this.src='/public/images/aqua-ui-css-buttons.webp'" alt="Aqua UI buttons">
+</div>
+<figcaption><b>Click the placeholder to load in the real image</b><br>Example Dribbble shot for testing. Feel free to click the default image in order to load the correct Dribbble source. <a href="/public/images/aqua-ui-css-buttons.webp">View full size image</a>.</figcaption>
+</figure>
+
+I have noticed that Safari / Firefox on iOS renders the imagery as broken image links - I plan to look into this further to avoid that confusion. For now it works well on desktop Chromium and Firefox.
+
+    <figure>
+        <div class="img-parent">
+        <img loading="lazy" src="/placeholder-image.webp" onclick="this.src='https://res.cloudinary.com/bradtaunt/image/fetch/q_auto:low/v1570124593/https://uglyduck.ca/public/images/aqua-ui-css-buttons.webp'" alt="Aqua UI buttons">
+        </div>
+        <figcaption><b>Click the placeholder to load in the real image</b><br>Example Dribbble shot for testing. Feel free to click the default image in order to load the correct Dribbble source. <a href="https://res.cloudinary.com/bradtaunt/image/fetch/q_auto:low/v1570124593/https://uglyduck.ca/public/images/aqua-ui-css-buttons.webp">View full size image</a>.</figcaption>
+    </figure>
+
+## How's the SEO?
+
+Probably terrible to be honest. One single file for all blog posts is something Google will most likely frown upon. Whatever - it's my personal blog so I don't really give a shit.
+
+## RSS Feed
+
+If you recently added my old RSS feed, I'm sorry, but you'll have to update. The new feed is located at [tdarb.org/feeds/posts.xml](https://tdarb.org/feeds/posts.xml). I made this change to avoid spamming the current feed users.
+
+## Tasty Dog Food
+
+At the end of the day, by moving my personal blog over to PHPetite, it makes me more aware of current bugs and restrictions within the project. I feel like this will help me to improve this static site generator even more over time, instead of letting it die a slow death ignored on Github.
+
+I hope you enjoyed this little breakdown and maybe even want to try out PHPetite for yourself? 😉
+