Blog - Person MeetupLatest Blogposts2023-08-20T20:04:00Zhttps://personmeetup.ca/blog/Leslie Swancontact@personmeetup.ca📃 I'd Rather Go To The Moon2023-08-20T20:04:00Zhttps://personmeetup.ca/blog/id-rather-go-to-the-moon/Thinking back about neglected projects and self-criticism.<p>Around the start of summer, I gave myself the objective of finishing projects that I had previously started. My plan was to focus on one project at a time, writing down any bottlenecks I came across. I had thought that highlighting those issues would give me focus on what exactly I needed to fix. I'd approach each bottleneck individually, rather than trying to take care of them all at once. It was supposed to be a sustainable way to approach development.</p>
<p>That plan didn't work out. In fact, I ended up with <em>more</em> projects on my plate than before. I've finished some long overdue projects, sure, but I also began concepting and/or actualizing new ones. Some of those projects I would manage to finish, but some would remain just as concepts; often I would begin to flesh them out before setting them aside. Those unfinished, neglected projects would find themselves in a growing pile of other ideas that have also been left for a future date.</p>
<p>I have a love/hate relationship with this pile of ideas. On the one hand, I can pull something from it and be garanteed it will be of interest to me! On the other, there are some projects that have a magnettic pull to them from either how long they've been shelved or how complete they are. And as the pile fills with more ideas to realize and skills to develop, it's gotten big enough that I occasionally get distracted by it when doing things for either school or work.</p>
<p>It's also worth mentioning that this summer has given me more long-term projects I'll be working on alongside <a href="http://covalriasow.com/">Covalria Sow</a> and <a href="https://www.moddb.com/mods/portal-catalyst">Catalyst</a>, both of which I've been doing writing for. As their stories have become more developed, I've been feeling more of a pull as I get closer to writing the scenes I've been thinking about for ages. While I appreciate the motivation that gives me, it still adds to the chaos of figuring out what to work on.</p>
<p>Another long-term project that also happens to involve writing is this website. Emotionally, it's one of the oddest projects I've worked on since I've felt it was neglected while actively developing it. My mindset was that since I wasn't updating the blog spesifically, the changes I was making to my site were pointless. As much as I value the <a href="https://personmeetup.ca/blog/tags/perspective/">“Perspective”</a> tag, the root idea of most articles with it up to this point is "I'm neglecting the blog."</p>
<p>In thinking that, I forget about everything else I'm doing at the time. The collection of completed projects fade from my sight, and the weight of the other unfinished projects begin to take their toll on my shoulders. I put all my worth into this one single project, which becomes a representation of all the other projects I've failed to finish. It's a pretty irrational perspective, especially when you consider how I'm overloaded with things to work on!</p>
<p>I often find myself falling back into this self-critisim again and again. It always presures me to do something, downplays my accomplishments, or punishs me for missing the exceedingly high bar I set for myself. When I said <a href="https://personmeetup.ca/blog/facing-creative-road-blocks#personal-troubles">“you are your own worst enemy”</a>, this was the mindset I was making reference to. In the case of this website, that self-criticism was telling me "you should be writing articles."</p>
<p>In reality, I'd rather be doing other stuff. I didn't do video editing for the longest time just because I lost confidence with it; I had other projects and ideas I was invested in. I had stopped video editing towards the end of my senior years at high school, which were a time where I was engaging more with level design, music production, and programming. We only have so much time we can spend, and somethings get sidelined for a while to make room for others. None of my neglected projects are tossed into a trash bin, they're set aside to be picked up later.</p>
<p>This website is due for a renovation - its backend needs to be reorganized to allow for a better editing expirence and to simplify the codebase. When I get around to it, one of the things I'll be thinking of is the importance I put on blog posts. I get that blogs are important. They're a independent vessel to spread a message, to speak your mind freely, and a useful tool to teach others. But to be completely honest, I'd rather work on whatever's catched my fancy; even if that project may be a moonshot.</p>
📃 The Absolute Basics of Web Development - Overview2023-04-06T06:43:26Zhttps://personmeetup.ca/blog/absolute-basics-overview/People seem to be more interested in building for the web these days. Here's how you get started with that.<p>Recently, I've been seeing a growing interest from my friends about learning how to make their own websites. This isn't too surprising given <a href="https://twitterisgoinggreat.com/">the current dumpster fire that is Twitter</a>, not to mention the thousands of layoffs coming from big tech companies. Beyond the usual suspects like Facebook and Google, there's also growing frustration coming from more specialized web platforms. <a href="https://www.megsyverud.com/">Meg Syverud</a> shot out a warning to others artists a while ago about having WebToons and Tapas being the sole hosts of one's webcomic.</p>
<blockquote>
<p>“If you're an aspiring comic/webcomic artist or author, your first choices should NEVER EVER EVER EVER EVER be Webtoons or Tapas. Ever.</p>
<p>You should never aspire to have a contract with those leeches. Have Mirror/Secondary sites set up on them, but do not EVER attach the worth of your career to the acknowledgement of a corporation. Ever.” -- <a href="https://twitter.com/bludragongal/status/1631139667977584640">Source</a></p>
</blockquote>
<p>Of course, WebToons and Tapas screwing over artists isn't too surprising when you consider how similar they are to other social media platforms. At their core, all platforms boil down to being <a href="https://xkcd.com/1150/">a garage that some else owns</a>. Now, this isn't to say there's anything bad about storing stuff in someone else's garage; sometimes it's the more practical option if you can't use your own. The trouble comes from when you become dependent on the garage owner to store your stuff. In that case, you're trusting them not to pawn over your stuff to someone else or, worse yet, to just <a href="https://www.matuzo.at/blog/2022/your-account-is-permanently-suspended/">dump it in the trash</a>. Sadly, that's become the reality of using social media these days.</p>
<p>Given these circumstances (and how a few of my friends have asked for help with HTML), I've decided to start a series of posts where I'd talk about web design concepts that I believe are worthwhile to know of. I recognize, however, that I'm very much in the deep end when it comes to web development. Much of what I consider significant might not matter to you. If that's the case, feel free to jump off and blaze your own trail! Part of what makes the web so interesting is all the weird content on it, so don't be afraid to experiment on your own! With all that said, let's get some groundwork down.</p>
<h2 id="making-a-website" tabindex="-1"><a class="header-anchor" href="https://personmeetup.ca/blog/absolute-basics-overview/#making-a-website">Making a Website</a></h2>
<p>One thing I've often heard my friends say in reference to making their own sites is how they “want to make their own Neocities.” At risk of sounding like a <a href="https://stallman-copypasta.github.io/">GNU/Linux purist</a>, I do think it's important to clarify what exactly Neocities is, especially given what happened to the thousands of sites that were hosted on its namesake, <a href="https://www.howtogeek.com/692445/remembering-geocities-the-1990s-precursor-to-social-media/">Geocities</a>. <a href="https://neocities.org/">Neocities</a> isn't a service like <a href="https://carrd.co/">Carrd</a> that you use to build a site, but rather is a <em>host</em> for your website.</p>
<p>At their core, websites are HTML files that are accessed through a browser. That means that any HTML file could be a website, so long as it's uploaded to a server that broadcasts it onto the web. When you use a service like Neocities for your website, you're uploading your website's code to a server, referred to as a web host, which then makes said code accessible on the internet. There are a variety of options as to how you can host your website, whether you use someone else's servers <a href="https://landchad.net/">or use your own</a>; they all function more or less the same.</p>
<p>The reason I bring this all up is that Neocities is not another platform, it is one of a countless amount of web hosting providers. When you make a website on Neocities, you're making your own personal site; a site where you control everything from its infrastructure to how it's presented. This isn't to discredit Neocities as it's a great web host, and I'll be assuming you're using it as I go through this series. This is all to say that <a href="https://indieweb.org/site-deaths">if Neocities dies</a>, your site would still go on, just as long as another server is pointing from the same direction<sup class="footnote-ref"><a href="https://personmeetup.ca/blog/absolute-basics-overview/#fn1" id="fnref1">[1]</a></sup>.</p>
<h2 id="rubber-on-the-markup" tabindex="-1"><a class="header-anchor" href="https://personmeetup.ca/blog/absolute-basics-overview/#rubber-on-the-markup">Rubber on the Markup</a></h2>
<p>Now we come to the real meat and potatoes: coding your own website. If you're learning HTML from scratch, you're likely overwhelmed by the variety of options to choose from. Even Neocities <a href="https://neocities.org/tutorials">lists a variety of HTML tutorials alongside their own course</a>. I'm not going to add onto that choice paralysis, especially because HTML's basics have been so well covered by others before me. Instead, I'm going to suggest checking out the University of Waterloo's OpenCS course on <a href="https://open.cs.uwaterloo.ca/web-basics/">web basics</a>. This was the course I personally followed to learn about how HTML worked, and I found it gave me a strong foundation to build on. They also have a <a href="https://open.cs.uwaterloo.ca/web-programming/">web programming</a> course for those wanting to dab their feet into JavaScript. Even if you're not interested in scripting just yet, it might still be worth taking a look as it gives you a better understanding as to how webpages are structured.</p>
<p>For those who want something a bit more engaging to learn from, I turn you towards <a href="https://www.youtube.com/@LifeofBoris">Life of Boris's</a> extra high quality set of web development tutorials. He covers all the fundamentals of <a href="https://www.youtube.com/watch?v=ttcOHNlNKPE">HTML</a>, <a href="https://www.youtube.com/watch?v=-bYTGvHRbDs">CSS</a>, and <a href="https://www.youtube.com/watch?v=8OaCcw_0LIw">JavaScript</a> in ~10 minute chunks. Ultimately, the best way to learn is to get your hands dirty with markup. Once you've spent some time getting familiar with how HTML and CSS work at a basic level, you're functionally able to make whatever page you want. If you want a challenge to apply what you've learned, <a href="https://bryanlrobinson.com/blog/bring-fansites-back-to-the-web/">try making a fansite</a> to some piece of media you enjoy. As long as you keep developing and working on your website, you'll learn how to code.</p>
<h2 id="information-architecture" tabindex="-1"><a class="header-anchor" href="https://personmeetup.ca/blog/absolute-basics-overview/#information-architecture">Information Architecture</a></h2>
<p>Even as you're still learning how to use HTML, one thing you should be considering is what the purpose of your site is going to be. Are you making a blog that's all about your interests, or will it be a gallery to show off your work? What type of person are you expecting to visit your site? How are they going to navigate it? These questions all go into the information architecture of your site, which forms the base of how your site is organized.</p>
<p>The most important aspect when thinking about how to organize your site is knowing what its contents are going to be. Take some time to think about this, writing down anything that comes to mind. I suggest doing this physically with each idea on its own index card (or similar size), because once you're done, you can easily group those ideas together in a way that feels best to you. Finally, label those groups you've created. You've just created the structure for your site.</p>
<p></p><figure><picture><source type="image/avif" srcset="https://personmeetup.ca/assets/WvSUjzTx3x-320.avif 320w, https://personmeetup.ca/assets/WvSUjzTx3x-512.avif 512w, https://personmeetup.ca/assets/WvSUjzTx3x-640.avif 640w, https://personmeetup.ca/assets/WvSUjzTx3x-710.avif 710w, https://personmeetup.ca/assets/WvSUjzTx3x-1024.avif 1024w, https://personmeetup.ca/assets/WvSUjzTx3x-1420.avif 1420w" sizes="(max-width: 710px) 100vw, 710px" /><source type="image/jpeg" srcset="https://personmeetup.ca/assets/WvSUjzTx3x-320.jpeg 320w, https://personmeetup.ca/assets/WvSUjzTx3x-512.jpeg 512w, https://personmeetup.ca/assets/WvSUjzTx3x-640.jpeg 640w, https://personmeetup.ca/assets/WvSUjzTx3x-710.jpeg 710w, https://personmeetup.ca/assets/WvSUjzTx3x-1024.jpeg 1024w, https://personmeetup.ca/assets/WvSUjzTx3x-1420.jpeg 1420w" sizes="(max-width: 710px) 100vw, 710px" /><img alt="A bunch of paper cut outs, organized by content type and labeled." loading="lazy" decoding="async" src="https://personmeetup.ca/assets/WvSUjzTx3x-320.jpeg" width="1420" height="1065" /></picture><figcaption>Here's the cards I made when I was coming up with the structure of my own site!</figcaption></figure><p></p>
<p>If you're approaching this exercise with a focus on the user experience, you should go one layer deeper and think about the hierarchy of the presented information; what should be “above the fold” when the user loads the page? If you're approaching this from a more personal angle, you have everything you need already. At this point, it comes down to refining those cards into the sections and pages of your site. For this, consider making a sitemap that leads from the homepage to all the different sections of the site. Of course, not every page has to follow an organizational structure; an obvious example being secret links. Still, having a general structure to your site definitely makes things easier development wise, as it gives you a plan on how to approach building it.</p>
<h2 id="wrapping-up" tabindex="-1"><a class="header-anchor" href="https://personmeetup.ca/blog/absolute-basics-overview/#wrapping-up">Wrapping Up</a></h2>
<p>That pretty much covers everything I'd consider essential information on web development. You have some good resources on learning HTML, and you're considering how you want your site to be structured. That's pretty much all you need, now it just comes down to putting it into practice. So go, try making something on the web. Whether it be a <a href="https://matthiasott.com/articles/into-the-personal-website-verse">personal site</a> or a <a href="https://fear.garden/jerma/">shrine dedicated to your favourite streamer</a>, you'll be carving your own corner in this incredible web that we've made for ourselves.</p>
<p>Make your own digital spaces. Make them welcoming. Make them informative. But most of all, make them interesting.</p>
<hr />
<p>I'm assuming that if you're reading up to this point, you're looking to see what other tidbits of web knowledge I have. In that case, thanks for sticking around! Next time I plan on talking about some tools you can use when building your site, so <a href="https://personmeetup.ca/feeds/">keep an eye peeled for that</a>.</p>
<hr class="footnotes-sep" />
<section class="footnotes">
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>To elaborate on this, as long as a server is still hosting your website from the same web address, you can use any hosting provider you want. I realize that in the hypothetical I gave that a site could not continue if it was under a Neocities subdomain, but that's jumping into a discussion on domain names, which is a topic for another time. <a href="https://personmeetup.ca/blog/absolute-basics-overview/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
📃 My Hobbies Are My Interests2023-02-20T16:58:19Zhttps://personmeetup.ca/blog/my-hobbies-are-my-interests/A comment about my site's purpose got me thinking about how my active interests formed.<p>Recently, I had the opportunity to get feedback on my site from my classmates as part of the “Portfolio & Professional Development” course I'm taking this semester in university. In it, one of the major projects we have to work on during the semester is a portfolio site for showcasing our work and letting employers get in contact. Because I had this site that I was working on already, though, the professor was kind enough to let me keep working on it for the class. Our most recent class was focused on going around and leaving thoughts about the website drafts that others had made. Much of the feedback I got were ideas for relatively minor tweaks and additions for improving the styling and navigation of the site, and I'm planning on using that feedback as a list of things to work on. There was one piece of feedback that really stood out to me, though, which was a critical comment about my intent with the site.</p>
<blockquote>
<p>“The intentions of the site are a little unclear, it feels like you're just sharing your hobbies on the internet rather than trying to get hired.”</p>
</blockquote>
<p>It's worth saying that this was a valid criticism to make, especially given the scope of the class. I think it's fair to say having your <a href="https://personmeetup.ca/portfolio/competitive/">competitive Team Fortress 2 history</a> on the front page of your website isn't going to help your job prospects. This isn't to imply I'm going to try to make my website more professional; this is first and foremost a space for me and my interests (in other words, they pretty much got my site's purpose).</p>
<p>That said, I want to focus in on the idea of me sharing my hobbies. When I read that line, it got me thinking about how much of what I do now came as the result of hobbies I had when I was younger. An easy example that comes to mind is my interest in game design, which you could argue began when I was making Minecraft adventure maps. I like to think it really started back when I first got into by making levels for the workshop in <em>Portal 2</em>, as that would be what got me interested in how levels are actually built.</p>
<p>I started off by making puzzles with the in-game editor, having a blast at just creating my own levels, despite barely being able to walk around in them due to my computer's poor performance. Eventually I wanted to do something with custom styles, which led me into figuring out how to export maps from the in-game editor for use in the Hammer Level Editor. From there I expiremented with lighting, textures, and models to build new environments from scratch. Because I was using <em>Portal 2</em> as the base for my expirementation, the only elements of level design I truely had to worry about (beyond the beast that is puzzle design) was pacing. Of course, I began thinking about level design more broadly once I began looking to map for other Source games as well. What started as a way for younger me to kill time became a genuine passion I still hold today. The same thing goes for my interests in video editing and music; these are fields I played with growing up that I now consider serious interests of mine.</p>
<p>Programming is another example of this mentality, especially given that I began learning about it just for fun. At the time, I figured it would be a way for me to apply the high school algebra skills that I felt I wasn't doing much with, so I set on trying to learn coding to apply those skills. While the hardest part was undoubtedly finding a resource that I could learn the basics from, once I had that it was an enjoyable and rewarding experience<sup class="footnote-ref"><a href="https://personmeetup.ca/blog/my-hobbies-are-my-interests/#fn1" id="fnref1">[1]</a></sup>. As I began to branch off from the guided path and work on my own little coding projects, I became more interested in different programming languages, using Git for version control, and how I organized my code. What started off as a hobby to apply the math skills I had in school had become a genuine interest of mine. Better yet, it's leading me into further interests like digital electronics and circuitry.</p>
<p>Even today, I still have hobbies that I'm slowly beginning to take more seriously. The pattern seems to be that as I begin to make stuff with the fundamental knowledge I have in a field, I start getting more invested into it. I start experimenting more heavily within in the medium in trying out new things, which leads me to learn more about techniques and approaches. Eventually I realize the quality of my work is good enough that what I have is an actual skill I can apply in my work. Putting it simply, <em>my hobbies have become my interests</em>.</p>
<hr class="footnotes-sep" />
<section class="footnotes">
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>That resource I initially learned programming from was the University of Waterloo's <a href="https://open.cs.uwaterloo.ca/python-from-scratch/">Python From Scratch</a> course, by the way. Highly recommend that course for anyone who wants a good fundamental introduction to programming. <a href="https://personmeetup.ca/blog/my-hobbies-are-my-interests/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
📃 Getting ISO Time with Python Datetime2023-02-13T00:03:13Zhttps://personmeetup.ca/blog/getting-iso-time-with-python-datetime/Garnished with a side of Dateutil and Pyperclip<p>A bit of context before we jump into the code: As I'm finishing a blog post, I include the current date and time in the markdown file's YAML data. The one special thing about that is how it's in ISO 8601 format, which is done so that I can alter the data when it gets processed through <a href="https://www.11ty.dev/">Eleventy</a>, the static site generator I use to make this site. When I <a href="https://github.com/PersonMeetup/personmeetup-web/issues/8">first started properly timestamping</a>, I created a small little Python script that got the current time and copied it into my computer's clipboard in the format I needed. Now that I'm doing my writing within <a href="https://obsidian.md/">Obsidian</a>, that little script I made has been made redundant with templates and their date time formatting options. There's still quite a bit going on in this tiny script, though, so I figured I'd give it a moment to shine before I retired it.</p>
<h2 id="the-script" tabindex="-1"><a class="header-anchor" href="https://personmeetup.ca/blog/getting-iso-time-with-python-datetime/#the-script">The Script</a></h2>
<p>This script requires the following pip packages: <a href="https://pypi.org/project/python-dateutil/"><code>python-dateutil</code></a>, <a href="https://pypi.org/project/pyperclip/"><code>pyperclip</code></a></p>
<pre class="language-python"><code class="language-python"><span class="token keyword">from</span> datetime <span class="token keyword">import</span> datetime<br /><span class="token keyword">from</span> dateutil <span class="token keyword">import</span> tz<br /><span class="token keyword">import</span> pyperclip<br /><br />current <span class="token operator">=</span> datetime<span class="token punctuation">.</span>now<span class="token punctuation">(</span>tz<span class="token punctuation">.</span>gettz<span class="token punctuation">(</span><span class="token string">'America/Edmonton'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><br />pyperclip<span class="token punctuation">.</span>copy<span class="token punctuation">(</span>current<span class="token punctuation">.</span>isoformat<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span></code></pre>
<h2 id="the-breakdown" tabindex="-1"><a class="header-anchor" href="https://personmeetup.ca/blog/getting-iso-time-with-python-datetime/#the-breakdown">The Breakdown</a></h2>
<p>At it's core, this script is based around Python's <a href="https://docs.python.org/3/library/datetime.html"><code>datetime</code> Module</a>; specifically the <code>datetime</code> submodule. From that submodule, only two functions will be used: <code>.now()</code> to get the current time according to the system clock and <code>.isoformat()</code> to convert the <code>datetime.datetime</code> object into a string that's in ISO 8601 format.</p>
<pre class="language-python"><code class="language-python"><span class="token keyword">from</span> datetime <span class="token keyword">import</span> datetime<br /><br />current <span class="token operator">=</span> datetime<span class="token punctuation">.</span>now<span class="token punctuation">(</span><span class="token punctuation">)</span><br /><span class="token keyword">print</span><span class="token punctuation">(</span>current<span class="token punctuation">.</span>isoformat<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span></code></pre>
<p>Functionally the script is complete, but there are still some quality of life things can could be included, such as timezones and clipboard copying. That's where our previously mentioned pip packages come into play.</p>
<p><code>python-dateutil</code> extends the functionality of the built-in <code>datetime</code> module significantly, but we're going to use for its <code>.tz</code> submodule. This submodule includes a handful of timezone related tools, all of which operate around the <code>datetime.tzinfo</code> object type. This type can be passed to <code>datetime.now()</code> for it to include timezone information alongside the current time. We'll use the <code>.tz</code> submodule's <code>.gettz()</code> function to handle any timezone data for us.</p>
<div class="info">
<figure>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24">
<path fill="currentColor" d="M13 7.5a1 1 0 11-2 0 1 1 0 012 0zm-3 3.75a.75.75 0 01.75-.75h1.5a.75.75 0 01.75.75v4.25h.75a.75.75 0 010 1.5h-3a.75.75 0 010-1.5h.75V12h-.75a.75.75 0 01-.75-.75zM12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1zM2.5 12a9.5 9.5 0 1119 0 9.5 9.5 0 01-19 0z"></path>
</svg>
<figcaption>Information</figcaption>
</figure>
<p>While the code so far has shown <code>.gettz()</code> being given a string that corresponds to a designated IANA <a href="https://en.wikipedia.org/wiki/List_of_tz_database_time_zones">tz database key</a>, it's worth noting that the function doesn't need an input in order to work. Left at its default values, <code>.gettz()</code> will use the timezone information of the local time instead.</p>
</div>
<pre class="language-python"><code class="language-python"><span class="token keyword">from</span> datetime <span class="token keyword">import</span> datetime<br /><span class="token keyword">from</span> dateutil <span class="token keyword">import</span> tz<br /><br />current <span class="token operator">=</span> datetime<span class="token punctuation">.</span>now<span class="token punctuation">(</span>tz<span class="token punctuation">.</span>gettz<span class="token punctuation">(</span><span class="token string">'America/Edmonton'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><br /><span class="token keyword">print</span><span class="token punctuation">(</span>current<span class="token punctuation">.</span>isoformat<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span></code></pre>
<p>Finally, we include <code>pyperclip</code> to add copy/paste functionallity to the script, allowing for the formatted time to be copied into our computer's clipboard.</p>
<pre class="language-python"><code class="language-python"><span class="token keyword">from</span> datetime <span class="token keyword">import</span> datetime<br /><span class="token keyword">from</span> dateutil <span class="token keyword">import</span> tz<br /><span class="token keyword">import</span> pyperclip<br /><br />current <span class="token operator">=</span> datetime<span class="token punctuation">.</span>now<span class="token punctuation">(</span>tz<span class="token punctuation">.</span>gettz<span class="token punctuation">(</span><span class="token string">'America/Edmonton'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><br />pyperclip<span class="token punctuation">.</span>copy<span class="token punctuation">(</span>current<span class="token punctuation">.</span>isoformat<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span></code></pre>
<p>And there you have it! It's nothing too big, but I found it was definately handy for how I was writing my posts initially. Now that I'm using a program that has similar functionality built in, however, this little script of mine could be considered redundant. Heck, with Eleventy's <a href="https://www.11ty.dev/docs/dates/#setting-a-content-date-in-front-matter">recent inclusion</a> of <code>git Created</code> as an input for <code>date</code> values, even bothering with a ISO 8601 string in the first place might be a bit redundant. 😅</p>
📃 How Does One Write?2023-02-11T05:15:59Zhttps://personmeetup.ca/blog/how-does-one-write/Writing a blogpost is not as easy as writing what you're interested in; at least to me.<p>Whenever I want to write something, the hardest part is always figuring out how to start. I'll often think to myself for a while about what that first line should be, coming up with multiple ideas that I don't even bother writing down because they simply don't sound right. Eventually, something in my head will ring out and I'll manage to catch it with my words. Often it will be approaching the subject matter bluntly that stokes the flames that allow me to steam ahead with writing, but even that will be delayed by me figuring out what the best angle of approach is.</p>
<p>The reason why this all matters to me is that I firmly believe that the quality of your starting point dictates your endpoint. If you start your writing out strong, that strength with carry you through the rest of the piece. This idea of having a solid start to your writing doesn't stop at the intro sentence, however - it branches off into the thesis of your writing, which itself is rooted in the quality of your research and knowledge of a given subject matter. Foundations matter, and writing is one of many examples on that show how starting strong can make all the difference.</p>
<p>There is, of course, a catch to this idea. And that is that you might not write anything at all.</p>
<p>One of the things I've noticed more and more frequently, especially after the recent changes that have been happening with Twitter after Elon Musk's acquisition, has been a rallying cry from the <a href="https://indieweb.org/">IndieWeb</a> for more people to start blogging. Old words have been dusted off and cried out again. The introduction to Scott Hanselman's <a href="https://www.hanselman.com/blog/your-words-are-wasted">"Your words are wasted"</a> has rung out in my ears since I've read it.</p>
<blockquote>
<p><strong>You are not blogging enough.</strong></p>
</blockquote>
<p>I don't know how to properly segway this, but I need to acknowledge that the argument that I fully understand and agree that the argument "I have nothing to say" doesn't apply to me. It likely doesn't apply to you, too. Yes, I'm referring to you, the reader. We both have plenty of things going on that we simply don't talk about, even if those things would be incredibly interesting in the eyes of others. I should also say that even if you think people won't care about what you'll have to say, it's still worth saying it. There might be a completely logical explanation as to why people should ignore you, but there will still be some that pay attention. Simply talking about what you've done recently might even make a difference in someone's life. We all have something to say, it's just putting it into words.</p>
<p>That brings me back to my problem. For me, the issue isn't what I should write about; it's figuring out <em>how</em> to write it. Let's take length for example of this problem. Someone like Hanselman would say to make your blogposts not to long or short (in fact, <a href="https://www.hanselman.com/blog/your-blog-is-the-engine-of-community">he literally did say that</a>) but that's too vague for me. I like to know what the expected word count is for an assignment as I go into it, as it gives me an idea on how much I'll need to cover on a given subject. Blogging doesn't have that; a blog post goes for as long as you see fit. That leaves things wide open for me to wonder "what else should I be covering?" It also doesn't help that social media exists, which means there's now a mental split as to what do you write for where?</p>
<p>This is on top of this issue of me wanting a strong foundation for my writing, which becomes a problem when you're aware of the self-referential nature of hypertext. You begin to think about potential blogposts in sequence with the one your trying to start writing, which leaves you to wonder if what your trying to write is really the best place to start this trail of consciousness. Building from what you know also comes with the risk undermining yourself, with the worst way of which being "Hasn't someone already covered this before?" The feeling is made worse if you believe you don't have a strong enough grasp of a subject to write about it, even if that feeling is just self-doubt talking. A weird situation I've found myself in is that my adoption of <a href="https://obsidian.md/">Obsidian</a> as my primary writing app and knowledge management system has left me wanting to fully organize my knowledge vault before I write anything, because then I can refer to my vault as I'm writing and can reference and include things as I go along. As nice as it would be to have, <em>you don't need a knowledge management system to write!</em> And yet I believed it was mandatory for me!</p>
<p><strong>How do I write when the process of writing itself is a problem?</strong></p>
<p>I asked my Mom that question in a phone call recently after going on a similar diatribe. She simply told me "one word at a time." In other words, just write about what interests you right now. I'm inclined to give it a shot.</p>
📃 Sorting the Library2022-12-21T17:18:34Zhttps://personmeetup.ca/blog/sorting-the-library/Continuing my digital organization, I tackle how my bookmarks are organized.<p>After surviving the last of my university assignments for the semester, I went back to work on my digital reorganization. I've spent the last few days working on my bookmarks, and I'm pretty happy with how it's looking at the moment. <a href="https://personmeetup.ca/blog/sorting-the-library/cleaning-the-mailboxes">Much like before</a>, I figured I'd write about how the process went.</p>
<h2 id="first-question%3A-why%3F" tabindex="-1"><a class="header-anchor" href="https://personmeetup.ca/blog/sorting-the-library/#first-question%3A-why%3F">First Question: Why?</a></h2>
<p>I've had a habit of bookmarking things ever since I was a kid. I'd overfill the bookmark bar with links to flash games and links to videos that made me laugh, often forgetting about the pages once they got carried away in the overflow. While many of those bookmarks have been lost to time, I've maintained the habit of keeping links to pages that I feel I may refer back to. I ended up going a step further this year, exporting my liked videos on YouTube into a bookmark file <a href="https://gist.github.com/PersonMeetup/b14fcdd1a1b924cd56cd413803654f49">via a janky python script I wrote</a>. While younger me acted on the desire to more easily get to Miniclip and funny Thomas the Tank Engine videos, these days I realize just how powerful having bookmarks is.</p>
<p>Bookmarking lets you archive information that you deem most valuble, allowing you to recall it relatively ease. Both Chrome and Firefox come with functionality for searching your bookmarks right in the address bar, allowing for a more curated search if what you're doing is recalling information on a certain subject. An example I came across when contemplating swapping out my G213 keyboard for a "proper" mechanical one was finding an old Linus Tech Tips video on Romer-G switch manufacturing in my bookmarks. My browser, Firefox, saw me typing "Romer-G" and added links at the bottom of my search results that were bookmarks with the same terms used.</p>
<p>That functionality alone is powerful, but sometimes a manual search is needed. Maybe I know the topic field but I'm unsure about what exactly I'm looking for or, more commonly, what I'm looking for has a completely random title. In those cases, I was pretty much out of luck. My bookmarks were a disorganized array of links all over the place, with arbetrary decisions made about what goes where. That's still somewhat the case, but its drastically reduced from where it was previously. Still, I've attempted to organize my bookmarks in the past, so what makes this attempt any different?</p>
<h2 id="dew-inspiration" tabindex="-1"><a class="header-anchor" href="https://personmeetup.ca/blog/sorting-the-library/#dew-inspiration">Dew Inspiration</a></h2>
<p>Much of my inspiration for how to organize my library of bookmarks was taken from the <a href="https://www.oclc.org/content/dam/oclc/dewey/versions/print/intro.pdf">Dewey Decimal System</a><sup class="footnote-ref"><a href="https://personmeetup.ca/blog/sorting-the-library/#fn1" id="fnref1">[1]</a></sup>, a method of sorting knowledge used by its subject. The general idea is that all knowledge is sorted under one of ten classes, which is further sorted into divisions and sections depending on the topic of discussion. In the actual system, this allows for books to be given "coordinates" that allow someone to find and retrieve the book they want from the shelves. For my library of bookmarks, however, I can fudge some of the typical standards that a library would need to follow and tailor things more to my needs.</p>
<p>The first way I tailored things was in how I defined my classes. I started off by jotting down the subjects and fields that were of most interest to me. After that, I tried to fit those subjects into broad fields that would group them all together. Those fields would become the classes of which everything falls under. There's still more refinement to be done - I'm adding classes when I find a group of bookmarks that would work better in their own field - but overall I'm happy with where my classes are at right now. For reference, here's what I currently have defined as my classes.</p>
<pre class="language-md"><code class="language-md">Bookmarks<br />├── General Works<br />├── Art & Design<br />├── Electronic Technology<br />├── Engineering<br />├── Science<br />├── History<br />└── Entertainment</code></pre>
<p>Note the <code>General Works</code> class; this catergory takes care of all the general articles that would be hard to fit elsewhere, such as news articles, philosophical discussions, opinion pieces and general essays. These would be referred to as devisions under the Dewey Decimal System.</p>
<pre class="language-md"><code class="language-md">General Works<br />├── Essay<br />├── Opinion<br />├── Philosophy<br />├── Writing<br />├── Journalism<br />├── Organization<br />└── Recipes</code></pre>
<p>From there, sections devide things further. It's worth mentioning that you can specify things further beyond sections (something which is a part of the actual system), but the core idea remains the same. This is all based off the idea of structural hierarchy; what is true of the whole is true for its parts. As an example, let's take a look at the folder structure within the <code>Art & Design</code> class.</p>
<pre class="language-md"><code class="language-md">Art & Design<br />├── Graphic Design<br />├── Sound Design<br />│ ├── Sound Effects<br />│ ├── Synthesis<br />│ └── Music Production<br />├── Game Design<br />│ └── Level Design<br />├── Visual Art<br />│ ├── Drawing<br />│ └── Photography<br />├── Film & Video<br />├── Animation<br />└── 3D Modelling</code></pre>
<p>If we look at the <code>Sound Design</code> folder, we see that structural hierarchy is applied both as a child of the root folder and as a parent. Everything that falls under the <code>Sound Design</code> folder must still fit the definitions of the <code>Art & Design</code> folder. That hierarchical structure is applied to every subfolder in the library, allowing for information browsing based on subject.</p>
<p>There still is some areas I'm needing to refine - movie reviews are the most confusing for me to sort for some reason - but I'm still more comfortable about my library of endless links now than I was when they were more all over the place. I feel this exercise has encouraged me to continue bookmarking with the confidence that I will be able to recall the link later on. Like I said previously, bookmarking is a way to build your own library of things that matter to you. In a world of growing specialized knowledge, I believe that's a powerful tool to have.</p>
<hr class="footnotes-sep" />
<section class="footnotes">
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>I feel it's important for me to acknoledge that Melvil Dewey, creator of the Dewey Decimal System, was <a href="https://youtu.be/KXJSjte_OAI?t=74">not a good person</a>. <a href="https://personmeetup.ca/blog/sorting-the-library/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
📃 Cleaning the Mailboxes2022-10-13T21:16:54Zhttps://personmeetup.ca/blog/cleaning-the-mailboxes/I've been working on improving my digital organization as of late, something which I've felt has been lacking for quite some time.<p>During last week, I found myself combing through my digital storage to better organize myself. I've always had a problem with organization, something that stemmed from both the patterns I set from myself and the coinciding negligence of those patterns. The trouble this would cause me was a downward spiral of stress as I let my inboxes fill up and events fly past me. That said, I'm feeling relatively confident that I'm setting up some good patterns for myself and I figured I'd share what I've been considering as of late.</p>
<h2 id="rss-feeds" tabindex="-1"><a class="header-anchor" href="https://personmeetup.ca/blog/cleaning-the-mailboxes/#rss-feeds">RSS Feeds</a></h2>
<p>Previously, I had used <a href="https://github.com/martinrotter/rssguard">RSS Guard</a> to handle my web feeds. It worked well, but I decided to switch over to Thunderbird to consolidate the amount of programs I have. In the process of switching over, however, I found that the OPML file RSS Guard generated with the feeds I had came out had some unintended consequences when it was imported into Thunderbird. Making a long story short, I had to manually input the feeds into Thunderbird. It wasn't all bad though since it gave me a chance to reevaluate how I was sorting my feeds.</p>
<p>After doing some searching around, I decided to follow the style Jason Evangelho showed in <a href="https://blog.thunderbird.net/2022/05/thunderbird-rss-feeds-guide-favorite-content-to-the-inbox/">his writeup on RSS and Thunderbird</a>. The main difference for me was separating news feeds from entertainment feeds<sup class="footnote-ref"><a href="https://personmeetup.ca/blog/cleaning-the-mailboxes/#fn1" id="fnref1">[1]</a></sup> by creating two separate feed accounts. I found this useful since I have multiple feeds that discuss the same topics but in completely different directions.</p>
<p><picture><source type="image/avif" srcset="https://personmeetup.ca/assets/BURy_6P_la-250.avif 250w" sizes="(max-width: 710px) 100vw, 710px" /><img alt="An example of my feed organization, showing separate news and entertainment accounts in Thunderbird" loading="lazy" decoding="async" src="https://personmeetup.ca/assets/BURy_6P_la-250.jpeg" width="250" height="341" /></picture></p>
<h2 id="e-mail" tabindex="-1"><a class="header-anchor" href="https://personmeetup.ca/blog/cleaning-the-mailboxes/#e-mail">E-Mail</a></h2>
<p>On the topic of Thunderbird, when I went searching for ways on how I should organize my emails I found that <a href="https://lifehacker.com/email-folders-might-actually-decrease-productivity-jus-5848244">I shouldn't</a>. Simply archiving and leaving finding them later to search works a lot faster then hunting old emails down. The only organization that should be left to folders is <a href="https://lifehacker.com/use-the-five-folder-system-to-finally-organize-your-ema-1792043402">designating priority</a>. That often leaves two options for most emails that come my way; archive or trash. Considering that I don't often look at my old emails, I'm thinking this method will work out well for me.</p>
<h2 id="discord" tabindex="-1"><a class="header-anchor" href="https://personmeetup.ca/blog/cleaning-the-mailboxes/#discord">Discord</a></h2>
<p>I've attempted to utilize Discord's inbox in the past, but I found that it always got flooded with messages from servers I wasn't interested in or from an endless wave of friend chats. The easy solution to that was simply to be more aggressive with my server muting. I now have set my Discord up so that the only messages that come into my inbox are either pings, announcements, or chats related to projects I'm helping out with. It made using Discord a quick check to see whats new before I go on with my day, something that definitely wasn't the case before as I got caught in endless scrolling.</p>
<h2 id="calendar" tabindex="-1"><a class="header-anchor" href="https://personmeetup.ca/blog/cleaning-the-mailboxes/#calendar">Calendar</a></h2>
<p>Ending off with a bit of a curve ball, but I'd say it's just as important. For a while I've been overusing my calendar, trying to tie myself to a strict schedule/routine that I would inevitably break. Luckily, my calendar was already well organized with different event types scheduled into their own calendars. That meant all I needed to do to fix this problem was to re-purpose what was my "routine" calendar into my "rough plans"; ideas for things that I could do throughout the day.</p>
<p>That mentality towards calendar events is the idea behind my reorganization efforts; making things both easier and kinder on myself. There's still plenty of areas I'm planning on addressing that need to be cleaned up, but as a starting point I'm feeling like these relatively small changes will make a big difference on how I interact with technology on a daily basis.</p>
<hr class="footnotes-sep" />
<section class="footnotes">
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>Calling them "entertainment feeds" seems a bit dismissive, especially when people like JJ McCullough, EmpLemon, Captain Disillusion, and David Hilowitz are in that category as well. The basic idea behind separating them was mostly a need to stop mindlessly browsing YouTube as much, which is what many of the feeds in this category are sourced from. <a href="https://personmeetup.ca/blog/cleaning-the-mailboxes/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
📃 Computation Induced Exhaustion: The Impact of Computers2022-08-01T03:23:53Zhttps://personmeetup.ca/blog/electrical-demands-of-computers/Despite how important computers are, they're a bit of a problem for our climate.<div class="info">
<figure>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24">
<path fill="currentColor" d="M13 7.5a1 1 0 11-2 0 1 1 0 012 0zm-3 3.75a.75.75 0 01.75-.75h1.5a.75.75 0 01.75.75v4.25h.75a.75.75 0 010 1.5h-3a.75.75 0 010-1.5h.75V12h-.75a.75.75 0 01-.75-.75zM12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1zM2.5 12a9.5 9.5 0 1119 0 9.5 9.5 0 01-19 0z"></path>
</svg>
<figcaption>Information</figcaption>
</figure>
<p>This is an extended version of the essay published in the University of Lethbridge Climate Justice Working Group's <em>Earth Day 2022</em> Zine. Special thanks to both Heather Kehoe and Meghan Rennie for their editorial comments on that original essay.</p>
</div>
<p>Computers have become an essential part of our lives. We use them to work, communicate, learn and play. With them, we were able to get through the restrictions put in place during the pandemic. Outside the consumer sphere, the industrial, scientific and enterprise uses of computers are astonishing. The field of robotics has exploded as innovations in computing and artificial intelligence make robots more efficient and accurate than humans at certain tasks. Enterprises utilize huge data centers to provide services across the globe. Projects like Folding@home allow consumers to provide their computer's processing power to a network of computers, all working to run protein simulations.</p>
<p>The field of computing is amazing but, as the rise of cryptocurrencies have brought to our attention, it's also power demanding. With an energy usage of around 204.5 terawatt-hours (TWh) per year, the Bitcoin network is equivalent to Thailand in its levels of energy consumption (Digiconomist). While this power usage is concerning, the rest of the internet isn't much better. China's data centers consumed 161TWh back in 2018, with estimates assuming their growth would reach 267TWh in the following 5 years (Stanway). Back in March 2020, Folding@home reached 470 PetaFLOPS of computational power (Alcorn), which while less than half the theorized 1039.79 PetaFLOPS of Bitcoin (Siluk) still puts the potential energy usage of the network at around 90TWh. All this to say computers are a major energy consumer.</p>
<p>There are varying reasons as to why computers utilize so much power, many of which expand beyond computers themselves and bring up more general questions about the impact computers have had on the environment. In short, it comes down to the production of hardware, the use of software, and even its required footprint of land.</p>
<h2 id="hardware" tabindex="-1"><a class="header-anchor" href="https://personmeetup.ca/blog/electrical-demands-of-computers/#hardware">Hardware</a></h2>
<p>From the very start, computers leave an environmental impact from the manufacturing of their components. During the design phase, manufactures have to find a balance between performance and power consumption. Depending on their goals, the manufacturer may choose to prioritize one area over another, like prioritizing performance at the cost of increased power consumption. With multiple parts in a system designed similarly, the power requirements add up. As an extreme example, consider the Intel Core i9-10900K; a power hungry CPU which consumes 129.6 Watts (W) with its base clock speed of 3.7GHz. When over-clocking the chip to 5.2GHz, the required wattage skyrockets to 316.8W (Burke). While this is an unrealistic scenario for normal operation, it is possible to occasionally reach similar clock speeds in regular workloads with Intel's turbo boosting; driver software that pushes the chip harder in high workload scenarios. With that said, it's worth mentioning that the trade-off between power and performance may be worthwhile depending on a system's use case. The most manufactures can do is produce products that are as energy efficient as possible.</p>
<p>Every computer part requires the manufacturing of semiconductor dies, which are produced from pure silicon wafers (Linus Tech Tips; Amiri) processed in massive fabrication labs. For reference, Intel's fabrication lab in Israel spans 90,000ft<sup>2</sup>, with plans to double the site underway as of writing. Every square inch of space is used for silicon production, with thousands – or potentially millions – of dies being produced at once. Not every die will be used, however, as “it is […] unheard of to get an entire 300 millimeter wafer through the fab without a single defective dye on it (Linus Tech Tips).”</p>
<p>During production, water is used to keep the silicon clean from any particles that may cause those defects. With how many wafers a fab is processing at one time, however, that means a lot of water is being used. The creation of one wafer can use around 2,200 gallons of water, with 1,500 gallons consisting of Ultra Pure Water which, according to China Water Risk, “takes roughly 1,400–1,600 gallons of municipal water” to make 1,000 gallons of UPW. Luckily, much of the water is recycled and reused, with silicon manufacture TSMC reporting it recycled 87% of its used water in 2019 (Barrett). What can't be recycled is the 30–50 megawatts of peak electrical capacity that fabs utilize (China Water Risk).</p>
<p>Even beyond silicon, the manufacturing of mechanical computer components can be a wasteful process. For example, copper heat pipes are used to assist in the cooling of the CPU and GPU, “sinking and dissipating heat” away from the silicon components (Burke). Much of the manufacturing process creates waste, however, with about 3% out of a daily 50,000 units unable to be recycled due to becoming impure during the manufacturing process (Burke).</p>
<h2 id="software" tabindex="-1"><a class="header-anchor" href="https://personmeetup.ca/blog/electrical-demands-of-computers/#software">Software</a></h2>
<p>Depending on the task, software can also push silicon to its limit. Returning to Bitcoin, the network's power draw comes from the computational difficulty it places in mining. As the Bitcoin network grows, it's designed to make the “Proof of Work” puzzles that make up mining operations more difficult, specifically so that the minting of a new coin is steady at 10 minutes (Pipkin). Bitcoin is an example of both high computational load and software inefficiency; designing the code in a way that requires more computational performance than is needed. The former is more applicable to other programs, especially Folding@home in Bitcoin's case. If a user is compiling data, rendering or running a simulation, that is going to put a major computational load on the CPU that's going to require a higher clock speed and thus more power.</p>
<p>Even with powerful components, a workload may still call for more performance. As mentioned previously, CPU's may have software that pushes the chip's clock speed higher for a limited period. It's designed to help with small workloads that are resource intensive, allowing them to be completed quicker. When a chip is over-clocked, that burst speed becomes the default speed. Software such as <em>MSI Afterburner</em> allows for easy over-clocking of a user's hardware, enabling them to squeeze out more computational power. This comes with the price of – as mentioned with the i9-10900K – higher wattage, but also greater system instability.</p>
<p>Instability ranges from lower performance incurred through self-protective thermal throttling measures to system crashes, and even hardware damage. An interesting example of the ladder is EVGA's RTX 3090's, which users were reporting became defective once they attempted to play the closed beta for Amazon Games' <em>New World</em>. While the problem was caused by shoddy soldering (Dexter), it was revealed by an unlimited frame cap in <em>New World</em>'s menus. In the initial reports, Dave James commented that “This isn't the first time something like this has happened: Starcraft II was another culprit back in the day.”</p>
<p>In a way, Bitcoin is an analogy for our interaction with technology. Its continual increase in mining difficulty replicates our regular interactions with computers; as we create more powerful and efficient computers, we push them to do more.</p>
<h2 id="data-centers" tabindex="-1"><a class="header-anchor" href="https://personmeetup.ca/blog/electrical-demands-of-computers/#data-centers">Data Centers</a></h2>
<p>The issues found with hardware and software get compounded onto each other within data centers; buildings that can house hundreds of powerful computers. The computers within data centers can be used in multiple ways: they could be a server for internet traffic, or they can communicate together to function as one supercomputer. There are also data centers built solely to hosting the networking equipment needed for the internet to function. Not taking into account the potential workload that any server may be under, those items require a lot of electricity to keep operational 24/7. That power requirement grows with the need for cooling, security, and redundant power, all three of which take extreme measures given the environment.</p>
<p>A South Carolina data center operated by Google uses multiple levels of physical security to protect the physical servers from unauthorized access. As Joe Kava, Google's Vice-President of Data Centers, explains, “So, just to enter this campus, my badge had to be on a pre-authorized access list. Then, to come into the building, that was another layer of security. To get into the secure corridor that leads to the data center, […] One, my badge has to be on the authorized list. And then two, I use a biometric iris scanner to verify that it is truly me (Google).” While Google's security measures may not be without warrant, it still contributes to the massive power draw of the data center.</p>
<p>European Data Hub Luxembourg is similarly energy dependent with the energy consumption of a small city (Wargaming Europe), and is fully aware of the possible detriment of a loss of power. To combat this, the site takes multiple measures, including receiving power from two different parts of the country that each half of the complex runs off. Ralph Birch, Technical Director, elaborates “All the electrical and cooling services provided on side A are mirrored on side B, and they are completely independent (Wargaming Europe).” Should one power supply go down the other would provide more energy to compensate, but what should happen in the case of a complete power outage? Uninterrupted Power Supplies kick in momentarily to keep the site running while two generators kick in, which are each connected to a 50,000 litter tank of diesel. This allows the site to run for five and a half days, and as Ralph mentions “We are third in the queue [for emergency fuel delivery], after the military, hospitals, and then the data center (Wargaming Europe).”</p>
<p>Finally, data centers must address the complex question of cooling the hardware. As Joe comments, “In the time that I've been at Google – for almost six and a half years now – we have changed our cooling technologies at least five times (Google).” Ralph explained European Data Hub's approach as “using chilled water and pumps, all computer controlled, which then push chilled water around through into the cooling units in each room to take the heat away from the data center.”</p>
<p>This is all without addressing the amount of space required for these data centers. Alongside being 22 meters underground, the total area of European Data Hub's data center is 15,000 meters<sup>2</sup> (Wargaming Europe). These buildings might be more aesthetically pleasing than the cargo containers crypto miners retrofit for mining operations (Pipkin), but they function in much of the same way.</p>
<h2 id="conclusion" tabindex="-1"><a class="header-anchor" href="https://personmeetup.ca/blog/electrical-demands-of-computers/#conclusion">Conclusion</a></h2>
<p>Taking a step back, it’s astonishing how resource intensive computers are. Their production produces significant amounts of waste, their software pushes the hardware to utilize more energy, and the scale of data centers consumes an astonishing amount of electricity. Making matters worse, our electrical grid still runs primarily off fossil fuels and our interactions with computers are looking to become more demanding in the future.</p>
<p>If we want to improve the sustainability of our planet, it's important that we look at the field of computing and see how we can make it more efficient. This is a task that's already started on multiple fronts. Regulators in both the US and Europe have put standards into law regarding power usage and efficiency for power supplies. Regarding data centers, Microsoft's testing of hosting them underwater has raised promising results, with reliability 8 times greater than a similar data center on land (Roach). There's a lot of work that still needs to be done, but it's worth it if what we do now prevents a forced shutdown in the future.</p>
<div class="bibliography">
<h2 id="bibliography" tabindex="-1"><a class="header-anchor" href="https://personmeetup.ca/blog/electrical-demands-of-computers/#bibliography">Bibliography</a></h2>
<ul class="bibliography-contents">
<li class="csl-entry">Alcorn, Paul. <i>Folding@Home Now More Powerful Than World’s Top 7 Supercomputers, Combined</i>. 21 Mar. 2020, https://www.tomshardware.com/news/folding-at-home-worlds-top-supercomputers-coronavirus-covid-19.</li>
<li class="csl-entry">Amiri, Benyamin, editor. <i>How a CPU Is Made</i>. 4 Feb. 2013, https://www.youtube.com/watch?v=qm67wbB5GmI.</li>
<li class="csl-entry">Barrett, Eamon. <i>Taiwan’s Drought Is Exposing Just How Much Water Chipmakers like TSMC Use (and Reuse)</i>. https://fortune.com/2021/06/12/chip-shortage-taiwan-drought-tsmc-water-usage/. Accessed 25 Apr. 2022.</li>
<li class="csl-entry">Burke, Steve, editor. <i>How Copper Heatpipes Are Made | China Factory Tour (Cooler Master)</i>. 22 Mar. 2019, https://www.youtube.com/watch?v=AD-4WKwCAfE.</li>
<li class="csl-entry">---. <i>Intel Core I9-10900K CPU Review: Gaming, Overclocking, & Benchmarks vs. AMD Ryzen</i>. https://www.gamersnexus.net/hwreviews/3587-intel-core-i9-10900k-cpu-review-benchmarks. Accessed 11 Mar. 2022.</li>
<li class="csl-entry">China Water Risk. <i>8 Things You Should Know About Water & Semiconductors</i>. 11 July 2013, https://www.chinawaterrisk.org/resources/analysis-reviews/8-things-you-should-know-about-water-and-semiconductors/.</li>
<li class="csl-entry">Dexter, Alan. “EVGA Explains Why Some of Its RTX 3090s Were Blowing up in New World.” <i>PC Gamer</i>, 2 Sept. 2021, https://www.pcgamer.com/evga-explains-why-some-of-its-rtx-3090s-were-blowing-up-in-new-world/.</li>
<li class="csl-entry">Digiconomist. <i>Bitcoin Energy Consumption Index</i>. https://digiconomist.net/bitcoin-energy-consumption/. Accessed 10 Mar. 2022.</li>
<li class="csl-entry">Google, editor. <i>Inside a Google Data Center</i>. 17 Dec. 2014, https://www.youtube.com/watch?v=XZmGGAbHqa0.</li>
<li class="csl-entry">Linus Tech Tips, editor. <i>I Can Die Now. - Intel Fab Tour!</i> 13 Apr. 2022, https://www.youtube.com/watch?v=2ehSCWoaOqQ.</li>
<li class="csl-entry">Pipkin, Everest. <i>“BUT THE ENVIRONMENTAL ISSUES WITH CRYPTOART WILL BE SOLVED SOON, RIGHT?”</i> 3 Mar. 2021, https://everestpipkin.medium.com/but-the-environmental-issues-with-cryptoart-1128ef72e6a3.</li>
<li class="csl-entry">Roach, John. <i>Microsoft Finds Underwater Datacenters Are Reliable, Practical and Use Energy Sustainably</i>. https://news.microsoft.com/source/features/sustainability/project-natick-underwater-datacenter/. Accessed 11 Mar. 2022.</li>
<li class="csl-entry">Siluk, Shirley. <i>Bitcoin Network Out-Muscles Top 500 Supercomputers</i>. 13 May 2013, https://www.coindesk.com/markets/2013/05/13/bitcoin-network-out-muscles-top-500-supercomputers/.</li>
<li class="csl-entry">Stanway, David. “China’s Internet Data Power Usage to Surge through 2023: Study.” <i>Reuters</i>, 9 Sept. 2019, https://www.reuters.com/article/us-china-carbon-internet-idUSKCN1VU06A.</li>
<li class="csl-entry">Wargaming Europe, editor. <i>World of Warships - Data Center</i>. 19 May 2016, https://www.youtube.com/watch?v=-tcqy27hN2U.</li>
</ul>
</div>
📃 Taking Another Angle on the Sn0wy-Verse2022-07-04T19:47:36Zhttps://personmeetup.ca/blog/taking-another-angle-on-the-sn0wy-verse/Rethinking how the Imagisphere is referred to in *Sn0wy*.<p>As of recent, my friends <a href="https://twitter.com/cocodotts">Cocodotts</a>, <a href="https://twitter.com/kvlmiv">Kalil</a> and I have been working on a <s>podcast</s> live show where we talk about <a href="https://twitter.com/wallaceprower" title="Also known for sleeping on a couch and talking to his phone during graduation.">wallaceprower's</a> <a href="https://www.youtube.com/c/Sn0wyYT" title="Give us the password already."><em>Sn0wy</em></a> series. Our last episode gave me the excuse to look back at some of the fundamental lore of the series, that being it's use of <em>LittleBigPlanet's</em> Imagisphere. As I was forming my notes for the episode I ended up reconsidering how the Imagisphere works within the series, challenging the way we previously discussed the lore as well as how it has been presented. I didn't manage to get my thoughts either fully or clearly, so this post is dedicated to remedying that.</p>
<p>You could also consider this my attempt to redeem myself, because I do realize that what I was spouting was so nonsensical it wasn't even funny. Either that or the embarrassment of hearing myself stumbling over my words while others flawlessly come up with sentiences is getting to me again.</p>
<h2 id="similarities-to-the-craftverse" tabindex="-1"><a class="header-anchor" href="https://personmeetup.ca/blog/taking-another-angle-on-the-sn0wy-verse/#similarities-to-the-craftverse">Similarities to the Craftverse</a></h2>
<p>As unorthodox as it seems, talking about <em>LittleBigPlanet</em> is worthwhile when discussing the Imagisphere within <em>Sn0wy</em>. It's interpretation of the Imagisphere utilizes many of the same core concepts that <em>LittleBigPlanet</em> establishes, with the big three being its ties to imagination, creator curators, and badges. The first point should be obvious as <em>LittleBigPlanet's</em> boot screens describe how our idle thoughts join up with others to create the planets and moons around the Imagisphere or, as Wallace put it, "<a href="https://youtu.be/kF_oPS7Hv5k?t=559">The Imagisphere is a dimension made up of nothing but thoughts and ideas from millions of human beings.</a>"</p>
<p>Wallace also describes how people "create these worlds in their minds that become planets in [...] the Imagisphere," which happens to fulfill the definition of a creator curator within <em>LittleBigPlanet</em>. They're the ones who build and maintain the various planets and moons that make up the Imagisphere, and while the label is mainly used to describe the characters within the game's story the <a href="https://littlebigplanet.fandom.com/wiki/Creator_Curator"><em>LittleBigPlanet</em> wiki</a> describes the player as being one of these curators.</p>
<p>Finally, there's the minute detail of badges. These function as level selectors in <em>LittleBigPlanet</em>, dragging the player from the game's hub area to the world within the badge. Similarly, the Black Diamond Door seen within <em>Sn0wy</em> bridges the gap between two different worlds and are even able to take on a more circular shape. Overall, there's actual reason to consider <em>Sn0wy</em> and <em>LittleBigPlanet</em> together, as they're quite closely connected in how they use the Imagisphere. And I didn't even mention the <a href="https://www.youtube.com/watch?v=TTa08dh3uac"><em>LittleBigPlanet</em> episode</a> that permanently altered Tw1g's appearance.</p>
<h2 id="bringing-it-h0me" tabindex="-1"><a class="header-anchor" href="https://personmeetup.ca/blog/taking-another-angle-on-the-sn0wy-verse/#bringing-it-h0me">Bringing It H0me</a></h2>
<p>While it's use of the Imagisphere is near identical to <em>LittleBigPlanet</em>, <em>Sn0wy</em> differentiates itself with its use of dimensions. The concept was introduced by Wallace as he explained how people from the Third Dimension are able to create worlds in the Imagisphere, while those in the second dimension cannot. This is best understood with "The <em>Sn0wy</em> Dimension Travel Diagram", created by Cocodotts, which visualizes the relationship between the various cast members and their ability to navigate different worlds. Keep in mind that the yellow line represents those from the Third Dimension while the blue is for those from the Second Dimension.</p>
<p><picture><source type="image/avif" srcset="https://personmeetup.ca/assets/G-AoMEwt_u-320.avif 320w, https://personmeetup.ca/assets/G-AoMEwt_u-512.avif 512w, https://personmeetup.ca/assets/G-AoMEwt_u-640.avif 640w, https://personmeetup.ca/assets/G-AoMEwt_u-710.avif 710w" sizes="(max-width: 710px) 100vw, 710px" /><source type="image/jpeg" srcset="https://personmeetup.ca/assets/G-AoMEwt_u-320.jpeg 320w, https://personmeetup.ca/assets/G-AoMEwt_u-512.jpeg 512w, https://personmeetup.ca/assets/G-AoMEwt_u-640.jpeg 640w, https://personmeetup.ca/assets/G-AoMEwt_u-710.jpeg 710w" sizes="(max-width: 710px) 100vw, 710px" /><img alt="Cocodott's “Sn0wy Dimension Travel Diagram.”" loading="lazy" decoding="async" src="https://personmeetup.ca/assets/G-AoMEwt_u-320.jpeg" width="710" height="518" /></picture></p>
<p>As well put together as the diagram is, it's clear to see it's a bit convoluted. Within the image, there's questions regarding how Wallace is able to access the Therapy Room and if Tw1g is able to access the same areas as Wallace since their change in the <em>LittleBigPlanet</em> episode. Beyond the image, the episode "<a href="https://www.youtube.com/watch?v=FtYbr7RPDXw">VAPORWAVE & ESCAPISM</a>" calls into question how accurate Wallace's understanding of the Imagisphere is with Sn0wy accidentally sending him and Clementine into another world. Discussion on the topic of multiple dimensions is itself a challenge to mentally visualize. Not to mention Noir's comment to Wallace that "[his] theory is a bit shaky in certain areas."</p>
<p>To address these problems and to help with explanation, think of dimensions as layers. On the top layer you have someone like Wallace, a creator. Anything they create is in a second layer beneath them. This second layer has full flexibility to do whatever it wants; explore their world, visit the worlds of <a href="https://youtu.be/kF_oPS7Hv5k?t=414">other creators</a>, or potentially make their own layers. The only thing they can't do is go up to the same layer their creator is from. That said, nothing is stopping a creator from going down a layer to exist with their creations.</p>
<p>With this model, we're able to clarify a few ambiguous areas from the dimension diagram. Regarding how Wallace accesses the therapy room, it's likely a separate creation he made to seek advice and counseling for himself. Tw1g also wouldn't be able to go up a layer as the dimensional model hypothesizes because they're a creation from Wallace. The only questions left are those regarding Noir, who seems to be in the position to try and gain access to the third dimension for reasons we can only speculate.</p>
<p>Chances are we'll never get answers to those lingering questions. Wallace has been slowly moving away from making video essays with a lore behind them, as the progression from <em>OVRGRWN</em> to <em>wallaceprower</em> shows. It's understandable that Wallace would want to try and express his interests without the limitation of having to also tell a cohesive story. For what it's worth, <em>Sn0wy</em> was a breath of fresh air in a saturated genre of videos and it's always a treat to look back at it.</p>
📃 B-Day2022-06-07T05:13:00Zhttps://personmeetup.ca/blog/b-day/Today is my birthday, and with it I want to think about what's ahead.<p>It's my 20th birthday today! While it was more-so an average day in terms of how it went, the amount of birthday wishes I received was astonishing. From people I regularly hang out with to friends I haven't spoken to in a while to complete randoms, it was nice being appreciated by so many people. I can't understate how grateful I am to everybody who said happy birthday, really. With all that said, I want to take a moment before today ends to reflect on the last decade of my life and look forward to my hopes for the next one.</p>
<h2 id="mental-health" tabindex="-1"><a class="header-anchor" href="https://personmeetup.ca/blog/b-day/#mental-health">Mental Health</a></h2>
<p>The most defining part of the last decade for me was figuring out my head space, with the last 2-3 years being spent on actively improving it. Of course, this is something everyone goes through growing up instead of a problem that's exclusive to me, but try saying that to someone who didn't know who to listen to anymore. For context, I grew up with everyone around me - from fellow students, online friends, to even my parents - having opposing perspectives and countering any opinion I had. I wasn't able to set up any filters for my perception of the world, leading me to nearly drown in the noise. I bring this up because the same thing happened with my mental health. I was bombarded with media encouraging getting professional help if needed, which ran counter to the viewpoints of my parents who've seen their friends change for the worse after therapy. Worse yet, there was no professional help where I grew up; only a councilor at the local hospital. There were other problems I had during the last decade, but I find my perception of noise was the most defining one for me.</p>
<p>While I can't confidently say I'm past my troubles just yet, I can comfortably say I'm past the worst of it. As much as the noise of clashing opinions frustrated me at first, I found it to be more comforting and even enlightening on some of the other troubles I have. While I could go on for longer, I think I should wrap this section up with expressing the things that helped me the most. Firstly, learn to let go of stuff; especially any stress that you may have. I found this applied to my need to understand exactly what was wrong with me, which I don't bother with anymore. If you still feel the need to cling to something because you have to do it, I want you to consider a question that I've been grappling with myself; why do you feel the need to solve massive problems by yourself? The follow-up to this statement is that you should instead be focusing on caring most about the problems affecting those around you, such as your friends, family, and neighbors. This was something that came from a conversation with my Dad recently, addressing a major fault in how I perceived the world. Finally, air your brain out. Write in a journal, take some time to meditate, do whatever it takes to give your brain a break every once in a while. These are nothing definitive, but these are some of the things I've learned that have made me more comfortable with my mental health.</p>
<h2 id="developed-interests" tabindex="-1"><a class="header-anchor" href="https://personmeetup.ca/blog/b-day/#developed-interests">Developed Interests</a></h2>
<p>While I haven't done anything major with my life so far in any specific field, I'm comfortable with what I've managed to do for my age. I have a general idea about what I'm hoping to do with my life, that being a mix of working on video editing, developing games, and producing music. All three of these were interests I developed in the last decade, but video editing would likely be the oldest. I remember spending hours making videos on Windows Movie Maker (XP) and recording from a camcorder I got for Christmas one year. I would later spend days editing together moments I recorded with my friends on Minecraft, Garry's Mod, and other games and start uploading those to YouTube, continually improving my skills and trying new things. That said, I avoided making videos for a few years because I put to great of a weight onto them. I thought that whatever video I hoped to make next had to have a bullet-proof script or it wasn't worth pursuing. That, alongside the need to learn how to use newer software, turned me off from making videos for quite some time. It's only recently that I've been getting back into making them with the recent Sn0wy Direct uploads on YouTube. It's re-sparked my enjoyment in editing, and while I did encounter some problems I found that this is something I want to get back into.</p>
<p>The second major interest I got into was game development, with Portal 2's Perpetual Testing Initiative serving as my introduction to the field. I started off making simple puzzles in the in-game editor, but soon found myself wanting to do something fancier. I can remember that the first Hammer map I ever made was from exported PTI map, edited to connect two separate rooms through some mechanical areas. I later explore much more exotic ideas and concepts which, while occasionally being too much of a challenge for me, taught me lots about Hammer, level editing and game design. In recent years, I've been exploring level design beyond Portal 2 with dabbles into mapping for Team Fortress 2. I've also been looking into playing around with other engines, and have been meaning to start creating games in PICO-8 to learn more about prototyping and game development.</p>
<p>Last but not least is music. I was a band kid, having took band every year during my time in high school. Through it I learned the basics of playing the piano, bringing home one from the school to practice. My parents bought me a basic Casio piano from the local thrift store at as a Christmas gift during junior year, which I would then use to practice on Melodics. Eventually I also found LMMS, a free digital audio workstation that I used to create my own songs that I would share with my band teacher. Since then, my skill-set for playing and producing music has grown and I've created a few tracks that I've been comfortable enough to share with the world. While music is definitely the youngest of all the interests I currently have, it's one of the most fulfilling.</p>
<h2 id="the-future" tabindex="-1"><a class="header-anchor" href="https://personmeetup.ca/blog/b-day/#the-future">The Future</a></h2>
<p>Finishing off, I want to think about where I want to be in the next 10 years. What comes to mind first and foremost is that I want to at least be doing something involving the gaming industry at some point in the future. Whether it be Triple-A or Indie, I want to help create new and enjoyable games that people would have fun playing. For the other core interests of mine, I want to create more videos. It's a vague idea on purpose as I'm not fully sure what videos I would make, but it would defiantly be some mix of sketch comedy and game design analysis. For music, I want to create one full album themed around the noise I dealt with growing up. As for other interests, I actually want to get more into drawing. I think it's a fun skill that's worth having, and it's something that I've been getting more into as of late with help from some of my artist friends! I'm also wanting to do more with programming, although that may go hand in hand with game development. Finally, I want to secure the foundation of my mental health, giving me firm ground to stand on. I want to be fully confident in myself, believing that I'm able to work on any task within my skill-set.</p>
<p>No matter what happens, however, I'm happy with how far I've come and I'm thankful for the friends I've made along the way.</p>
📃 Some Thoughts on “Milk inside a bag of milk inside a bag of milk”2022-06-02T04:01:42Zhttps://personmeetup.ca/blog/review-milk-inside-a-bag-of-milk/Shortened to “Milk inside a bag of milk” for all our sakes.<p><em>Milk inside a bag of milk inside a bag of milk</em> is an interesting visual novel, which already puts it in a league above its peers. That statement comes from my disinterest in genre, as I find many of the games within it default to a <em>certain theme</em> that I don't find interesting. Ignoring that, the games themselves are rather bland with player interaction relegated to progressing the text and making a dialogue choice. Of course, it's a lot more expressive than a “Choose Your Own Adventure” book. Visual novels can immerse the player in their world though visuals and sound design, but their stories are limited similarly to their physical counterpart because of the scope of gameplay.</p>
<p>This shouldn't imply visual novels are the only games fighting with this scope. <em>The Stanley Parable</em> follows a similar formula; hold forward to progress and make the occasional choice. At their core, narrative-driven games - visual novels, exploration and adventure games - are reliant on their stories to carry them. What makes exploration and adventure games different from visual novels comes from their use of gameplay to fall back on as they tell their story. Looking at <em>The Stanley Parable</em> again, it invites players to explore and find new jokes and endings, leveraging its position as a game to enhance the writing. All this to say that if a visual novel wants to succeed, its story better be good.</p>
<p><picture><source type="image/avif" srcset="https://personmeetup.ca/assets/YxxtANjiU9-320.avif 320w, https://personmeetup.ca/assets/YxxtANjiU9-512.avif 512w, https://personmeetup.ca/assets/YxxtANjiU9-640.avif 640w, https://personmeetup.ca/assets/YxxtANjiU9-710.avif 710w, https://personmeetup.ca/assets/YxxtANjiU9-1024.avif 1024w" sizes="(max-width: 710px) 100vw, 710px" /><source type="image/jpeg" srcset="https://personmeetup.ca/assets/YxxtANjiU9-320.jpeg 320w, https://personmeetup.ca/assets/YxxtANjiU9-512.jpeg 512w, https://personmeetup.ca/assets/YxxtANjiU9-640.jpeg 640w, https://personmeetup.ca/assets/YxxtANjiU9-710.jpeg 710w, https://personmeetup.ca/assets/YxxtANjiU9-1024.jpeg 1024w" sizes="(max-width: 710px) 100vw, 710px" /><img alt="Screenshot with the text “Don't get me wrong, I just like the pyramidal stucture of verbal constructuions.”" loading="lazy" decoding="async" src="https://personmeetup.ca/assets/YxxtANjiU9-320.jpeg" width="1024" height="768" /></picture></p>
<p>Luckily for <em>Milk inside a bag of milk</em>, it's story is fantastic even with its simple premise. It's a well-written exploration of mental health and trauma that is able to hit above its weight class. I won't be talking too much about the story directly since, much like the cup of coffee this game costs, it takes only 15 minutes to get through. Similarly to other narrative games, it's better to go in blind and discover the story for yourself than it is to be told what that story is. What I can say is that I found myself empathetic for the protagonists current situation, which everything in the game surrounds.</p>
<p>A minor aspect somewhat separate from the plot I found interesting was how self-aware the game was about its medium. While <em>Milk inside a bag of milk</em> does use its awareness of visual novels primary as a plot point, I found it's also utilized to take jabs at the genre. This is the most clear with the protagonist, who regularly makes comments regarding the clichés of its format. Alongside their dialogue, the choices for player response are often limited to rude remarks. In contrast to other visual novels - including <em>Doki Doki Literature Club</em>, whose story was a horrific subversion of the genre's stereotypes - there is no happy ending that's possible here; you either help the protagonist buy milk or you don't. What makes this awareness of visual novels even more enjoyable is how it's woven back into the plot.</p>
<p><picture><source type="image/avif" srcset="https://personmeetup.ca/assets/Kyq_m8MClO-320.avif 320w, https://personmeetup.ca/assets/Kyq_m8MClO-512.avif 512w, https://personmeetup.ca/assets/Kyq_m8MClO-640.avif 640w, https://personmeetup.ca/assets/Kyq_m8MClO-710.avif 710w, https://personmeetup.ca/assets/Kyq_m8MClO-1024.avif 1024w" sizes="(max-width: 710px) 100vw, 710px" /><source type="image/jpeg" srcset="https://personmeetup.ca/assets/Kyq_m8MClO-320.jpeg 320w, https://personmeetup.ca/assets/Kyq_m8MClO-512.jpeg 512w, https://personmeetup.ca/assets/Kyq_m8MClO-640.jpeg 640w, https://personmeetup.ca/assets/Kyq_m8MClO-710.jpeg 710w, https://personmeetup.ca/assets/Kyq_m8MClO-1024.jpeg 1024w" sizes="(max-width: 710px) 100vw, 710px" /><img alt="Screenshot with the text “With the edge of my eye I notice a small bench - a great place for cliched visual novel monologues.”" loading="lazy" decoding="async" src="https://personmeetup.ca/assets/Kyq_m8MClO-320.jpeg" width="1024" height="768" /></picture></p>
<p>If it's not clear by now, everything in <em>Milk inside a bag of milk</em> has a purpose. There's no material that doesn't support the plot. Even the visuals and soundtrack have their own explanations for being there, although their presence alone is reason enough. They produce an atmosphere of isolation with average locations taking on an alien feel. This is no doubt because of the visuals limited color palette and the accompanying ambient soundtrack. Both of these elements are incredibly unique in their execution, with the visuals being especially noteworthy to me as they were a enticing factor when I decided to purchase the game.</p>
<p>With all that said, <em>Milk inside a bag of milk inside a bag of milk</em> is a great story that worth experiencing. If you have some pocket change lying around and you're comfortable confronting sensitive subject matters such as abuse, mental health and death, this is a visual novel well worth looking into. It's a creative idea that I throughly appreciate and hope to see more of in the genre.</p>
<p>You can purchase <em>Milk inside a bag of milk inside a bag of milk</em> on <a href="https://store.steampowered.com/app/1392820">Steam</a> and <a href="https://nikita-kryukov.itch.io/pmkm">itch.io</a>.</p>
📃 Facing Creative Road-Blocks2022-04-25T04:40:24Zhttps://personmeetup.ca/blog/facing-creative-road-blocks/I find myself not working on the things I really want to. This blog-post is me pointing out the reasons why.<p>At the start of March I launched this site with the idea to expand it further with blog posts going over coding concepts I found interesting, reviewing video games, looking back at finished projects, and other ideas that may come to mind. Nearly 2 months later and, aside from various tweaks to the HTML templates, this site is dead. Activity wise, that is. Don't get me wrong, I do want to keep working on this site. I think it's a great application for the web-design skills I've developed in the past two years, and it gives me another outlet to express myself and my interests. But for some reason, I find it hard to write for the site.</p>
<p>Thinking about this reminded me of my interest in video editing, mainly because it feels stuck in the same situation. I have plenty of video ideas I could work on and even encouragement from my friends to do it, but I find it hard to get started on an editing project. Obviously the best solution would be to start working on something and go from there, but I find there are a few obstacles that make that a harder challenge than is realized.</p>
<h2 id="universal-drain" tabindex="-1"><a class="header-anchor" href="https://personmeetup.ca/blog/facing-creative-road-blocks/#universal-drain">Universal Drain</a></h2>
<p>If you have ever attended a university you know how tiring and stressful it can get, especially at the end of a semester. You're piled with work that, no matter when you start, will leave you staying up past midnight to finish on time. It may be better or worse depending on who your professor is, but it will always become overwhelming at some point. You'll likely find yourself working every day of the week which, funnily enough, is not something you're supposed to do. <a href="https://twitter.com/meganwangart/status/1511109527042609163">We need to give ourselves break time and allow ourselves to relax instead of burning ourselves out</a>. With this in mind it would be fair to say that university is an environment that teaches bad work habits, but I'll leave that for someone else to chew on.</p>
<p>For me, my university semester has been draining since <a href="https://calgary.ctvnews.ca/university-of-lethbridge-faculty-members-go-on-strike-1.5776306">we ended up having to deal with a strike</a>. While being on strike was fine for me as I used that off time to work on this site, coming back to class was the hard part. The best way I could put it is that the strike put me into summer mode; the only things I had to worry about were my own projects. How do you expect me to react when a strike ends up <a href="https://calgary.ctvnews.ca/classes-resume-at-university-of-lethbridge-after-faculty-strike-1.5831962">lasting nearly two months</a>? When university came back into session, I found schoolwork and personal projects taking up brain-space simultaneously which made the first few weeks back a slog. It wasn't easy to get back into classes, and I've found myself being caught off guard by deadlines approaching a few times.</p>
<p>I'm not sure how common strikes are from other universities, but I have heard from a fellow developer that they experienced a strike every year of their degree and the pain was much the same. Either way, it's just more fuel to the fire for my point that university is an exhausting experience. If it's not schoolwork, your motivation to work on it will disappear. <s>Then your motivation to work on schoolwork will follow.</s></p>
<h2 id="order-of-operations" tabindex="-1"><a class="header-anchor" href="https://personmeetup.ca/blog/facing-creative-road-blocks/#order-of-operations">Order of Operations</a></h2>
<p>As a creative, your work will inevitably expand upon what you've previously made. It's something inherent to creation itself; every attempt to make something keeps the previous attempts in mind to know what worked and what didn't. There's a more explicit version of this expansion when it comes to referencing previous projects. Ranging from full-blown sequels to minor acknowledgements, using previous work as a base allows one to explore ideas there weren't able to within the scope of the previous work. EmpLemon's videos <a href="https://www.youtube.com/watch?v=xgKY9hmbfgo"><em>Sacrifices to the Church of Nintendo</em></a> and <a href="https://www.youtube.com/watch?v=PUKfmMH157U"><em>New Coke</em></a> are perfect examples of this, both referencing previous videos and expanding upon them in a way that elaborates on their core message.</p>
<p>An example that comes naturally to me would be <em>Half-Life: Alyx</em>. To talk about it the audience must have an understanding of <em>Boneworks</em> first, as it was - and arguably still is - one of the most defining games for VR. It set a standard that <em>Alyx</em> would have to compete with, making comparison between the two an important part of critiquing the game. With all that said, a problem with considering follow-up work is wondering where you start. Depending on how hard you think about it, all the potential work meshes together, and it appears impossible to make a dent on anything surrounding the topic. I need to give credit to my friend Omega who gave me advice with this problem recently; the best solution is to focus on one project and forget about any others until what you're working on is done. Even then there will be subjects that are hard to gauge where a starting point could be, but at that point that's just our good friend "Writer's Block" coming in to ruin your day.</p>
<p>Overall, I find considering the continuity of my work can create a writer's block that stuns me for a good while. It's something I should do less, since while it may be good planning to think about how my future work can or will mesh with what I create now it often does more harm than good. This ties into the last obstacle I find myself grappling with, however...</p>
<h2 id="personal-troubles" tabindex="-1"><a class="header-anchor" href="https://personmeetup.ca/blog/facing-creative-road-blocks/#personal-troubles">Personal Troubles</a></h2>
<p>Finally, we come to how the hurdles I set up for myself. This is the hardest obstacle to address as I have to tear down bad mentalities I've established for years. The hurdles I have to contend with is caring for anything and over-thinking everything, both of which can be solved by letting go and not worrying about what may come. There is more I could say about what I could do to address this problem of mine, but the important point to make here is that you are your own worst enemy. It's a line we have heard millions of times but, at least for me, it never sinks in. There is nothing stopping you or me from creating something spectacular. The only person stopping us is ourselves, and it's better to loosen the creative leash on ourselves than it is to keep it tight to prevent us from causing problems.</p>
<p>The important thing is to care about yourself. Not in any egotistical way (that's part of my problem in all honesty, I want to avoid being egotistical at all costs), but rather in a more humble manner. Create music that sounds good to you; not for others or because you're a fabulous producer. Make games that are you think are fun to play or create, not for others or because you know how to make a new billion dollar IP. While it might seem exclusionary to not care about how others perceive your work, it should add a quality to your work that can be best described as "you". That uniqueness will give it a quality that brings people in, and will at least be more creatively fulfilling than chasing any trend ever could.</p>
<p>I'm still learning how to care about myself, and it's definitely a long road ahead, but I'm going to keep doing my best to work on what I care about without letting others influence me. I think if I get past that obstacles I set for myself, I can come through in the end.</p>
📃 Ignore the JAM, Focus on the Bread: A Look at Streamlining Web Development2022-03-14T21:08:53Zhttps://personmeetup.ca/blog/streamlining-web-development/Today I'll teach you how to bake a loaf of whole wheat bread without any mention of strawberry jam.<p>Web development is an interesting beast, with no "wrong" way to approach it. There are standards and general guidelines, but one look at <a href="https://neocities.org/activity">Neocities</a> makes it clear they're not mandatory. In fact, if you're wanting your page to be more stylish and expressive, those standards might get in your way. All this is to say you can create your site however you want! With that said, it's worth keeping in mind how you'll add onto or change your site in the future. For that I recommend employing the use of Markdown and Static-Site Generators. They're great tools that make working on your site easier, and while they are more complicated compared to regular HTML, I've personally found the amount of time they save to be worth in the end.</p>
<p>Before I get into the thick of things, I should preface that this article will involve programming and getting your hands dirty with the command line. It's avoidable for Markdown but inevitable for Static-Site Generators, given how they work. If you're going to continue reading I'll assume that you're comfortable with a little bit of programming, which I'll keep as minimal as I can. I'm also assuming you have a lot of content to go over in your site, and will immediately concede the ground that if you're doing <a href="https://neonaut.neocities.org/brain/rejecting-ssg.html">microblogging</a> using a generator might be overblown.</p>
<nav class="table-of-contents"><ol><li><a href="https://personmeetup.ca/blog/streamlining-web-development/#plain-ol'-white-bread">Plain Ol' White Bread</a></li><li><a href="https://personmeetup.ca/blog/streamlining-web-development/#a-loaf-of-markdown">A Loaf of Markdown</a><ol><li><a href="https://personmeetup.ca/blog/streamlining-web-development/#the-simple-way%3A-export-to-html">The Simple Way: Export to HTML</a></li><li><a href="https://personmeetup.ca/blog/streamlining-web-development/#the-overly-complicated-way%3A-live-parsing">The Overly-Complicated Way: Live Parsing</a></li></ol></li><li><a href="https://personmeetup.ca/blog/streamlining-web-development/#static-site-bakeries">Static-Site Bakeries</a><ol><li><a href="https://personmeetup.ca/blog/streamlining-web-development/#a-note-on-generators">A Note on Generators</a></li><li><a href="https://personmeetup.ca/blog/streamlining-web-development/#setting-up-eleventy">Setting Up Eleventy</a></li><li><a href="https://personmeetup.ca/blog/streamlining-web-development/#configuring-eleventy">Configuring Eleventy</a><ol><li><a href="https://personmeetup.ca/blog/streamlining-web-development/#keeping-the-.html">Keeping the .HTML</a></li><li><a href="https://personmeetup.ca/blog/streamlining-web-development/#passing-through-files">Passing Through Files</a></li></ol></li><li><a href="https://personmeetup.ca/blog/streamlining-web-development/#utilizing-templates">Utilizing Templates</a></li><li><a href="https://personmeetup.ca/blog/streamlining-web-development/#automatic-index">Automatic Index</a></li></ol></li><li><a href="https://personmeetup.ca/blog/streamlining-web-development/#okay%2C-now-you-can-pass-the-jam-(conclusion)">Okay, Now You Can Pass the JAM (Conclusion)</a></li></ol></nav><h2 id="plain-ol'-white-bread" tabindex="-1"><a class="header-anchor" href="https://personmeetup.ca/blog/streamlining-web-development/#plain-ol'-white-bread">Plain Ol' White Bread</a></h2>
<p>Starting off, let's elaborate on that "add onto or change your site" comment I first made. Without Markdown or Static-Site Generators this has to be done manually, which can raise a few problems depending on the site. For the duration of the article, we'll be referencing this site right here:</p>
<p><picture><source type="image/avif" srcset="https://personmeetup.ca/assets/Lc9QDM6-GD-320.avif 320w, https://personmeetup.ca/assets/Lc9QDM6-GD-512.avif 512w, https://personmeetup.ca/assets/Lc9QDM6-GD-640.avif 640w, https://personmeetup.ca/assets/Lc9QDM6-GD-710.avif 710w, https://personmeetup.ca/assets/Lc9QDM6-GD-1024.avif 1024w" sizes="(max-width: 710px) 100vw, 710px" /><source type="image/jpeg" srcset="https://personmeetup.ca/assets/Lc9QDM6-GD-320.jpeg 320w, https://personmeetup.ca/assets/Lc9QDM6-GD-512.jpeg 512w, https://personmeetup.ca/assets/Lc9QDM6-GD-640.jpeg 640w, https://personmeetup.ca/assets/Lc9QDM6-GD-710.jpeg 710w, https://personmeetup.ca/assets/Lc9QDM6-GD-1024.jpeg 1024w" sizes="(max-width: 710px) 100vw, 710px" /><img alt="A simple website titled “3soysaucecat”. It has a header, an image of a cat 3 soy sauce packets long, a short line of text, and three links." loading="lazy" decoding="async" src="https://personmeetup.ca/assets/Lc9QDM6-GD-320.jpeg" width="1024" height="882" /></picture></p>
<p>Right now, all it has is a few posts and an index page that links them all together. Each post is structured the same within their HTML, and all pages use one CSS file thats linked in the <code><head></code> tag. It's the HTML equivalent of white bread. But what happens when we want to add a new post?</p>
<p><picture><source type="image/avif" srcset="https://personmeetup.ca/assets/4scPfFjgmN-320.avif 320w, https://personmeetup.ca/assets/4scPfFjgmN-512.avif 512w, https://personmeetup.ca/assets/4scPfFjgmN-640.avif 640w, https://personmeetup.ca/assets/4scPfFjgmN-710.avif 710w, https://personmeetup.ca/assets/4scPfFjgmN-1024.avif 1024w" sizes="(max-width: 710px) 100vw, 710px" /><source type="image/jpeg" srcset="https://personmeetup.ca/assets/4scPfFjgmN-320.jpeg 320w, https://personmeetup.ca/assets/4scPfFjgmN-512.jpeg 512w, https://personmeetup.ca/assets/4scPfFjgmN-640.jpeg 640w, https://personmeetup.ca/assets/4scPfFjgmN-710.jpeg 710w, https://personmeetup.ca/assets/4scPfFjgmN-1024.jpeg 1024w" sizes="(max-width: 710px) 100vw, 710px" /><img alt="A sub-page dedicated to “Steve”. This time the image included in the page is of a cat on top of a pile of potatos." loading="lazy" decoding="async" src="https://personmeetup.ca/assets/4scPfFjgmN-320.jpeg" width="1024" height="882" /></picture></p>
<p>We would need to both edit the index to link to our new post, and create the post either from our site's template (assuming we made one) or from scratch. It's nothing too bad, especially if you set it up once and never touch the page again. For most people this will work fine and there's no need to worry about it, but if you're regularly creating new posts for your site it might be fairly monotonous.</p>
<p>The real problems kick in if there's an element used across your site that you need to update. In this example it's a typo in the post template for the site, but this could be anything from a incorrect <code><meta></code> tag in the head to a bulk update of links.</p>
<p></p><figure><picture><source type="image/avif" srcset="https://personmeetup.ca/assets/AV8n5VQDA9-320.avif 320w, https://personmeetup.ca/assets/AV8n5VQDA9-512.avif 512w, https://personmeetup.ca/assets/AV8n5VQDA9-640.avif 640w, https://personmeetup.ca/assets/AV8n5VQDA9-710.avif 710w, https://personmeetup.ca/assets/AV8n5VQDA9-1024.avif 1024w" sizes="(max-width: 710px) 100vw, 710px" /><source type="image/jpeg" srcset="https://personmeetup.ca/assets/AV8n5VQDA9-320.jpeg 320w, https://personmeetup.ca/assets/AV8n5VQDA9-512.jpeg 512w, https://personmeetup.ca/assets/AV8n5VQDA9-640.jpeg 640w, https://personmeetup.ca/assets/AV8n5VQDA9-710.jpeg 710w, https://personmeetup.ca/assets/AV8n5VQDA9-1024.jpeg 1024w" sizes="(max-width: 710px) 100vw, 710px" /><img alt="The same image as before, this time with crudely drawn circle around the back button; spelted as “bagg”." loading="lazy" decoding="async" src="https://personmeetup.ca/assets/AV8n5VQDA9-320.jpeg" width="1024" height="882" /></picture><figcaption>I meant to put it as 'bagk', not 'bagg'</figcaption></figure><p></p>
<p>Adding salt to the wound, this is the worst case scenario; needing to manually edit every post on the site to apply a template change. Scaling this up, the inability to do bulk changes is problematic if you want to overhaul the entire structure of the website as it locks you into your initial HTML<sup class="footnote-ref"><a href="https://personmeetup.ca/blog/streamlining-web-development/#fn1" id="fnref1">[1]</a></sup>. Much like white bread, regular HTML isn't something you should be having if you're really pushing to be healthier. Enter Markdown and Static-Site Generators, which are more like whole wheat bread. With them we're able to make site sweeping changes to our HTML without having to manually change every page, and adding posts to our site becomes hassle free.</p>
<h2 id="a-loaf-of-markdown" tabindex="-1"><a class="header-anchor" href="https://personmeetup.ca/blog/streamlining-web-development/#a-loaf-of-markdown">A Loaf of Markdown</a></h2>
<p>If you ever formatted text on Reddit or Discord, you've used Markdown. It's a simple, yet effective method for writing rich text online that's used due to how simple it is. Depending on how you want to use Markdown, it's easy to set up as well! We'll go over two different approaches and apply them to the example site. In both cases, we'll use this markdown file.</p>
<pre class="language-md"><code class="language-md"><span class="token title important"><span class="token punctuation">#</span> help</span><br /><br />i am being threated<br /><br />![](/threat.png)<br /><br />they wont leave</code></pre>
<h3 id="the-simple-way%3A-export-to-html" tabindex="-1"><a class="header-anchor" href="https://personmeetup.ca/blog/streamlining-web-development/#the-simple-way%3A-export-to-html">The Simple Way: Export to HTML</a></h3>
<p>The simplest way to use Markdown is to export it as HTML. For those interested in microblogging that continued reading, I recommend taking a look into this. You can use a service like <a href="https://dillinger.io/">Dillinger</a> to export your Markdown text into HTML, as well as preview of what your text will look like formatted. Other options include dedicated writing apps like <a href="https://ia.net/writer">iA Writer</a>, which offer the same functionality. Once you exported your Markdown into HTML, you're done! Copy the code into another HTML file or expand it further with CSS. From this point it's up to you! For reference, our exported HTML code looks like so:</p>
<p><picture><source type="image/avif" srcset="https://personmeetup.ca/assets/WSkBVJOssv-320.avif 320w, https://personmeetup.ca/assets/WSkBVJOssv-512.avif 512w, https://personmeetup.ca/assets/WSkBVJOssv-640.avif 640w, https://personmeetup.ca/assets/WSkBVJOssv-710.avif 710w" sizes="(max-width: 710px) 100vw, 710px" /><source type="image/jpeg" srcset="https://personmeetup.ca/assets/WSkBVJOssv-320.jpeg 320w, https://personmeetup.ca/assets/WSkBVJOssv-512.jpeg 512w, https://personmeetup.ca/assets/WSkBVJOssv-640.jpeg 640w, https://personmeetup.ca/assets/WSkBVJOssv-710.jpeg 710w" sizes="(max-width: 710px) 100vw, 710px" /><img alt="A notepad file of the markdown from before after it has been compiled into HTML" loading="lazy" decoding="async" src="https://personmeetup.ca/assets/WSkBVJOssv-320.jpeg" width="710" height="586" /></picture></p>
<h3 id="the-overly-complicated-way%3A-live-parsing" tabindex="-1"><a class="header-anchor" href="https://personmeetup.ca/blog/streamlining-web-development/#the-overly-complicated-way%3A-live-parsing">The Overly-Complicated Way: Live Parsing</a></h3>
<p>Another option you have for Markdown is to parse live on the page. This involves a mess of multiple components, but the advantage this method has is having your Markdown changes reflected on your website without the need to export.</p>
<p>First, we need to get a parser that works under Javascript. For this example we'll be using <a href="https://markdown-it.github.io/">Markdown-It</a>, but you can use whatever parser you want! Some other options worth looking at are <a href="http://showdownjs.com/">Showdown</a> and <a href="https://marked.js.org/">Marked</a>. Make sure you call the parser you're using in your HTML, preferably within the <code><head></code> tag.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdnjs.cloudflare.com/ajax/libs/markdown-it/12.3.2/markdown-it.min.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span><br /><span class="token comment"><!--You may find it easiest to call the parser from a CDN as I've done here--></span></code></pre>
<p>While we're in the HTML, lets include a container for the Markdown to go into. We'll create a <code><div></code> with the attribute <code>id="markdown"</code> to call in our Javascript.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>markdown<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p>Next, we need to parse the file. To do that, we need to utilize <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX">AJAX</a> - more specifically, an HTTP Request - to grab the file from our site's file directory, convert it into HTML using our parser of choice, then output the result into the previously designated container. You see how this is overly-complicated yet?</p>
<p>Create a new <code><script></code> tag within the HTML document's <code><head></code>, or create a Javascript file and link to it in your HTML. We'll dump the following spaghetti function into it:</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">ajaxMarkdown</span><span class="token punctuation">(</span><span class="token parameter">fileRequest<span class="token punctuation">,</span> targetId</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> <span class="token comment">// Declarations</span><br /> <span class="token keyword">var</span> httpRequest <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token keyword">var</span> converter <span class="token operator">=</span> window<span class="token punctuation">.</span><span class="token function">markdownit</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><br /> <span class="token comment">// Send a request for file within our site's directory</span><br /> httpRequest<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">"GET"</span><span class="token punctuation">,</span> fileRequest<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token comment">// If the server found the file, go ahead with the function</span><br /> httpRequest<span class="token punctuation">.</span><span class="token function-variable function">onreadystatechange</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> <span class="token keyword">if</span> <span class="token punctuation">(</span><br /> httpRequest<span class="token punctuation">.</span>readyState <span class="token operator">===</span> XMLHttpRequest<span class="token punctuation">.</span><span class="token constant">DONE</span> <span class="token operator">&&</span><br /> httpRequest<span class="token punctuation">.</span>status <span class="token operator">===</span> <span class="token number">200</span><br /> <span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> <span class="token comment">// Render the Markdown as HTML and insert it in the target container (CHECK YOUR PARSER'S DOCS)</span><br /> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span>targetId<span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> converter<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><br /> httpRequest<span class="token punctuation">.</span>responseText<br /> <span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /> <span class="token punctuation">}</span><span class="token punctuation">;</span><br /> httpRequest<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<p>Finally, we need to call our function with the file we want displayed and it's target container. Create a <code><script></code> tag at the end of your <code><body></code> and give it the following:</p>
<pre class="language-js"><code class="language-js">window<span class="token punctuation">.</span><span class="token function-variable function">onload</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> <span class="token function">ajaxMarkdown</span><span class="token punctuation">(</span><span class="token string">"/file.md"</span><span class="token punctuation">,</span> <span class="token string">"markdown"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p><picture><source type="image/avif" srcset="https://personmeetup.ca/assets/PWUAj--A4e-320.avif 320w, https://personmeetup.ca/assets/PWUAj--A4e-512.avif 512w, https://personmeetup.ca/assets/PWUAj--A4e-640.avif 640w, https://personmeetup.ca/assets/PWUAj--A4e-710.avif 710w, https://personmeetup.ca/assets/PWUAj--A4e-1024.avif 1024w, https://personmeetup.ca/assets/PWUAj--A4e-1420.avif 1420w" sizes="(max-width: 710px) 100vw, 710px" /><source type="image/jpeg" srcset="https://personmeetup.ca/assets/PWUAj--A4e-320.jpeg 320w, https://personmeetup.ca/assets/PWUAj--A4e-512.jpeg 512w, https://personmeetup.ca/assets/PWUAj--A4e-640.jpeg 640w, https://personmeetup.ca/assets/PWUAj--A4e-710.jpeg 710w, https://personmeetup.ca/assets/PWUAj--A4e-1024.jpeg 1024w, https://personmeetup.ca/assets/PWUAj--A4e-1420.jpeg 1420w" sizes="(max-width: 710px) 100vw, 710px" /><img alt="The resulting webpage after the markdown file has been parsed by the javascript function. It appears that “threat.png” image is of a stuffed Kirby as it holds a knife in the middle of a dimmly lit street." loading="lazy" decoding="async" src="https://personmeetup.ca/assets/PWUAj--A4e-320.jpeg" width="1420" height="811" /></picture></p>
<p>And there we go! More than double the work for the same result! Except not quite, because we do have greater flexibility with this method. While we still need to manually create and alter HTML files, they serve as an interchangeable template that we're free to change as long as we're consistent about how we use them. Assuming everything is working correctly, all we need to do to change a post's contents is to update the associated Markdown file.</p>
<h2 id="static-site-bakeries" tabindex="-1"><a class="header-anchor" href="https://personmeetup.ca/blog/streamlining-web-development/#static-site-bakeries">Static-Site Bakeries</a></h2>
<p>Static-Site Generators take the premise we had with our last Markdown example and amplifies it to the whole website. Instead of filling reserved space with parsed Markdown, we can fill it with additional HTML. This creates modularity in our site, which makes it easier to edit elements in the future. It can also be ignored and treated like regular static page depending on what you want to create. This modularity leads into the catch that Static-Site Generators are an engine for compiling sites, rather than something that can run live like our complicated Markdown example. What the generator does is take your template files and parses them into a complete site that's ready to be deployed.</p>
<p>As an example, we'll overhaul our example site to be compatible with <a href="https://www.11ty.dev/">Eleventy</a>, a Static-Site Generator that runs in <a href="https://nodejs.org/en/">Node.js</a>. If you don't already, make sure you have node installed.</p>
<h3 id="a-note-on-generators" tabindex="-1"><a class="header-anchor" href="https://personmeetup.ca/blog/streamlining-web-development/#a-note-on-generators">A Note on Generators</a></h3>
<p>Generators can be a hassle to use, especially if you're uploading the files manually to something like Neocities. Not only that, but there is also <a href="https://jamstack.org/generators/">a lot of generators to choose from</a>, and with that comes some decisions. I chose Eleventy for this example because it's what I understand and it doesn't force a template. That last reason is important because Static-Site Generators can force developers into designing their sites a certain way depending on how they work. I mention this because Neonaut recently <a href="https://neonaut.neocities.org/brain/rejecting-ssg.html">rejected SSG's all together</a> because using a generator was giving them <a href="https://neonaut.neocities.org/blog/2021/blog.html">too many problems</a>.</p>
<blockquote>
<p>I was thinking about why I never update my site anymore, and a big part of the problem is the static generated site still feels like way too much stuff. It's enough of a hassle to generate the site and upload it, and things break (I've been putting off fixing some Hugo template errors for 7 months now...).</p>
</blockquote>
<p>They're not alone. Nicolas Hoizey finished off their explaination on how their site works with mentioning how <a href="https://nicolas-hoizey.com/about/the-website.html#but">"Publishing new content has become more complicated[...]."</a> Depending on how you're hosting your site there's ways to make publishing easier, but that's outside the scope of this article. This is also outside our scope but worth mentioning: your choice of generator should be dependent on what your project is trying to accomplish. In our case, we're making a standard HTML site but adding modular elements. That's perfect for Eleventy.</p>
<h3 id="setting-up-eleventy" tabindex="-1"><a class="header-anchor" href="https://personmeetup.ca/blog/streamlining-web-development/#setting-up-eleventy">Setting Up Eleventy</a></h3>
<p>Create a new folder and open it up in the command line. Once there, input these commands:</p>
<pre class="language-batch"><code class="language-batch"><span class="token command"><span class="token keyword">npm</span> init <span class="token parameter attr-name">-y</span></span><br /><span class="token command"><span class="token keyword">npm</span> install <span class="token parameter attr-name">--save-dev</span> @11ty<span class="token parameter attr-name">/eleventy</span></span></code></pre>
<p><code>npm init -y</code> initializes a <code>package.json</code> file for us, which is required for installing Eleventy into the project's folder. <code>npm install --save-dev @11ty/eleventy</code> installs Eleventy into our project folder while also saying "I only need this package for development." At this point, you will want to open your <code>package.json</code> file to tweak a few things. Edit the file so that under <code>"scripts"</code> it looks like this:</p>
<pre class="language-json"><code class="language-json"><span class="token property">"scripts"</span><span class="token operator">:</span> <span class="token punctuation">{</span><br /> <span class="token property">"build"</span><span class="token operator">:</span> <span class="token string">"eleventy"</span><span class="token punctuation">,</span><br /> <span class="token property">"start"</span><span class="token operator">:</span> <span class="token string">"eleventy --serve"</span><br /><span class="token punctuation">}</span></code></pre>
<p>What this does is create two new commands for us to use; one we can use when automatically deploying the site later on (<code>npm run build</code>) and another for instantly seeing the changes we've made during development (<code>npm start</code>). From this point we can run <code>npm start</code>, open up <code>localhost:8080</code> in our browser and see how our site looks like served with eleventy!</p>
<p><picture><source type="image/avif" srcset="https://personmeetup.ca/assets/7uIoEq8Lk4-320.avif 320w, https://personmeetup.ca/assets/7uIoEq8Lk4-512.avif 512w, https://personmeetup.ca/assets/7uIoEq8Lk4-640.avif 640w, https://personmeetup.ca/assets/7uIoEq8Lk4-710.avif 710w" sizes="(max-width: 710px) 100vw, 710px" /><source type="image/jpeg" srcset="https://personmeetup.ca/assets/7uIoEq8Lk4-320.jpeg 320w, https://personmeetup.ca/assets/7uIoEq8Lk4-512.jpeg 512w, https://personmeetup.ca/assets/7uIoEq8Lk4-640.jpeg 640w, https://personmeetup.ca/assets/7uIoEq8Lk4-710.jpeg 710w" sizes="(max-width: 710px) 100vw, 710px" /><img alt="The result from compiling the index page with Eleventy. All the stying has vanished from the site." loading="lazy" decoding="async" src="https://personmeetup.ca/assets/7uIoEq8Lk4-320.jpeg" width="710" height="621" /></picture></p>
<p>Yeah, that's not looking too pretty. Making matters worse, all our links to internal pages are broken, too. But don't worry, we'll cover why this all happened. For now, appreciate that your website is now compiling under Eleventy!</p>
<h3 id="configuring-eleventy" tabindex="-1"><a class="header-anchor" href="https://personmeetup.ca/blog/streamlining-web-development/#configuring-eleventy">Configuring Eleventy</a></h3>
<p>There's a lot to customizing Eleventy depending on what you're wanting to do. Our scope is going to remain simple for now, sticking to fixing the issues regarding our stylesheet and our links. Before we do that, let's understand how they even got broken in the first place.</p>
<p>If you look in the project folder, you'll notice a new folder named <code>_site</code>. This is what Eleventy outputs once it compiles your site. Right now we haven't given it anything to compile, so it's literally just coping our HTML files.</p>
<p><picture><source type="image/avif" srcset="https://personmeetup.ca/assets/OXqx9PT7Rn-320.avif 320w, https://personmeetup.ca/assets/OXqx9PT7Rn-512.avif 512w, https://personmeetup.ca/assets/OXqx9PT7Rn-640.avif 640w, https://personmeetup.ca/assets/OXqx9PT7Rn-710.avif 710w" sizes="(max-width: 710px) 100vw, 710px" /><source type="image/jpeg" srcset="https://personmeetup.ca/assets/OXqx9PT7Rn-320.jpeg 320w, https://personmeetup.ca/assets/OXqx9PT7Rn-512.jpeg 512w, https://personmeetup.ca/assets/OXqx9PT7Rn-640.jpeg 640w, https://personmeetup.ca/assets/OXqx9PT7Rn-710.jpeg 710w" sizes="(max-width: 710px) 100vw, 710px" /><img alt="A look into the “inspect element” panel reveals that the styling has not been copied over by Eleventy." loading="lazy" decoding="async" src="https://personmeetup.ca/assets/OXqx9PT7Rn-320.jpeg" width="710" height="621" /></picture></p>
<p>Not only that, each HTML file gets it's own folder with an index page. This is a special trick that creates extension-less URL's, which is seen as <a href="https://www.w3.org/Provider/Style/URI">best practice</a>. With that all in mind, how do we configure Eleventy to our projects needs?</p>
<h4 id="keeping-the-.html" tabindex="-1"><a class="header-anchor" href="https://personmeetup.ca/blog/streamlining-web-development/#keeping-the-.html">Keeping the .HTML</a></h4>
<p>Starting off our configuration, there's a trick to getting file extensions back utilizing Eleventy's <a href="https://www.11ty.dev/docs/data/">Data Cascade</a><sup class="footnote-ref"><a href="https://personmeetup.ca/blog/streamlining-web-development/#fn2" id="fnref2">[2]</a></sup>. For reference, the Data Cascade is how Eleventy takes in data to use within a project's templates. In our case, we'll be utilizing <a href="https://www.11ty.dev/docs/data-template-dir/">Directory Data Files</a> to bring back file extensions.</p>
<p>Create a new folder and name it anything (for this example I'll use "pages"). Within that folder, create a JSON file with the same name (That means I would create <code>pages.json</code>), and give it the following:</p>
<pre class="language-json"><code class="language-json"><span class="token punctuation">{</span><br /> <span class="token property">"permalink"</span><span class="token operator">:</span> <span class="token string">"streamlining-web-development.html"</span><br /><span class="token punctuation">}</span></code></pre>
<p>There's a lot going on at once, so lets break it down.</p>
<ol>
<li>"Directory Data Files" apply data to a whole folder. Any Markdown or HTML we have in the same folder will have this metadata for Eleventy to munch on during compiling.</li>
<li>"permalink" sets the expected URL for a page.</li>
<li>"page.file<a href="https://stackoverflow.com/a/4357014/10969346">Slug</a>" is a variable that gives information on the current pages file name.</li>
<li>We call "page.fileSlug" with double curry braces to use the variable in our "permalink". We'll talk about how that works later!</li>
</ol>
<p>Now for any HTML files we have in our "pages" folder, those pages will have a .html extension at the end of our URL's! Move all your pages into the "pages" folder <em>except for your</em> <code>index.html</code><sup class="footnote-ref"><a href="https://personmeetup.ca/blog/streamlining-web-development/#fn3" id="fnref3">[3]</a></sup>.</p>
<h4 id="passing-through-files" tabindex="-1"><a class="header-anchor" href="https://personmeetup.ca/blog/streamlining-web-development/#passing-through-files">Passing Through Files</a></h4>
<p>The reason our CSS file didn't get copied into the <code>_site</code> folder during build time is that Eleventy doesn't recognize these file types as templates. By default, Eleventy only focuses on compiling what it considers template files, which consist of HTML (including "spiced" variants) and Markdown. Anything else is left out, with the assumption that it shouldn't be touched. We can change this behavior, and a variety of others, by creating a new file within our project; <code>.eleventy.js</code>.</p>
<p>The <code>.eleventy.js</code> file allows you to configure Eleventy to your sites needs. There's a lot that can be done here, but we'll be focusing on copying over our CSS and image files. <a href="https://www.11ty.dev/docs/config/">Feel free to take a look through the documentation to see what else you're able to do, though!</a> For whatever you plan on doing, however, <code>.eleventy.js</code> needs to follow this format:</p>
<pre class="language-js"><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">eleventyConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br /> <span class="token comment">//Insert Javascript Here</span><br /> <span class="token keyword">return</span> <span class="token punctuation">{</span><br /> <span class="token comment">//Insert JSON Here</span><br /> <span class="token punctuation">}</span><span class="token punctuation">;</span><br /><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>Let's get our images and CSS copied over. In the JSON section, have it return the following:</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">return</span> <span class="token punctuation">{</span><br /> <span class="token literal-property property">templateFormats</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"html"</span><span class="token punctuation">,</span> <span class="token string">"md"</span><span class="token punctuation">,</span> <span class="token string">"css"</span><span class="token punctuation">,</span> <span class="token string">"png"</span><span class="token punctuation">,</span> <span class="token string">"jpg"</span><span class="token punctuation">]</span><span class="token punctuation">,</span><br /><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>This tells Eleventy what files types are in use so they can be compiled and copied into the <code>_site</code> folder. Like mentioned previously, Eleventy by default includes HTML and Markdown files. What we've done is tell Eleventy to also include <code>css</code>, <code>png</code>, and <code>jpg</code> files. These files aren't compiled in any way, but instead copied over into the <code>_site</code> folder. With that, we now have our styling working again!</p>
<p><picture><source type="image/avif" srcset="https://personmeetup.ca/assets/RijgeQ8fGP-320.avif 320w, https://personmeetup.ca/assets/RijgeQ8fGP-512.avif 512w, https://personmeetup.ca/assets/RijgeQ8fGP-640.avif 640w, https://personmeetup.ca/assets/RijgeQ8fGP-710.avif 710w" sizes="(max-width: 710px) 100vw, 710px" /><source type="image/jpeg" srcset="https://personmeetup.ca/assets/RijgeQ8fGP-320.jpeg 320w, https://personmeetup.ca/assets/RijgeQ8fGP-512.jpeg 512w, https://personmeetup.ca/assets/RijgeQ8fGP-640.jpeg 640w, https://personmeetup.ca/assets/RijgeQ8fGP-710.jpeg 710w" sizes="(max-width: 710px) 100vw, 710px" /><img alt="The index page now looks like how it did at the start of this tutorial, with the addition of the “help” page." loading="lazy" decoding="async" src="https://personmeetup.ca/assets/RijgeQ8fGP-320.jpeg" width="710" height="621" /></picture></p>
<p>Of course, if you have other file types in use on your site, you can include them in the <code>templateFormats</code> list as well.</p>
<h3 id="utilizing-templates" tabindex="-1"><a class="header-anchor" href="https://personmeetup.ca/blog/streamlining-web-development/#utilizing-templates">Utilizing Templates</a></h3>
<p>Now that our site is working like it used to, lets add some templating to it! In the root of your project folder, make a new folder called <code>_includes</code>. This folder is what's called on by other files when they request a template.</p>
<p>I briefly touched on it already, but template languages are "spices" of HTML that make it function similarly to scripting languages. If it's built in Javascript, template languages can also take advantage of any data within a Javascript object and bring it into the HTML<sup class="footnote-ref"><a href="https://personmeetup.ca/blog/streamlining-web-development/#fn4" id="fnref4">[4]</a></sup>. We've already used <a href="https://mozilla.github.io/nunjucks/">Nunjucks</a> when we set our pages permalinks, so we'll stick with it.</p>
<p>Create a new HTML file, and title it <code>base.html</code>. This will be our base template that everything on our site stems from. Edit the file as if you were creating a new page for your site but don't add anything to the <code><body></code> tag. There we'll put in a bit of Nunjucks notation with ``. This tells Eleventy during build time that for pages that reference <code>base.html</code> as their template, this is where their content goes. For our example, this is how the base looks:</p>
<pre class="language-html"><code class="language-html"><br /><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>3soysaucecat<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">utf-8</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/styles.css<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span><br /> {{ content }}<br /> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span><br /></code></pre>
<p>With our <code>base.html</code> set up, lets use it in our index page! At the top of the file, type out two rows of three dashes spaced apart.</p>
<pre class="language-plaintext"><code class="language-plaintext">---<br />---</code></pre>
<p>This is <a href="https://yaml.org/">YAML</a>, which is treated the same as JSON during build time. All we need to do here is say "We want to use our base template." Luckily, that's easy to do.</p>
<pre class="language-plaintext"><code class="language-plaintext">---<br />layout: base.html<br />---</code></pre>
<p>That's it! What we want to do now is cleanup our index page so that it only has our body content in it. We can also include the same YAML in our Markdown file to give it proper styling.</p>
<p>Here's what we had before...</p>
<p><picture><source type="image/avif" srcset="https://personmeetup.ca/assets/636F1aSBVh-320.avif 320w, https://personmeetup.ca/assets/636F1aSBVh-512.avif 512w, https://personmeetup.ca/assets/636F1aSBVh-640.avif 640w, https://personmeetup.ca/assets/636F1aSBVh-710.avif 710w" sizes="(max-width: 710px) 100vw, 710px" /><source type="image/jpeg" srcset="https://personmeetup.ca/assets/636F1aSBVh-320.jpeg 320w, https://personmeetup.ca/assets/636F1aSBVh-512.jpeg 512w, https://personmeetup.ca/assets/636F1aSBVh-640.jpeg 640w, https://personmeetup.ca/assets/636F1aSBVh-710.jpeg 710w" sizes="(max-width: 710px) 100vw, 710px" /><img alt="The “help.md” file in plain HTML." loading="lazy" decoding="async" src="https://personmeetup.ca/assets/636F1aSBVh-320.jpeg" width="710" height="621" /></picture></p>
<p>And this is what we got now!</p>
<p><picture><source type="image/avif" srcset="https://personmeetup.ca/assets/Ev2Iw7uc2W-320.avif 320w, https://personmeetup.ca/assets/Ev2Iw7uc2W-512.avif 512w, https://personmeetup.ca/assets/Ev2Iw7uc2W-640.avif 640w, https://personmeetup.ca/assets/Ev2Iw7uc2W-710.avif 710w" sizes="(max-width: 710px) 100vw, 710px" /><source type="image/jpeg" srcset="https://personmeetup.ca/assets/Ev2Iw7uc2W-320.jpeg 320w, https://personmeetup.ca/assets/Ev2Iw7uc2W-512.jpeg 512w, https://personmeetup.ca/assets/Ev2Iw7uc2W-640.jpeg 640w, https://personmeetup.ca/assets/Ev2Iw7uc2W-710.jpeg 710w" sizes="(max-width: 710px) 100vw, 710px" /><img alt="“help.md” again, this time with some additional stylesheets." loading="lazy" decoding="async" src="https://personmeetup.ca/assets/Ev2Iw7uc2W-320.jpeg" width="710" height="621" /></picture></p>
<p>One thing we're missing though is our button for post navigation, but that's easy to fix with another template. In the <code>_includes</code> folder, create a new HTML file called <code>post.html</code>. Start it off with the same YAML we've been using for our other pages, because why rewrite our base template when we can reuse it? Copy in our button's tags, follow it with a <code>{{ content }}</code> in the line below and we're done! For reference, this is how my code looks:</p>
<pre class="language-html"><code class="language-html">---<br />layout: base.html<br />---<br /><br /><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>captions<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>bagk<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span><br />{{ content }}</code></pre>
<p><picture><source type="image/avif" srcset="https://personmeetup.ca/assets/xEafdfAWtk-320.avif 320w, https://personmeetup.ca/assets/xEafdfAWtk-512.avif 512w, https://personmeetup.ca/assets/xEafdfAWtk-640.avif 640w, https://personmeetup.ca/assets/xEafdfAWtk-710.avif 710w" sizes="(max-width: 710px) 100vw, 710px" /><source type="image/jpeg" srcset="https://personmeetup.ca/assets/xEafdfAWtk-320.jpeg 320w, https://personmeetup.ca/assets/xEafdfAWtk-512.jpeg 512w, https://personmeetup.ca/assets/xEafdfAWtk-640.jpeg 640w, https://personmeetup.ca/assets/xEafdfAWtk-710.jpeg 710w" sizes="(max-width: 710px) 100vw, 710px" /><img alt="The same page, only now the back button has been added back. It's still misspelled though, this time as “bagk”." loading="lazy" decoding="async" src="https://personmeetup.ca/assets/xEafdfAWtk-320.jpeg" width="710" height="621" /></picture></p>
<h3 id="automatic-index" tabindex="-1"><a class="header-anchor" href="https://personmeetup.ca/blog/streamlining-web-development/#automatic-index">Automatic Index</a></h3>
<p>As a finishing touch, let's quickly set up our posts to automatically appear on the index. We can do this with Eleventy's <a href="https://www.11ty.dev/docs/collections/">Collection</a> dataset. First, we need to extend the JSON in the <code>pages</code> folder to set a tag for any HTML or Markdown in there.</p>
<pre class="language-json"><code class="language-json"><span class="token punctuation">{</span><br /> <span class="token property">"permalink"</span><span class="token operator">:</span> <span class="token string">"{{ page.fileSlug }}.html"</span><span class="token punctuation">,</span><br /> <span class="token property">"tags"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"post"</span><span class="token punctuation">]</span><br /><span class="token punctuation">}</span></code></pre>
<p>With our tag set, we can now call it when we want a list of our posts. To do that, we can bring it into our HTML like this:</p>
<pre class="language-html"><code class="language-html">{% for post in collections.post %}<br /><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{{ post.url }}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>{{ post.fileSlug }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><br />{% endfor %} </code></pre>
<p>Let's break this down.</p>
<ol>
<li>We're using Nunjucks to iterate over our post list; it's set up as a <code>for</code> loop for anything tagged <code>post</code>.</li>
<li>Within our anchor tags, we're calling for the <code>url</code> and <code>fileSlug</code> of a post. Think back to when we were setting up our <code>.html</code> extensions.</li>
<li>To properly end the loop we need to include <code>{% endfor %}</code>, otherwise Nunjucks will produce a templating error and Eleventy will not compile our site.</li>
</ol>
<p>Checking on our index page, it appears to be working perfectly!</p>
<p><picture><source type="image/avif" srcset="https://personmeetup.ca/assets/dmQw0oWkrn-320.avif 320w, https://personmeetup.ca/assets/dmQw0oWkrn-512.avif 512w, https://personmeetup.ca/assets/dmQw0oWkrn-640.avif 640w, https://personmeetup.ca/assets/dmQw0oWkrn-710.avif 710w" sizes="(max-width: 710px) 100vw, 710px" /><source type="image/jpeg" srcset="https://personmeetup.ca/assets/dmQw0oWkrn-320.jpeg 320w, https://personmeetup.ca/assets/dmQw0oWkrn-512.jpeg 512w, https://personmeetup.ca/assets/dmQw0oWkrn-640.jpeg 640w, https://personmeetup.ca/assets/dmQw0oWkrn-710.jpeg 710w" sizes="(max-width: 710px) 100vw, 710px" /><img alt="The final index page, now primed to show any additional files that may get added to the “pages” folder." loading="lazy" decoding="async" src="https://personmeetup.ca/assets/dmQw0oWkrn-320.jpeg" width="710" height="621" /></picture></p>
<h2 id="okay%2C-now-you-can-pass-the-jam-(conclusion)" tabindex="-1"><a class="header-anchor" href="https://personmeetup.ca/blog/streamlining-web-development/#okay%2C-now-you-can-pass-the-jam-(conclusion)">Okay, Now You Can Pass the JAM (Conclusion)</a></h2>
<p>That's it! We streamlined the development of our small site! It should be easier to update it with new posts or change its layout as time progresses. And the best part is that this is the surface of what you can do with Eleventy. It's a flexible tool that extends HTML while maintaining creative freedom, allowing you to create a formal looking blog or just make linking new posts on your creative site much easier. Overall, I hope this wet your appetite to try Eleventy out or at least didn't seem like a major leap.</p>
<p>One of the reasons I wanted to write this article is that I found it overwhelming to learn about Static-Site Generators. That's because when people talk about them they often coincide with a discussion on the Jamstack, a workflow for web development that focuses more on building dynamic sites without the bloat of a server network. Instead, Static Site Generators like Eleventy are used to create pages ahead of time, compiling them with data from Javascript and APIs. The name Jamstack comes from this relationship, with Static Site Generators making the Markup of the site and thus completing the JAM acronym.</p>
<p>If you're looking to do more with your site than just a simple blog, it's worth diving deeper into the Jamstack to see what you're able to do. But if your like me and just want a site that's simple to update and is fun to poke around with, you only need to worry about the Markup. And while we just took care of that, theres other features in Eleventy that are well worth exploring and learning about like <a href="https://www.11ty.dev/docs/plugins/rss/">RSS Feeds</a>. At the end of the day though we baked a loaf of bread with a different type of flour. Bread is bread, and in the same vain whatever method you choose to make your website is fine. I just noticed recipes asking for strawberry jam in the dough and had to ask "That's a bit too soon, don't you think?"</p>
<hr class="footnotes-sep" />
<section class="footnotes">
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>I say structure instead of design because with the use of CSS you can drastically change the design of your webpage without altering the HTML. Still, changing the HTML may be needed for your planned redesign. <a href="https://personmeetup.ca/blog/streamlining-web-development/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn2" class="footnote-item"><p>Credit to <a href="https://github.com/pdehaan">Peter deHaan</a> for their <a href="https://github.com/pdehaan/11ty-dynamic-permalink-test">showcase of dynamic permalinks in action</a>! <a href="https://personmeetup.ca/blog/streamlining-web-development/#fnref2" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn3" class="footnote-item"><p>Moving your <code>index.html</code> into the "pages" folder will rename the file to your folders name at build time. <a href="https://personmeetup.ca/blog/streamlining-web-development/#fnref3" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn4" class="footnote-item"><p>I'm putting a "citation needed" here since this isn't an area I've explored deeply. If you know more about templating languages in this regard, please let me know! <a href="https://personmeetup.ca/blog/streamlining-web-development/#fnref4" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
📃 Hello, World!2022-02-14T04:03:08Zhttps://personmeetup.ca/blog/hello-world/We all need to start from somewhere...<p>Hey there! My name's Leslie Swan, and this is the first blog post to my website. Being honest, it feels kinda weird to introduce myself by my real name since I often go by Person Meetup online; Even this website is named that! I guess I want to get in front of the name before anything happens, making sure it's clear that Person and I are the same person.</p>
<p>Speaking of this website, its purpose is to give me a space to show off my work and give me a way to publicly discuss things that come to mind. This will mostly consist of reflections on finished projects and different ideas about design, but I may throw in a wild card occasionally.</p>
<h2 id="how-did-we-get-here%3F" tabindex="-1"><a class="header-anchor" href="https://personmeetup.ca/blog/hello-world/#how-did-we-get-here%3F">How did we get here?</a></h2>
<p>I included an about section on the index, but I want to go deeper regarding how I got into my main interests. It also serves as a jumping off point for my past, which I'm sure I'll end up mentioning in the future.</p>
<p>Much like other kids in the late 2000s, I spent my time on the Internet. I stayed within the closest thing to an Internet safe zone, however, as my web activities consisted of playing <em>Poptropica</em> and <em>Miniclip</em>. It also included watching and making my own <em>Zimmer Twinz</em> episodes, which begins a theme throughout my childhood of digital creation. I enjoyed making my own house in <em>Everybody Edits</em>, and took advantage of the creative potential that <em>Minecraft</em> offered. I spent my free time creating for fun, and many of the friends I met at the time came from a passion to create as well. (Shoutouts to Blue, Sam, and the rest of the ol' Minecraft gang!)</p>
<p>For YouTube videos what I watched was much like the rest of my web browsing, with old Gumby and <a href="https://www.youtube.com/watch?v=xZOTdj3JBAc" title="I am genuinely surprised I managed to find this again. It's something I remember searching for but could never find!">Pythagora Switch</a> episodes making the bulk of my viewing. Other videos I watched at the time were from Joey Turner's <a href="https://www.youtube.com/watch?v=an_8FKyEL4c&t=199s" title="The following link may or may not jump you to an example of modern discourse. Consider this a headphone warning."><em>Tomy Thomas and Friends</em></a> series. Besides being my introduction to Internet Culture, the series ignited my interests in video making, as it inspired me to spend countless hours recording my own train set with a cheap flip-out camera. Another thing I discovered on YouTube was Portal, a series I instantly fell in love with. It was the main reason I got a Steam account in the first place, even if all I could play at the time was the demo. It would be late 2014 before I played Portal 2 myself, after having watched it so many times before. I would soon play around with the Perpetual Testing Initiative, which served as my gateway into the world of level editing and game design. As of writing, this is my main goal that I'm working at right now!</p>
<p>There are other areas I'm interested in like music, programming, or competitive gaming, but what I've brought up is the origin point for everything I do these days. It all comes from a childhood passion to create that has stuck around to this day, something I really do appreciate.</p>
<hr />
<p>I initially planned to launch with a few more posts, but I spent all my time on a tutorial about streamlining web development that I'm still working on. It's an application of things I learned about Markdown and Eleventy to a more general audience, and I'm looking forward to finishing that up. I also have other ideas that I hope to write on soon, so if I've peaked your interest at all I hope you stick around!</p>