I have lost track of the amount of applications and programs that are sold as the solution to getting students coding. The problem that I have with many of these is that they lack purpose and authenticity. One answer is to ‘Steal Like an Artist‘. Rather than learning from scratch, start by reusing someone else’s code in a new way. Two tools that help with this are Google Chrome Developer Tools and Mozilla X-Ray Goggles.
Google Chrome Developer
Google Chrome Developer Tools are designed to provide feedback to programmers and help with the debugging process. You can access it within the settings of the desktop version of Chrome, as well as with the keyboard shortcut Use Ctrl+Shift+I (or Cmd+Opt+I on Mac). Going beyond applications like Built With, which provide insight into the parts of a website, the Developer Tools provide insight into the code and the way it is put together. It provides a side-by-side view which provides into different parts of the page. Beyond the design process, it is useful when trying to lift the bonnet to see the code inside. Doug Belshaw shares how he uses the tools to get links to photos that are baked into the site.
Mozilla X-Ray Goggles
Along with Thimble and the Web Literacy Framework, X-Ray Goggles allows users to explore the building blocks of the web. It runs via a bookmarklet that you add to the bookmark bar. Like the Developer Tools, the Goggles allow you to peek into the code that makes up the web. However, where it differs is its intent to provide the means to tinker with the code. Some examples of how this could be used include remixing the news to appreciate how information is presented (see Kevin Hodgson post on fake news) or changing names and details for privacy reasons. These makes can be published, which gives them a unique address or you can just screenshot the page. It must be noted that unlike the Developer Tools, which is built into the Chrome browser, you need to create an account to use X-Ray Goggles. For more ideas and information, check out the following teaching kit as well as this introduction.
Whether coding is or is not the literacy of the 21st century, it is important to appreciate that coding is not always about starting from nothing. Sites like GitHub and Scratch provide the means of repurposing code. However, applications like the Developer Tools and X-Ray Goggles allow you a different means of borrowing. At the end of the day, maybe copying is who we are.
flickr photo shared by mrkrndvs under a Creative Commons ( BY-NC ) license
Copying the Web by Aaron Davis is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
Hi Aaron, thanks for the timely post. Last week I used Doug Belshaw’s link to Mozilla’s Web Literacy Map and did the reverse image search. Will try XRay Google.
document.designModeis another useful tool when teaching the web and manipulation of content.Thank you Alan for sharing your write-up. It is kind of sad to see X-Ray and Thimble go, but at least there are alternatives.
Something you might also be interested in is ‘document.designMode‘.