diff --git a/chapter_08_prettification.asciidoc b/chapter_08_prettification.asciidoc index 609657584..7ded094b5 100644 --- a/chapter_08_prettification.asciidoc +++ b/chapter_08_prettification.asciidoc @@ -1,6 +1,8 @@ [[chapter_08_prettification]] == Prettification: Layout and Styling, and What to Test About It +//RITA: You used the word "ugly" 3x on one page, which caught my attention and made me wonder if it sounds too judgy. Consider swapping "ugly" in the intro paragraph for "boring" or "plain." I'd go as far to suggest "meh" or "blah" to keep with your writing tone. + ((("layout", see="CSS; design and layout testing"))) ((("style", see="CSS; design and layout testing"))) We're starting to think about releasing the first version of our site, @@ -18,7 +20,7 @@ and what we need to do about testing them. Our site is undeniably a bit unattractive at the moment (<>). - +//RITA: I recommend not using the word "crazy" as it can sometimes be interpreted as abelist. Consider rewording the footnote so that it comments on the silliness of the suggestion rather than on a person. "What? Delete the database? That's absurd. The local dev..." NOTE: If you spin up your dev server with `manage.py runserver`, you may run into a database error "table lists_item has no column named list_id". @@ -38,7 +40,7 @@ NOTE: If you spin up your dev server with `manage.py runserver`, We can't be adding to Python's reputation for being http://grokcode.com/746/dear-python-why-are-you-so-ugly/[ugly], so let's do a tiny bit of polishing. -Here's a few things we might want: +Here are a few things we might want: * A nice large input field for adding new and existing lists * A large, attention-grabbing, centered box to put it in @@ -48,6 +50,7 @@ How do we apply TDD to these things? Most people will tell you you shouldn't test aesthetics, and they're right. It's a bit like testing a constant, in that tests usually wouldn't add any value. +//RITA: Again, I suggest swapping out the word "ugly" for an alternative like "boring" or "plain." [[homepage-looking-ugly]] .Our home page, looking a little ugly... @@ -57,7 +60,7 @@ image::images/ugly-homepage.png["Our home page, looking a little ugly."] ((("static files", "challenges of"))) ((("CSS (Cascading Style Sheets)", "challenges of static files"))) But we can test the essential _behaviour_ of our aesthetics, -ie, that we have any at all. +i.e., that we have any at all. All we want to do is reassure ourselves that things are working. For example, we're going to use Cascading Style Sheets (CSS) for our styling, and they are loaded as static files. @@ -228,6 +231,8 @@ There are lots of frameworks out there, but one of the earliest and most popular still, is Twitter's Bootstrap. Let's use that. +//RITA: Please anchor URLs to descriptive text whenever possible, rather than writing the URL in the body text. + You can find bootstrap at http://getbootstrap.com/. We'll download it and put it in a new folder called _static_ inside the `lists` @@ -253,9 +258,8 @@ Bootstrap is instantly recognisable, and a big signal to anyone in the know that you couldn't be bothered to style your site. Learn how to use Sass and change the font, if nothing else! -There is info in Bootstrap's docs, or there's an -https://www.freecodecamp.org/news/how-to-customize-bootstrap-with-sass/ -[introductory guide here]. +There is info in Bootstrap's docs, or read an +https://www.freecodecamp.org/news/how-to-customize-bootstrap-with-sass/[introductory guide]. Our 'lists' folder will end up looking like this: @@ -437,7 +441,7 @@ We do the same for 'list.html': That's a refactor of the way our templates work. -We rerun the FTs to make sure we haven't broken anything... +We rerun the FTs to make sure we haven't broken anything: ---- AssertionError: 103.333... != 512 within 10 delta (408.666... @@ -584,7 +588,7 @@ STATIC_URL = "static/" ((("static files", "finding"))) The rest of the settings we will add to this section -are all to do with item 2: +all have to do with item 2: finding the actual static files on disk. While we're using the Django development server (`manage.py runserver`), @@ -781,7 +785,7 @@ Adding the Bootstrap `table` class improves things, over in _list.html_: ---- ==== - +//RITA: For the sake of searchability, I suggest changing this heading to simply "Dark Mode." ==== Dark Modeeeeeee In contrast to my greybeard nostalgia for the Jumbotron, @@ -804,19 +808,23 @@ I think that looks great! .The lists page goes dark image::images/prettified-dark.png["Screenshot of lists page in dark mode. Cool."] +//RITA: Whew. I was more concerned about the legibility of dark mode figures when printed, but thanks all the same. +//RITA: On second thought, would you consider changing this to "my editor will be mad at me" or even some other silly description (freak out, self-combust, explode, etc)? I'd rather not imply that we'll cause you harm. + But it's very much a matter of personal preference, and my editor will kill me if I make all the rest of my screenshots use so much ink, so I'm going to revert it for now. -You feel free to keep it if you like! +You're free to keep dark mode on if you like! ==== A semi-decent page +//RITA: Please revise the first sentence to be more clear. For example: "It took a bit of time to add some stylish features to my page, but I'm reasonably happy with it now." All that took me a few goes, but I'm reasonably happy with it now (<>). [[homepage-looking-better]] -.The lists page, looking good enough for now... +.The lists page, looking good enough for now. image::images/prettified-final.png["Screenshot of lists page in light mode with decent styling."] If you want to go further with customising Bootstrap, @@ -1020,14 +1028,15 @@ Here are a few candidates for further study: * The `{% static %}` template tag, for more DRY and fewer hardcoded URLs * Client-side packaging tools, like `npm` and `bower` -* And again, customising bootstrap with SASS - +* Customising bootstrap with SASS +//RITA: Would you want to point readers to any resources, such as a website or another book for example? You don't have to. [role="pagebreak-before less_space"] .Recap: On Testing Design and Layout ******************************************************************************* +//RITA: The short answer to what? Please clarify. ((("design and layout testing", "best practices for"))) The short answer is: you shouldn't write tests for design and layout _per se_. It's too much like testing a constant,