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

If you enjoy what you read here, feel free to sign up for my monthly newsletter to catch up on all things learning, edtech and storytelling.

Digital Creating and Making at #DigiCon15 http://bit.ly/quickmakes
Digital Creating and Making at #DigiCon15 Quickmakes

Mozilla Thimble is a part of a suite of tools, including Webmaker and X-Ray Googles, designed to help teach the web by (re)making the web. It allows you to easily create, remix and share webpages. Using HTML and CSS language, putting in the code on the left and then seeing it come to life on the right. What is great are the hints and errors that pop up as you work.

Some possible uses for Mozilla Thimble include:

  • a personalized cover splash page
  • an online poster for your favourite movie
  • a hilarious meme

Here are some additional resources:

Webmaker Thimble Page – A guide to how Thimble works and the different possibilities.

Web Literacy Map – A growing resource created exploring the skills and competencies associated with traversing the web.

Teaching the Web Activities – A collection of activities designed for teaching the web.

Collection of Makes – A gallery of creations from other people.

Mozilla Learning Network – A Google Plus Community dedicated to reading, writing and participating on the web.

I’ve just closed my Linkedin Page – A post by Doug Belshaw discussing taking ownership of online identity.

#2NextPrez Make Cycle: Remixing Campaign Posters with Thimble – Kevin Hodgson shares a remix activity involving the creation of a poster.

If you have any other resources or experiences with Mozilla Thimble I would love to know.

If you enjoy what you read here, feel free to sign up for my monthly newsletter to catch up on all things learning, edtech and storytelling.