Years ago, one of my developers (and good friend) taught me about the concept of rubber duck debugging. He was a great listener and the simple act of sharing my problems out loud often helped me solve my problem.
Looking around, I found this old, terminal application that lets you type your problems at a duck. So I thought it might be fun to create a video chat version of the rubber duck debugger.
Admittedly, it's a little choppy (not to mention embarrassing), but it's not meant to be anything serious.
So take a laugh at me and share it with all your friends and colleagues!
What Is Rubber Duck Debugging?
The technique gets its name from the story of a programmer who would carry around a rubber duck with him and explain his code line-by-line to the duck.
As he did so, he would often find the solution to his problem.
The idea is that by explaining your problem to someone (or something), you'll gain a better understanding of it yourself and be able to see the problem more clearly.
How Does Rubber Duck Debugging Work?
- Buy, borrow, or steal a rubber duck from a friend or small child.
- Set the duck on your desk.
- Actually explain your problem to the duck out loud (your coworkers might think you're crazy but that's expected).
- Pretend like it's a real person, go into detail, and explain your code line by line.
- By the time you're done explaining the problem to the duck, you may be surprised you figured out the answer.
- To get optimal results, it's critical to share this page with everyone you know.
How Did We Code Our Video Rubber Duck Debugger?
The Rubberduckdebugging video chat app was coded by our full stack developer in React.js using the Tailwind CSS framework.
- First, the app initializes upon page load and buffers the first two video clips into memory. The app maintains two video players and at a given point only one is displayed, while the second is buffering the next video. The first video is always the introduction and all other videos are randomized.
- When the “Talk to a Duck” button is clicked, the user is prompted to grant microphone access (required for the app to listen) and then a welcome clip is played.
- All clips are front-loaded with a verbal prompt and then the onscreen “duck” generally remains quiet to listen for the user talking. The app continuously listens for microphone usage above the default sound threshold of -50dB. The sound threshold is configurable in debug mode.
- The app continuously samples 200ms of microphone input to detect silence. This sample size is configurable within debug mode. Within each of these samples, if a silence of longer than 1.5 seconds is detected, the app switches to play another video to give the appearance of a conversation with the duck. The silence duration threshold is configurable in debug mode. This transition is admittedly a little buggy in our prototype (no pun intended), but hey, it's just for fun. The challenge is that sometimes the video clips or ambient sounds are treated as if the user is speaking and the app does not detect silence.
- When you are done playing around, the user can click one of the resolution buttons and a closing video clip is served up.
- Under settings, the user can access alternative sets of video clips that follow the same behavior, or turn on “debug mode” and see events listed on screen as they happen.
What are the Practical Applications of the Rubber Duck Debugger?
It's a logical progression for text-based, customer service chatbots to evolve into video chat. And some innovative companies are already testing this.
While most people assume this means there should be a real human behind a video chat for real-time interaction, that needn't be the case. The rubberduck app is a small proof of concept that pre-recorded video clips can work just as well.
A customer service department could record short, video answers to all the FAQs answered by a standard chatbot. Instead of reading written input, a video chatbot could transcribe speech to text and apply the same natural language processing (NLP) as a text chatbot to understand those questions and serve up the most appropriate video response.