.                  .-.    .  _   *     _   .
            *          /   \     ((       _/ \       *    .
          _    .   .--'\/\_ \     `      /    \  *    ___
      *  / \_    _/ ^      \/\'__        /\/\  /\  __/   \ *
        /    \  /    .'   _/  /  \  *' /    \/  \/ .`'\_/\   .
   .   /\/\  /\/ :' __  ^/  ^/    `--./.'  ^  `-.\ _    _:\ _
      /    \/  \  _/  \-' __/.' ^ _   \_   .'\   _/ \ .  __/ \
    /\  .-   `. \/     \ / -.   _/ \ -. `_/   \ /    `._/  ^  \
   /  `-.__ ^   / .-'.--'    . /    `--./ .-'  `-.  `-. `.  -  `.
 @/        `.  / /      `-.   /  .-'   / .   .'   \    \  \  .-  \%
 @&8jgs@@%% @)&@&([email protected]_=_-=_-=_-=_-=_.8@% &@&&8(8%@%8)(8@%8 8%@)%
 @88:::&(&8&&8:::::%&`.~-_~~-~~_~-~_~-~~=.'@(&%::::%@8&8)::&#@8::::
 `::::::8%@@%:::::@%&8:`.=~~-.~~-.~~=..~'8::::::::&@8:::::&8:::::'
  `::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::.'

Tutorial


Using Bookmarklets

Let's try to execute some of the bookmarklets I've preassembled so we can feel what they do.

  1. Browser: This tutorial assumes Google Chrome. I'm sorry
  2. Make sure to show your bookmarks bar:
    Hit CMD + Shift + B (or CTRL + Shift + B on windows) to toggle the bookmarks bar.
    Or, in your browser settings (or when you open an empty tab), make sure the 'Show bookmarks bar' option is checked so you can always see your bookmarks.

    Verify this by clicking on another tab and ensuring you can see your bookmarks.



  3. Try dragging one of the sample bookmarklets into your bar
    (They're decently descriptive.)
  4. Visit any website. Some of my favorite websites to try these on:
    – Wikipedia
    – Google Images (try a search like 'Flower' or 'Adrien Brody')
    – Google Maps
    – YouTube
    – Anything text-heavy
    – Anything image-heavy
  5. Click on your bookmark to execute it.
  6. Try dragging several bookmarklets into your bar. Play several of them: slowly, or all at once, or in sequence.

    – What websites are they suit for?
    – Can different bookmarklets work together?
    Can you play with zoom controls in addition to clicking?
    Can you duplicate and arrange many windows?
    – When do you trigger or sequence each bookmarklet?
  7. When you refresh the page, all the bookmarklets will be gone, and it will be like life anew.

A bookmarklet takes the bookmarks on your browser (where you'd click to open a page, like your favorite website or social media platform) and replaces the URL with a small, self-contained piece of Javascript that can be run.

The beauty of bookmarklets is that they can be run on any site, they can run multiple times, and you can run several different pieces of code at once.

We are essentially treating our browser's bookmarks bar as an instrument, with the different bookmarklets as little things we can strum.



Prompting

Steps

  1. Go to an AI assistant: Open a new tab and visit Claude.
  2. Let's ask it to write a bookmarklet for us.

    Example prompt

  3. Make sure the code you've been given is Javascript code that begins with javascript: – if it's not in this format, you might have to prompt it and ask for *a bookmarklet* specifically again.

  4. Now, let's make it into an instrument.
    Right-click your bookmarks bar and select 'Add page'.
    – Name your bookmarklet anything you'd like.
    – Delete the URL and then paste in your own code.
  5. Now, find it in your bookmarks list. If it's too far down, you might have to click the > chevron, find it, then drag it to your bookmarks bar so it's easily accessible.
  6. Click on it to play it.

    Here's the bookmarklet I have after the prompt: Write a Javascript bookmarklet I can paste into a bookmark to look at all inputs in the page, and randomly type "I love you" "I want you" "I hate you" in them, character by character. Every input field should be filled at once. Include error handling and make it work across different sites. Make it compressed and self-contained.

    I opened a random Google Form I had in my browser history to try it.


  7. Repeat this, saving at least 3–4 bookmarklets into your bookmarks bar:

    Come up with some combination of bookmarklets so that you can run multiple of them in succession, on a single site or on several.

    ⤷ What combinations of bookmarklets are you liking?

    ⤷ What aspects of the page do you enjoy manipulating?

    ⤷ Are you drawn to generative, or destructive bookmarklets?

Reflections

⤷ How does it feel to change someone's website?

⤷ What interventions feel most powerful or meaningful?

⤷ How does the ephemerality of these interventions feel, against the exercises you coded yourself in the last session? How did temporary vs. permanent change affect your willingness to experiment?

⤷ What websites did you gravitate towards?

⤷ How would you think about presenting these changes?

⤷ How does this feel different from customizing your own profile?

⤷ What unexpected visual or conceptual relationships emerged from your interventions?

⤷ How might you chain multiple interventions together to create a narrative?

⤷ What other ways might you think about manipulating websites?