Category Archives: Reconstruction

Advanced blogging – Honey, I Shrunk The Pictures.

Small recap

It took me three days and three takes to make 26 pictures. Now I had to shrink the pictures to a smaller size. This would lead to a faster download of the blog post and hopefully a better performance of my blog post.

Warning:
This is not the standard look-how-great-I-am blog post. It is more like look-how-I-stumbled-forward.

Reminder to myself:
As a tester I built this website to share information, but also to get a better understanding of building websites. The more I blog, the better I test.

Here, have some notes

Writing a blog post is creating an introduction, a good end, and something in between. The last part was still missing.

I only had notes and pictures in a charter. As an experienced tester I made my observations including date and time. I used the abbreviation PIC for Picture.

20201012 blogging
PIC 10:37 Screen print TEstLogin3.java 
Input: Cap / Secret.
PIC 10:44 debug menu
PIC 10:46 first breakpoint.
PIC 10:47 Cap in screen.

All my pictures had names like “20201012 – 1.2 debug program.jpg”:

  1. “20201012” is the date when the picture was taken. The format is year in 4 digits, the month in 2 digits, and the day in 2 digits.
  2. “1.2” means Take 1 and Step 2.
  3. “debug program” describes the picture.
  4. “.jpg” describes how the picture is stored. I chose this file format, because it is great for editing. That is a bit of a spoiler.

The big advantage of this name is that I can order the pictures on name.
I must have looked like a Holywood director. Day 1, take 1.

Now I had to make a link between my actions and the pictures. Luckily, I had used descriptive names for the screen pictures. These pictures had a day and time stamp, so it was easy to place the file names at the right places in my blog post.

20201012 blogging
PIC 10:37 Screen print TEstLogin3.java -  20201012 - 1.1 three breakpoints.jpg
Input: Cap / Secret.
PIC 10:44 debug menu - 20201012 - 1.2 debug program.jpg 
PIC 10:46 first breakpoint. - 20201012 - 1.3 - first breakpoint.jpg
PIC 10:47 Cap in screen.- 20201012 - 1.4 - fill in username.jpg

Processing a picture

A 288 kb picture is too big for my blog post. I figured out several steps to cut down the size.

Emphasizing

The first step is to determine whether a box should be placed in the picture. If this was the case, I used a green bordered and transparent rounded rectangle for highlighting.I would add “+box”:
e.g. “mindful-tester-p3-20201012 – 1.4 – fill in username+box.jpg”.

Let me break down the name again:

  1. “mindful-tester” is the name of my blog.
  2. “p3” is the third part of TDD in Test Automation.
  3. “20201012” is the date when the picture was taken.
  4. “fill in username” is the description of the picture.
  5. “+box” states that a rectangle is placed in the picture for highlighting an important detail.
  6. “.jpg” describes how the picture is stored.

In case of no box I did not add anything at the end of the name.
This would lead to:
“mindful-tester-p3-20201012 – 1.4 – fill in username+no+box.jpg”
After a while, I did not use the “+no+box” any more, because it did not add value.

I stored the old version of the file in case of any mistakes.
So far, so good.

Zooming in

The second step was that I cropped the picture: I would cut a rectangle out of the picture and save it. My favourite shareware tool is irfanview. Less pixels means smaller size and better performance.

Shrinking

The third step was to shrink the picture also using irfanview.
This way a picture of 288 kb could be shrunk to 40 kb.

In the Resize/Resample image dialog of irfanview the "Set new size as percentage of original" is selected. The Width and Height are set to 100%!

Note: for this blog post I accidentally used a png file. png is like jpg a way to store pictures. Only irfanview would not let me resize the png picture using percentages.

In WordPress I resized the picture to maximum size. I selected a corner of the picture and stretched the picture. This way the user does not have to click on the picture to see the details.

The new file name was:
“mindful-tester-p3-1.4-fill-in-username+box.jpg”.
I left out the date and the spaces in the name.

Was this a joyful experience for me? Not really.
So the time of processing pictures became longer and longer, until I forgot my process.

Processing pictures

The status of the picture was not clear in the file name. Also, the location of the pictures had its own logic. So the time between the editing of one picture and the editing of another picture became longer and longer.

So I made a nice file with all kind of instructions, “Instructions printscreens programming.txt”.
This included files, their contents, and their locations.
Exploratory blogging in a nutshell.

Only to discover that I had already “Overview files.txt” in place.
Exploratory blogging takes practice.

Because a lot of time was spent on editing the pictures, I did not remember my steps well enough while writing. Now pictures are handy, because pictures do not lie. So I had to change my story a few times.

Looking at some pictures I missed the essential point of the picture. So I added the transparent rectangle and went through the whole editing process again. Even after cropping the picture the important details were too small in some cases. So I split pictures in certain cases.

Placing a picture in a blog post is quite tiresome. I had to go to the right location, search the right picture, and upload it. Not enjoyable at all.

But I already knew what I wanted to upload. So I opened Media and uploaded all the pictures using one drag and drop.

Then I searched for the first picture to be included using PIC for Picture. All my files had an unique name like
“mindful-tester-p3-1.4-fill-in-username+box.jpg”.
Using the filter I searched for the file with 1.4 in the name. Then I selected the file.
In the Add media dialog of WordPress the Search Field is set to "1.4". The result of the search is a single picture containing a part of the Login Page!

Uncomfortable observations afterwards

  • At the end I shrunk the total size of my pictures in the blog post to a quarter: from 8 Mb to 2 Mb, which is still big. Is it still possible to shrink the pictures without losing the important details?
  • I did not check the size of my blog post with the preview version.
  • Chrome Devtools contains Lighthouse, an accessibility tool. My site scored 58 on a scale from 1 to 100 for performance. This is not really high.
  • The setting of “the most number of blogs posts show on page” was still on 5. I forgot to save this setting. Saving a setting in WordPress was not consistent with saving an alternative text for picture.
  • The trouble with pictures is, that it can cost a lot of time. This will decrease my enjoyability. It makes my blogging slower. On the other hand it will increase the enjoyability of the readers. At the end this will increase my enjoyability. I like to read my own blog posts. I might call this the Enjoyability Paradox. Things which I did, were no fun, but finishing the blog post was good for my mood.

Coming up

At the end of the picture processing, I had a bunch of pictures without alternative texts. For blind people or people with bad sight this had to be fixed. A screen reader needed these texts to describe the pictures aloud. This was about accessibility.

January Testing

Somehow I ended up with this test term or test type. Actually is a subset of boundary value analysis. But I got your attention.

That’s my right

It was the second day of the year 2018. I was about to place a new post on my web site. I just knew something was wrong.

I went to the web site lay out. It took me a few clicks to open the footer. Then I changed the text to
“2014 – 2018. Mindful Tester. All rights reserved.”

Now I could add my post.

It is my right
for which I fight

That’s my audit input

The same week.
For the audit I ran a query in the defect registration system. The number of items on the list was startling low: 0. My query was wrong. That bugged me. Last year it gave the right results. Actually a few weeks earlier.

I had a look to the query and noticed:
StartOfYear()
I don’t know all the commands, but I could make a good guess.
This year started at January 1st 2018. I was one year off.
The report was about 2017 and not about 2018.

A few hours later I had to go to my boss. He still used the same old query. It was easily explained.

It is not the query
I marry

A test idea approach

Let me generate some test ideas:

  • Is there a checklist for things to be updated in the new year?
  • If yes, so when is it updated?
  • Are queries based on fixed dates instead of relative dates?
  • Are there changes in laws which I have to pay attention to?

Still wondering about the pic with door?

Janua is the Latin word for door.

What about May 2018 testing? Excuse me GDPR testing.
Do you know what the effects of the General Data Protection Regulation are? An European customer has the right to be forgotten. But what about payments?

No notes

I had no notes
No music came into my mind. Silence.
It was my turn.

I had no notes.
No melody, no bass line, and even no chords came into my mind.
The people in the room expected me to do something.

I had no notes. After I had looked in my subdirectories: no database scripts. No relevant test charters. Actually I was supposed to test, not to make music. Mind you.

Getting back on track

It was time for my first flashback. A week earlier I had to test the same application. The import function had not been implemented yet. So I used some code of the unit tests.

I told myself to write a short note in the knowledge management system. This hunt for the code should not be repeated every test session.

The first step was to open my IDE or Integrated Development Environment. This tool helps me to program, build, and use version control among other things.

It was simple to find the right repository: it was still in view as I left it.

Another flashback came in. I could not use the code and one of the devops replied that I did not use the latest version.

So after the flashback I did a pull request and got the last version of the code.

My purpose was to find code to fill the database. I went to the unit test. A unit test has several phases. First I focused on the setup and breakdown. I could easily copy the code to make a table and the code to throw the table away. There were more commands for the breakdown than expected, so I had a small chat with one of the devops.

The second step was to find a way to fill the table. No other database commands could be found in the file. I saw a method to put a record into a table, clicked on it and saw the code of the wanted database stuff.

Then I reformatted the code. Now I could make, fill, and destroy the table at my own convenience.

During the test session I opened a test charter for notetaking.

End of the track

Did I put my steps in the knowledge management system?
Nope.

Last flashback. I promise.
I was talking to a team member. He explained that he never bothered to make notes for these cases. Things changed continuously. His Best Friend was the IDE.