Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rita's review of chapter 8 #192

Merged
merged 4 commits into from
Oct 30, 2023
Merged

Rita's review of chapter 8 #192

Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f44555f
Rita's review of chapter 8
ritaf-ORM Oct 6, 2023
79a3400
Update chapter_08_prettification.asciidoc
hjwp Oct 30, 2023
86fef51
Update chapter_08_prettification.asciidoc
hjwp Oct 30, 2023
a864b35
Update chapter_08_prettification.asciidoc
hjwp Oct 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 23 additions & 14 deletions chapter_08_prettification.asciidoc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -18,7 +20,7 @@ and what we need to do about testing them.
Our site is undeniably a bit unattractive at the moment
(<<homepage-looking-ugly>>).


//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".
Expand All @@ -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
Expand All @@ -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...
Expand All @@ -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.
Expand Down Expand Up @@ -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`
Expand All @@ -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:
Expand Down Expand Up @@ -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...
Expand Down Expand Up @@ -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`),
Expand Down Expand Up @@ -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,
Expand All @@ -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.
hjwp marked this conversation as resolved.
Show resolved Hide resolved
//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
hjwp marked this conversation as resolved.
Show resolved Hide resolved
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!
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why this change?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Edit was to clarify what "it" referred to.

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

aha makes sense. thanks!


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

[[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,
Expand Down Expand Up @@ -911,7 +919,7 @@ STATIC_ROOT = BASE_DIR / "static"
Take a look at the top of the settings file,
and you'll see how that `BASE_DIR` variable is helpfully defined for us,
using `pathlib.Path` and `__file__`
(both really nice Python builtins)footnote:[
(both really nice Python built-ins)footnote:[
hjwp marked this conversation as resolved.
Show resolved Hide resolved
Notice in the `Pathlib` wrangling of `__file__`
that the `.resolve()` happens before anything else.
Always follow this pattern when working with `__file__`,
Expand Down Expand Up @@ -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,
Expand Down