Tench Cholnoky
Projects
p.01
p.02
p.03
p.04
Project Overview
The Web Scramblyfier is a chrome extension I built over the course of a month and a half. It originally started as a small experiment for a class that I had enjoyed, and a few years later decided to go back and make it into a full fledged chrome extension. It’s available to download in the chrome store.
The Web Scramblyfier works by inserting a javascript file into every webpage you visit, which is listening to the scrambler chrome extension menu. When that menu sends out a command to scramble, the Web Scramblyfier embedded in the page randomizes specific css properties of different web elements. The end results are bright abstract collages of spaghetti websites, which users can still interact with.
Scope
The goal of the Web Scramblyfier was twofold: first to make a fun chrome extension that would teach folks a little bit about how the web was structured through play, and secondly to provide a tool for folks more accustomed to web development to create abstract art. To cater to each user base I wanted to make a simpler area with a few buttons to scramble all css parameters for divs, headers, and p tags, as well as a custom scrambling option with a variety of parameters that people could tinker with to refine the scrambling process.
Code
The web scramblyfier is separated into two main parts, the GUI and the injected code. The GUI consists of an html page with css and a short javascript file. That javascript file takes the information given by the user about the type of scrambling they want to do. If its a template scramble (all divs, headers, or p tags) the message is simple. If it’s a custom scramble the GUI javascript file sends out a custom scramble object with a variety of different values. The GUI Javascript file can be found here.
The injected javascript code waits in the web page until it recieves a message from the GUI file. When it does, it scrambles different web elements based on what kind of message it recieves.
If it is a preset scramble, it will randomly scramble within predetermined parameters.
If its a custom scramble, it goes through the custom scramble object that was sent by the GUI and parses the data, using the minimum and maximum scramble values set by the user, as well as the css properties and html elements specified.
User Testing
I decided on doing a beta test with some users from each of my two target audiences, and asked them to play with the extension for at least thirty minutes and give me feedback. The biggest piece of feedback I got was asking for a website reset button from both groups. The web experts wanted font size options and guideline parameters removed. The folks who didn’t have much web experience didn’t play with the dev tools very much, and mostly stuck with the presets. They had a little bit of a hard time understanding what a p tag and div were, but a few said that they learned through playing with what parts of a page got distorted each time they scrambled.
I implemented the reset button, as well as adding font options and removing all guidelines for the dev tools. In the future I’d really love to add in a transition timer slider, where people could choose to smooth out the css transitions of the Scramblyfier. Right now that functionality is in a closed beta.
Results
Testimonials
The Web Scramblyfier has overwhelmingly positive reviews, including
“Interactive glitch art, anarchic, so pretty, a great reminder that what's on screen is a calculated fabrication, useless, perfectbest chrome extension that exists”
and
“a haiku:
the egg of the web
under-hard, over-easy
scramble away, boys“
The source code can be found on github.