proofread articles up to Dec 10; made project page consistent; improved presskit page and added PDF download version

src/diary/entries/200806

@@ -5,6 +5,10 @@ august 6, 2020<br>
 <br>
 <b>Blessfrey</b> is a 2D action RPG developed for PC by me, chimchooree. <br>
 <br>
+<a target="_blank" href="/static/img/ent/screenshot_June292019.png">
+    <img src="/static/img/ent/screenshot_June292019.png" alt="(image: Lots of Angels and other characters at a shopping center)" width="500" height="278.66">
+</a><br>
+<br>
 The game is designed to pit your skill + creativity against a series of combat + puzzle challenges while exploring the depths of the downtown dungeon. <br>
 <br>
 Class progression is freeform, and virtually no decision is permanent. At character creation, you will choose a permanent First Class, but you can unlock several new classes for multiclassing through gameplay. Through swapping out Second Classes, you can find a combination to express your playstyle. <br>

src/diary/entries/200820

@@ -5,7 +5,7 @@ august 20, 2020<br>
 <br>
 <b><a href="https://fontstruct.com/fontstructions/show/1596262/pixel-joy">pixel joy</a></b> is a small, round sans-serif pixel font, made using <a href="https://fontstruct.com/">fontstruct's FontStructor</a> for an old version of blessfrey. Freely use and edit for your personal and commercial projects. No credit needed. <br>
 <br>
-Download it from fontstruct @ <a href="https://fontstruct.com/fontstructions/show/1596262/pixel-joy">https://fontstruct.com/fontstructions/show/1596262/pixel-joy</a>.<br>
+Download it from <a href="https://fontstruct.com/fontstructions/show/1596262/pixel-joy">FontStruct</a>.<br>
 <br>
 <center><img src="/static/img/ent/pixeljoy.jpeg" alt="image: pixel joy font preview"></center> <br>
 <br>

src/diary/entries/200831

@@ -5,7 +5,7 @@ august 31, 2020<br>
 <br>
 <h2>tuesday, august 4</h2>
 <ul>
-<li>CentOS VPS obtained through OVH. Yay! We've always wanted a server.</li>
+<li>CentOS VPS obtained through OVH. Always wanted a server.</li>
 </ul>
 <br>
 <h2>wednesday, august 5</h2>
@@ -24,18 +24,16 @@ august 31, 2020<br>
 <ul>
 <li>decide to use PHP for manage blessfrey's blog</li>
 <li>set up a local Apache server for practice. It was a little confusing!</li>
-<li>wrote a vaguely functioning Hello, World! script in PHP</li>
+<li>wrote a vaguely functioning Hello, World script in PHP</li>
 </ul>
 <br>
 <h2>saturday, august 8</h2>
 <ul>
-<li>forgot to bid on the Skull of Death in the <a href="http://www.verpets.com/auctions/">Auction House</a>...aw man...</li>
 <li>added images to live site despite conflicts with Linux's security</li>
 </ul>
 <br>
 <h2>sunday, august 9</h2>
 <ul>
-<li>second week of <a href="https://flightrising.com/main.php?p=dominance">dom</a>! yeah!</li>
 <li>studied PHP with <a href="https://www.w3schools.com/php/php_intro.asp">W3Schools</a></li>
 </ul>
 <br>
@@ -52,13 +50,13 @@ august 31, 2020<br>
 <br>
 <h2>monday, august 17</h2>
 <ul>
-<li>Research PHP + MySQL while attending. I think MySQL is overkill for my purposes, since all my articles couldn't possibly be that much data. It might be interesting for analyzing data, though, like adding a word cloud of the most common tags or a search feature.</li>
+<li>Research PHP + MySQL while attending. I think MySQL is overkill for my purposes, since all my articles couldn't possibly be that much data. It might be interesting for analyzing data, though, like adding a word cloud of the most common tags or a search feature. I'll keep things simple for now. </li>
 </ul>
 <br>
 <h2>august 18 - august 21</h2>
 <ul>
-<li>Attend for the Fire Flight while trying out a new mmo - ArcheAge, since my friends play it.</li>
+<li>Help run a FlightRising community event while trying out ArcheAge, since my friends play it.</li>
-<li>I told a friend I would play Go with him soon but was too busy with the raffle. Then someone told him I was online a lot in ArcheAge...oops...that looked bad lol. It wasn't like I played more than a few minutes at a time.</li>
+<li>I told a friend I would play Go with him soon but was too busy with the raffle. Then someone told him I was online a lot in ArcheAge...oops...that looked bad lol. It wasn't like I played more than a few minutes at a time. I'm sorry, friend;;</li>
 <li>finally get access to the code for an mmo some friends work on. I start familiarizing myself with the code and start planning my new feature.</li>
 </ul>
 <br>
@@ -69,7 +67,7 @@ august 31, 2020<br>
 <br>
 <h2>sunday, august 23</h2>
 <ul>
-<li>I work on my friends' mmo more. I make my own branch and make my first changes. The work environment is Windows-only, and the server is live with active players. </li>
+<li>I work on my friends' mmo more. I make my own branch and make my first changes. The work environment is Windows-only, and the server is live with active players. Pretty cool experience. </li>
 </ul>
 <br>
 <h2>monday, august 24</h2>
@@ -79,7 +77,7 @@ august 31, 2020<br>
 <br>
 <h2>tuesday, august 25</h2>
 <ul>
-<li>Play around with CSS + HTML for the website. The CSS Grid didn't exist the last time I used CSS (for petsite profiles lol), so I'm more comfortable with floats. The Grid looks so worth learning, though, for more consistent and responsive web design. </li>
+<li>Play around with CSS + HTML for the website. The CSS Grid didn't exist the last time I used CSS (for 2000s petsite profiles), so I'm more comfortable with floats. The Grid looks so worth learning, though, for more consistent and responsive web design. </li>
 </ul>
 <br>
 <h2>wednesday, august 26</h2>

src/diary/entries/200903

@@ -3,14 +3,14 @@
 september 3, 2020<br>
 #gamejam<br>
 <br>
-<b><a href="https://weeklygamejam.itch.io/">WeeklyGameJam</a></b> is weekly theme-based game jam hosted through itch.io. It's fairly laid-back for a jam, giving you a full week's time, allowing for pre-made/stock assets and code, and being understanding of late submissions. Most people make videogames, but any kind of game is allowed. At the end of the week, streamers will play and critique the submissions while the devs hang out in their chat. <br>
+<b><a href="https://weeklygamejam.itch.io/">WeeklyGameJam</a></b> is a weekly theme-based game jam hosted through itch.io. It's fairly laid-back for a jam, giving you a full week's time, allowing for pre-made/stock assets and code, and being understanding towards late submissions. Most people make videogames, but any kind of game is allowed. At the end of the week, streamers will play and critique the submissions while the devs hang out in their chatrooms. <br>
 <br>
 <center><img src="/static/img/ent/SmallThingThatMakesThings.png" alt="(image: Key art of Elwell and Small Thing, buried in dogs)" width="500" height="223.77"></center> <br>
 <br>
 <br>
 <h2>small thing that makes things</h2>
 <br>
-I participated in Week 85 under the theme Offspring, submitting my game on February 27, 2019. My game was Small Thing That Makes Things, an adventure platformer. You can play it on itch.io @ <a href="https://chimchooree.itch.io/small-thing-that-makes-things">https://chimchooree.itch.io/small-thing-that-makes-things</a>.<br>
+I participated in Week 85 under the theme Offspring, submitting my game on February 27, 2019. My game was Small Thing That Makes Things, an adventure platformer. You can play it on <a href="https://chimchooree.itch.io/small-thing-that-makes-things">itch.io</a>. <br>
 <br>
 You play as Hamish T. Elwell, the hero accountant of an overcrowded animal shelter, investigating the recent explosion of the local stray population. You can walk, jump on platforms, collect items, and chat with NPCs. There's multiple endings, depending on your choices. <br>
 <br>
@@ -19,21 +19,21 @@ You play as Hamish T. Elwell, the hero accountant of an overcrowded animal shelt
 <br>
 For a week-made game, I think STTMT is pretty cute, and I'm pretty happy with it.<img src="/static/img/emo/star.gif" alt=":)"> <br>
 <br>
-I actually finished a game, and someone actually finished playing it on a stream. That's really cool, even if STTMT isn't all that good. The deadline forced me to make final decisions, complete features, and move on, and there's a lot of value in actually finishing instead of forever polishing ideas and assets. <br>
+I actually finished a game, and someone actually finished playing it on a stream. That's really cool, even if STTMT isn't all that good. The deadline forced me to make final decisions, complete features, and move on, and there's a lot of value in that. <br>
 <br>
-The short time-frame forced me to get around to every aspect of game development, many of which I had never done before. I had to learn how to export my Godot project, upload an HTML5 game, and make sure the exported game was complete and playable. Lots of the features were first-times for me, too. I've never written code for platformer movements or moving cameras. This also was the first time I've really gotten branching and conditional dialog working in Godot. <br>
+The short time-frame forced me to get around to every aspect of game development, many of which I had never done before. I had to learn how to export a Godot project, upload an HTML5 game to itch, and make sure the exported game was complete and playable. Lots of the features were first-times for me, too. I've never written code for platformer movements or moving cameras. This also was the first time I've really gotten branching and conditional dialog working in Godot, which was a skill I immediately applied to blessfrey. <br>
 <br>
 <br>
 <h2>mistakes</h2>
 <br>
-I recolored OPP's pixel art and lost the high contrast for the rock ledges. They blend into the rocky background, so you can't tell you can jump on them. Joshua McLean pointed this out during his stream, and I didn't even noticed until then. Having more eyes on your game is so important.<br>
+I recolored OPP's pixel art and lost the high contrast for the rock ledges. They blend into the rocky background, so you can't tell you can jump on them. I didn't even notice until <a href="https://www.twitch.tv/mrjoshuamclean">Joshua McLean</a> pointed this out during his stream. Having more eyes on your game is so important.<br>
 <br>
-Also the level design is just not interesting. I spent lots of time on the choices and adventure game aspects, while the platforming as an extreme afterthought. It's a game jam, though, what do you expect lol?<br>
+Also the level design is just not interesting. I spent lots of time on the choices and adventure game aspects, while the platforming as an extreme afterthought. It's a game jam, though, what do you expect?<br>
 <br>
 I took the easy way out with animation. I might have learned more working from scratch, but modifying OPP's sprites to suit my character designs was way faster when I was already struggling to finish on time.<br>
 <br>
 <br>
-<h2>screenshots </h2>
+<h2>screenshots + progression </h2>
 <center>
 <a target="_blank" href="/static/img/ent/SmallThingThatMakesThings_flatland.png">
     <img src="/static/img/ent/SmallThingThatMakesThings_flatland.png" alt="(image: Elwell and Small Thing in a jumble of dogs)" width="500" height="300.92">

src/diary/entries/200917

@@ -3,20 +3,18 @@
 september 17, 2020<br>
 #programming<br>
 <br>
-<b>Coroutines</b> are functions that, instead of running to completion, can yield until certain criteria is met. Godot Engine supports coroutines through <a href="https://docs.godotengine.org/en/stable/classes/class_@gdscript.html#class-gdscript-method-yield"><b>yield</b> ( Object object=null, String signal="")</a>, <a href="https://docs.godotengine.org/en/stable/classes/class_gdscriptfunctionstate.html#class-gdscriptfunctionstate-method-resume"><b>resume</b></a>, and the <a href="https://docs.godotengine.org/en/stable/classes/class_gdscriptfunctionstate.html"><b>GDScriptFunctionState</b></a> object.<br>
+<b>Coroutines</b> are functions that, instead of running to completion, can yield until certain criteria are met. Godot Engine supports coroutines through <a href="https://docs.godotengine.org/en/stable/classes/class_@gdscript.html#class-gdscript-method-yield"><b>yield</b> ( Object object=null, String signal="")</a>, <a href="https://docs.godotengine.org/en/stable/classes/class_gdscriptfunctionstate.html#class-gdscriptfunctionstate-method-resume"><b>resume</b></a>, and the <a href="https://docs.godotengine.org/en/stable/classes/class_gdscriptfunctionstate.html"><b>GDScriptFunctionState</b></a> object.<br>
 <br>
 <h2>why use a coroutine? </h2>
 <br>
-Coroutines allow for scripted game scenarios that respond dynamically to the player and the changing game world. They let you bounce between functions, step-by-step, and respond to interruptions. <br>
+Coroutines allow for scripted game scenarios that respond dynamically to the player and the changing game world. They let you bounce between functions, step-by-step, and respond to interruptions. This means functions can be automatically called at the completion of other functions, animations, player actions, in-game events, or timers. Add in interruptions and conditionals, and you have a tool for building a responsive game world. <br>
-<br>
-They allow for functions to be called at the completion of other functions, animations, player actions, in-game events, or timers. Add in interruptions and conditionals, and you have a tool for building a responsive game world. <br>
 <br>
 <br>
 <h2>stoplight example </h2>
 <br>
 As a basic example of coroutines in Godot Engine, I made a stoplight. Follow along with my code on <a href="https://gitlab.com/chimchooree/stoplight">GitLab</a>. <br>
 <br>
-In my example, the light changes every few seconds, going from green, yellow, then finally red. The light changes immediately if the Walk Button is pressed. This project demonstates methods that wait + resume, and also demonstrates the player affecting the timing of events through his actions.<br>
+In my example, the light changes every few seconds, going from green, yellow, then finally red. The light changes immediately if the Walk Button is pressed. This project demonstates methods that can wait, resume, and be affected through player action. <br>
 <br>
 <center>
 <a target="_blank" href="/static/img/ent/stoplight_demonstration.gif">
@@ -39,9 +37,9 @@ I have a TextureRect background, an AnimatedSprite stoplight, a Sprite walk butt
 <h3>animation</h3>
 <br>
 <center>
-<img src="/static/img/ent/stoplight_nodehierarchy.png" alt="(image: the AnimatedSprite Stoplight has 4 animations - default (which is no light), green, red, and yellow.)"><br>
+<img src="/static/img/ent/stoplight_animationframes.png" alt="(image: the AnimatedSprite Stoplight has 4 animations - default (which is no light), green, red, and yellow.)"><br>
 </center><br>
-The light is changed by setting its animation to one of these options. Each is one-frame - just the stoplight with the one of the lights colored in. <br>
+The light is changed by setting its animation to one of these options. Each is one-frame - just the stoplight with the one or none of the lights colored in. <br>
 <br>
 <br>
 <h3>the code </h3>
@@ -61,23 +59,23 @@ This project has two scripts: Main.gd, which is attached to the root node, and L
 <br>
 <h3>how the code works </h3>
 <br>
-At _ready(), wait() is assigned to the GDScriptFunctionState 'result' and is called for the first color, green. _ready() yields until the given function (wait) is completed. <br>
+At <code>_ready()</code>, <code>wait()</code> is assigned to the GDScriptFunctionState <code>result</code> and is called for the first color, green. <code>_ready()</code> yields until the given function <code>wait()</code> is completed. <br>
 <br>
 The wait method yields for the given amount of seconds then sets the stoplight to the given color. <br>
 <br>
-At wait's completion, _ready() calls wait() for yellow, then red. Each is called one at a time, waiting for the color to complete before moving on. <br>
+At <code>wait()</code>'s completion, <code>_ready()</code> calls <code>wait()</code> for yellow, then red. Each is called one at a time, waiting for the color to complete before moving on. <br>
 <br>
 <br>
 <h3>interrupting the stoplight </h3>
 <br>
-The Wait Button interrupts the wait times between colors. Before _ready() yields, it connects the 'pressed' signal on the Wait Button. <br>
+The Wait Button interrupts the wait times between colors. Before <code>_ready()</code> yields, it connects the <code>'pressed'</code> signal on the Wait Button. <br>
 <br>
-If the Wait Button is clicked during wait()'s yield, the GDScriptFunctionState 'result' resumes immediately, ignoring wait()'s yield timer. This time, 'result' has a string arg 'interrupted on green,' so it will print the result, change the stoplight's color, then print 'done: green.' The wait method is complete, so _ready() resumes and calls wait() for the next color. <br>
+If the Wait Button is clicked during <code>wait()</code>'s yield, the GDScriptFunctionState <code>result</code> resumes immediately, ignoring <code>wait()</code>'s yield timer. This time, <code>result</code> has a string arg <code>'interrupted on green'</code>, so it will print the result, change the stoplight's color, then print <code>'done: green'</code>. The <code>wait</code> method is complete, so <code>_ready()</code> resumes and calls <code>wait()</code> for the next color. <br>
 <br>
 <br>
 <h2>applications </h2>
 <br>
-Here, I supplied a string to be printed at a button press, but the actual logic can be swapped out for anything. I use coroutines in blessfrey's skills to manage the flow of phases from activation, different phases of effects, cooldown, and interactions with any counters. I also use it in the basic weapon attack so the character continuously swings at the rate of his attack speed until he cancels, uses a skill, or moves. It could also be used for something like cars that stop and honk when the player steps in front of them and drive off once the path is clear. <br>
+The outcomes in this example be swapped out for anything. I use coroutines in blessfrey's skills to manage the flow of phases from activation, different phases of effects, cooldown, and interactions with any counters. I also use it in the basic weapon attack so the character continuously swings at the rate of his attack speed until he cancels, uses a skill, or moves. It could also be used for something like cars that stop and honk when the player walks in front of them and drive off once the path is clear. <br>
 <br>
 Coroutines enable lots of practical ways to improve the flow and interactivity of your game, so just keep experimenting. <br>
 <br>

src/diary/entries/200930

@@ -1,25 +1,22 @@
 <!--200831,201031-->
 <h1>september 2020: bye php, hello bottle</h1>
-september 30, 2020
+september 30, 2020<br>
-#bottle #css #git #html #regex #regularexpressions #website<br><br>
+#bottle #css #git #html #regex #regularexpressions #website<br>
 <br>
-<h2>tuesday, september 1</h2>
+<h2>wednesday, september 2 </h2>
 <ul>
-<li>sick day</li>
+<li>Study examples of my favorite blogs, popular blogs, and just any blogs I can find from modern gaming, retro gaming, tech, cooking, beauty, and any genre </li>
+<li>Determine essential features for my blog </li>
+<li>Plan design of blog </li>
 </ul>
 <br>
-<h2>wednesday, september 2</h2>
+<h2>friday, september 18 </h2>
 <ul>
-<li>Look at examples of my favorite blogs, popular blogs, and just any blogs I can find from modern game, retro game, tech, cooking, any genre.</li>
+<li>decided to switch from PHP to Bottle </li>
-</ul>
+<li>hello world in Bottle </li>
-<br>
+<li>created templates for main pages </li>
-<h2>friday, september 18</h2>
+<li>Used Bottle to fill values in a template using variables </li>
-<ul>
+<li>Used Bottle to avoid repeating html code in navigation pane, header, and footer </li>
-<li>switched from PHP to Bottle</li>
-<li>hello world in Bottle</li>
-<li>created templates for main pages</li>
-<li>Used Bottle to fill values in a template using variables</li>
-<li>Used Bottle to avoid repeating html code in navigation pane, header, and footer</li>
 </ul>
 <br>
 <h2>friday, september 25</h2>
@@ -34,7 +31,7 @@ september 30, 2020
 <br>
 <h2>wednesday, september 30</h2>
 <ul>
-<li>Working on the website in the first time in a while;; </li>
+<li>fix bugs for blessfrey.me's static pages - no footer in the middle of the body, no unclosed &lt;ul&gt; tags from diary entry snippets breaking the CSS.</li>
-<li>blessfrey.me's static pages look as intended - no footer in the middle of the body, no unclosed &lt;ul&gt; tags from diary entry previews breaking the CSS.</li>
+<li><a href="https://validator.w3.org/nu/">w3's Nu Html Checker</a> (lol @ the nu name) is really handy for automatically checking whether all my html tags are closed and CSS is valid, especially the parts generated through Bottle + SimpleTemplate. </li>
-<li>w3's Nu Html Checker (lol @ the nu name) is really handy for automatically checking whether all my html tags are closed and CSS is valid, especially the parts generated through Bottle + SimpleTemplate. </li>
 </ul>
+<br>

src/diary/entries/201001

@@ -3,33 +3,38 @@
 october 1, 2020<br>
 #systemdiagram #gamemechanics<br>
 <br>
-<b>System diagrams</b> illustrate how components interact within a system. It saves so much headache to step back and plan a system out like this before jumping into the code. <br>
+<b>System diagrams</b> illustrate how components interact within a system. It saves so much headache to step back and plan with a system diagram before jumping into code. <br>
 <br>
-<center><img src="/static/img/ent/systemdiagram_inventory.jpeg" alt="(image: system diagram for inventory)" width="500" height="250"></center> <br>
 <br>
+<h2>stop + plan before coding </h2><br>
+I want to move blessfrey's inventory into an app on the player character's smartphone. Before, it was displayed in a random pop-up window. It was poorly planned, so the programmatic inventory and the UI were too tightly coupled to easily pop into the phone screen. Instead of wrestling, it's easier to start over and actually plan before I code this time. <br>
 <br>
-<h2>stop + plan before coding </h2>
-I want to move blessfrey's inventory into an app on the player character's smartphone. Before, it was displayed in a random pop-up window. It was poorly planned, so the programmatic inventory and the UI were tightly coupled so I couldn't just pop it into the phone. Instead of wrestling, it's easier to start over and actually plan before I code this time. <br>
 <br>
+<h2>list out your nouns </h2><br>
+A simple way to start thinking about a system is to list out its nouns + verbs. Jot down the entities that interact with your system. <br>
 <br>
-<h2>list out your nouns </h2>
+<center><img src="/static/img/ent/systemdiagram_inventory.jpeg" alt="(image: system diagram for inventory)" width="500" height="250"></center> <br>
-A simple way to start thinking about a system is to list out its nouns and verbs. Jot down the entities that interact with your system. <br>
 <br>
 For blessfrey's inventory, that's the inventory (programmatic), the player character, the inventory app (UI), and base items. The inventory app is related to the smartphone and inventory items. Items are related to floor items, which are related to rooms. <br>
 <br>
-(blessfrey has three different kinds of items. <b>Base Items</b> are the code, which hold all the data relevent for the item no matter how it's expressed. <b>Floor Items</b> are the version that sit on the ground and get picked up by characters. <b>Inventory Items</b> are the version that are displayed in inventories, store windows, containers, etc. Floor and Inventory Items hold a base item inside them, that gets popped out and traded around as the item needs to be expressed in different forms.) <br>
+(blessfrey has three different kinds of items. <br>
-<br>
+<br><ul>
+<li><b>Base Item</b>: holds all the data regardless of how the item is currently expressed </li>
+<li><b>Floor Item</b>: sits on the ground and gets picked up by characters. </li>
+<li><b>Inventory Item</b>: displayed in inventories, store windows, containers, etc </li>
+</ul><br>
+Floor + Inventory Items hold a base item inside them that gets popped out and traded around as the item gets expressed in different forms.) </br>
 <br>
-<h2>connect your nouns with verbs </h2>
+<h2>connect your nouns with verbs </h2><br>
 I wrote the entities in pink and moved them around until the placement was decently readable. Then I connected the concepts with arrows. These arrows represent the verbs, which I explicitly labeled in yellow.  <br>
 <br>
-The flow of these arrows can be very important. If you are modeling AI, for instance, no matter what path the program takes, there shouldn't be dead-ends. Seeing mistakes like that is easier with a diagram than lines of code. Otherwise, the flow is generally useful for figuring out which methods are needed for each class and how they connect. <br>
+The flow of these arrows can be very important. If you are modeling AI, for instance, no matter what path the program takes, there shouldn't be dead-ends. Seeing mistakes like that is easier with a diagram than lines of code. Otherwise, the flow is always generally useful for figuring out which methods are needed for each class and how they connect. <br>
 <br>
 <br>
-<h2>write the code </h2>
+<h2>write the code </h2><br>
-At this point, coding is a bit easier, now that it's in some ways a transcription of the diagram. The entities are data (classes or objects) and the arrows are logic (methods). <br>
+At this point, coding is a bit easier now that it's in some ways a transcription of the diagram. The entities are data (classes or objects), and the arrows are logic (methods). <br>
 <br>
 <br>
-<h2>conclusion </h2>
+<h2>conclusion </h2><br>
-Your diagram doesn't have to be too fancy or formal to get the point across to yourself, and it just takes a minute to save all the headache later. Don't skip this step or you'll have to rewrite the inventory system just to display it in a different window. <br>
+Your diagram doesn't have to be fancy or formal to get the point across to yourself, and it just takes a minute to save all the headache later. Don't skip this step or you'll have to rewrite the inventory system just to display it in a different window. <br>
 <br>

src/diary/entries/201015

@@ -1,13 +1,68 @@
 <!--201224,200806-->
-<h1>web development resources</h1>
+<h1>making of blessfrey.me</h1>
 october 15, 2020<br>
-#accessibility #color #css #html #webdesign<br>
+#bottle #css #html #simpletemplate #webdesign #webdev<br>
 <br>
-I'll collect frequently used resources for web design here. <br>
+blessfrey.me is a personal website I use to showcase projects + blog my process. I originally wrote it in PHP, but now it's written in <a href="https://bottlepy.org/docs/dev/">Bottle</a>, a Python web framework. <br>
+<br>
+<br>
+<h2>why not use a pre-made blogging platform like WordPress? </h2><br>
+blessfrey.me's needs are fairly simple - just some static pages and a blog page. Generalized blogging platforms are overkill. I don't need support for multiple users, localization, e-commerce, and so on. Unused features only bog down the website, potentially contributing to poor performance + security vulnerabilities. <br>
+<br>
+Also, it's just fun to write my own. I'm learning a lot as I take my website from initial sketches, to Hello World, to various prototypes, to something polished enough to show my friends. Also, since it can be considered a programming portfolio, it just makes sense that it itself should be something I programmed. <br>
+<br>
+<br>
+<h2>why Bottle? </h2><br>
+I originally wrote blessfrey.me in PHP. I switched to Bottle after looking for a templating engine. Bottle comes with SimpleTemplate and can do everything PHP can do but faster + with less verbosity. Plus, you get to write in Python, which is always fun. <br>
+<br>
+<br>
+<h2>how does blessfrey.me work? </h2><br>
+<h3>SimpleTemplate </h3><br>
+Instead of a static collection of HTML pages on my server, blessfrey.me's pages are constructed from SimpleTemplate templates and filled in using a Bottle script upon request. <br>
+<br>
+Every page uses the frame template below, so the basic skeleton is consistent and code for repetitive elements only has to exist in one place. Each page's content is made unique by bringing in a different template as <code>{{!base}}</code>. (Double curly brackets refer to variables, and exclamation marks disable escaping.) <br>
+<br><center>
+<img src="/static/img/ent/blessfrey_website_alltemplate.png" alt="(image: basic template code.)"><br>
+</center>
+(The code can be found on <a href="https://pastebin.com/mQuGX3Xa">Pastebin</a>.) <br>
+<br>
+The header template below (brought in at <code>% include('header.tpl')</code>) has some variables, too, which are supplied by the Bottle script. If Bottle doesn't provide a title, it defaults to 'blessfrey.me.' Variables can also be used in paths and URLs.  <br>
+<br><center>
+<img src="/static/img/ent/blessfrey_website_headertemplate.png" alt="(image: header template code.)" width="500" height="54"><br>
+</center>
+(The code can be found on <a href="https://pastebin.com/JcEU4xTm">Pastebin</a>.) <br>
+<br>
+You can insert Python code into the templates for dynamic pages. Below is an excerpt of the template for the diary page. This code fills the page with diary entry previews using a for loop. Not shown is the first line <code>% rebase('frame.tpl')</code>, which tells SimpleTemplate to insert this content at the <code>{{!base}}</code> variable in the frame template. <br>
+<br><center>
+<img src="/static/img/ent/blessfrey_website_snippettemplate.png" alt="(image: diary snippet code from diary template.)" width="500" height="401"><br>
+</center>
+(The code can be found on <a href="https://pastebin.com/ckEj9Bf2">Pastebin</a>.) <br>
+<br>
+The Bottle script sends the max number of snippets per page (the <code>limit</code>) and a list of lists containing all the diary snippets. It receives the page number from the URL. For the snippets that will appear on the given page, it converts the list data into HTML code to be displayed in the browser. <br>
+<br>
+<br>
+<h3>Bottle </h3><br>
+Bottle takes URLs and generates the corresponding webpage upon request. Each URL is tied to a method, which returns a template and a dictionary of data to be used in the template. Since Bottle is a Python framework, you have access to all the Python libraries you need. <br>
+<br><center>
+<img src="/static/img/ent/blessfrey_website_diaryscript.png" alt="(image: Bottle script excerpt for diary routes.)" width="500" height="288"><br>
+</center>
+(The code can be found on <a href="https://pastebin.com/Bf96F9Ha">Pastebin</a>.) <br>
+<br>
+This is what the methods for specific routes look like. So every time you go to blessfrey.me/diary, one of the above methods is called, depending on whether also you supplied an integer. To generate the page content, it calls a lot of Python functions to find my diary entries, convert them into previews for the snippets section + headlines for the sidebar, and get the current time for the footer. <br>
+<br>
+<br>
+<br>
+<h3>CSS </h3><br>
+The website is styled using CSS, heavily relying on the CSS Grid and a bit of Flexbox. CSS grids can be used inside CSS grids, so my pages are generally blocked out, with smaller internal grids managing specific content. <br>
+<br><center>
+<img src="/static/img/ent/blessfrey_website_cssgrid.png" alt="(image: css grid traced over screenshot of projects page.)" width="500" height="491"><br>
+</center>
+<br>
+The projects page is an example of nested grids. Almost every page uses the yellow general layout. The content unique to the projects page is mapped out in green, with a section for the header, featured content, and unfeatured content. The unfeatured content uses a 2-column grid in blue to evenly space out all the little thumbnails. <br>
+<br>
+The CSS code for project's general grid + the nested unfeatured grid are shown below.<br>
+<br><center>
+<img src="/static/img/ent/blessfrey_website_projectcss.png" alt="(image: projects css code.)"><br>
+</center>
+(The code can be found on <a href="https://pastebin.com/pVgkmT5k">Pastebin</a>, but you can always see a webpage's CSS by right-clicking and viewing the source.) <br>
 <br>
-<ul>
-<li><a href="https://cssgrid-generator.netlify.app/"><b>CSS Grid Generator</b></a> - build a basic CSS Grid by changing the number of columns + rows, adjusting their dimensions, and adding containers. </li>
-<li><a href="https://validator.w3.org/nu/#textarea"><b>W3's Nu Html Checker</b></a> - automatically check the validity of your html + css. </li>
-<li><a href="https://webaim.org/resources/contrastchecker/"><b>WebAIM's Contrast Checker</b></a> - check whether your font color contrasts well against your background color, at least in the eyes of a computer. </li>
-<li><a href="https://coolors.co/75dbcd-c9dbba-dcdba8-f5cda7-faa381"><b>Coolors</b></a> - select and lock colors then generate palettes by pressing space. Click on a color to view shades + tints, so you can tweak contrast without losing hues. </li>
-</ul>

src/diary/entries/201029

@@ -40,7 +40,7 @@ From Godot's top menu, go to Project>Project Settings...>Localization>Translatio
 <img src="/static/img/ent/internationalization_script.png" alt="(image: example of an id used in a script)"><br>
 </center>
 <br>
-It's really simple stuff. Anywhere you would have written a string, like "quit game," you instead use its id wrapped in tr(). So instead of <code>label.set_text("quit")</code>, you'd write <code>label.set_text(tr("quit_game"))</code>. In this example, the id is "quit_game" and its corresponding text in English is "quit."
+It's really simple stuff. Anywhere you would have written a string, like "quit", you instead use its id wrapped in tr(). So instead of <code>label.set_text("quit")</code>, you'd write <code>label.set_text(tr("quit_game"))</code>. In this example, the id is "quit_game" and its corresponding text in English is "quit."
 <br>
 <br>
 <h2>step 4 - set the game's language </h2>
@@ -54,7 +54,7 @@ Set the locale in your script, somewhere like _ready() or on a 'change language'
 <br>
 <h2>step 5 - continue adding to your spreadsheet </h2>
 <br>
-Now that everything's in place, you can keep adding new ids and translations, and Godot will automatically update your changes. <br>
+Now that everything's in place, you can keep adding new ids + translations, and Godot will automatically use your changes in-game. <br>
 <br>
 <h2>that's the basics </h2>
 <center>

src/diary/entries/201031

@@ -4,31 +4,31 @@ october 31, 2020<br>
 #css #html #python #webdev #website<br>
 <br>
 <h2>week 1 </h2><br>
-bottle, python, regular expressions, website <br>
+#bottle #python #regularexpressions #website <br>
+<br>
 <h3>thursday, october 1 </h3><br>
 <ul>
 <li>blessfrey.me's diary properly displays snippets for all articles: a header taken from the title, a truncated view of the article, the date + a place for social media share links, and a link to the article.</li>
-<li>Cleaning the snippets enough to look okay and not break the page was a challenge. I used regular expressions to remove html link + header tags, <a href="https:/git sta/stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags">which is apparently a lost cause Stack Overflow users stand against daily, hourly even</a>. It's not so bad if it's not user content, and the content is pretty predictable, right?
+<li>Cleaning the snippets enough to look okay and not break the page was a challenge. I used regular expressions to remove html link + header tags, <a href="https:/git sta/stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags">which is apparently a lost cause Stack Overflow users stand against daily, hourly even</a>. It's not so bad if it's not user content and the content is pretty predictable, right?
-<li>Pythex @ https://pythex.org/ is useful for checking whether your regular expression will catch your target strings</li>
+<li><a href="https://pythex.org/">Pythex</a> is useful for checking whether your regular expression will catch your target strings</li>
-<li>First command line git merge. I usually do it on the website. It's really simple - switch to the branch you're merging the second branch into, type 'git merge second-branch' (second-branch = name of the second branch obviously), and fix any conflicts.</li>
+<li>First command line git merge. I usually do it on the website. It's really simple - switch to the branch you're merging the second branch into, type '<code>git merge second-branch</code>' (<code>second-branch</code> = name of the second branch obviously), and fix any conflicts.</li>
-<li>Blog removes html tags through regex patterns.</li>
-<li>Fixed footer strangely appearing in the middle of the body on pages.</li>
 </ul>
 <br>
 <h3>friday, october 2 </h3><br>
 <ul>
 <li>All articles are kept in the same folder. There's really no reason to split them up. If I want to differentiate types of articles, I can use tags or something.</li>
-<li>set up blog navigation</li>
+<li>Set up blog navigation</li>
 </ul>
 <br>
 <h3>saturday, october 3 </h3><br>
 <ul>
 <li>Blog removes html tags through regex patterns.</li>
-<li>fixed footer strangely appearing in the middle of the body on pages.</li>
+<li>Fixed footer strangely appearing in the middle of the body on pages.</li>
 </ul>
 <br>
 <h2>week 2 </h2><br>
-bottle, python, website<br>
+#bottle #python #website<br>
+<br>
 <h3>sunday, october 4 </h3><br>
 <ul>
 <li>Started using absolute paths when needed. Diary snippet links to articles work now. Articles use CSS now.</li>
@@ -37,13 +37,12 @@ bottle, python, website<br>
 <br>
 <h3>monday, october 5 </h3><br>
 <ul>
-<li>made 'latest' box in sidebar of diary and articles with working links to the 5 latest articles</li>
+<li>made 'latest' box in sidebar of diary + articles with working links to the 5 latest articles</li>
-<li>Made a simple page for myself that isn't linked anywhere</li>
 </ul>
 <br>
 <h3>tuesday, october 6 </h3><br>
 <ul>
-<li>researched and added a robots.txt, sitemap, nofollow links</li>
+<li>researched + added a robots.txt, sitemap, nofollow links</li>
 <li>added social media share links to all snippets that allow you to share the title and a link to Twitter, Facebook, or email. Not sure if Facebook or email work because I don't feel like getting Facebook or connecting email to my browser.</li>
 </ul>
 <br>
@@ -55,7 +54,7 @@ bottle, python, website<br>
 <br>
 <h3>saturday, october 10 </h3><br>
 <ul>
-<li>For testing, all colors were taken from the latest colors on random color websites, and all divs are stark. I added margins, padding, sans-serif font choices, and an okay color palette. I'll pick something more true-to-brand later, but at least it isn't embarrassing now.</li>
+<li>For testing, all colors were taken from the latest colors on random color websites, and all divs are stark. Instead, I have added margins, padding, sans-serif font choices, and an okay color palette. I'll pick something more true-to-brand later, but at least it isn't embarrassing now.</li>
 </ul>
 <br>
 <h3>tuesday, october 13</h3><br>
@@ -73,7 +72,7 @@ bottle, python, website<br>
 <br>
 <h3>saturday, october 17 </h3><br>
 <ul>
-<li>worked at the cafe today. Since my husband's battery is dead, he finally read some May I Ask For One Final Thing? I love that manga!</li>
+<li>worked at the cafe today. Since my husband's battery is dead, he finally read some May I Ask For One Final Thing? I love that manga!!</li>
 <li>Refactored the main Bottle script. Before, I wrote it hard and fast, so it was reading all the diary entries multiple times per refresh. It's not only cleaner now, it also only reads the files twice.</li>
 </ul>
 <br>

src/diary/entries/201112

@@ -5,13 +5,13 @@ november 12, 2020<br>
 <br>
 In Godot Engine, you can call methods from a parent class by prefixing it with a period (.). So to access the <code>move()</code> method from a parent, call <code>.move()</code>. This is called a <b>super method</b>. <br>
 <br>
-I used to use super methods to make skills, but there's a better way.<br>
+Being called super doesn't mean there isn't a better way, though. I used to use super methods to build customs skills in blessfrey, but subfunctions is tidier. <br>
 <br>
-Just so you know, blessfrey's skills have a number of phases of effects that must happen in order: skill press > activation > initial phase > main phase > end phase > cooldown <br>
+(Just so you know, blessfrey's skills have a number of phases of effects that must happen in order: skill press > activation > initial phase > main phase > end phase > cooldown.) <br>
 <br>
 <br>
 <h2>the old way </h2><br>
-Initially, I used super methods to give each phase custom effects and call the next phase. This was messy. If I ever redesigned the flow of the skill phases, I'd have to edit every single skill script. It also causes a lot of repetitive code in the individual skill scripts while the base script is tiny. <br>
+Initially, I used super methods to give each phase custom effects and call the next phase. This was messy. If I ever redesigned the flow of the skill phases, I'd have to edit every single skill script. It also causes a lot of repetitive code in the individual skill scripts while the base script is tiny. The one-time script being the small one is no fair. <br>
 <br><center>
 <img src="/static/img/ent/supermethod_old.png" alt="(image: GDscript code using old method)"><br>
 </center>
@@ -22,7 +22,7 @@ Initially, I used super methods to give each phase custom effects and call the n
 <br>
 Instead, I can bring all the repetitive steps into the base class, sandwiching in a subfunction where the custom effects would take place. Now I only need to add what makes my skill unique inside the subfunction. <br>
 <br>
-I named the subfunction after its main function and added an underscore to the front. So in the base script, I fit <code>_functionality(user, action_target)</code> into the <code>functionality(user, action_target)</code>. Then the individual skill scripts only need the subfunction, none of the other repetitive code from before. The subfunction is empty in the base class and filled with unique code in the child classes. Since skills inherit, the unique <code>_functionality</code> subfunction will be called automatically from the base script's <code>functionality</code>. <br>
+I named the subfunction after its main function and added an underscore to the front. So in the base script, I fit <code>_functionality(user, action_target)</code> into <code>functionality(user, action_target)</code>. Then the individual skill scripts only need the subfunction, none of the other repetitive code from before. The subfunction is empty in the base class and filled with unique code in the child classes. Since skills inherit, the unique <code>_functionality</code> subfunction will be called automatically from the base script's <code>functionality</code>. <br>
 <br>
 <center>
 <a target="_blank" href="/static/img/ent/supermethod_old.png">
@@ -31,3 +31,9 @@ I named the subfunction after its main function and added an underscore to the f
 </center>
 (You can see the new method's code on <a href="https://pastebin.com/teeYn9jP">Pastebin</a>.)
 <br>
+<br>
+<h2>problem solved! </h2><br>
+<br>
+The base script holds all the lengthy code in one place, while I only need to write the unique effects in all the hundreds of skill scripts. That saves me time making, refactoring, and maintaining skills. Yay. <br>
+<br>
+

src/diary/entries/201126

@@ -3,17 +3,17 @@
 november 26, 2020<br>
 #sideproject<br>
 <br>
-Getting started with blessfrey's AI was overwhelming, so I took a break and worked on a new game. I didn't get very far, but it's very very cute to me. It's not even on my hard drive anymore. <br>
+Getting started with blessfrey's AI was overwhelming, so I took a break and worked on a new game. I didn't get very far. It's not even on my hard drive anymore. It's cute, though. <br>
 <br>
-Unlike blessfrey, where coding takes up 90% of the effort, pretendOS is mostly reasonably polished assets and sounds with barely any functionality. It's a UI game, after all. Since it's a game requiring a completely opposite skill-set, I was able to make progress on <i>something</i> while reading up on game AI. (Programming Game AI by Example by Mat Buckland was a good resource to me, by the way.) I also got to work on things I never get around to with blessfrey, like particle effects. <br>
+Unlike blessfrey, where coding takes up 90% of the effort, pretendOS is mostly graphical assets + sounds with barely any functionality. It's a UI game, after all. Since it's a game requiring a completely opposite skill-set, I was able to make progress on <i>something</i> while reading up on game AI. I also got to work on new things like particle effects. <br>
 <br>
 <br>
 <h2>Inspiration </h2>
 <br>
 <h3>Windows XP</h3>
-The game takes strong aesthetic inspiration from Windows XP. It almost fits the 90s vaporwave trend at the moment, but I'm too young to really remember Windows 95. I obviously have nostalgia for it as my first operating system (as far as I remember - I was a toddler then), but I mostly knew it as the Lego Island machine propped up in the dining room. As my family upgraded computers over the years, Windows never really impacted me as anything more than something that can run some videogames and whatever popular web browser of the time. That is, until Windows XP. <br>
+The game takes strong aesthetic inspiration from Windows XP. It almost fits the 90s vaporwave trend, but I'm too young to really remember Windows 95. I obviously have nostalgia for it as my first operating system (as far as I remember - I was a toddler then), but I mostly knew it as the Lego Island machine propped up in the dining room. As my family upgraded computers over the years, Windows never really impacted me as anything more than something that can run some videogames and whatever popular web browser of the time. That is, until Windows XP. <br>
 <br>
-XP really hooked me. It was the first operating system I spent as much time exploring as I spent using software. XP's edition of Paint was my favorite yet, I loved fiddling with the themes and accessibility options, especially Microsoft Sam, Rover, and Clippy. I started watching Youtube videos on how to use the Command Prompt. XP was just fun to use. I've found better desktop environments and operating systems since, but I never got over that aesthetic: smooth, blended graphics with hard pixel edges in 32-bit color with an alpha channel, right at the cusp between pixel art and vector graphics. My vaporwave would be XP in Luna olive green, or the "Fisher-Price interface" as Ars Technica users called it. <br>
+XP really hooked me. It was the first operating system I spent as much time exploring as I spent using software. XP's edition of Paint was my favorite yet, I loved fiddling with the themes and accessibility options, especially Microsoft Sam, Rover, and Clippy. I started watching Youtube videos on how to use the Command Prompt. XP was just fun to use. I've found better desktop environments and operating systems since, but I never got over that aesthetic: smooth, blended graphics with hard pixel edges in 32-bit color with an alpha channel, right at the cusp between pixel art and vector graphics. Vaporwave for me is Luna olive green, or the "Fisher-Price interface" as Ars Technica users called it. <br>
 <br>
 <img src="/static/img/ent/wikipedia_luna.png" alt="(image: Wikipedia excerpt: Critics who did not like the theme characterized it as a 'Fisher-Price interface'.)"><br>
 (screenshot from <a href="https://en.wikipedia.org/wiki/Windows_XP_visual_styles">Wikipedia</a> - referencing articles from <a href="https://web.archive.org/web/20091008081626/http://www.pcworld.com/article/117427/full_disclosure_your_take_on_windows_worst_irritations.html">PCWorld</a> and <a href="https://arstechnica.com/information-technology/2014/04/memory-lane-before-everyone-loved-windows-xp-they-hated-it/">Ars Technica</a>)<br>
@@ -22,10 +22,10 @@ XP really hooked me. It was the first operating system I spent as much time expl
 There were a few other experiences behind the game, too. <br>
 <br>
 <h3>Mother's Day E-Card</h3>
-I finally got my husband to try Godot Engine, and he used it to make a digital Mother's Day card for his mom. Opening the card displayed a 3D heart (a "cardioid") that bounced to the beat of a song while 2D cardioid particles rained down. It was all programmatically generated using geometry instead of 3D + 2D assets, so the application was very small. He made the graphics side of things look really interesting, and I wanted to play around with particles, too. Just...not as fancy;; <br>
+I finally got my husband to try Godot Engine, and he used it to make a digital Mother's Day card for his mom. (Cute.) Opening the card displayed a 3D heart (a "cardioid") that bounced to the beat of a song while 2D cardioid particles rained down. It was all programmatically generated using geometry instead of 3D + 2D assets, so the application was very small. He made the graphics side of things look really interesting, and I wanted to play around with particles, too. Just...not as fancy;; <br>
 <br>
 <h3>Secret Little Haven</h3>
-I also just played a cute pretend OS game on itch called <a href="https://ristar.itch.io/secret-little-haven">Secret Little Haven</a> It's quite short, very story-driven, and kind of buggy, telling Alex's struggle with gender identity through IMs. Honestly, pretend OS games and coming-of-age chat sims are nothing special, but Secret Little Haven's believability makes it really stand out. Instead of defending against cheesy + inaccurate deep web hacking attempts, you use an in-game terminal to get around child locks set by Alex's dad. Those terminal puzzles are the most realistic and relatable hacking I've seen in these games. SLH isn't super sophisticated or in-depth, but it shows how cute and believable a pretend OS game can be. I'd love to make a little environment like that, that's as fun to fiddle around with as XP was for me. <br>
+I also just played a cute pretend OS game on itch called <a href="https://ristar.itch.io/secret-little-haven">Secret Little Haven</a> It's quite short, very story-driven, and kind of buggy, telling Alex's struggle with gender identity through IMs. Honestly, pretend OS games and coming-of-age chat sims are nothing special, but Secret Little Haven's believability makes it really stand out. Instead of defending against cheesy + inaccurate deep web hacking attempts, you use an in-game terminal to get around child locks set by Alex's dad. Those terminal puzzles are the most realistic and relatable hacking I've seen in these games. SLH isn't super sophisticated or in-depth, but it shows how cute and believable a pretend OS game can be. I'd love to make a little environment like that, that's as fun to fiddle around with as XP. <br>
 <br>
 <br>
 <h2>pretendOS </h2>
@@ -45,5 +45,5 @@ The rest is cute, though. The icon winks when you click it, the cursor's kinda 2
 <br>
 <h2>the future</h2>
 <br>
-It's cute. I'd like it to be finished in some way. I went ahead and cloned my old repo. Maybe I'll fill it out with some more applications for a game jam or something or at least finally get that cool Secret Little Haven curved screen shader working. <br>
+It's cute. I'd like it to be finished in some way. I went ahead and cloned my old repo. Maybe I'll fill it out with more applications during a game jam or something or at least finally get that cool Secret Little Haven curved screen shader working. <br>
 <br>

src/diary/entries/201130

@@ -10,20 +10,22 @@ Skill inheritance is more sophisticated now and allows the script to generate a
 <br>
 I spend a lot of time on how to make skills because this is a core mechanic of my game, and I plan to have a hundred or more of them. I need an efficient way to update and create the game's skill pool. <br>
 <br>
-On <b>November 24, 2020</b>, I finally added a diary navigation bar <i>under</i> the diary snippets, so you don't have to scroll back up to go to the next page anymore. <br>
+On <b>November 24, 2020</b>, I finally added a diary navigation bar <i>under</i> the diary snippets, so you don't have to scroll back up to go to the next page anymore. I was really putting that off for how essential that is. <br>
 <br>
-On <b>November 25, 2020</b>, I retroactively added diary entries based on old tweets. I added one for my pixel font, one for my Weekly Game Jam submission, one for my inventory system diagram, and one for blessfrey's graphic updates. I finally got Bottle to support self-hosted images instead of using imgur for everything (lol), and fixed lots of bugs related to actually having imbedded images in articles. <br>
+On <b>November 25, 2020</b>, I began retroactively adding diary entries based on old tweets. I added one for my pixel font, one for my Weekly Game Jam submission, one for my inventory system diagram, and one for blessfrey's graphic updates. I finally got Bottle to support self-hosted images instead of using imgur for everything (lol), and fixed lots of bugs related to actually having imbedded images in articles. <br>
 <br>
 As cool as it is to work on gamedev, this website is also a priority for me as a sort of portfolio. So it would be nice to have lots of articles about my process and different projects. It would be super nice to have pretty graphics everywhere, but as usual, the placeholders are probably going to stay around for a while since they're already half-decent-looking. <br>
 <br>
-<b>November 26, 2020</b> is Thanksgiving during a pandemic. Wrote up an article for my pretendOS game and my coroutines example. Also, the diary shows 8 snippets per page instead of 4. <br>
+<b>November 26, 2020</b> is Thanksgiving during a pandemic. Wrote up an article for my pretendOS game and my coroutines example. Also, the diary shows 8 snippets per page instead of 4. I finally have enough articles to test an optimal amount shown per page. <br>
 <br>
-<b>November 27, 2020</b> - is Black Friday. I ordered navy eyeshadow and fancy sunscreen.<img src="/static/img/emo/star.gif" alt="<3"> Added an article for skill phases + super methods and slimeAI's state transition diagram.<br>
+<b>November 27, 2020</b> is Black Friday. I ordered navy eyeshadow and fancy sunscreen.<img src="/static/img/emo/star.gif" alt="<3"> Added an article for skill phases + super methods and slimeAI's state transition diagram.<br>
 <br>
-<b>November 28, 2020</b> is my birthday. <img src="/static/img/emo/heart.gif" alt="<3"><br>
+<b>November 28, 2020</b> is my birthday. <img src="/static/img/emo/heart.gif" alt="<3"> I replaced the game page with a projects page with pretty CSS grid formatting and little thumbnail links to different projects, either to diary entries or git repos. <br> 
+<br>
+<b>November 29, 2020</b>, I make sure all the thumbnails are consistent sizes for the projects page make the images and descriptions into links. I also add a thumbnail for the website itself because why not? It doesn't have anything suitable to link to, so I wrote up an article explaining blessfrey.me's development. I touched up the presskit page and added a PDF download to the page. Downloads are way easier to add than I thought they'd be - seriously took me less than a minute. The presskit page is still ugly, but at least it has better images on it now. I'm getting close to actually letting people see my website (even though it's been publicly accessible pretty much since August but whatever), so I went through my articles again and improved their readability and removed most stuff that isn't really relevant. <br>
 <br>
 <h2>off-topic </h2><br>
 I joined a Japanese manga translation group on a whim and now provide Japanese-to-English transcripts for a new chapter of a manga about every week and a half. It wasn't obvious, but understanding Japanese is a different skill than rewriting Japanese into English while keeping the jokes, character voice, and cliffhangers/foreshadowing intact;; <br>
 <br>
-Also, Election Day-turned-Weeks took up a few extra days of anxious news-watching than it usually does, even though I tuned out long before Georgia was called. <br>
+Also, Election Day-turned-Weeks took up a few extra days of nonstop news watching than it usually does, even though I tuned out long before Georgia was called. <br>
 <br>

src/diary/entries/210107

@@ -1,28 +1,13 @@
-<!--200810-->
+<!--201224,200806-->
-<h1>my favorite GDC talks </h1>
+<h1>web development resources</h1>
-january 7, 2020<br>
+october 15, 2020<br>
-#gamedesign #marketing<br>
+#accessibility #color #css #html #webdesign<br>
 <br>
-I really should be keeping a list of these with descriptions, so why not keep them in an article? <br>
+I'll collect frequently used resources for web design here. <br>
-<br>
-<h2><a href="https://www.youtube.com/watch?v=W20t1zCZv8M">Automated Testing and Instant Replays in Retro City Rampage </a></h2><br>
-Vblank Entertainment's Brian Provinciano (2015) <br>
-log button inputs to replay the game, for use in preproducing bugs, sharing replays on the community leaderboard, running cutscenes, and even controlling AI. It is 100% accurate in deterministic engines but also helpful in less deterministic engines. 
 <br>
 <ul>
-<li><a href="/static/extra/SimpleInputRec.cpp">I backed up the code he shared here. </a> It is a simple example of how to record and playback button input, written in C++.</li>
+<li><a href="https://cssgrid-generator.netlify.app/"><b>CSS Grid Generator</b></a> - build a basic CSS Grid by changing the number of columns + rows, adjusting their dimensions, and adding containers. </li>
+<li><a href="https://validator.w3.org/nu/#textarea"><b>W3's Nu Html Checker</b></a> - automatically check the validity of your html + css. </li>
+<li><a href="https://webaim.org/resources/contrastchecker/"><b>WebAIM's Contrast Checker</b></a> - check whether your font color contrasts well against your background color, at least in the eyes of a computer. </li>
+<li><a href="https://coolors.co/75dbcd-c9dbba-dcdba8-f5cda7-faa381"><b>Coolors</b></a> - select and lock colors then generate palettes by pressing space. Click on a color to view shades + tints, so you can tweak contrast without losing hues. </li>
 </ul>
-<br>
-<br>
-<h2><a href="https://www.youtube.com/watch?v=UJiv14uPOac">Empathizing with Steam: How People Shop for Your Game </a></h2><br>
-Chris Zukowski (2020) <br>
-tips for how to design your Steam store page based on Zukowski's screenshare and shopping diary observations of ordinary people shopping on Steam <br>
-<br>
-<ul>
-<li>Essentially, make your gameplay genre absolutely clear within the first 4 screenshots and in the short description so that people will wishlist your game to buy during a seasonal Steam Sale. </li>
-<li>Approach your wishlisters as complete newcomers. Jazz up your Steam page before a Steam Sale. Release an update, post in your forums, put a Santa hat on your character. When wishlisters return to your page, they will see an active game and be sold on it all over again. </li>
-<li>His conclusions are very similar to how I shop on Steam, except I could care less for the tag section. </li>
-<li>The romantic indie fiction section on Amazon dwarves the indie game section on Steam. To be immediately visible to their audience, romance authors follow a clear visual language on their covers to communicate their genres and sub-genres. Zukowski uses this as an extreme method for attracting your audience using the tropes of your genre, pointing out common UI elements and the shooter guy on every FPS cover. </li>
-<li>More notes @ <a href="/diary/entries/extra/gdc-design-steam-store">/diary/entries/extra/gdc-design-steam-store </a>
-</ul>
-<br>

src/diary/entries/210114

@@ -0,0 +1,28 @@
+<!--200810-->
+<h1>my favorite GDC talks </h1>
+january 7, 2020<br>
+#gamedesign #marketing<br>
+<br>
+I really should be keeping a list of these with descriptions, so why not keep them in an article? <br>
+<br>
+<h2><a href="https://www.youtube.com/watch?v=W20t1zCZv8M">Automated Testing and Instant Replays in Retro City Rampage </a></h2><br>
+Vblank Entertainment's Brian Provinciano (2015) <br>
+log button inputs to replay the game, for use in preproducing bugs, sharing replays on the community leaderboard, running cutscenes, and even controlling AI. It is 100% accurate in deterministic engines but also helpful in less deterministic engines. 
+<br>
+<ul>
+<li><a href="/static/extra/SimpleInputRec.cpp">I backed up the code he shared here. </a> It is a simple example of how to record and playback button input, written in C++.</li>
+</ul>
+<br>
+<br>
+<h2><a href="https://www.youtube.com/watch?v=UJiv14uPOac">Empathizing with Steam: How People Shop for Your Game </a></h2><br>
+Chris Zukowski (2020) <br>
+tips for how to design your Steam store page based on Zukowski's screenshare and shopping diary observations of ordinary people shopping on Steam <br>
+<br>
+<ul>
+<li>Essentially, make your gameplay genre absolutely clear within the first 4 screenshots and in the short description so that people will wishlist your game to buy during a seasonal Steam Sale. </li>
+<li>Approach your wishlisters as complete newcomers. Jazz up your Steam page before a Steam Sale. Release an update, post in your forums, put a Santa hat on your character. When wishlisters return to your page, they will see an active game and be sold on it all over again. </li>
+<li>His conclusions are very similar to how I shop on Steam, except I could care less for the tag section. </li>
+<li>The romantic indie fiction section on Amazon dwarves the indie game section on Steam. To be immediately visible to their audience, romance authors follow a clear visual language on their covers to communicate their genres and sub-genres. Zukowski uses this as an extreme method for attracting your audience using the tropes of your genre, pointing out common UI elements and the shooter guy on every FPS cover. </li>
+<li>More notes @ <a href="/diary/entries/extra/gdc-design-steam-store">/diary/entries/extra/gdc-design-steam-store </a>
+</ul>
+<br>

src/index.py

@@ -205,6 +205,11 @@ def serve_extra(filename):
 def error404(error):
     return "unfortunately, a 404 error"
 
+# Downloads
+@route('/download/<filename:path>')
+def download(filename):
+    return static_file(filename, root='static/extra', download=filename)
+
 # Home Page - Index Template
 @route('/')
 def index():

src/static/css/projects.css

@@ -154,7 +154,6 @@ ul { list-style-position: inside; }
     font-size: 25px;
     text-align: right;
     margin-right: 10px;
-    
 }
 
 .featured-desc a:link {
@@ -185,7 +184,6 @@ ul { list-style-position: inside; }
     font-size: 18px;
     text-align: center;
     margin-right: 10px;
-    
 }
 
 .more-desc a:link {

src/views/diary.tpl

@@ -76,8 +76,12 @@
                 </div>
                 <div class="snippet-info">
                     <b>{{!s[2]}} 
-                    • <a class="social-link social-twitter" href='http://twitter.com/share?text={{s[4]}}&url=https://blessfrey.me{{s[3]}}&via=lilchimchooree' target="_blank">tweet</a> 
+                    • <a class="social-link social-twitter" 
-                    • <a class="social-link social-fb" href='http://www.facebook.com/share.php?u={{s[3]}}'>facebook</a> 
+                        href='http://twitter.com/share?text={{s[4]}}
+                        &url=https://blessfrey.me{{s[3]}}&via=lilchimchooree' 
+                        target="_blank">tweet</a> 
+                    • <a class="social-link social-fb" 
+                        href='http://www.facebook.com/share.php?u={{s[3]}}'>facebook</a> 
                     % message = "Hey,+check+out+this+post:+" + s[1] + ".,+" + s[3]
                     % message = message.replace('+','\+')
                     % message = re.sub('\s+?','+', message)
@@ -118,7 +122,8 @@
         % # fill out number cluster to the left when page is high
         % if max_pages > cluster and page > max_pages - cluster:
             % for j in range(cluster - max_pages + page):
-                <a href=/diary/{{max_pages - cluster * 2 + j}} rel="nofollow">{{max_pages - cluster * 2 + j}}</a>
+                <a href=/diary/{{max_pages - cluster * 2 + j}} 
+                    rel="nofollow">{{max_pages - cluster * 2 + j}}</a>
             % end
         % end
 
@@ -136,7 +141,8 @@
         % # fill out number cluster to the right when page is low
         % if page <= cluster - 1 and max_pages > page + cluster:
             % for j in range(cluster - page):
-                <a href=/diary/{{page + j + cluster + 1}} rel="nofollow">{{page + j + cluster + 1}}</a>
+                <a href=/diary/{{page + j + cluster + 1}} 
+                    rel="nofollow">{{page + j + cluster + 1}}</a>
             % end
         % end
 

src/views/presskit.tpl

@@ -3,91 +3,90 @@
     <div class="pages">
 
         <div class="textbox fact"> 
-            <h1>Fact Sheet</h1>
+            <center><h1>blessfrey </h1>
+            (Presskit available as a <a href="/download/blessfrey_chimchooree_presskit.pdf">PDF</a>) </center><br>
+            <hr>
+            <br>
+            <h2>Fact Sheet </h2>
             <ul>
-                <li><b>Description:</b> Build synergies across your skillbar and teammates to survive the downtown dungeon.</li>
+                <li><b>Description:</b> Build synergies across your skillbar and teammates to explore the dungeon under the local shopping center.</li>
                 <li><b>Developer:</b> chimchooree, US indie dev</li>
                 <li><b>Genre:</b> Singleplayer Action RPG</li>
                 <li><b>Release Date:</b> Spring 2030</li>
-                <li><b>Platforms:</b> Windows, Linux, possibly more</li>
+                <li><b>Platforms:</b> Linux, Windows, possibly more</li>
                 <li><b>Engine:</b> Godot Engine</li>
-                <li><b>Website:</b> blessfrey.com</li>
+                <li><b>Website:</b> blessfrey.me</li>
-                <li><b>Price:</b> $105.00 USD</li>
+                <li><b>Contact + Social:</b> <a href="https://twitter.com/lilchimchooree" rel="nofollow">Twitter @lilchimchooree</a></li>
-                <li><b>Press Contact:</b> <a href="https://twitter.com/lilchimchooree" rel="nofollow">Twitter @lilchimchooree</a></li>
-                <li><b>Social:</b> <a href="https://twitter.com/lilchimchooree">Twitter</a></li>
             </ul><br>
         </div>
 
         <div class="textbox desc">
-            <h1>Description</h1>
+            <h2>Description </h2>
             <br>
-            Blessfrey is the first game in development by US-based indie game developer chimchooree. <br>
+            Blessfrey is the first commercial game in development by US-based indie game developer chimchooree. <br>
 <br>
-            Blessfrey is a 2D action RPG set in a rural town riddled with secret tunnels and dungeons. 
+            Blessfrey is a 2D action RPG set in a rural town riddled with secret tunnels and dungeons. The multiclass and skill system emphasizes player skill, personal expression, and exploration. Delve deeper under the town by discovering new skills, building synergies within your skillbar, and recruiting AI teammates. <br>
-The multiclass and skill system emphasizes player skill, personal expression, and exploration. Delve deeper under the town by discovering new skills, building synergies within your skillbar, and recruiting AI teammates. Bosses, traps, and a secret world await. <br>
 <br>
-            
         </div>
 
         <div class="textbox features"> 
-            <h1>Features </h1>
+            <h2>Features </h2>
             <ul>
                 <li>Try tens of possible dual-class combinations</li>
                 <li>Experiment with hundreds of possible skillbar combinations</li>
-                <li>Freely relocate skill points and swap out skills in safe areas</li>
+                <li>Freely relocate skill points and swap out skills in safe areas. Few class progression decisions are permanent. </li>
                 <li>Learn new skills through exploration and gameplay</li>
                 <li>Explore an underground world</li>
             </ul><br>
         </div>
 
         <div class="textbox dev">
-            <h1>Developer </h1>
+            <h2>Developer </h2>
             <br>
-            chimchooree is learning to code through making a dream game, automating the boring stuff, and taking online classes. See some of her code on <a href="https://gitlab.com/chimchooree">GitLab</a> and some of her design process + planning on her <a href="diary.php">blog</a> and on <a href="https://twitter.com/lilchimchooree">Twitter</a>. <br>
+            chimchooree is learning to code through making her dream game, automating the boring stuff, and taking online classes. See some of her pubic code on <a href="https://gitlab.com/chimchooree">GitLab</a> and some of her design process on her <a href="diary.php">blog</a> and on <a href="https://twitter.com/lilchimchooree">Twitter</a>. <br>
 <br>
-            Her most complex projects are blessfrey, a 2D action RPG written in Godot Engine's GDScript and Cat Store, a text-based breeding sim written in Java using IntelliJ. <br>
+            Her most complex projects are blessfrey, a 2D action RPG written in Godot Engine's GDScript and Cat Store, a text-based cat show and breeding sim written in Java using IntelliJ. <br>
         </div>
 
         <!--<div class="textbox videos"> </div>-->
 
         <div class="textbox graphics">
-            <h1>Graphics</h1>
+            <h2>Graphics</h2>
             <br><center>
-            <a target="_blank" href="https://i.imgur.com/1MLHsuV.png">
-                <img src="https://i.imgur.com/1MLHsuV.png" alt="in-engine screenshot of the schoolyard" width="200" height="156">
-            </a>
-            <a target="_blank" href="https://i.imgur.com/aIyPuO7.png">
-                <img src="https://i.imgur.com/aIyPuO7.png" alt="character concept art of Angel, Chloe, and Tessa" width="200" height="156">
-            </a>
             <br>
-            <a target="_blank" href="https://i.imgur.com/UtuanB1.gif">
+            <a target="_blank" href="/static/img/ent/blessfrey.png">
-                <img src="https://i.imgur.com/UtuanB1.gif" alt="in-engine footage of pathfinding projectile" width="200" height="156">
+                <img src="/static/img/ent/blessfrey.png" alt="image: blessfrey screenshot: Angel in front of the Mock School" width="700" height="525"> 
-            </a>
+            </a><br>
-            <a target="_blank" href="https://i.imgur.com/9bTDe5X.png">
+            <br>
-                <img src="https://i.imgur.com/9bTDe5X.png" alt="screenshot of the godot editor" width="200" height="156">
+            <a target="_blank" href="/static/img/ent/screenshot_June292019.png">
-            </a>
+                <img src="/static/img/ent/screenshot_June292019.png" alt="(image: Lots of Angels and other characters at a shopping center)" width="700" height="524">
+            </a><br>
+            <br>
+            <a target="_blank" href="/static/img/ent/screenshot_July252020.png">
+                <img src="/static/img/ent/screenshot_July252020.png" alt="(image: Angel and some slimes in a cavern)" width="700" height="393">
+            </a><br>
+
+
             </center>
         </div>
 
         <div class="textbox contact">
-            <h1>Contact</h1>
+            <h2>Contact</h2>
             <br>
             Please message me on <a href="https://twitter.com/lilchimchooree" rel="nofollow">Twitter @lilchimchooree</a>.
         </div>
 
         <div class="textbox credits">
-            <h1>Credits</h1>
+            <h2>Credits</h2>
             <ul>
-            <li>Code: chimchooree</li>
+            <li>Code, Art, Design: chimchooree</li>
-            <li>Art: chimchooree</li>
-            <li>Design: chimchooree</li>
             <li>Engine: Godot Engine</li>
             <li><a href="/credits" rel="nofollow">Full Credits</a></li>
             </ul><br>
         </div>
 
         <div class="textbox permissions">
-            <h1>Permission</h1>
+            <h2>Permission</h2>
             <br>
             Freely use all of the content on this page, even for commercial use, at your own risk. <br>
         </div>

src/views/projects.tpl

@@ -17,22 +17,37 @@
         <center>
         <div class="more">
             <div class="more-box">
-                <img src="/static/img/ent/CatStore_small.png" alt="(image: CatStore screenshot)"> <br>
+                <a href="https://gitlab.com/chimchooree/cat-store">
+                    <img src="/static/img/ent/CatStore_small.png" alt="(image: CatStore screenshot)"> 
+                </a><br>
                 <div class="more-desc"><a href="https://gitlab.com/chimchooree/cat-store"><b>Cat Store</b> - text-based cat show + breeding sim in Java (IntelliJ)</a> <br></div>
                 <br>
             </div>
             <div class="more-box">
-                <img src="/static/img/ent/SmallThingThatMakesThings_small.png" alt="(image: Small Thing That Makes Things keyart)"> <br>
+                <a href="diary/entries/200903">
+                    <img src="/static/img/ent/SmallThingThatMakesThings_small.png" alt="(image: Small Thing That Makes Things keyart)"> 
+                </a><br>
                 <div class="more-desc"><a href="diary/entries/200903"><b>Small Thing That Makes Things</b> - game jam game in Godot Engine</a> <br></div>
                 <br>
             </div>
             <div class="more-box">
-                <img src="/static/img/ent/pretendOS_small.png" alt="(image: pretendOS screenshot)"> <br>
+                <a href="diary/entries/201126">
+                    <img src="/static/img/ent/pretendOS_small.png" alt="(image: pretendOS screenshot)"> 
+                </a><br>
                 <div class="more-desc"><a href="diary/entries/201126"><b>pretendOS</b> - pretend desktop in Godot Engine</a> <br></div>
                 <br>
             </div>
             <div class="more-box">
-                <img src="/static/img/ent/gitlab_publicprojects.png" alt="(image: GitLab page screenshot)"> <br>
+                <a href="diary/entries/201015">
+                    <img src="/static/img/ent/screenshot_website_201129.png" alt="(image: blessfrey.me screenshot)"> 
+                </a><br>
+                <div class="more-desc"><a href="diary/entries/201015"><b>blessfrey.me</b> - blog website in Bottle, HTML, CSS</a> <br></div>
+                <br>
+            </div>
+            <div class="more-box">
+                <a href="https://gitlab.com/users/chimchooree/projects">
+                    <img src="/static/img/ent/gitlab_publicprojects.png" alt="(image: GitLab page screenshot)"> 
+                </a><br>
                 <div class="more-desc"><a href="https://gitlab.com/users/chimchooree/projects"><b>public GitLab repo</b></a> <br></div>
                 <br>
             </div>