reordered entries; proofread with a spellchecker
chimchooree
4 years ago
parent
3277413f5b
commit
4aa64b14cc
@ -1,37 +0,0 @@
|
|||||||
<!--200831,201031-->
|
|
||||||
<h1>september 2020: bye php, hello bottle</h1>
|
|
||||||
september 30, 2020<br>
|
|
||||||
#bottle #css #git #html #regex #regularexpressions #website<br>
|
|
||||||
<br>
|
|
||||||
<h2>wednesday, september 2 </h2>
|
|
||||||
<ul>
|
|
||||||
<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>friday, september 18 </h2>
|
|
||||||
<ul>
|
|
||||||
<li>decided to switch 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>
|
|
||||||
<ul>
|
|
||||||
<li>Diary snippets are formatted from data taken from their articles. The article preview is cut to the character limit.</li>
|
|
||||||
</ul>
|
|
||||||
<br>
|
|
||||||
<h2>saturday, september 26</h2>
|
|
||||||
<ul>
|
|
||||||
<li>Updated the blessfrey.me script to serve static content like CSS stylesheets + images. Now the pages are actually styled.</li>
|
|
||||||
</ul>
|
|
||||||
<br>
|
|
||||||
<h2>wednesday, september 30</h2>
|
|
||||||
<ul>
|
|
||||||
<li>fix bugs for blessfrey.me's static pages - no footer in the middle of the body, no unclosed <ul> tags from diary entry snippets 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>
|
|
||||||
</ul>
|
|
||||||
<br>
|
|
||||||
@ -1,40 +1,37 @@
|
|||||||
<!--200917,201112-->
|
<!--200831,201031-->
|
||||||
<h1>inventory as a system diagram </h1>
|
<h1>september 2020: bye php, hello bottle</h1>
|
||||||
october 1, 2020<br>
|
september 30, 2020<br>
|
||||||
#systemdiagram #gamemechanics<br>
|
#bottle #css #git #html #regex #regularexpressions #website<br>
|
||||||
<br>
|
<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>
|
<h2>wednesday, september 2 </h2>
|
||||||
<br>
|
<ul>
|
||||||
<br>
|
<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>
|
||||||
<h2>stop + plan before coding </h2><br>
|
<li>Determine essential features for my blog </li>
|
||||||
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>
|
<li>Plan design of blog </li>
|
||||||
<br>
|
</ul>
|
||||||
<br>
|
<br>
|
||||||
<h2>list out your nouns </h2><br>
|
<h2>friday, september 18 </h2>
|
||||||
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>
|
<ul>
|
||||||
<br>
|
<li>decided to switch from PHP to Bottle </li>
|
||||||
<center><img src="/static/img/ent/systemdiagram_inventory.jpeg" alt="(image: system diagram for inventory)" width="500" height="250"></center> <br>
|
<li>Hello World in Bottle </li>
|
||||||
<br>
|
<li>created templates for main pages </li>
|
||||||
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>
|
<li>Used Bottle to fill values in a template using variables </li>
|
||||||
<br>
|
<li>Used Bottle to avoid repeating HTML code in navigation pane, header, and footer </li>
|
||||||
(blessfrey has three different kinds of items. <br>
|
</ul>
|
||||||
<br><ul>
|
<br>
|
||||||
<li><b>Base Item</b>: holds all the data regardless of how the item is currently expressed </li>
|
<h2>friday, september 25</h2>
|
||||||
<li><b>Floor Item</b>: sits on the ground and gets picked up by characters. </li>
|
<ul>
|
||||||
<li><b>Inventory Item</b>: displayed in inventories, store windows, containers, etc </li>
|
<li>Diary snippets are formatted from data taken from their articles. The article preview is cut to the character limit.</li>
|
||||||
</ul><br>
|
</ul>
|
||||||
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>
|
||||||
<br>
|
<h2>saturday, september 26</h2>
|
||||||
<h2>connect your nouns with verbs </h2><br>
|
<ul>
|
||||||
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>
|
<li>Updated the blessfrey.me script to serve static content like CSS stylesheets + images. Now the pages are actually styled.</li>
|
||||||
<br>
|
</ul>
|
||||||
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>wednesday, september 30</h2>
|
||||||
<br>
|
<ul>
|
||||||
<h2>write the code </h2><br>
|
<li>fix bugs for blessfrey.me's static pages - no footer in the middle of the body, no unclosed <ul> tags from diary entry snippets breaking the CSS.</li>
|
||||||
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>
|
<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>
|
||||||
<br>
|
</ul>
|
||||||
<br>
|
|
||||||
<h2>conclusion </h2><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>
|
<br>
|
||||||
|
|||||||
@ -1,13 +1,40 @@
|
|||||||
<!--201224,200806-->
|
<!--200917,201112-->
|
||||||
<h1>web development resources</h1>
|
<h1>inventory as a system diagram </h1>
|
||||||
october 15, 2020<br>
|
october 1, 2020<br>
|
||||||
#accessibility #color #css #html #webdesign<br>
|
#design #systemdiagram #gamemechanics<br>
|
||||||
<br>
|
<br>
|
||||||
I'll collect frequently used resources for web design here. <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>
|
<br>
|
||||||
<ul>
|
<br>
|
||||||
<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>
|
<h2>stop + plan before coding </h2><br>
|
||||||
<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>
|
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>
|
||||||
<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>
|
<br>
|
||||||
<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>
|
<br>
|
||||||
</ul>
|
<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>
|
||||||
|
<center><img src="/static/img/ent/systemdiagram_inventory.jpeg" alt="(image: system diagram for inventory)" width="500" height="250"></center> <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. <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><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 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><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><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>
|
||||||
|
|||||||
@ -0,0 +1,13 @@
|
|||||||
|
<!--201224,200806-->
|
||||||
|
<h1>web development resources</h1>
|
||||||
|
october 15, 2020<br>
|
||||||
|
#accessibility #color #css #html #webdesign<br>
|
||||||
|
<br>
|
||||||
|
I'll collect frequently used resources for web design here. <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>
|
||||||
@ -0,0 +1,66 @@
|
|||||||
|
<!--article,article-->
|
||||||
|
<h1>title </h1>
|
||||||
|
date in lowercase<br>
|
||||||
|
#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<br>
|
||||||
|
<br>
|
||||||
|
<b>term</b> is etc. <br>
|
||||||
|
<br>
|
||||||
|
Capitalize some words. <br>
|
||||||
|
<br>
|
||||||
|
<ul>
|
||||||
|
<li>CSS, HTML, JSON, PHP </li>
|
||||||
|
<li>CSS Grid, Flexbox </li>
|
||||||
|
<li>MMO, RPG </li>
|
||||||
|
<li>NPC, WASD, XP </li>
|
||||||
|
<li>.CSV </li>
|
||||||
|
<li>IM, PC, UI, URL, VPS </li>
|
||||||
|
<li>GDC, YouTube</li>
|
||||||
|
<li>2D, 3D </li>
|
||||||
|
</ul>
|
||||||
|
<br>
|
||||||
|
Lower-case some words. <br>
|
||||||
|
<br>
|
||||||
|
<ul>
|
||||||
|
<li>blessfrey </li>
|
||||||
|
<li>chimchooree </li>
|
||||||
|
<li>gamedev, webdev </li>
|
||||||
|
<li>coroutine </li>
|
||||||
|
<li>lol </li>
|
||||||
|
</ul>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
How to spell words... <br>
|
||||||
|
<br>
|
||||||
|
<ul>
|
||||||
|
<li>Chatroom </li>
|
||||||
|
<li>Cooldown </li>
|
||||||
|
<li>Eye Shadow </li>
|
||||||
|
<li>Freeform </li>
|
||||||
|
<li>Gameplay </li>
|
||||||
|
<li>Hello World</li>
|
||||||
|
<li>Multiclassing </li>
|
||||||
|
<li>Mockup </li>
|
||||||
|
<li>Petsite </li>
|
||||||
|
<li>Playstyle </li>
|
||||||
|
<li>Plugin </li>
|
||||||
|
<li>Premade </li>
|
||||||
|
<li>Skillbar </li>
|
||||||
|
<li>Subfunction </li>
|
||||||
|
<li>Videogame </li>
|
||||||
|
<li>Web Page </li>
|
||||||
|
</ul>
|
||||||
|
<br>
|
||||||
|
<h2>subtitle </h2><br>
|
||||||
|
spacing like this <br>
|
||||||
|
<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">
|
||||||
|
<br><br>
|
||||||
|
<h3>subsubtitle with BrandName or CSS or chloe </h3>
|
||||||
|
<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>
|
||||||
|
</a><br>
|
||||||
|
<br>
|
||||||
Loading…
Reference in New Issue