Archive for
While I was working on the new «welcome thingy» for new customers in our GatsbyJS app, I asked myself:
«Self, how do I make my switch statement playfuller?»
Because to better remember new JavaScript things I learn, I try to practice in a playfuller way every day 😺.
But before I tell you The Long Story I will jump straight to the benefits to my family and our indie hacked GatsbyJS app from using this excellent tip from the great and powerful Josh W. Comeau.
Six Benefits For My Family From Making My Switch Statement Playfuller
- I got to draw parrots 🦜 and
- I got to ask Lillian (5.5 🦄 ) to colour those parrots with her new colouring pens. Why parrots? Look further below 🔽 in the The Long Story.
- It saved me programming work. Less code = less bugs 🐛 🦋🐌 🐜 🐝 🦗 🕷️ 🕸️ at least for me 😺
- It saved my boss programming work. 😺
- The final switch statement made my variable safe from bleeding outside of her snug little case. Better safe than sorry, as my father Captain Vea said.
- (Coming soon. This blog-post is still just a draft.)
Send Me YOUR Playfuller Practice Tip
I always look for one more way to practice playfuller, mail me your tip for playfuller programming practice ola 🐘 olavea.com
Ok, let’s go! I are now entering the start of The Long Story.
A long time ago, on a bridge
far, far away ….
DevOla took his first sip of dark coffee and opened issue #182 in the pow-app repo on github. Then he opened the Welcome.js file in VS Code and after ONE look he played with this idea:
switch statement 🦄 unicorny better by wrapping each case with {}I will make my switch statement unicorny 🦄 better by wrapping each case with {} or squgglies as Josh W. Comeau calls them. But where I come from we say squigglies are hungry twin parrots squaking «Mine! Mine!» like the gulls in Nemo. 🐠
First we’ll look at the tasks I did in 8 steps, then we’ll look at why and when we do usability testing in our family business.
Skipper-Ola’s Usability Testing Tasks
- Prepares
- Calls Martin G.
- Listens up!
- Takes notes
- Ships his prototype in SMS link
- Says “Tell me what you are doing”
- Says “Thank you”
- Makes MartinG SketchNotes from notes, Right now for 90 minutes
8. is the most important to spend time on. I spent 90 minutes on 8 and 90 minutes on the other seven.
The point of this kind of usability testing is clarity. To make the 1-Job-Prototype clear for the one tester I am testing on, Martin G. So that Martin G. can go in, do the 1 job he is supposed to do without becoming distracted. And that is hard. It is suuuper hard to make a prototype that is easy-to-use. (
What Are the Eight Tasks of Usability Testing?
Let’s go to 1. Prepares.
1. Prepares
Skipper-Ola’s Preparation Tasks For Usability Testing:
- Sends warning to Martin G.
- Finds two test dates.
- Invites Martin G.
- Writes a short script.
- Tests 1-Job-Prototype on his own iPhone. (17:46)
- Reminds Martin G.
2. Calls Martin G.
- Calls
- Smalltalks
- “Are you alone?”
- ” … and put your headset on.”
3. Listens Up!
- Hearing accurate input
- Listens actively
- Gives UNDIVIDED attention
- Immerses his mind in:
- Voice and silences
- Noises like a low “Grrrh!”
4. Takes Notes
Shuts up and writes down
5. Ships my prototype
- I send SMS with a link to Marita’s prototype
- “Did you click that SMS link?”
6. “Tell Me What You Are Doing.”
- “I will read my script.”
7. Says “Thank You!”
- Martin G. knows: VERY Valuable
8. Re-Works My Martin-G.-Notes
I sit and observe my thoughts on:
- What Martin G. did
- Remove:
- Choices.
- Distractions.
- Make my 1-Job clearer for Martin G.
First thing: for 90 minutes:
- I re-work my notes.
- I capture fresh ideas.
- I see my next task, so:
TODO: First find two good testing dates in your calendar
Why Usability Testing?
Benedicte has limited time and treasure.
So without doing usability testing timely, Benedicte cannot build to DONE. (See upcoming blog post on how I define DONE.)
Because nothing beats a real human trying to use Benedicte’s 1-Job-Prototype. To flush out ideas that don’t work.
When To Do Usability Testing?
- As
- Soon
- As humanly
- Possible
Feel Ready?
What do you do, when you want to go «Whee!» on mum’s new bike, but your back seat has yet to be delivered? Can Lillian (5.5 🦄 ) prototype the back seat instead?
Yes. She. Can!
Lillian (5.5 🦄 ) built a do-it-yourself saddlebag backseat prototype on mum’s new electric cargo bike. Because that’s how we roll our no-code prototyping in our family.
A Good Idea For The Prototype
Dad’s original idea was to fasten the saddlebags with gaffer’s tape. Lillian (5.5 🦄 ) had a better idea: String!
So we used string which leaves no marks on the bike.
Questions About Electric Cargo Bike Rental
What did daughter and father learn today? The answer comes further down, but first a few questions to you, dear reader. If you can answer yes to one of these questions, please send me a flag signal ola {@} olavea.com.
- Does your city have an electric cargo bike rental service like we have in Oslo, Norway?
- Do you have an electric cargo bike from a rental service? (And maybe you have a few tips for us.)
- Do you own an electric cargo bike? (And maybe you have a few tips for us.)
- Have you built a bike related prototype? (And maybe you want to share your story with us.)
- Have you guessed what movie an/or actor inspired this sketchnote of Lillian (5.5 🦄 ) sitting on the saddlebags?
(illustration CLOSE UP coming)
Today Lillian (5.5 🦄 ) Practiced No-Code Prototyping
-Cutting gaffer’s tape with siccors
-Cutting string tape with siccors
Today Dad Practiced No-Code Prototyping
-Bending and cutting cardboard
-Using gaffer’s tape with cardboard
-Taking photos from bike (😅)
Today Dad Learned About No-Code Prototyping
-Spend more time on building the actual prototype
-Spend less time on making drawings and notes about the prototype before building it. Because we never got time to measure ONE single thing.
I added laughter to a gatsbyjs site with use-sound by joshwcomeau. I love it! ❤️. Thanks Josh! Bottled Happiness is Benedicte @raae and Lillian (5.5 🦄 ) and my contribution to the Gatsby Silly Site Challenge.
Today’s question:
What should our user do to stop the laughter?
Benedicte Is live Coding the Answer
Take a look at Benedicte’s live coding here:
Take a look at the rest of the code on: https://github.com/raae/bottledhappiness
Here is what I did to use use-sound
yarn add use-sound
and
import useSound from 'use-sound'
import laugh1 from '../../laughs/534709__artymarce__childlaugh.mp3'
export default function Home() {
const [play, { stop }] = useSound(laugh1);
return (
...
<Button
onClick={play}
>
Bottle placeholder
</Button>
)
}
I found the actual laughter.mp3 at https://freesound.org/ after a tip by the same joshwcomeau Thanks again😺👍
(Title ideas:)
(Early Usability Testing in 180 minutes
Prototype Usability Testing Tutorial
Usability Testing For No-Coders
(introduction)
Tasks and why and when
Skipper-Ola’s Usability Testing Tasks
- Prepares
- Calls Martin G.
- Listens up!
- Takes notes
- Ships his prototype in SMS link
- Says “Tell me what you are doing”
- Says “Thank you”
- Makes MartinG SketchNotes from notes, Right now for 90 minutes
8. is the most important to spend time on. I spent 90 minutes on 8 and 90 minutes on the other seven.
The point of this kind of usability testing is clarity. To make the 1-Job-Prototype clear for the one tester I am testing on, Martin G. So that Martin G. can go in, do the 1 job he is supposed to do without becoming distracted. And that is hard. It is suuuper hard to make a prototype that is easy-to-use. (18:12)
How do we do it?
Let’s go to 1. Prepares.
1. Prepares
Skipper-Ola’s Preparation Tasks For Usability Testing
- Sends warning to Martin G.
- Finds two test dates.
- Invites Martin G.
- Writes a short script.
- Tests 1-Job-Prototype on his own iPhone. (17:46)
- Reminds Martin G.
About Tests 1-Job-Prototype on his own iPhone
The 1-Job-Prototype that I am going
