It’s kinda funny, getting web development advice from your own book. One of the biggest requests for the Widgets app is to have multiple copies of the same widget. It’s a tough request to fulfill because the JavaScript is hard coded. Frequently, a specific element ID is required. Had I written Widgets to be more dynamic, like the “Clicky” template, then the request wouldn’t be so tough.
It didn’t occur to me that someone would want more than one calculator or more than one unit converter. Adding that functionality is something I’m planning to look at — once A Book About Hype is complete. But for your own web projects, it’s important to think about the reusability of your code. Planning for future expansion can save a lot of time and prevent a lot of frustration.
The following Hype project illustrates the scenario. There are four separate elements, but they all run the same JavaScript code on click/tap.
Instead of needing four separate JavaScript files, or four separate timelines, this Hype project uses just the one JavaScript file. Once the click/tap event is detected, the related element is instantly identified. The JavaScript can then make changes to the scene, such as modifying the size of the clicked element or displaying the color of the clicked element.
This is a fundamental concept to understand in Hype and programming in general. That’s easy to say, but not always easy to do. With Widgets / Apparatuses, I simply didn’t foresee the need for multiple copies of the same widget. Such dilemmas could befall your project. By understanding the basic idea behind the “Clicky” template, you can make your code reusable. It takes practice, but this is where it can start.
For more information about the “Clicky” template, see the “Parameters” chapter in A Book About Hype. You can also download the Clicky Template to see how it works.