phfrohring.com
I'm experimenting with an article format and would like to know what you think of it. This format draws inspiration from The Little Schemer, using a sequence of Q&A. This particular article covers the basics of p5.js.
Thank you for your constructive remarks.
PHF
Little Schemer was instantly appealing because it starts so simply:
1. Is it true this is an atom? : atom
2. Is it true this is an atom? : turkey
3. Is it true this is an atom? : 1942
6. Is it true this is a list? (atom)
7. Is it true this is a list? (atom turkey or)
Consider starting with a few simpler questions and answers like this, which also helps just teach the format and interface, before asking the reader to work their brain much harder.
2. The concepts to be illustrated are now mentioned in the "Discussion" section.
It is still not as detailed as The Little Schemer, but is it any good anyway?
Things I like:
1. It's obvious where sections begin and end.
2. PLENTY or margin and padding. I know some people try to cram as much info on a single line as possible. My old eyes prefer spacing; it helps them track the text.
3. With one exception (mentioned below) the font sizes seem to "look good."
Things I might suggest are improvable:
1. It's not obvious what the show/hide button at the top of the page does at first glance. The button is at the top of the page and its effects are seen at the bottom of the page. Maybe put another copy of the button immediately above the answer section?
2. Continuing the show/hide theme, the per-answer-section show/hide button hides the content, but maintains the blank space in the document. That seems "wrong" to me since I have to scroll past complete blank areas when looking at it on my phone. And I think we could have no end of discussion whether those buttons should be at the top or bottom of the section that gets hidden. I'd just suggest trying putting them at the top and see if they look better to you.
3. The "Objective", "Question", "Result", "Answer" sub-section headers seem like they should be a little bigger.
I don't know if you tested some of these options, and completely defer to you if you tested them and they look even weirder. Just my $0.02. Mostly looks great.
2.1) There is no more blank space.
2.2) Buttons are at the top right of each QA.
3) Headers font size: 1.1rem -> 1.2rem
It looks better to me!
Showing/hiding larger content with good UX isn't easy. Sometimes it's better to just stick with normal browser navigation (such as linking to answers on a separate page), where the browser takes care of proper navigation state.
Otherwise, looks quite nice!
It should be fixed now.
It should be fixed.
:host(.hidden), :host(.hidden) * {
/*
* display: none; does not work because of a bug.
* bug: https://bugs.webkit.org/show_bug.cgi?id=188259
*/
visibility: hidden;
width: 0;
height: 0;
}