DWR ==> 'Danger Will Robinson!'
It's our catch phrase to alert us to potential difficulties in code. We use it to document past errors and to learn from our mistakes.
(See some video clips featuring Will and the Robot (1960s and 2018 versions) in our legacy movie clip gallery.)
What's the story on 'Eureka'?
According to legend, ancient Greek scholar Archimedes reportedly proclaimed "Eureka! Eureka!" after he had stepped into a bath and noticed that the water level rose, whereupon he suddenly understood that the volume of water displaced must be equal to the volume of the part of his body he had submerged. He then realized that the volume of irregular objects could be measured with precision, a previously intractable problem. He is said to have been so eager to share his discovery that he leapt out of his bathtub and ran naked through the streets of Syracuse.
We haven't been that enthusiastic about coding, but we do get excited when we make discoveries too.
'DWR' and Eureka Moments
2022-23
| Date | Location/Moment |
|---|---|
| 08/07/2023 |
Issue: Initial trouble with drag-and-drop actions In this app, we wanted to re-arrange figures on a web page to tell a chronological story. W3Schools provided a Drag and Drop example but we kept getting a cryptic error message. Eventually, we discovered that every element being 'dragged' had to have an 'id.' Once those were provided in the element being dragged and their children, the process worked well. Eureka! (and DWR: you need to provide id attributes!) |
| 06/26/2023 |
Issue: Could not get If you go to the page mentioned in our link, you will notice several figures and captions floated in the page to illustrate the use of the Blobby app.
We had a devil-of-a-time getting the figures to float! We were using Bootstrap5 so we assumed that was part of the issue, and sure enough, the problem was we had a |
| 06/14/2023 |
Issue: Some HTML pages in the saga do not validate! Validation is important to us here at TNT. We know that CSS validation might 'blow up' with Bootstrap, but there's no reason HTML should not validate with the attention we pay to it. However, if you look at Stage 11 - Finale vs. Stage 5 and check their validation, Stage 11 validates and Stage 5 does not!! The validation error message was pretty cryptic: 
Can you guess what the problem was?! We'd never encountered it before! Hover over this phrase to see the answer! Eureka! |
| 06/11/2023 08/02/2023 |
Lilac Chaser and Rotating Polygon Issue: Low-Profile Color Picker! In this app, we wanted the ability to change the color of the circles using 'Hue/Saturation/Lightness' settings. We did so, using sliders. However, we wanted to change the canvas background color too, but without resorting to using 3 more sliders.
Eureka! We used an This same technique was used in our Rotating Polygon app also. |
| 06/02/2023 |
Issue: Button 'types,' 'null'objects and BS5 Progress Bars
In this app, we needed 'buttons' to process user input, but an actual HTML
The 'activateSoldier' page is intended to run after the index page. We made sure it would work properly if it were summoned directly. And it did -- if a localStorage variable, p5.js says: [activateSoldier.html, line 145] The property of null can't be read. In javascript the value null indicates that an object has no value. The problem? We had the original command:
if(codeString.length == 0) return [];
which assumed that 'codeString' existed. Hey! you can't check the length of something that doesn't exist! See, we needed to check for its existence first and then its length: This fix:
if(codeString == null || codeString.length == 0) return [];
seemed to do the trick! We love you, compound conditionals!
Enough problems! What was our 'eureka' moment here? In the associated page to this app, activateSoldier, (run the app and activate a sequence to see it) we wanted a progress bar so viewers would know how much of the process had been done. Initially, we were going to use simple text output, but the Bootstrap5 progress bar was so much nicer! We love you, Bootstrap5!. The tricky part was changing the color of the progress bar background. A bit of experimentation helped us match the background of the bar to a color scheme that fit our app. Eureka! Look at the source code to see how we did it! |
| 01/12/2023 |
Frosty the Snowman Lyrics Styling Issue: Missing Meta Charset Statement If you load the page, you will notice some awkward symbols acting like snowflakes and drifting down the page. They should have been snowflakes, as an inspection of the source code reveals. Without a meta statement specifying the 'charset' the poor thing doesn't know how to render the snowflakes unless they are coded specifically as HTML entities. Let that be a lesson to us on using the charset in every page. If you load the other pages in this saga, you will find that we replaced the icons with the affiliated codes to get it to work, until we noticed the missing charset stuff that we subsequently included. |
| 10/21/2022 |
Issue: Case Sensitivity in Webpage Hyperlinks As we developed the TNT Anim-PWave, we linked to it from the Shape Interactivity landing page. In our VS Code IDE, things worked great, but when we uploaded the files to server, we got the dreaded 'ERROR 500 - INTERNAL SERVER ERROR' Yipe. Because the warning page said this was 'typically a temporary condition,' we waited, reloaded several times but the error persisted. On careful scrutiny, we saw that the file was saved as 'interactive_PWave.html' but the link was 'interactive_pWave.html'. Once that was corrected, things worked well. What's curious is why it worked ok in the IDE. Go figure. Apparently, hyperlink file names are case sensitive! |
| 10/21/2022 |
Mama's Little Function Upgrade Issue: If you disable JavaScript, be sure to re-enable it! Try this app out and disable JavaScript. Watch what happens. They, navigate to other pages on the site and you'll notice missing 'behaviors' since JavaScript's been neutered. In the course of some development, it's good to disable JavaScript to see what happens but always remember to put it back in action! |
| 10/21/2022 |
Issue: An extra " in an attribute led to a train wreck of validations errors On this page, we inadvertently had an additional closing quote on attribute:
<td class="smallCol"">
08/28/2022
</td>
Check out the train wreck of validation errors. Notice: A careful reading of the errors does point to the 'scene of the crime' but doesn't specifically mention the extra quote. |
| 10/21/2022 |
JSGS Bell Curve Shape (and other pages as well, including this one!) Issue: In a mobile view, the tables exceeded the available horizontal space: awkward look! If you open the page listed above in a mobile device you'll notice that the table, even though its pretty full of information, still is constrained to fit within its container and you can horizontally scroll to see the rest of it (or change the view to landscape!). This is a better user experience than having it go beyond the bounds of its container. Actually, the same thing happened on this page. The fix? Put the larger-than-life table in a
div#tableDiv{
overflow-x: auto;
}
to control what it does in a narrow environment. Now it will scroll horizontally within the div and not force itself out of its container. |
| 10/20/2022 |
Issue: Wanted to have an accurate count of gallery shapes without having to manually count them! If you've been to our JSGS Shapes Gallery, you've seen we have many shapes we use to make artistic designs. We add more shapes each year and we'd like to make the document keep track of how many!
The Document Object Model can help with this! All of our shapes are cataloged in
<p>Explore Our <span id="shapeCountSpan">60</span> Custom Shapes!</p>
//get objects from the DOM
var shapeCountSpan = document.getElementById("shapeCountSpan");
var shapesDiv = document.getElementById("shapes");
//grab an array of all the figure tags in shapesDiv and get its length
var numberOfFigures = shapesDiv.getElementsByTagName('figure').length;
//update the span contents
shapeCountSpan.innerHTML = numberOfFigures;
Go to the JSGS Shapes Gallery and see for yourself that it works! |
| 10/13/2022 |
Issue: Needed a 'non-breaking space' for the phrase: We ♥ Processing!
There are times you do not want a sentence or phrase to 'break' to a new line when the geometry of the web page changes. In our phrase above with the cute HTML Entity heart, the phrase was breaking to a new line and leaving the heart 'dangling'. Oops. By putting in a |
| 10/07/2022 |
Issue: Forgot to include a BS5 responsive image class to an image In the JSGS Ecosystem, we are making art work using shapes from our shapes library. We often issue challenges, one of which is the 'Ebbinghaus Illusion Challenge' linked above. Recently, when viewing it on a mobile device, we noticed that the picture did not scale properly to that geometry. Boo. Troubleshooting led us to discover that we had forgotten to 'class' the image as 'image-fluid' using Bootstrap 5 stying techniques. Adding that class fixed it. Load the original design in a mobile device and you can see the presenting problem. We also fixed the scaling for the h1 heading which was too long to fit the geometry. Details, details! |
| 08/29/2022 |
Issue: Copy/Paste Errors We are slowly re-creating page entries for each library shape. The easiest way to do this is to take a validated shape page, copy it, and paste it as a new file and make the necessary changes. It's possible in the hurry of getting pages made that you forget to change necessary elements. One easily-overlooked elment is the |
| 08/29/2022 |
Issue: Validation revealed the need for 'HTML Entities' It pays to validate! When we attempted to validate this page there were a couple of problems. We were using 'less than' and 'greater than' symbols in the source code and those are programatic symbols and the poor browser was getting confused. We had to use HTML Entities to correct the problem. A more extensive list exists outside of W3Schools too. The other problem occured when we tried to 'nest' an 'ordered list' inside an 'unordered list.' As it turns out, the only 'legitimate' child of a 'ul' or 'ol' is an 'li'. Who knew? We adjusted our code so that the 'ol' we needed was a child of an 'li.' Eureka! It validated! |
| 08/28/2022 |
Issue: Datatype Disasters! 'Anything' from a GUI element in HTML is 'String' in nature! Although JavaScript is not a strongly 'typed' language we encountered a problem with the drop-down selection menu in the 'TopoMap' app. 'value's in the menu appear numeric, but when they are collected and processed, they are treated like 'strings'. This made some of the logic malfunction. The solution? In the As in Java, the |