diff --git a/src/diary/entries/200820 b/src/diary/entries/200820 index 6fe6ead..4ad4f7f 100644 --- a/src/diary/entries/200820 +++ b/src/diary/entries/200820 @@ -3,7 +3,7 @@ august 20, 2020
#assets

-pixel joy is a small, round sans-serif pixel font, made using fontstruct's FontStructor for an old version of blessfrey. Freely use and edit for your personal and commercial projects. No credit needed.
+pixel joy is a small, round sans-serif pixel font, made using FontStruct's FontStructor for an old version of blessfrey. Freely use and edit for your personal and commercial projects. No credit needed.

Download it from FontStruct.

diff --git a/src/diary/entries/200831 b/src/diary/entries/200901 similarity index 62% rename from src/diary/entries/200831 rename to src/diary/entries/200901 index 8442d47..22d9a05 100644 --- a/src/diary/entries/200831 +++ b/src/diary/entries/200901 @@ -3,84 +3,84 @@ august 31, 2020
#apache #css #html #nginx #php #server #website

-

tuesday, august 4

+

tuesday, august 4


-

wednesday, august 5

+

wednesday, august 5


-

thursday, august 6

+

thursday, august 6


-

friday, august 7

+

friday, august 7


-

saturday, august 8

+

saturday, august 8


-

sunday, august 9

+

sunday, august 9


-

monday, august 10

+

monday, august 10


-

saturday, august 15

+

saturday, august 15


-

monday, august 17

+

monday, august 17


-

august 18 - august 21

+

august 18 - august 21


-

saturday, august 22

+

saturday, august 22


-

sunday, august 23

+

sunday, august 23


-

monday, august 24

+

monday, august 24


-

tuesday, august 25

+

tuesday, august 25


-

wednesday, august 26

+

wednesday, august 26

diff --git a/src/diary/entries/200903 b/src/diary/entries/200903 index ad5f219..4539c38 100644 --- a/src/diary/entries/200903 +++ b/src/diary/entries/200903 @@ -3,7 +3,7 @@ september 3, 2020
#gamejam

-WeeklyGameJam 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.
+WeeklyGameJam 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 premade/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.

(image: Key art of Elwell and Small Thing, buried in dogs)


@@ -67,7 +67,7 @@ If you're looking for a jam to jump into, WeeklyGameJam is a cute one to try. Yo
  • coding + art by chimchooree
  • Open Pixel Project (OPP) (animations & tiles, edited to fit my characters & palette) @ http://www.openpixelproject.com/
  • Music track "forest" by syncopika under CC-BY 3.0 @ https://opengameart.org/content/forest & https://greenbearmusic.bandcamp.com/album/bgm-fun-vol-5
    • -
  • Bad ending image from Wikimedia, credit to Jon Sullivan @ https://tinyurl.com/y6oswx8v (url contains spoilers)
    • +
  • Bad ending image from Wikimedia, credit to Jon Sullivan @ https://tinyurl.com/y6oswx8v (URL contains spoilers)
  • SimpleJPC-16 Palette by Adigun Polack @ https://lospec.com/palette-list/simplejpc-16
  • pixel joy font by chimchooree @ https://fontstruct.com/fontstructions/show/1596262/pixel-joy
  • Tools: Godot Engine 3.0.6, GraphicsGale
    • diff --git a/src/diary/entries/200917 b/src/diary/entries/200917 index d0b984a..314a064 100644 --- a/src/diary/entries/200917 +++ b/src/diary/entries/200917 @@ -14,7 +14,7 @@ Coroutines allow for scripted game scenarios that respond dynamically to the pla
    As a basic example of coroutines in Godot Engine, I made a stoplight. Follow along with my code on GitLab.

    -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.
    +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 demonstrates methods that can wait, resume, and be affected through player action.

    diff --git a/src/diary/entries/200930 b/src/diary/entries/200930 deleted file mode 100644 index a955ccc..0000000 --- a/src/diary/entries/200930 +++ /dev/null @@ -1,37 +0,0 @@ - -

    september 2020: bye php, hello bottle

    -september 30, 2020
    -#bottle #css #git #html #regex #regularexpressions #website
    -
    -

    wednesday, september 2

    - -
    -

    friday, september 18

    - -
    -

    friday, september 25

    - -
    -

    saturday, september 26

    - -
    -

    wednesday, september 30

    -     -
    diff --git a/src/diary/entries/201001 b/src/diary/entries/201001 index a231949..112084a 100644 --- a/src/diary/entries/201001 +++ b/src/diary/entries/201001 @@ -1,40 +1,37 @@ - -

    inventory as a system diagram

    -october 1, 2020
    -#systemdiagram #gamemechanics
    -
    -System diagrams 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.
    -
    -
    -

    stop + plan before coding


    -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.
    -
    -
    -

    list out your nouns


    -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.
    -
    -
    (image: system diagram for inventory)

    -
    -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.
    -
    -(blessfrey has three different kinds of items.
    -

    -Floor + Inventory Items hold a base item inside them that gets popped out and traded around as the item gets expressed in different forms.)
    -
    -

    connect your nouns with verbs


    -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.
    -
    -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.
    -
    -
    -

    write the code


    -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).
    -
    -
    -

    conclusion


    -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.
    + +

    september 2020: bye php, hello bottle

    +september 30, 2020
    +#bottle #css #git #html #regex #regularexpressions #website
    +
    +

    wednesday, september 2

    + +
    +

    friday, september 18

    + +
    +

    friday, september 25

    + +
    +

    saturday, september 26

    + +
    +

    wednesday, september 30

    +
    diff --git a/src/diary/entries/201015 b/src/diary/entries/201015 index 622ad94..1e95006 100644 --- a/src/diary/entries/201015 +++ b/src/diary/entries/201015 @@ -6,7 +6,7 @@ october 15, 2020
    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 Bottle, a Python web framework.


    -

    why not use a pre-made blogging platform like WordPress?


    +

    why not use a premade blogging platform like WordPress?


    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.

    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.
    @@ -42,7 +42,7 @@ The Bottle script sends the max number of snippets per page (the limit

    Bottle


    -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.
    +Bottle takes URLs and generates the corresponding web page 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.

    (image: Bottle script excerpt for diary routes.)
    @@ -53,16 +53,16 @@ This is what the methods for specific routes look like. So every time you go to

    CSS


    -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.
    +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.

    -(image: css grid traced over screenshot of projects page.)
    +(image: CSS Grid traced over screenshot of projects page.)

    -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.
    +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 projects, and other projects. The other projects use a 2-column grid in blue to evenly space out all the little thumbnails.

    The CSS code for project's general grid + the nested unfeatured grid are shown below.

    (image: projects css code.)
    -(The code can be found on Pastebin, but you can always see a webpage's CSS by right-clicking and viewing the source.)
    +(The code can be found on Pastebin, but you can always see a web page's CSS by right-clicking and viewing the source.)

    diff --git a/src/diary/entries/201031 b/src/diary/entries/201101 similarity index 96% rename from src/diary/entries/201031 rename to src/diary/entries/201101 index 7efae42..223431c 100644 --- a/src/diary/entries/201031 +++ b/src/diary/entries/201101 @@ -4,12 +4,12 @@ october 31, 2020
    #css #html #python #webdev #website

    week 1


    -#bottle #python #regularexpressions #website
    +#bottle #python #regularexpression #website

    thursday, october 1


    @@ -22,7 +22,7 @@ october 31, 2020

    saturday, october 3



    diff --git a/src/diary/entries/201126 b/src/diary/entries/201126 index 60a5646..53738ee 100644 --- a/src/diary/entries/201126 +++ b/src/diary/entries/201126 @@ -13,7 +13,7 @@ Unlike blessfrey, where coding takes up 90% of the effort, pretendOS is mostly g

    Windows XP

    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.

    -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.
    +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.

    (image: Wikipedia excerpt: Critics who did not like the theme characterized it as a 'Fisher-Price interface'.)
    (screenshot from Wikipedia - referencing articles from PCWorld and Ars Technica)
    diff --git a/src/diary/entries/201130 b/src/diary/entries/201201 similarity index 85% rename from src/diary/entries/201130 rename to src/diary/entries/201201 index e116ac9..7a177ea 100644 --- a/src/diary/entries/201130 +++ b/src/diary/entries/201201 @@ -12,18 +12,20 @@ I spend a lot of time on how to make skills because this is a core mechanic of m
    On November 24, 2020, I finally added a diary navigation bar under 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.

    -On November 25, 2020, 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.
    +On November 25, 2020, 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 embedded images in articles.

    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.

    November 26, 2020 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.

    -November 27, 2020 is Black Friday. I ordered navy eyeshadow and fancy sunscreen.<3 Added an article for skill phases + super methods and slimeAI's state transition diagram.
    +November 27, 2020 is Black Friday. I ordered navy eye shadow and fancy sunscreen.<3 Added an article for skill phases + super methods and slimeAI's state transition diagram.

    November 28, 2020 is my birthday. <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.

    November 29, 2020, 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.

    +November 30, 2020, I reordered the diary entries again. The daily diaries really should be released after the month is over instead of on the last day of the month. Duh. Also, the 3-week-nonstop-earworm of Seungri's "Let's Talk About Love" finally went away. It was becoming pathological.
    +

    off-topic


    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;;

    diff --git a/src/diary/entries/201224 b/src/diary/entries/201224 index cc1d5e7..321224f 100644 --- a/src/diary/entries/201224 +++ b/src/diary/entries/201224 @@ -14,7 +14,7 @@ August 15, 2018 - Early experimenting with Godot Engine. Collision was just adde (image: Angel in a periwinkle room full of Bad Cats)
    -January 13, 2019 - Videogame perspective is so different from perspective in illustration. Scale of characters vs environment is another quirk of games I had 0 experience with. I was vaguely going for an old Western RPG style with tall, somewhat realistic sprites with nondistinct faces. Something like Divine Divinity.
    +January 13, 2019 - Videogame perspective is so different from perspective in illustration. Scale of characters vs environment is another quirk of games I had 0 experience with. I was vaguely going for an old Western RPG style with tall, somewhat realistic sprites with non-distinct faces. Something like Divine Divinity.


    (image: Angel blasting a neighborhood coyote with fire) diff --git a/src/diary/entries/210107 b/src/diary/entries/210107 index 8cbfb1c..d744e21 100644 --- a/src/diary/entries/210107 +++ b/src/diary/entries/210107 @@ -1,13 +1,40 @@ - -

    web development resources

    -october 15, 2020
    -#accessibility #color #css #html #webdesign
    -
    -I'll collect frequently used resources for web design here.
    -
    -     + +

    inventory as a system diagram

    +october 1, 2020
    +#design #systemdiagram #gamemechanics
    +
    +System diagrams 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.
    +
    +
    +

    stop + plan before coding


    +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.
    +
    +
    +

    list out your nouns


    +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.
    +
    +
    (image: system diagram for inventory)

    +
    +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.
    +
    +(blessfrey has three different kinds of items.
    +

    +Floor + Inventory Items hold a base item inside them that gets popped out and traded around as the item gets expressed in different forms.)
    +
    +

    connect your nouns with verbs


    +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.
    +
    +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.
    +
    +
    +

    write the code


    +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).
    +
    +
    +

    conclusion


    +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.
    +
    diff --git a/src/diary/entries/210204 b/src/diary/entries/210204 new file mode 100644 index 0000000..de9ad3b --- /dev/null +++ b/src/diary/entries/210204 @@ -0,0 +1,13 @@ + +

    web development resources

    +october 15, 2020
    +#accessibility #color #css #html #webdesign
    +
    +I'll collect frequently used resources for web design here.
    +
    + diff --git a/src/diary/entries/210114 b/src/diary/entries/210218 similarity index 100% rename from src/diary/entries/210114 rename to src/diary/entries/210218 diff --git a/src/diary/entries/extra/entry-template b/src/diary/entries/extra/entry-template new file mode 100644 index 0000000..e4fd1bd --- /dev/null +++ b/src/diary/entries/extra/entry-template @@ -0,0 +1,66 @@ + +

    title

    +date in lowercase
    +#accessibility #ai #apache #blogging #bottle #color #css #design #gamedesign #gamemechanics #git #html #internationalization #json #localization #marketing #mockup #nginx #php #programming #python #regex #regularexpression #server #simpletemplate #skills #systemdiagram #webdev #webdesign #website
    +
    +term is etc.
    +
    +Capitalize some words.
    +
    + +
    +Lower-case some words.
    +
    + +
    +
    +How to spell words...
    +
    + +
    +

    subtitle


    +spacing like this
    +
    +
    + + (image: Lots of Angels and other characters at a shopping center) +

    +

    subsubtitle with BrandName or CSS or chloe

    +

    +     + (image: Lots of Angels and other characters at a shopping center) +
    +
    +
    diff --git a/src/views/box.tpl b/src/views/box.tpl index f2c8aff..334762f 100644 --- a/src/views/box.tpl +++ b/src/views/box.tpl @@ -13,9 +13,7 @@
  • Proofread
  • Make sure their formatting is consistent
  • ALSO
    • -
  • turn game tab into a project tab to showcase completed code, etc
  • make presskit page decent
    • -
  • include downloadable presskit PDF, etc, on presskit page
  • update art assets

    • @@ -24,25 +22,26 @@

    @@ -63,7 +62,6 @@
  • Graphics - Screenshots, GIFs
  • Graphics - Music
  • Graphics - Trailer
    • -
  • Presskit - Make a downloadable PDF version
  • Just...better art and writing for everything...