Preparation

• Make sure to create a Persona account for learners to use so they can save their work (or help them each create their own).
• The students will be remixing the code for the “Hey French Toast” javascript bookmarklet in Thimble. The instructions for editing are stored in comments within the code. Try remixing the Thimble code by following the comment-instructions before leading this activity, to be ready to troubleshoot with students when they get started.
• You could also create your own version of the bookmarklet for your students to remix.

Steps for the Activity

Install "Hey French Toast" Example Bookmarklet

Before hacking the javascript, follow the instructions on the Thimble Page to install the “Hey French Toast” bookmarklet on your browser. You’ll just drag the “hey french toast” button image from the “Preview” pane on the right into your browser’s bookmarks bar (usually underneath the address bar). Try it out on any website. Just browse to a site with lots of images, like a news-site homepage, or a Google image search results page, then click the “Hey French Toast” link that you just added to your bookmarks. If everything is working right, all or most of the images on the side should now be pictures of french toast!

Choose Your Own Theme

Now it’s time to make your own! First, you’ll need to pick a new theme for your bookmarklet to replace all of the french toast pictures. What’s your favorite food or celebrity or TV-show or musician or ANYthing - be creative (but school appropriate, please)!

Find Images

After you’ve got your theme, use Google Image search to find a bunch of images to replace the pictures of french toast in the original code. You’re going to need a bunch of different images of your theme, as you find them open each in a new tab (or copy/paste the image URLs into a text file. Here’s what to look for:

• 5 horizontal or “landscape” images (this means that the picture is wider than it is tall.
• 5 vertical or “portrait” images (taller than it is wide).
• 3 square images (both the height and width are the same).
• Make sure your images aren’t too big! Try to keep the width and height under 800 pixels each. Hint: you can use the ‘advanced search’ in Google Images to find ‘medium’ sized images.
• Your bookmarklet will be more fun if some of your images are animated gifs!

Remix the Code

Go to original French Toast Thimble link and click “Remix.” Scroll down to Line 72 in the Editor pane on the left to see the first instruction for making your own bookmarklet. All of the instructions to remix the code are inside the editor as comments. The comments will tell you which sections of code to change and which you can leave alone. Comments look like this:

• HTML comments:

   <!-- Hello! I’m an HTML/CSS comment. -->

• Javascript comments:

  // Hello! I’m a javascript comment.

Test

To see if your code is working, save and publish your Thimble remix and try to install your new bookmarklet in your browser. Go to any website and click the bookmark!

Discussion