Relighting Thimble and the ImageSeek Teaching Kit

I’ve been a big fan of Mozilla’s Webmaker tools since they came out– Popcorn video editor, Xray Goggles to remix web pages, and Thimble as a web editor that lets you learn code while seeing what it does.

In 2013 I did some work with them to create some demonstration projects – Ingredients of Me (Thimble), Photos in a Photo Stories (Thimble), #MoPoCoPa is Mom Powered Comment Patrol as a hypothetical solution to nasty YouTube comments (Xray Goggles), and I found a Camera in Popcorn.

When I taught DS106, I made an assignment called Where Should Alan Go on Vacation where students had to remix a Popcorn video to answer that question (I went among other places to Mars, Sudan, Alaska, and some place full of enternal flaming damnation for the frustration some had with the tool).

I also created a Teaching Kit for Mozilla called ImageSeeking For Fantastic Visual Metaphors that had maybe one of the most convoluted Thimbles ever made.

One of the greatest feature of these tools is the Remix button- you could always open a copy of someone else’s Thimble project in your own Thimble, and modify from there. Heck, Mike Caulfield, that’s forking, right?

Popcorn, a great idea, but nearly always cumbersome, was retired. Xray Goggles still works, though I have found the content security settings on some sites (cough medium.com) break it. And sometime last year, the original version of Thimble was revamped, and all of the old projects, while viewable, could not be remixed or edited.

I got a notice by email in March, asking if I might port my ImageSeeking Teaching Kit, and I promised to try.

A lot of time passed.

Months.

But in a few hours, I updated a number of my projects, and since I tried last, now I am able to open my old Thimbles in the new editor, make a few changes, and republish.

So the Ingredients of Me is now remixable again:

This was, if I remember right, inspired by a DS106 Daily Create to make a recipe card that describes your personality. In this case, you are a can of beans, and through the web editor, you can change things like the ingredients, and the nutritional percentages. Thimble is a side by side editor, where you edit code on the left, and see the changes immediately on the right.

This is a common sort of tool like Codepen, jsfiddle, et al. But beyond a decent development tool, the role it plays in teaching web literacy, is an opportunity to teach people how HTML, CSS, and JavaScript work, because you can “fiddle” with code and see the effects right away. When you create a thimble to teach, you can insert comments right in the code to guide the person remixing it.

The Thimble editor does a lot of neat things like auto-indenting, completing tags, displaying visual warnings for bad or unclosed tags.

In the original Thimble, everything- CSS, JavaScript, all HTML needed to be in a single file, thought you could reference ones stored at an external URL. A big feature of the new editor is that a project can have multiple files, so as more properly done in practice, you can reference separate style sheets, JavaScript files, even media that you upload:

For the most part, my work today was doing this kind of moving stuff out of the single old Thimble doc, republishing, editing other Thimbles to reference the new URLs. What I wanted to get in place was an updated version of ImageSeeking For Fantastic Visual Metaphors now updated and available:

This came out of several variations of workshops and talks on the ways I go about finding images to use for projects and blog posts. It’s not strictly a cookie cutter recipe, but aims at the idea that finding photos of specific things is easy, use descriptive keywords- but representing ideas, concepts, requires coming at a search with a different approach:

As a webmaker, images are a key ingredient of what you create. When you need an image of specific thing, literal keyword searches usually work well. For example if you need “a photo of a cat” or “an image of a surfboard”, you can find these images pretty easily.

But often you wish to represent more complex ideas or concepts as metahpor images– how can you find things that are not as clearly represented by keywords? How do you represent something like honesty, learning, respect, or even fear with an image? In these cases, literal keyword searches are usually not as effective.

Using the ImageSeek Strategy you can practice what is as much art as science in finding images. Four prompt questions help you choose alternative keywords that produce images that suggest or metaphorically represent the idea who want to communicate in photos. ImageSeek also encourages you use images that are licensed for re-use and to keep a record of your search strategy for future reference.

Before sending people off to the search box, I think it’s useful to step back and ask people how they go about searching for easy searches, e.g. things, now (besides just “go to google”) — what are the thought strategies you use to pick what to type in a box? When do you stop? So a first activity is that How Do You Find Images? (note that the image I used in that page does not even come from searching, it is one I took myself).

This could be done in several ways (as described) but one us yet another Thimble I made called How Do You Find Images of Things Thimble

The Thimble has five different “topics” and it chooses one at random on each reload. So it puts the question first, e.g. “How Would You Find an image of a Smile?” “How Would You Find an image of a Shark?” “How Would You Find an image of a Balloon?” There is one popular image that will slowly fade in after 30 seconds, so it can be fun to see if that’s the one people find.

You want a different word? or a longer time for the feed? Heck, just remix it and go.

But it’s more about showing that finding pictures of simple things is easy.

The second part of the ImageSeek teaching Kit includes some references to talk about attribution. You don’t want to talk about attribution (whatsa matta you?)? Remix the kit and take it out.

The big part is using what I found was probably still too complicated a Thimble. But it’s neat! The ImageSeek tool is kind of an interactive web worksheet, that guides a search, urges you to store your notes, and when published would be an artifact of a complete web search. It starts out general:

The trick is you have to click the remix button to set it in motion. It works better if you collapse the files pane on the left:

You get a detailed set of instructions of you click TUTORIAL, which walks you through the steps of where to edit the HTML on the left for your own ImageSeek.

It tells me to go to line 38 to edit this HTML:

where I change something to be the idea I want to represent, for example joy, Then I click PREVIEW again, and whoa Neo, it’s only put my idea term in the green box, but also the orange boxes for each prompt question:

The idea of the ImageSeek is it has four questions that help you come up with different search terms to represent a topic, by thinking about attributes of the idea. These are my ideas, they are not sacred, and you could always change the question. But the first one is What kinds of actions represent joy in action? e.g. these are often verbs, but the question is, when you think of seeing joy, what is going on?

You are looking for single words, and the tutorial tells you where to edit that in the HTML on the left, the button text for keyword1, keyword2, keyword3, keyword4. As you enter them in the <button>...</button> tags, they appear on the right.

Now that’s keeping track of our ideas, but this is not your grandmother’s worksheet. Those buttons on the right are wired to run image searches!

It pops up a modal window letting us know that it has set in place a search for celebrate from four different search sites: Flickr, Google Images, Fotopedia, and Wikimedia Commons — these are search queries lifted directly from the Creative Commons search tool which means when you search any of these sites, the search is already “rigged” to return results that are openly licensed.

And BOOM- I just noticed that Fotopedia is no more, so tomorrow I will be updating this to use Pixabay instead.

But the link for Google images returns results for celebrate that are labeled for reuse

The instructions for a workshop would be to have people keep track of their results- not only save the image they found that they think best expresses joy, but also where it came from, a link to the page that contains it, the word they searched on, and any other notes. Documenting search results is something most of us don’t do, we just grab and go.

There is a reason for this.

But you can see with four prompt questions, generating four possible search terms, and then using four different search sites, can go very far.

There’s more to the Thimble- a place to show the four “best” image finds, and a table to record those search notes.

If you look at the result of the demo I created to find an image to represent the idea of broken web links, you can get a sense of what my search strategy was, you can reproduce the searches there, and you may notice that I have even modified (via HTML) the search terms that worked best.

One reason I chose to do this now, is I think this activity, and what it produces here, is the kind of artifact that would serve as good evidence in the Creative Commons Certification project to show my ability to not only do, but also document my process, in a search for openly licensed images.

The last time I did this in a workshop, 2 years ago, it fell a little flat because of the complexity of the Thimble (especially in the previous version). There are a lot of parts to it… but I think it takes a worksheet process to a new web level.

I am excited to cross this off of my todo list, but also to get a regeneration of my interest in Thimble. There are near limitless potential to what you could do, and then fold in the idea of every single one being remixable?

I have maybe another half a dozen old thimbles to update. Consider my interest re-lit.

Top / Featured Image: I had in my mind the title of this post, and was not surprised when I did not find an images with a flame and a thimble. So I made one myself. The thimble image is a public domain CC0 image from pixabay as is the one of the lit match.

Composited in Photoshop, The flame worked well with the Screen blending mode on the layer to make the black background go away, and then rotated a bit. I downloaded the white mozilla logo from peeking at the source code of https://learning.mozilla.org/— it is an SVG image, so I used Cloud Convert to turn it into a PNG (or try also FreeConvert.com). In Photoshop the image was resized, transformed with perspective, and then warped a bit to make it look more wrapped.

Now that I see the image, I hope no one at Mozilla thinks I am advocating burning them.

If this kind of stuff has value, please support me by tossing a one time PayPal kibble or monthly on Patreon