Will’s marker mystery🖍️
“Not again!” yelled Will, in frustration.
It was a different day, but the same bug. A bug that kept making appearances in Will’s life. It had been months since he had last seen it. Yet here it was, back in its full glory.
Its resilience was uncanny.
Its original appearance goes back months ago.
Will and I had embarked on an iTwin.js hackathon with a company that managed office buildings. Their goal was to develop a smart office app — think IoT devices, smart seating, floor isolation, and other fun stuff.
The hackathon (per custom) was a week-long engagement…and was meant to conclude with a glorious demo. If the demo was glorious indeed, the team would get to celebrate with a round of virtual beers.
In order to make this happen, we spent the entire week in a programmer God mode of sorts —scribbling lines upon lines of working code. As each day passed…the demo got closer, the lines kept piling up, and the code (thankfully) continued to work.
And before we knew it…it was demo day 😨
T - 5 hours before hackathon demo
The app was coming along surprisingly well.
Our giant pile of code was surprisingly functional.
Here’s a quick snippet — pay special attention to the markers (white dots):
Do you see how the icons don’t show up for a while?
Yeah, that’s no good.
Let’s take a closer look.
Interesting…the cursor is involved! The markers are waiting for the cursor to enter the view before revealing the icons. Very interesting.
Obviously, this was not going to add to the glory of our demo 😨
We needed a fix ASAP.
Will spent the remainder of his time investigating the issue. He ran through each line of his code, double-checked the the icons — everything looked in place.
What the heck was wrong?
T - 1 hour before hackathon demo
“Will we need to hurry up! The demo’s about to come up.”
This was our last chance.
“What if we just yank the cursor?” someone suggested.
“What do you mean yank?” asked Will. “Like this?”
“Exactly!”
We were onto something.
It took Will a few yanks…but soon enough, he had perfected the maneuver.
T - 0 hours before hackathon demo
It was time.
All the bosses (judges) filed into the online meeting.
As always…it felt like SNL.
The show was going live with or without us.
If you’re not ready, improvise.
Which Will did. And beautifully too — he yanked the hell out of that cursor.
The rest of the app worked smooth as butter. Bit by bit, he revealed the remaining features — smart seating, floor isolation, and…the glory was ours to be had! The bosses congratulated us on the demo. And we ended the day with a round of celebratory (yet slightly guilt-ridden) beers.
Next week…Will and I got pulled into different projects, and we both went our separate ways.
Life moved on.
Months passed.
Until one day.
Will and I got pulled into another hackathon.
With another company that managed office buildings. Except this company wanted even more features…AKA an even bigger pile of code.
And just like that…we were back in it again.
T - 5 days before hackathon demo
Will did not waste a second this time. He went straight for the marker code. And the next thing we knew:
“Not again!” yelled Will, in frustration.
“The bastard’s back,” he sighed, and then declared, “this time around, I am gonna make sure I squash it. Enough is enough.” He had already burnt several hours on it in the previous Hackathon…this was starting to get personal. He scoured through the code again, this time with laser focus. “What am I missing?” He wondered as he yanked the cursor back and forth with each test.
Once again, the code looked fine.
Hours passed.
It was one of those impossible-to-corner bugs.
The day was slowly coming to an end.
“I better do something soon…”
T - 4 days before hackathon demo
The bug was still there.
Will had had enough.
It was time to bring in the big guns — the iTwin.js development team.
It was time for:
The path forward, when there is no other.
It took Will about 45 minutes to pull out the relevant marker code…spin up a sandbox, and email it over to the iTwin.js team.
And within the hour, he got a response back.
To the expert — the problem was obvious.
To anyone else who runs into this issue — it’s in line 7 of the code below.
Expert’s response: The marker images are being loaded from the async call — imageElementFromUrl. You either need to re-render the markers after image load (invalidate decorations). Or (preferably) await the image load before registering the marker decorator.
Will quickly incorporated the above changes…and to his immense relief, claimed victory over the bug. He continued on with the hackathon and was soon back in — the much sought-after — programmer God mode.
For times when you have no idea what you are doing, the sandbox comes to the rescue! I asked Will if he has any advice for people wanting to use a sandbox to get their bugs looked at.
“I would say…extract the minimum code needed to reproduce the issue. The process of isolating the bug within a sandbox helps understand and explain it better. It’s much more efficient than sending the entire app to the team,” he shared.
If you currently need support, we encourage you to share your sandbox on the GitHub discussions page. Always think— the smaller the pile of code you send — the easier it is to dig up your bug.
As for Will and I — back at the hackathon— our pile was getting enormous.
And before we knew it — it was demo time again 😨
T - 0 hours before hackathon demo
All the bosses (judges) filed into the online meeting.
Will shared his screen.
And…I am happy to report:
He ended up with a glorious demo…100% yank-free.
Followed by a celebratory round of beers…100% guilt-free.
Co-authored with Will Bentley.
← back
