Write Good Tests

Ken doesn't bond with write-good

Me and write-good, using the VS Code Write Good Linter... We're not getting along. I'm probably not going to use it but I'll annotate this with text blocks for testing purposes!

Here's some example text hoping to get some suggestions from the write-good extension. Nothing? Okay, let's try something else. How about something wimpy? Really? Try not to use the word "really" as it is a wimpy word.

Wimpy Word Test level 1

Well, it doesn't like the word spelled R-E-A-L-L-Y as a whole sentence or a word{' '} apparently. I tried to use it as an example, in quotation marks, but it still flagged it. I like some of my weasel words I don't want to give them up! Link color testing with a link to Google.

It doesn't catch crazy grammar errors. Spelling errors? How am I supposed to write good if this doesn't help me?

It took the ability to flag incorrect writing for me in certain situations. However...

MD Test level 2

Yes
I want
Markdown here

Link Checking level 3

Checking for lexical illusions is is fun insofar as it works. Link color testing with a link to Google.

There is something to be said for this. There are things to consider here. It must be a weasel word.

Text formatting level 3

Text formatting works 🎉 inside these TextBlock components, but only using HTML elements. 😢 Oh wait, it works for heading as long as you put a bunch of blank lines after the start of the text block! Inline formatting too! Prettier will mess it up too if it is not at the left margin. If it is indented into the component like I would think it would be, it won't be interpreted as markdown. Link color testing with a link to Google.

Extra stuff

Just checking on spacing around multiple headers in a text block. And aha!

I suppose I could configure it to stop warning me about weasel words and just let me know when I'm talking in passive too much. But isn't there a time for that even? Grammar Police? A little help here?

Danger level 4

I can't spell! Need a spell checker like Code Spell Checker . It's really no fun to write HTML in your markdown-esque file but at least it just uses my link formatting without me doing anything special. Ewww, it's going to look bad if the color doesn't match well. A link on the Warning text block would look terrible in dark mode! Well, it's not that terrible.

Need a spell checker for markdown.

Oh, I have one... Code Spell Checker. I hadn't turned it on. Such embarrassment!

Ah, and write-good does look at mdx files now that I've configured it.

Go Sharks! level 5

2020-2021 season not going so well. 3 wins, 5 losses so far. Link color testing with a link to San Jose Sharks.

This is an info test for a text block with some markdown formatting but no header required.

An informative item with markdown formatting (minor such that it is) to see what it looks like without a header. So, if I want any markdown formatting, I'd better have a header. I'm sure there is a CSS trick to make the margin-top go away for a paragraph but only when it is the first item in this container! Sounds an awful lot like :first-child but I couldn't get it to work. I'll keep trying.

Just checking.

Three paragraphs.

Okay, nth-child(2)? Really? 😅 So, if the second child is a paragraph (it is 1-based), that means there is no header and I should scrap the margin-top on this paragraph.

Oh goodness, I get it actually! Oh it hurts! 🙂 Here's a peek at the code! I wish the CSS code looked better like in my editor.

src/components/TextBlock.js

1/// an excerpt, the StyledTextBlock component
2const StyledTextBlock = styled.div`
3  position: relative;
4  border-left-width: 3px;
5  border-left-style: solid;
6  margin: 2rem 1rem;
7  border-radius: 5px;
8  padding: ${({ padding }) => padding};
9
10  /* These are defaults, used for primary */
11  border-color: var(--opposite);
12  background: var(--branded-surface);
13
14  /* These override the defaults based on the blockType */
15  border-color: ${(props) => color[props.blockType]};
16  background: ${(props) => (props.theme === 'light' ? bgColorLight[props.blockType] : bgColorDark[props.blockType])};
17
18  & h1,
19  h2,
20  h3,
21  h4,
22  h5 {
23    margin-top: 0;
24  }
25  & p:nth-child(2) {
26    margin-top: 0;
27  }
28`

I added the highlighted region. I don't want/need a margin-top for any of the headers that are inside a TextBlock. I also don't want a margin-top for a paragraph that begins a TextBlock. It's really great rambling on like this. I noticed a bug in this design. I really don't want any nth-child(2) to have a margin-top! So is it this instead?

src/components/TextBlock.js

1/// excerpt again
2const StyledTextBlock = styled.div`
3  position: relative;
4  border-left-width: 3px;
5  border-left-style: solid;
6  margin: 2rem 1rem;
7  border-radius: 5px;
8  padding: ${({ padding }) => padding};
9
10  /* These are defaults, used for primary */
11  border-color: var(--opposite);
12  background: var(--branded-surface);
13
14  /* These override the defaults based on the blockType */
15  border-color: ${(props) => color[props.blockType]};
16  background: ${(props) => (props.theme === 'light' ? bgColorLight[props.blockType] : bgColorDark[props.blockType])};
17
18  & h1:nth-child(2),
19  h2:nth-child(2),
20  h3:nth-child(2),
21  h4:nth-child(2),
22  h5:nth-child(2),
23  p:nth-child(2) {
24    margin-top: 0;
25  }
26`

Why can't I just say nth-child(2) in some generic way so whatever the second element is, it has no margin. Narrator: "You can Ken!"

1> :nth-child(2) {
2  margin-top: 0;
3}

Just did this in an Info TextBlock to see how code looks inside them! This style is applied on the container so now I can say the second child in the container should not have a margin-top!

With a header, it looks much better. Even with a level 5 header!

This time with header level 5

An informative item with markdown formatting (minor such that it is) to reiterate that it looks good with a header.

Last one, I promise. This time, it is just straight-up text without markdown. Looks lovely, just like I want it to look!

Attributions

Photo by Tolga Ahmetler (@t_ahmetler) on Unsplash

Code Tests Hello World!