Category Archives: Retelling

Advanced blogging – The Usual Rushed Texts

The first time I noticed the speed of the screen reader of a blind person I was overwhelmed. I barely could catch each word. The speed was at least twice the speaking speed of a person.

Imagine a friend who excitedly talks about a great job offer.
It sounds like a rushed text.

“Are you a member of the Guild?”
“Last time I checked.”

Show me the code

The default editor in WordPress is the visual editor. For beginners this is a great way to begin. The text is shown in the same way the visitors will read it. There is a catch. Sometimes the editor will change the look and feel.

For me the visual editor in WordPress hided too much information, so I used the code editor. I was editing HTML files and checked the changes in the visual editor.

For fast writing, HTML provides a nice structure: headings. I just put some keywords or short sentences in the file. Jerry Weinberg called them fieldstones. I kept the rest of the words in my mind and added them later on.

Let me show and tell

I always thought that it was a good idea to show what I did. Pictures can clarify a lot. A lot of pictures can clarify a lot more.

in the visual editor the picture had a bad contrast. I thought that I shrunk the picture too much. The picture looked good in the preview mode.

No alternative text

If I did not use an alternative text, then the screen reader would read the following aloud:
“Just to be sure I turned off the highlighting.
https://mindfultester.com/wp-content/uploads/2021/01/mindful-tester-p3-1.20-no-highlightingboxes.jpg”

In this case NVDA, a screen reader, used the path and file name instead of the empty alternative text.

“This is not according to the code of the Guild.”

Non descriptive alternative text

If I did use a short alternative text, then the screen reader would read the following aloud:
“Just to be sure I turned off the highlighting.
Dialog without highlighting”

This sounds like a rushed text. In the picture there are more details worth mentioning.

“This is not part of the deal.”

A complete alternative text

In my blog post I used a descriptive alternative text, then the screen reader would read the following aloud:
“Just to be sure I turned off the highlighting.
In the left image or baseline “Cap” in the username is shown, in the right image or checkpoint the username is empty. In the right upper corner, there is a thumb down button.”

“This is the way.”

Summary

Let me break down the structure. First, I wrote a text with a short introduction to the picture. Then the alternative text was a detailed description of the picture. A screen reader user would hear a normal story. This way I told a story with normal texts and alternative texts in a natural flow.

For the third blog post about Visual TDD in Test Automation I had a separate file for alternative texts. This was handy for the consistency of the text. But I disliked the continuously switching of files: open WordPress, go to the location of the picture, open the editor with the alternative texts, copy the desired text, and paste the text at the right spot in WordPress.

So I put all my alternative texts into the HTML file. This saved me some application switching. It might have some impact on the consistency of the alternative texts.

Even worse, I needed to do some spell checking.

I have a spell on you

The problem with blogging is that the mind is faster than the hands. This often leads to spelling and punctuation errors.

For the creative mind, speed is essential. I could lose my train of thoughts. This is why I gladly accept any typos.
It sounds like a rushed text.

WordPress uses the browser spell check. This is focused on the right spelling of the words. The syntax of the sentences is ignored.

If I spell check my blog post, then I go to the visual editor. I copy the text into my favourite word processor and start the spell checking. Because I was worried about the layout, I change the text in both WordPress and the text editor.

Fine, but what about the alternative text?
A simple solution is:

  • go to the picture
  • copy the alternative text
  • paste in your favourite word pressor
  • do a spell check

There is one place where all the alternative texts are shown and that is the HTML file. The code editor shows all the lines including the alternative texts, which are not shown in the visual editor.

Simple solution

My advice would be: search for alt in the html file and copy the stuff.

Difficult solution

For the selection of my alternative texts, I chose a complicated solution.
This paragraph is meant for people with an IT background. You are free to skip this.

If you are using a screen reader, please set the interpunction level to all.

I opened baregrep, a shareware tool which can filter lines of codes with the text “alt”. This basically means: give me all the lines with alternative texts. I was lucky that I did not use words like alternative or salt.

Baregrep shows all the lines of the files with the file name ending with "v1t.txt" in the subdirectory D:\Users\Han Toan\Mijn documenten\Blog\2020 Blog containing the text alt!

I copied the output.

The Export Test Results Dialog has a To Clipboard button!

The next step is to use VIM, a free software program with a typical interface. I pasted the text in my word processor.

VIM shows the pasted lines of the test results!

The file contained one picture with an alternative text on a different line.

:%s/^.*alt="//
  • : means, that I wanted to execute an ed command. ed is an editor command.
  • % is for all lines in the file
  • s is short for substitute.
  • /^.*alt="/ is the pattern, which I looked for between / and /.
    • ^ is from the beginning of the line.
    • .* is zero or more arbitrary characters.
    • alt=" is the literal text “alt=””
  • // is the text between / and /, which must be used for the replacement. In this case this is an empty string.

The whole command removed all the text from the beginning of the line until and including “alt=”in every line.


:%s/".*//

  • : means, that I wanted to execute an ed command. ed is an editor command. What I basically write, is “ed, I am talking to you. The following command is for you.”
    It is like a home assistant: “VIP Home app, I am talking to you. The following command is for you.”
  • % is for all lines in the file
  • s is short for substitute.
  • /".*/ is the pattern, which I looked for between / and /.
    • " is the literal text “.
    • .* is zero or more arbitrary characters.
  • // is the text between / and /, which must be used for the replacement. In this case this is an empty string.

The whole command removed all the text from ” until the end of the line in every line.

The last step is to copy the lines into the word processor for the final spell checking.

For the people who like to quit VIM without saving:
:q!

  • : means, that I wanted to execute an ed command. ed is an editor command. What I basically write, is “ed, I am talking to you. The following command is for you.”
    It is like a home assistant: “VIP Home app, I am talking to you. The following command is for you.”
  • q is quit.
  • ! means without saving, because I am sure.

Back to Media for the change

Then I updated the alternative texts in Media, where all my pictures are stored.
If you are using a screen reader, you can set the interpunction level to your favourite setting.

Here is the change

A few days later I noticed that the wrong alternative texts were included in the blog post. I tried to figure out what happened.
Who was the usual suspect?

The moment I inserted a picture from the Media in my blog post, a copy of the HTML code was used. Any later changes in Media remained there. So I had to change the text again in the code editor.

One of my kids summarised my story as follows:
if you send your homework to school, then you send a copy of the file.

I could have chosen to replace the old pictures in the blog post with the latest pictures in Media. I was afraid to add the wrong picture. Then I should not forget the resizing.

So I edited the alternative texts in the visual editor.

Listen carefully. I only tell this once.

Pro tip: use the screenreader to read your text aloud. Some typos are difficult to see, but are easy to hear.
Just hover with your mouse over the text and hear it.

“I have spoken.”

Advanced blogging – Unfamiliar Quality Attributes

What would be a good opening for this blog post?

  1. Content is king!
    Narrator: “It is used so much, that it is boring.” [Sigh]
  2. Meta blogging is blogging about blogging.
    Narrator: “Now you lost me.”
  3. It took Thrisha Gee months to make a good video of 20 minutes. I had screenshots of 20 minutes of testing. Now I fully understood her.
    Narrator: “Tell me more.”

My favourite opening for this post is the last one.
But I am too late. I already started with a rethorical multiple choice question.

Some stats

In the past months I made 2 blog posts with lots of pictures, so I had some experiences how to deal with this case.
This time it was 3 days, 3 takes, and 26 pictures.

Performance

Let me do some calculations. 26 pictures of the screen with a size of 288 kb would make an 8 Mb post. This is not what my readers are waiting for. Downloading!

I was experiementing with the number of posts on my home page and following pages. This would reduce the number of pictures on 1 page significantly. In WordPress it looks like this:
After selecting Settings and Reading there is an option to set blog pages show at most to 3 posts!

The story is, that mobile friendly web sites had a major impact on SEO or Search Engine Optimalisation. If a user can view the website fast enough on his or her mobile, then the search engine will place it high in the list of search results.

Accessibility

For deaf people and people with bad hearing there were no obstacles on my blog. I did not use any movies. Let me describe a scene of a closeup of a face in 3 ways:

  1. No options used.
  2. Undertitles
    [Typing sounds]
    [“What are you typing?”]
    [“I saw something strange.”]
  3. Closed captions
    [Face of a programmer is shown.]
    [Tester is typing on the keyboard]
    [Programmer: What are you typing?”]
    [Tester: “I saw something strange.”]

If I will add a movie, then I really like to use the closed captions.

In the past I used cursive font, but this is bad for people who are visually impaired or have a bad view. So I stopped using it.

I even increased the contrast of my quotes.

This is a quote with a good contrast.

For programming dark mode is quite convenient for visually impaired people. White characters on a black background are more readable than black characters on a white background.

Blind and visually impaired peoplemight  have or might have problems with text in a picture. An image cannot be read aloud by a screen reader. I could add an alternative text to the image.
The visible part of the alternative text of a picture of 3 lines of codes with 2 comments is: "eyes.checkWindow("1");// eyes.check"!

The screen reader could read it aloud, but the whole structure of the code would be gone. Several lines of code are spoken as a single line of code. This is confusing.

eyes.checkWindow("1");// eyes.checkWindow("2");// eyes.checkWindow("3");

could be interpreted as:

eyes.checkWindow("1");
// 
eyes.checkWindow("2");
// 
eyes.checkWindow("3");

So I used the pre tag of HTML to display the code in a proper way using the code editor:

<pre>eyes.checkWindow("1");
// eyes.checkWindow("2");
// eyes.checkWindow("3");
</pre>

Now I had to find an efficient way to include 26 pictures  with alternative texts for a single blog post.

Enjoyability

My target audience was programmers who know the basics of Java and an IDE or Integrated Development Environment.
I also counted on the fact that they had the tools properly installed. This is described in other places.

For me a story is more enjoyable to review than a set of instructions. This spreadsheet blog post contains a set of boring instructions.

It was a challenge to stop myself to turn the new blog post into a set of pictures. Another way of boring.

Was there a way to add some humour to it?

Coming up

In the next blog post I will focus on reducing the size of the blog post.

We need to speak. Let’s talk.

Especially, if you want to speak at a conference in 2019.

My New Year’s resolution is to speak at one conference. But it takes a lot of actions from my side.

This year I tweeted about sketch notes for a workshop. This triggered me to write this post about using visual tools in 3 acts.

Ready? Set. Read.

Act 1

A conference does not need a complete presentation in advance. So this is a huge time saver. Call it a lifehack.
Serious. Hack.

I always look at the theme of the conference. Most of the times this leads to 2 proposals. A proposal is a summary of something.

Something is what I am mulling about in my brains. I only have to put it in a mindmap.

There are several structures. A favourite one is an experience report. STAR is rather useful:

  • Situation
  • Tasks
  • Actions
  • Result

Once I was a test coordinator and I was requested to execute a performance test. I hired a performance tester. The website could handle the load properly, but the web masters had to cope with long delays. So I opted for a hybrid approach: a computer for a load test on the website and human testers acting as webmasters.
The result were acceptable response times.

Another way is to address nagging questions. This could lead to a presentation about exploratory testing and regulations.

What about this pitch?
I used Exploratory Testing in the healthcare domain. My tests passed audits in 2 consecutive years.
Pretty cool.

A nice workshop is based on exercises. No sweat no gain.

Structure is something like 1 exercise per hour including setup, doing and reflection.

I always go to the submission form and find all questions in advance. While submitting I prefer copy and paste. I copy the text in the note of a branch in a mindmap and I paste the text in the answer in the submission form. I try to avoid situations like ‘That will take another hour to answer this question properly’.

Most proposals have the following elements:

  • Info about speaker including speaking experience
  • Description
  • Summary
  • Takeaways

Okay time for a visual tool. Enter the mindmap.

For more details just click on the pic(ture).

Mindmap with branches exercises, title, and English alternative
In case you noticed some Dutch words, it is my mother language. So I translated some words in English. For the record this proposal was accepted after more than 2 years.

At the office I worked with TDD. This lead to this mindmap.

Mindmap with branches timeline, setting, references,termen, summary, description, metadata, and Oud

The description. summary, and takeaways are shown in blue and bold. I wrote a lot of thoughts in the branches. This proposal was rejected several times, so I turned this in a blog post serie.

This year General Data Protection Regulation needed a bit of exposure.
A mindmap with the branches activity A, test ideeeen, Zelf, Reported website, mailings, purchase X, purchase Y. and Blad
This proposal was not accepted and also this one was transformed in a blog post serie.

This minimal mindmap was a remake of other mindmaps.
A mindmap with the branches Exercises, Proposal, and Writing
It took me several attempts to get my workshop for blogging accepted for a test conference.

Act 2

[Update author: my opinion is not the same as the author of the referred characters, but I believe in the goodness of the good characters.]

The last years I use a lined notebook to make sketchnotes. It is my way to be creative in a visual way. I feel like a Merry Potter.


“A lot of people think you can only use a laptop to write blog posts. Well, this picture shows my tools I use for blogging. And yes, marker and paper have impact on my writing. Sometimes I have to rewrite whole sections.”

Music notes followed by ‘Spotify iTunes”. “MUSIC” has an arrow with “?” pointing to “Blogs”.
“Would you please raise your hand, if you use Spotify or iTunes?
Thank you. As expected most people listen to these services.
Personally I think music is important.
I see people nodding.
Question: why do you not use music in your blog posts?”

"Getting in the flow " followed by a curly lined arrow. "movement" pointing to a typewriter with "Type" and a pen with "write".!
“One of the difficult things with blogging is paralysis. What is my first section, first sentence, or my first word? What I do, is start writing and get in a flow. Movement of the body also leads movement of my mind.”

"Finding" Picture of fish "Marlin"!
“When I blogged a post, I discovered the heuristic ‘Finding Marlin’ Marlin stands for ‘Make a real life impression now’”.

Readers recognise situations like conservations. I just describe what I see and hear.”

"Start" pointing to "0.1" and versa. The same for "Start" and "0.2". The same for "Start" and "0.3". Under picture "etc. Retell.”!

“A good story develops over time. The first time I write a story it is bland. It does not excite me. So I change a few words for more speed and flavour.”

“Meta Blogging”, followed by a rectangle pointing to a rectangle pointing to a cloud. There is also an arrow from the first rectangle to the cloud.!
“A blog post is something I put in the cloud. First I make a file. The text including markup instructions I copy to the cloud for multiple edits and  publication. I blogged about this process. The most left rectangle is the blog post about writing blog post and the resulting blog post. I call it meta blogging.”

A watch followed by "Time Traveling"!
“This trick is a nice one. In the blog post from 3 October 2016 I was really delighted to be invited to speak for my first workshop at an international test conference covering my travel and accommodation costs. The post contains:
‘The fun has started.’
It points to a tweet of 6 September 2016 with the text ‘Yes seriously’.

It looks like I did some time traveling: blogging in October, tweeting in September, and finishing blogging in October. I only wrote towards the tweet, that contained my punchline.”

Act 3

Most of the times I got ideas for pictures from my sketch notes. In order to avoid copyright issues I use my own pictures and sketch notes. Or ask and get permission.

While studying User Experience, I heard about a designer making 50 designs in 50 days. I really liked his work in Amsterdam.
As a Dutchman I am biased. Of course.

Back on course. He made a booklet for frequently asked questions. There were 4 categories with questions. In 2 steps an answer for question was likely to be found.

Now I had a writing exercise for a blogging workshop. Um. Wait, I could use a similar structure for this part.

4 quandrants containing a snail, signpost, someone looking up to a bar, and an empty thought balloon!

  • Snail  meaning “Slow”
  • Signpost meaning “Direction”
  • Empty thought balloon meaning “No idea”
  • Someone looking up to a bar meaning “Bar too high”

I made this nice obstacle map. Attendees could place a sticky note on the map. With 50 attendees I could get a quick overview.
Let’s get visual.

But how to keep up with a beamer? I had 20 mini presentations to handle questions.

Scrolling
is boring.

In my mindmap I placed links to presentations. My first version was solution driven.
Wait, how was I supposed to jump to solutions?
No idea.

I changed the solution to verification of the right context. What were the symptoms? I also would ask some additional questions. Nothing is worse to misinterpret a problem encountered. That is the moment my voice start to Rumble Or … I start to Fumble For …

OK time for a little demo:

A mindmap with branches "Direction", "No Idea", "Slow", and "Bar too high"!
Using the presentation mode only the speaker – that’s me – can see the mind map. I click on “Direction” and all subbranches are opened. Then I click on “How do I write this down? ” and my first slide is shown for the attendees.

TExt balloon containing "How do I write this down?"!

“So basically this is the question, what you are struggling with.”

A tweet showing a photo of "Perron 9 3/4" at Utrecht Central Station. It is overlapped by "Time for magic"!
“I took this picture at a Dutch railway station. ‘Perron 9 3/4’ can be translated to ‘Platform 9 3/4’. This seems impossible.
Writing a blog post looks like magic for a lot of people. Let me take this as a starting point.”

Eye and "Characters"!

“If you look to the books about Harry Potter, there are several characters. It is not all about a single hero. Every interaction adds to the story. If I write blog posts, I can use different views like the tester, the scrum master, or the manager.”

Disclaimer

This blog post does not offer 100% acceptance success of proposals. See act 1. Writing proposals and making talks take a lot of practice. And some visual tools really helped me.

BTW

if you are still hesitating to talk, please consider https://techvoices.org .
[Update: TechVoices was formerly known as Speak Easy.]