All - Person MeetupLatest Site Updates
2023-08-20T20:04:00Z
https://personmeetup.ca/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>
📻 Overflowing Canvas2023-07-18T00:00:00Zhttps://personmeetup.ca/portfolio/overflowing-canvas/An agressive take on the music of ULTRAKILL's seventh layer<p><em>Overflowing Canvas</em> was a track inspired by the sneak peak for <a href="http://devilmayquake.com/">ULTRAKILL's</a> first level in layer 7 (Violence) titled the <a href="https://www.youtube.com/watch?v=g8z3sVyohlA">"Garden of Forking Paths"</a>. While the <a href="https://www.youtube.com/watch?v=Kt6gc3XMC9E">WIP music</a> is likely more fitting to the intended atmosphere of the level, I couldn't help but feel it needed to be more agressive.</p>
<p>Also worth mentioning I did the cover art myself! Since ULTRAKILL's soundtrack uses two tone silloetes for its cover art, I figured I'd try my hand at a similar approach. I dabbled in a tri-tone to give some perspective and depth on the Mannequin, whose pose is referenced from the final boss of <em>Drakengard's</em> ending E. Given it's the first real digital artwork I've done, I'm really proud of how it came out!</p>
📻 Sn0wy Direct: Original Soundtrack2023-06-06T00:00:00Zhttps://personmeetup.ca/portfolio/sn0wy-direct-original-soundtrack/Way too much effort was put into this.<p>When I was editing the first <a href="https://personmeetup.ca/portfolio/sn0wy-direct"><em>Sn0wy Direct</em></a> episode, I found the ending stood out like a sore thumb to me. Not because of how everyone pilled into the stage to say their piece, but rather because of the ending music. For whatever reason, I didn't like the idea of replaying “Beneath the Mask” for the outro, and felt like something else needed to take its place there. It probably didn't help that <a href="https://twitter.com/cocodotts">Cocodotts</a> was playing the track through his phone speaker, which was made even worse by me boosting his volume to 200%.</p>
<p>Honestly, I think I used <em>Sn0wy Direct</em> as an excuse to work on an old idea I had a while back, which was to make a collage of the various songs and melodies used within <a href="https://www.youtube.com/@_Sn0wy"><em>Sn0wy</em></a>. It was another idea of mine that I was interested in doing, but simply didn't have the motivation to kick it off. That was the thought process going into “Sn0wed In”, which was intended to be the only song produced for the direct.</p>
<p>Of course, once you start something it's hard to stop, and much like the rest of the direct things went out of control very quickly. I ended up making 3 more tracks for the live event, with 2 short squelches (one of which I extended for the OST) and another full track that served as the backing track for my mental breakdown in the series. And of course, I made sure to include “Summer's Day”, the predominate melody found within <em>Sn0wy</em>, in some form or another.</p>
<p>Pretty much all the tracks on the OST were created for the live event in about a week or less. For the soundtrack release, however, I spent some additional time fixing up some tracks to address some minor issues I had with them. For instance, I ended up refining the baseline to “You Cry Together” as I felt the version that was originally released was a bit too flat in its sound. The only “unique” track to the OST would be “Surrounded”, which I extended further to serve as a reprise to “Sn0wed In”.</p>
<p>Despite having put off releasing it for so long, I'm really proud of what I managed to do with the soundtrack. It's just one of the multitude of reasons that I'm happy about having the chance to work on <em>Sn0wy Direct</em>.</p>
🔗 I Never Learned To Speak2023-05-15T00:00:00Zhttps://personmeetup.ca/portfolio/i-never-learned-to-speak/I can't articulate just how much Word salad is a thing numbs my brain.<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 overview focuses on the technical aspects of <em>I never learned to speak</em>, as I feel I've already said much of what I need to about its artistic intent within the page itself.</p>
</div>
<p><em>I never learned to speak</em> was my final project for my Advanced Web Design class at the University of Lethbridge. Structured to make things easier for us at the end of the semester, the main goal of the assignment was to play around with (variable) fonts and CSS animations. It was a simple outline that was open to interpretation from us students, giving us a lot of leeway in what direction we took our projects. For me personally, I decided very early on that I wanted to take the design parameters very literally.</p>
<p>The first animation I began making for the page was that in “The Fall” section. The falling font in the final page is the result of multiple classes that modify a base <code>animation</code> property. This allowed me to vary how different words fell by using premade settings, rather than create multiple classes that would ultimately be variations of the same animation. The most difficult part in coding this section would've been figuring out how the styles would overwrite each other, as that was something that caught me off guard for a while. Ultimately, this section is most notable to me for setting the tone of the whole project, since the structure came to justify this animation.</p>
<p>The next notable section is “The Landing”, where I would redeem myself from the previous project and manage to properly implement <code>offset-path</code>. Previously, I felt like I was unable to control the position of the path to line up alongside another graphical element. It didn't help that my attempts to rescale the element proved futile in making any change to the path. Having spent some time experimenting with how <code>offset-path</code> works, I ended up realizing that I needed to apply the scaling to the property's path value rather than the container element itself. Once that was sorted, things fell smoothly into place for that section.</p>
<p>For the progressive animations, I again utilized Russell Samora & Jonathan Soma's fantastically simple <a href="https://github.com/russellsamora/enter-view">enter-view</a> library. I did my best to minimize my use of the library as much as possible, opting to use CSS where I could. As powerful as JavaScript is with libraries, I value sending as few scripts as possible to keep data transfers to a minimum. It also helps that more people could access the webpage as a result.</p>
<p>Overall, <em>I never learned to speak</em> was a great end to the semester for me. It was a project that challenged me both technically and creatively, and I'm proud of what I managed to accomplish in what was a relatively short time frame. <s>Even if it meant pulling an all-nighter to get it done.</s></p>
🔮 Common Beat2023-04-10T00:00:00Zhttps://personmeetup.ca/portfolio/common-beat/An interactive art piece where players drum to their own rhythms.<p><em>Common Beat</em> was an interactive art piece created for the <a href="https://www.ulethbridge.ca/">University of Lethbridge's</a> Interaction Design course in the Spring 2023 semester. In it, two players drum to their own rhythms, represented as vibrant pulses. As the players continue drumming, a central tempo begins to emanate from between the two pulses. Barely existing at first, the tempo grows to overpower the inputs of the players until they choose not to play along anymore. <em>Common Beat</em> serves as a personal reflection on how mediation is a form of control over others, while still acknowledging its power to unite us together.</p>
<p>The concept behind <em>Common Beat</em> came from the theme of the assignment, which was “Collective Memory with a Subjective Twist.” From that mouthful, the first idea that came to mind was rhythm. We all work on our own tempos, and sometimes they don't align with others. My idea was then to have the player pulses generate a centre pulse that would be an average of the two inputs over some period of time. While the idea was good, I was later told that <em>I</em> had to posit the subjective twist in my work.</p>
<p>After spending some time thinking about it, I realized that my attempted dodge of addressing the subjective twist still addressed it. I realized that the medium of rhythm could be a way to express my feeling on mediation, a topic that I had been thinking about throughout the semester due to some personal revelations.</p>
<p>Without going too deep into details, mediation has been a significant part of my life and how I approach my interactions with others. It's what allows me to talk to people with varying differences in perspectives. That said, it's also a way I attempt to control situations that I can't do anything about. Bringing music into the equation, I'd argue a conductor serves the same role as a mediator. They allow performers to come together and perform even better, but that's assuming they're not acting like Terrence Fletcher.</p>
<p></p><figure><picture><source type="image/avif" srcset="https://personmeetup.ca/assets/PNCsaz2m4E-320.avif 320w, https://personmeetup.ca/assets/PNCsaz2m4E-512.avif 512w, https://personmeetup.ca/assets/PNCsaz2m4E-640.avif 640w, https://personmeetup.ca/assets/PNCsaz2m4E-710.avif 710w, https://personmeetup.ca/assets/PNCsaz2m4E-1024.avif 1024w, https://personmeetup.ca/assets/PNCsaz2m4E-1420.avif 1420w" sizes="(max-width: 710px) 100vw, 710px" /><source type="image/jpeg" srcset="https://personmeetup.ca/assets/PNCsaz2m4E-320.jpeg 320w, https://personmeetup.ca/assets/PNCsaz2m4E-512.jpeg 512w, https://personmeetup.ca/assets/PNCsaz2m4E-640.jpeg 640w, https://personmeetup.ca/assets/PNCsaz2m4E-710.jpeg 710w, https://personmeetup.ca/assets/PNCsaz2m4E-1024.jpeg 1024w, https://personmeetup.ca/assets/PNCsaz2m4E-1420.jpeg 1420w" sizes="(max-width: 710px) 100vw, 710px" /><img alt="Two handmade drum pads with felt surfaces, connected to a breadboard by alligator clips." loading="lazy" decoding="async" src="https://personmeetup.ca/assets/PNCsaz2m4E-320.jpeg" width="1420" height="1065" /></picture><figcaption>The physical circuit I made for class</figcaption></figure><p></p>
<p>With those realizations in mind, I had a solid scope for the project. Instead of averaging player inputs as they made them, I'd just pulse a constant tempo as players continued sending inputs. From there, this project began relatively simple. I already had some code that did almost what I needed from another project, so I copied it over and adjusted the classes to better fit in with the assignment.</p>
<p>The physical side was even easier, as the Arduino circuit I needed boiled down to taking the states of two buttons. The problems I did have coding for the Arduino involved making it easier for Processing to clean up data sent onto the serial bus, but that was solved by including a tab character between pin readings. Assuming the last variable was sent out with <code>println()</code>, Processing's <code>splitTokens()</code> function would be able to break up the data into an easilly usable array! All I had to do was check if one index was true or false before triggering a pulse.</p>
<p>While this definately was a minor project in terms of workload for me, it was one that I still really appreciated. It gave me an opprotunity to revisit Processing, let me reflect and remind myself of my relationship with mediation, and allowed me to focus on other courses that needed my attention. <em>Common Beat</em> might not be much, but it was still a fun project that came around at the perfect time.</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>
📺 Sn0wy Direct2022-08-02T00:00:00Zhttps://personmeetup.ca/portfolio/sn0wy-direct/A Discord live show hosted by Cocodotts with co-host Person Meetup and special guest Kalil.<p><em>Sn0wy Direct</em> was a <s>podcast</s> live show created to give the latest news and host discussions on <a href="https://twitter.com/wallaceprower">wallaceprower's</a> web-series called <a href="https://www.youtube.com/c/Sn0wyYT"><em>Sn0wy</em></a>. And by give the latest news and host discussions, I mean spread misinformation and berate Wallace. This was another project I worked on with <a href="https://twitter.com/cocodotts">Cocodotts</a> and <a href="https://twitter.com/kvlmiv">Kalil</a>, coming about spontaneously from Cocodotts asking me to record a stage VC he had set up in the Prower's House. I don't think any of us expected this project to take the direction it did, but it was a fantastic experience nevertheless.</p>
<p>During this project, I ended up focusing on post-production for nearly all the episodes. I ended up editing, cleaning up audio, and even composing a few tracks. The biggest focus for me, however, was the editing. It had been a while since I had done any video editing, and working on <em>Sn0wy Direct</em> gave me a chance to dust off those skills and spend time learning to use DaVinci Resolve; my planned video editor of choice. Moreover, I ended up regaining some confidence in my abilities, something that had been lost several years ago. This shouldn't be taken that there wasn't confusion and stress, but most of that came from worrying about what others think about the final result. Once I focused more on how I perceived the work-flow and the end result, I found myself more satisfied with what I put out.</p>
<p>This wouldn't have been possible without Cocodotts or Kalil, however. Cocodotts was an absolute carry for both me and Kalil during the directs with his solid improv and public speaking skills that kept things both moving forward and unpredictable. Kalil created all the artwork that shows up in the background, faithfully emulating the style seen in <em>Sn0wy</em> while also bringing it to a higher standard of quality. He also set the ground floor for the lore we created, which we would end up growing as we added on our own ideas to the mix.</p>
<p>Overall, <em>Sn0wy Direct</em> was a fantastic project to work on. I want to say thank you to everyone who supported it, whether it be on Discord, Soundcloud, or YouTube, as well as to those who contributed to it in one way or another. This was an enjoyable experience that taught me a lot, and I appreciate every bit of it.</p>
📃 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>
🔗 Person Meetup (The Site)2022-03-01T13:37:25Zhttps://personmeetup.ca/portfolio/person-meetup-site/The central hub for everything I create!<p>I initially wasn't sure about developing my own website. Despite having previously learned about web development both on my own and in university as well as discovering <a href="https://neocities.org/">Neocities</a>, it was something that I kept putting off for later. That is, until I saw <a href="https://www.youtube.com/watch?v=gwUz3E9AW0w">NetworkChuck's video on making a website</a>. While the rest of the video wasn't applicable to me, I found myself paying attention to the big 3 reasons Chuck gave for making a website; Standing out, making a difference, and creating opportunities.</p>
<p>While I had the confidence push I needed to set out making this site, I was still in university. That meant this idea would have to be set on the back-burner until I had a free moment. I ended up getting that sooner than expected, however, as my university would face a month long strike that started mid February. As soon as my final class finished, I dove head first into getting this site built using the limited knowledge of <a href="https://www.11ty.dev/">Eleventy</a> I had at the time.</p>
<p>This website is still an ongoing project for me as I continue to expand, develop, and write content for it. Below are some articles I've written about the various things I learned during this process.</p>
<ul>
<li><a href="https://personmeetup.ca/blog/streamlining-web-development">Ignore the JAM, Focus on the Bread: A Look at Streamlining Web Development</a></li>
</ul>
📃 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>
📻 Last Request2022-02-02T00:00:00Zhttps://personmeetup.ca/portfolio/last-request/“Do one last thing for me if you never do anything else; DESTROY HIM!!!”<p>My friends pulled up a <a href="https://www.youtube.com/watch?v=yJKwZqOQaYI">WWE clip of Paul Bearer asking Kane to take out The Undertaker</a>, specifically for the WOAH at the very end from the commentators. For some reason, Paul's speech appealed to me enough that I decided to make something to use that one voice clip in.</p>
🔗 Frontier Corps.2021-11-16T00:00:00Zhttps://personmeetup.ca/portfolio/frontier-corps/Developed as a university project, Frontier Corps. is a Titanfall/Apex Legends fansite.<p>Developed as a university project, <em>Frontier Corps.</em> is a Titanfall/Apex Legends fansite. One minor note is that I used the site as a testing ground for <a href="https://personmeetup.ca/blog/streamlining-web-development">figuring out Static Site Generators</a> and deploying them to Neocities.</p>
🎮 Office2021-06-27T00:00:00Zhttps://personmeetup.ca/portfolio/office/Don't go into the Portal 2 elevator at 3 AM, you'll end up in Home Depot hell.<blockquote>
<p>Don't go into the Portal 2 elevator at 3 AM, you'll end up in Home Depot hell.</p>
</blockquote>
<p>Roy Berardo held a Home Depot themed mapping competition, where our submissions had to be based around doors and windows. Despite coming hot off the heels of barely surviving another competition, I decided to make something for this one as well. It didn't win the contest, but it achieved it's intended goal. Just look at these raving reviews!</p>
<blockquote>
<p>This map hurt my brain</p>
</blockquote>
<blockquote>
<p>warning dont ply this while high on weed</p>
</blockquote>
<blockquote>
<p>примерно так и ходят за справкой в русской больнице</p>
</blockquote>
📻 Who Are You2021-05-21T00:00:00Zhttps://personmeetup.ca/portfolio/who-are-you/A cut track from Rations, given a second life.<p>Initially created to be included within <a href="https://personmeetup.ca/portfolio/rations"><em>Rations</em></a> as part of it's soundtrack, <em>Who Are You</em> was removed to further add to the cursed atmosphere of the skit. I held onto the project file, deciding later on to expand the minor melody into a full track.</p>
📺 Rations2021-04-22T00:00:00Zhttps://personmeetup.ca/portfolio/rations/Wandering for food in an apocalyptic landscape, a man comes across a self-proclaimed king who taunts them as he tells stories about the beginning of the end.<blockquote>
<p>Wandering for food in an apocalyptic landscape, a man comes across a self-proclaimed king who taunts them as he tells stories about the beginning of the end.</p>
</blockquote>
<p><em>Rations</em> was created for a university assignment, but leaving it at just that would be underselling it. Part of what makes it special to me is how involved some of my friends got in it's development, with them providing ideas and feedback that helped improve the final product. Beyond that, I feel <em>Rations</em> helped give me a ground work for doing more video editing in the future by two ways.</p>
<p>The first is that this was the first video I made in DaVinci Resolve. As of recent, it's become my main video editor of choice with how robust of a package it is for the low price of nothing. Compare that to VEGAS or Premiere where you have to pay an arm and a leg for a similar feature set. For my needs currently Resolve fits the bill perfectly, and <em>Rations</em> gave me an excuse to play around with the editor and figure out how to use it.</p>
<p>Secondly, <em>Rations</em> helped build my confidence. Seeing friends of mine help out and appreciate what I was making was something I needed. I was fretting for a while since whenever I tried to make a video it would fall apart during editing, leaving me discouraged. <em>Rations</em> helped me make the U-turn away from that mindset.</p>
📻 Grass is Greener Today2021-04-03T00:00:00Zhttps://personmeetup.ca/portfolio/grass-is-greener-today/One of the first tracks I produced as I was learning about DAW's, published because it sounded good!<p><em>Grass is Greener Today</em> was one of the tracks I created when I was first playing around with Digital Audio Workstations. I think the first half was initially made to play around with Spitfire Audio's <a href="https://www.spitfireaudio.com/shop/a-z/bbc-symphony-orchestra-discover/"><em>BBC Symphony Orchestra Discover</em></a> Plugin, with the second half being me wanting to incorporate synths into the track. I ended up releasing it when I rediscovered the track's project file on my hard drive since it was decent.</p>
📻 Felt2021-01-29T00:00:00Zhttps://personmeetup.ca/portfolio/felt/I was playing around with a piano patch I got recently and stumbled onto some chords that sounded nice.<p>I think the Soundcloud description summarizes this track well.</p>
<blockquote>
<p>This came about pretty randomly. I was playing around with a piano patch I got recently and stumbled onto some chords that sounded nice. from there, I made this.</p>
</blockquote>
🎮 Abstract2020-04-17T00:00:00Zhttps://personmeetup.ca/portfolio/abstract/Founded while Zepheniah was still alive, this facility now has radio and missile launching capabilities in the present day.<blockquote>
<p>Founded while Zepheniah was still alive, this facility now has radio and missile launching capabilities in the present day. The reasoning for territory being undisputed being Mann Co. owning all assets to the building, until their recent development on an Australium based missile silo. Since then, the property has been split in half for both RED and BLU respectively. <em>Capture will result in control of ~50km of land.</em></p>
</blockquote>
<p><em>Abstract</em> was made during the development of another <em>Team Fortress 2</em> map as a reality check. I wanted to see if I could develop something - if anything - that was worthwhile to play on, with this map being provoked by feelings that I had been unable to create a solid, enjoyable map. I also developed it with myself in mind; did I enjoy playing on the map? That was the only opinion that mattered regarding the map's design, which was a stark contrast to my philosophy on the other map - that being to gather as much input from others as possible.</p>
<p>What came out was abstract, hence the name. The map is extremely close quarters with it's enclosed size, yet is open enough with its various flank routes to prevent strongholds. I managed to get a few 4's games on the map with friends, which showed that the map was enjoyable to others and worked in a (semi-)competitive setting.</p>
<p>To me, <em>Abstract</em> represents the idea that developers should focus on their ideas first. To others I imagine it's just a weird map, and that's fine. I think its fun to play on, and that's all that matters.</p>
📺 What do people think about VR?2020-03-21T00:00:00Zhttps://personmeetup.ca/portfolio/what-do-people-think-about-vr/Spurred on by the announcement of Half-Life: Alyx, I asked what the current thoughts on VR were at the time.<p>When <em>Half-Life: Alyx</em> got announced, I noticed that the Steam Discussions were all focused on the fact that it was a Half-Life game in VR. Seeing the heat in some discussions, I took to making my own thread with the following question:</p>
<blockquote>
<p>Forget Half Life, what do you guys think of VR? Is it the next step forward? Something that merges two realities that should be far apart? Simply too expensive for you?</p>
</blockquote>
<p>I got a lot of insight from that thread, which pushed me to compile all those view points into a video that would be found easier than a Steam Discussions thread.</p>
🎮 Addiction2019-11-15T00:00:00Zhttps://personmeetup.ca/portfolio/addiction/Test results seemed to suffer when subjects were looking at or within the confines of a maintenance area.<blockquote>
<p>Test results seemed to suffer when subjects were looking at or within the confines of a maintenance area. Currently, there is no reason as to why this happens, with the best theory being the magnitude and endlessness of the environment get in the test subject's head.</p>
</blockquote>
<p>I am addicted (pun intended) to <em>Portal 2</em>'s mechanical areas. I love the twisting pipes, the catwalks, the void boxes; everything about them appeals to me aesthetically. While that love of them is great, it's also extremely dangerous when I have access to mapping tools.</p>
<p>The heel to showing off mechanical areas - especially those close to the player's proximity - is how much effort they require to pull off. Depending on how open of a space you're giving the player to move around, your potential workload skyrockets if you want to create a believable location that feels as if it's more than just boxes floating around. That requires a minimum level of detailing that serves multiple purposes, including:</p>
<ul>
<li>Making the location appear bigger than it's actual size</li>
<li>Preventing players falling to their deaths from seeing any <code>nodraw</code> textures</li>
<li>Making the space feel lived in despite its emptiness.</li>
</ul>
<p>Not all mechanical areas have to be open. Valve has several areas in the main campaign where they either keep things close quarters, contain the level to within a box, or even combine the two. This meant Valve had less detailing they needed to do game wide, and indirectly let moments like reaching the Central Core have a greater emotional impact.</p>
<p>When you're making something for the workshop, however, the biggest thing on your mind is "how cool does this look?" I don't want to phrase that as a problem as that thought drives what you end up creating, but at least for me it's always short sighted in how to incorporate mechanical areas (assuming they're needed at all). Ultimately, I put it most bluntly in the map's description...</p>
<blockquote>
<p>This map would have come out sooner if I [...] decided not to add a pointless BTS area to the map. But I CAN'T HELP MYSELF THE STYLE IS SO GOOD.</p>
</blockquote>
🎮 Separation2019-04-25T00:00:00Zhttps://personmeetup.ca/portfolio/separation/[Insert Test Chamber Advisory Message Here]<blockquote>
<p>[Insert Test Chamber Advisory Message Here]</p>
</blockquote>
<p>I built this test to focus on puzzle design, something I believed I could use some work on. Shoutout's to the speedrunners who took this test down to ~26 seconds, especially to grapefruit who provided some good feedback on what I could have done better to make the test less breakable.</p>
🎮 Farlands2019-01-01T00:00:00Zhttps://personmeetup.ca/portfolio/farlands/In an attempt to escape from Wheatley, you happen to come across another vault door. Seems like it's the only way out...<blockquote>
<p>In an attempt to escape from Wheatley, you happen to come across another vault door. Seems like it's the only way out...</p>
</blockquote>
<p><em>Farlands</em> was developed for <a href="https://www.thinking.withportals.com/">Thinking With Portals</a>'s third mapping competition and was one of my most popular <em>Portal 2</em> maps, which probably could be explained because of it's inclusion of Wheatley. It still remains as one of my most ambitious maps due to it's scale and scope alone. It was a challenging map to deliver with me unable to compile it at the very end, all the while feeling a time crunch with a deadline fast approaching.</p>
🎮 Tracted2018-11-30T00:00:00Zhttps://personmeetup.ca/portfolio/tracted/Just a standard testing [chamber]. Nothing special.<blockquote>
<p>Just a standard testing [chamber]. Nothing special.</p>
</blockquote>
🎮 Detour2018-09-01T00:00:00Zhttps://personmeetup.ca/portfolio/detour/Dang sparking door, now I got to do some dumb tests with even more doors.<blockquote>
<p>Dang sparking door, now I got to do some dumb tests with even more doors.</p>
</blockquote>
<p>The concept of <em>Detour</em> was one that I had spent many months working on. The idea of switching test tracks appealed to me, with the first edits I ever made in Hammer based around this idea. It took 3 seperate attempts, however, before this map was finalized. That's without mentioning the several bumps along the way.</p>
🎮 Laser Construction2017-07-05T00:00:00Zhttps://personmeetup.ca/portfolio/laser-construction/Just because it's under construction, doesn't mean we can't make science!<blockquote>
<p>Just because it's under construction, doesn't mean we can't make science!</p>
</blockquote>
<p><em>Laser Construction</em> was the first custom map I released that was made in Valve's Hammer Editor for <em>Portal 2</em>. I had spent the past few months working with the editor, trying to make <a href="https://personmeetup.ca/portfolio/detour">another map</a>, when <a href="https://www.thinking.withportals.com/">Thinking With Portals</a>'s Discord held their first contest. This was my submission.</p>