Our latest lesson was focused on the importance of effective source code reading. Projects can contain millions of lines of code. Imagine trying to find the right spot to fix a bug or add a new feature? In ordered to improve our code reading skills this week’s lab was made up of three separate tasks. Reading code on a large, open source project.
You will also create a simple HTML/JS test case, and learn about GitHub’s special gh-pages branch and static web publishing.
We were given the following scenario:
With some browsers, I notice elements on my page don’t seem to always fire their onLoad event. Specifically, when I set the .src of an image to the same URL as it’s already using, no load event fires. My code looks something like this: With some browsers, I notice that <img> elements in my page don’t seem to always fire their onLoad event. specifically, when I set the .src of an image to the same URL as it’s already using, no load event fires.
My code looks something like this:
The goal was to create a test case that:
- loads an `img` with a given src (use any image URL you want)
- make sure the onLoad event fires
- after the first onLoad is completed, update the img.src to the same URL you used in step 1.
- make sure a second onLoad event fires. If the second event fires, your test passes. If not, it fails.
In my first implementation I was using jQuery XHR requests which pointed out by David Humphreys was triggering different paths.
David suggested removing any jQuery requests and working strictly with the browser.
I had applied the recommended changes but was still experiencing issue. Only the second onLoad was being called.
After another review David made the following suggestions:
It’s finally working! Check it out below.
Test it Out
GitHub Pages
Many aren’t aware of a very useful GitHub feature called “GitHub Pages”. This feature is designed to host your personal pages directly from a GitHub repository.
Configuring a publishing source for GitHub Pages is very simple and great for users looking to host a lightweight web app or even their own web page.
*Fun Fact: the old design for this page was once hosted using gh_pages. Check it out
Browser Testing
It was interesting to dig through each browser repository tools, trying to uncover how each one triggered this event.
- WebKit: WebKit Trac
- Chromium: Search or Browse
- Mozilla:Mozilla DXR
Results
Firefox Quantum v.58
Google Chrome v.63
Microsoft Edge
Safari
The test seemed to pass across all browsers except for Apple’s Safari. Unfortunately, I couldn’t fully dive into testing Safari, but luckily other classmates were able to confirm the issue.
I was still curious to see if I could locate the main source file and code block responsible for this trigger.
While searching for any reference to HTML images I came across ImageLoader.cpp. After sharing the link in our class slack channel, a fellow classmate, Sean Prashad was able to uncover the issue.
You can read Sean’s experience here.
Shifting my focus to Firefox Quantum I was curious to see how the image trigger was implemented. Was it similar to Safari’s methods? The Mozilla DXR to is a very code search and navigation tool aimed at making sense of large projects like Firefox. I implemented the same strategy I used in WebKit and found the same file name ImageLoader.cpp.
