All too frequently, we, as developers, are faced with the task of handling errors. By developing effective messaging for our users, we can make their experience with our software much more pleasant. While the task of crafting these messages can seem mundane, it’s a necessary step in making our software more user-friendly and intuitive.
And yet, all too frequently, end users will go out of their way to completely avoid even attempting to read the error message.
And after a long hard day writing bug free code and solving customer problems, there is nothing less satisfying than a story that contains a screenshot of an error message that explains exactly the action the user needs to take the resolve the mistake they have made.
Below we present a simple and effective approach to handling errors in client-side fleshware.
An error message that requires interaction
If it’s not yet clear, I’ll take this opportunity to say that this is (mostly) a joke.
And simple as that, we reduce the number of bug reports we receive by 100%!
I’m certainly no UI designer, but with a little love, I expect this to be a core product feature in all modern softwares going forward.
Checkout the fiddle below to make your own improvements! https://jsfiddle.net/eg142dkp/2/
Wondering how I made this?
First I had to learn javascript. Then I had to learn CSS and HTML. After all that, I had to learn about Hugo and Shortcodes
By that point, I was a certified full-stack developer, and I was able to create the following shortcode to render the modal
1<style>
2 .modal {
3 display: none;
4 position: fixed;
5 z-index: 1;
6 left: 0;
7 top: 0;
8 width: 100%;
9 height: 100%;
10 overflow: auto;
11 background-color: rgb(0, 0, 0);
12 background-color: rgba(0, 0, 0, 0.5);
13
14 }
15
16 .modal-content {
17 display: block;
18 background-color: #fefefe;
19 margin: 25% auto;
20 padding: 20px;
21 border: 3px solid #dc3545;
22 width: 60%;
23 height: auto;
24 opacity: 1;
25 border-radius: 25px;
26 text-align: center;
27 }
28
29 .modal input {
30 background-color: #ffffff;
31 border: 1px solid #dc3545;
32 border-radius: 5px;
33 width: 50%;
34
35 }
36
37 .error-button {
38 background-color: #dc3545;
39 border: 1px solid #dc3545;
40 border-radius: 5px;
41 width: 40%;
42 color: #ffffff;
43 font-weight: bold;
44 display: grid;
45 margin: 0 auto;
46 }
47
48</style>
49<div id="errorModal" class="modal">
50
51 <div class="modal-content">
52 <div style="color: #dc3545;" id='errorMessage'></div>
53 <br>
54 <p style="color: gray; opacity: 65%">
55 type the error message to confirm you've seen it and disable the error modal
56 </p>
57 <input type="text" id="textinput" name="fname">
58 </div>
59
60</div>
61<div class="error-button">
62 <button type="submit" onclick="errorMessage('There is an error due to the way you did it')">
63 Click here to display error
64 </button>
65</div>
66<script>
67 function errorMessage(displayErrorMessage) {
68 let errorModal = document.getElementById("errorModal");
69 let errorMessage = document.getElementById('errorMessage')
70 errorMessage.textContent = displayErrorMessage
71 errorMessage.style.fontWeight = 'bold';
72 errorModal.style.display = "block";
73
74 let inputBox = document.getElementById('textinput');
75
76 inputBox.onkeyup = function () {
77 var text = inputBox.value
78 if (displayErrorMessage.startsWith(text)) {
79 errorMessage.innerHTML = "<span style='color: " + 'black' + ";'>" + text + "</span>" +
80 "<span style='color: " + '#dc3545' + ";'>" +
81 displayErrorMessage.replace(text, '') + "</span>"
82 }
83
84 if (text === displayErrorMessage) {
85 errorModal.style.display = "none";
86 inputBox.value = '';
87 }
88 }
89 console.log(errorMessage)
90 }
91</script>
and it goes right here in my layouts/shortcodes directory
1.
2└── layouts
3 └── shortcodes
4 └── error-modal.html
and then in my markdown file, I can just call it like this
1{{< error-model >}}
Hugo is neat
Update 12-27-22 – OpenAI
It is worth updating this post to say that I gave this prompt to the openai code-davinci-002 model
1/* create a button that says 'click to display error message'.
2when the button is clicked, a modal should pop up that has an error message and a text box.
3the modal should not have an x to close it. the only way to close the model is to type the error message into the text box */
and within seconds had a fully working implementation
Checkout openAI’s fiddle for comparison. Maybe we’re all wasting our time
https://jsfiddle.net/Lkyxuc0v/
1var button = document.createElement('button');
2button.innerHTML = 'click to display error message';
3document.body.appendChild(button);
4button.onclick = function () {
5 var modal = document.createElement('div');
6 modal.style.position = 'fixed';
7 modal.style.top = '0';
8 modal.style.left = '0';
9 modal.style.width = '100%';
10 modal.style.height = '100%';
11 modal.style.backgroundColor = 'rgba(0,0,0,0.5)';
12 modal.style.zIndex = '9999';
13 document.body.appendChild(modal);
14 var errorMessage = document.createElement('div');
15 errorMessage.innerHTML = 'Error: You must type the error message into the text box to close this modal.';
16 errorMessage.style.position = 'absolute';
17 errorMessage.style.top = '50%';
18 errorMessage.style.left = '50%';
19 errorMessage.style.transform = 'translate(-50%, -50%)';
20 errorMessage.style.backgroundColor = 'white';
21 errorMessage.style.padding = '20px';
22 errorMessage.style.border = '1px solid black';
23 modal.appendChild(errorMessage);
24 var textBox = document.createElement('input');
25 textBox.type = 'text';
26 textBox.style.position = 'absolute';
27 textBox.style.top = '60%';
28 textBox.style.left = '50%';
29 textBox.style.transform = 'translate(-50%, -50%)';
30 textBox.style.width = '200px';
31 textBox.style.height = '20px';
32 textBox.style.border = '1px solid black';
33 modal.appendChild(textBox);
34 textBox.onkeyup = function () {
35 if (textBox.value === 'Error: You must type the error message into the text box to close this modal.') {
36 document.body.removeChild(modal);
37 }
38 }
39}