6
$\begingroup$

What is a User Script?

Useful tasks like improving layout, fixing bugs, automating common tasks and adding new functions can all be done by userscripts. More complicated userscripts can create mash-ups by combining information from different websites or embedding new data into a web page, e.g. to add reviews or price comparisons to a shopping website.

Source: https://github.com/OpenUserJs/OpenUserJS.org/wiki/Userscript-beginners-HOWTO#what-is-a-user-script

A user script is programming that modifies the appearance or behavior of an application. A user script for a Web site, for example, can customize the way that content will display in the host browser.

Source: http://whatis.techtarget.com/definition/user-script

I'm planning out a curriculum for my web development class next year, and based on a comment by Sean Houlihane I realized that userscripts could be useful as a teaching tool so that students can see results immediately, and actually make use of their front-end skills as soon as they know the basics.

Before I would introduce my students to this, they'd have to understand the basics of HTML/CSS/JS. If my students already have basic knowledge, how useful could userscripts be as a teaching tool and what are some ways in which I could use them?

Some potential issues that I foresee are:

  • It'll be complicated. For a major website, the stylesheet could be thousand LoC.
  • Minification. Especially for JS. It makes it very challenging to modify existing code if it has been minified. Even when re-prettified, it can still have terrible variable and method naming.

Working around these issues, what are some uses for userscripts as a teaching tool and in the classroom?

$\endgroup$
1
$\begingroup$

I've thought about using userscripts as a tool, or even a foundation, for teaching front-end web development as well but haven't had an opportunity to try it out yet (I'll update this when I do!), so please take my musings with a grain of salt.

The "power user" vs "user" mentality

Userscripts are fundamentally a productivity tool. They offer organization, standardization, convenience and automation for power users. These benefits aren't likely obvious to entry-level programmers, especially younger audiences who are generally happy interfacing with technology in a very direct, surface level manner and probably won't see a pressing need to add a usability feature to, say, avoid repetitive tasks in their favorite app.

While obvious educational opportunity exists here, I'd use caution to avoid over-emphasizing tools and concepts that are really geared towards programmers and power users rather than application users. It takes time for programming students to switch to a hacker/power user/automator mindset and appreciate things like git, design patterns, memory management, databases and so forth. I'd put userscripts in this bucket as well.

Teaching browser development tools is usually enough

When most of us teach broswer developer tools to entry-level programmers, we usually do fun stuff like the classic day-one activity of "hacking" Wikipedia or Google by changing article headers or search results. Although there's subtle practical power here that userscripts help harness, this is mostly a fun and zero-installation way to get them used to HTML, CSS and JS (what they are/do, what do they look like) and build familiarity with the tool they'll soon be using to debug their own sites.

It's powerful to show students that they can easily look at and even manipulate the source that powers the websites they're visiting. One of the amazing aspects of the web is that the source is right there in front of you! There's a big "wow" factor there.

But how far does the magic carry a curriclum? It's probably pretty short-lived, and a deep dive into the console has diminishing returns for early programmers. Students will want to get on to making their own app than messing endlessly with other people's apps, and for good reason. One must write HTML, CSS and JS from scratch to understand it, and no amount of developer tools offers this. For more experienced programmers, this is less of an issue.

Who's the audience?

As with any educational tool, audience is everything. If the audience is a bunch of adults that are tired of repetitive clicking at their jobs, userscripting seems like a great way to empower and engage them without much effort.

For younger audiences, I'd try for creative projects. Userscripts can automate playing online games like cookie clicker, manipulating a Discord chat in real-time, or tweeting responses to certain messages automatically. It'd be interesting to try to make online art with userscripts by applying radical and surprising alterations to web pages.

Even if these sort of projects are cool, it's not clear that anything more than copy-pasting code (written in, say, Notepad++ or an online editor) into the console is necessary.

Bookmarklets also offer persistence and relative ease of operation without a full-fledged userscript, with the downside that they're inelegant and more restrictive. I recommend The Coding Train's bookmarklet challenge. Interestingly, I don't see any userscript content (or suggestions that Daniel cover userscripts) from them.

A userscript-focused curriculum seems like a better fit for an audience of programmers who know HTML5 basics, have made a few basic sites, games and apps and want to apply their skills to something new and interesting.


Advantages

Some advantages I can see of teaching JS (and HTML/CSS) through userscripts:

  • Environment set up is easy and userscript manager extensions like Tampermonkey have a built-in editor
  • The coding is approachable, with caveats below
  • Students work with other people's code, develop an appreciation for the complexity of real websites and gain exposure to many useful concepts
  • It's empowering to be able to customize popular websites
  • There are plenty of opportunities for creative projects
  • Because the site is already created, there's less of a feeling of blank canvas or intimidation of building a huge project from the ground up to make something cool and useful
  • Students can explore existing scripts
  • It's rather unorthodox, so your curriculum stands out from the crowd. It could catch on like Automate the Boring Stuff with Python, an incredible book that manages to teach programming through a productivity lens in a way that's accessible and fun for nearly all audiences with basic computer literacy.

Disadvantages

  • Could be dry and de-motivating for the wrong audience; userscripts tend to be productivity/tooling -centric
  • Potentially too much reliance on the console environment at the expense of obviously-beneficial greenfield projects built by hand (inexperienced students will need to do those anyway -- userscripts aren't a drop-in substitute)
  • Not really a key skill, writing userscripts is always a sideline even among web programmers
  • Possibly diminished sense of ownership relative to a greenfield app project
  • Websites can change a lot and have hidden or nondeterministic complexities like A/B testing that break userscripts (and your assignments) easily
  • As suggested by OP, the massive size and complexity of sites can be intimidating, although dev tools does a great job of handling minified, modern production sites thanks to the live interactive virtual DOM tree
  • Although the coding isn't typically advanced (running document.querySelector() and calling .click() or setting style attributes, injecting innerHTML, etc), writing userscripts can easily slide into a plethora of advanced concepts like asynchrony, event listener behavior, DOM loading and resource requests, element visibility minutiae and countless other things an experienced programmer takes for granted or can research in situ, but are sometimes prohibitive to introduce to beginners.

Project idea brainstorm

"Fun" project ideas for "kids" (some adults qualify)

  • "Prank" a site to change the behavior in a subtle way, like making buttons run away from the mouse when the user tries to click on them. I've done these with kids and they enjoy showing the sites to their parents, teachers and friends.
  • Expanding on the Twitter/Discord userscript idea: you can add a MutationObserver or poll the message feed. When certain messages appear, the script can type a response. As a simple idea, the response could be a quote or gif pulled from an API, or could perform simple commands like "add two numbers". This can create pretty exciting emergent behavior for students with multiple bots talking to each other. (Yes, you could write a legitimate Discord bot, but this achieves much of the same result with less effort)
  • Create animations using requestAnimationFrame, setTimeout and setInterval. Options are endless: make page text scroll like the old <marquee>, make background colors morph to make psychedelic patterns (seizure warning), add an animation trail to the mouse cursor, stretch page images comedically...
  • Think creatively: manipulate Wikipedia text to create a mad libs story, blackout poetry or interactive fiction narrative.
  • HTML5 audio is wild. For starters, check out the Web Speech API. Students create a userscript which reads the contents of a website or lets them type into a website by voice.
  • Pointless fun: add rainbow color schemes to serious government websites, replace depressing images in the news with unicorns, automatically trigger clicks on links to browse sites programmatically, for example to play seven steps to Jesus (probably use something other than Jesus, but the idea applies), etc.
  • Use a machine learning library to analyze text sentiment on a page.
  • Use a machine learning library to analyze a video stream and manipulate the page, for example, change background when you blink.
  • More pointless fun: Make text shake when you type or add physics to webpages using Matter.js.

As with any technology project, there's a lot of potential for abuse here, so it's important to keep it fun and remind students about not spamming, being nice online and not accidentally deleting a profile or sending their bank account balance to a phisher because of a script run amok.

"Serious" project ideas for "adults" (some kids qualify)

  • All things API: fetch data from somewhere and put it into something. For example, hovering over a word with the mouse fetches a dictionary definition that appears in a tooltip.
  • Changing color schemes to improve usability on a site
  • Macros for repetitive tasks and accessing features buried in menus
  • Use localStorage or even a backend app with a database (could be hosted on glitch for free) to remember specific actions taken on a page, for example, keep track of songs listened to on Bandcamp
  • Instead of wasting time watching the Gmail/Hotmail logo when booting up email, show news headlines, a random fact or random Wikipedia article
  • Injecting Codemirror into textareas to use, say, Vim keybindings
  • Improving page load times by blocking resource requests
  • Automatically dismissing annoying pop ups
  • Programmatically importing data into forms
  • Scraping data that isn't easily copy-pasteable and without writing a back-end app
  • Filtering unwanted posts and distracting features in social media streams
  • Did I mention web audio?

It turns out these are basically console/bookmarklet projects that aren't exactly essential to userscripting per se (and in many cases not inherent to the console environment), although userscripting certainly can help facilitate delivery.

Also, much of these ideas are already implemented as bookmarklets, pre-written userscripts or browser extensions (extensions are another thing worth considering for this sort of curriculum). It's OK to reinvent the wheel in the interests of learning and having fun.


To summarize, userscripts are an interesting tool and there's definitely plenty of potential for educational use. A strong curriculum targeted to the right audience could offer an original angle to learning programming, but at the end of the day, the focus would really be on manipulating sites through the console and developer tools, with userscripts a handy way to streamline that process rather than an end in and of themselves.

$\endgroup$
3
$\begingroup$

I think there's one step between knowledge of HTML/CSS and writing userscripts: knowledge of Developer Tools in Chrome, especially the "Elements" tab. One demonstration students loved seeing was when I "changed" the school website. I simply right-clicked, selected "Inspect", and modified the text. I had to explain to students that I didn't really change the page but that I modified it locally and could "restore" it by refreshing, but it was a lasting demonstration, something they continued to bring up throughout the semester. (This demo also relates to what I said here about the value of CodePen because you can see your work live.)

Even if there are thousands of LoC, you can get right to where your element is and see the entire path down the "tree" to this element. One fun demonstration is to show students how to "delete" a pop-up from a site or remove an ad or some other obstruction/intrusion by inspecting the page to "search and destroy" what you want to get rid of.

Consider Bloom's taxonomy here. You have an opportunity to move up the ladder as follows: Comprehension/Knowledge (basic HTML/CSS) --> Application/Analysis (Developer Tools/Inspect) --> Synthesis/Creation (Userscripts). This progression is important to keep in mind so as to adequately prepare students for creating something meaningful of their own, and I think the study of how popular sites are structured will aid in this process. Hacking away for fun at a page may give them an idea for what would be cool to script themselves.

The teaching benefit is such that you can unleash students' seemingly unlimited creativity as they write helpful scripts for their own personal browsing experience. Yet, as you note, it does not come without challenges and must be approached methodically.

$\endgroup$
1
  • 1
    $\begingroup$ Wonderful! I'd just like to point out that the developer tools are not specific to Chrome. Firefox and Safari both have quite capable dev tools as well (I don't have experience with any other browsers). Let's not forget that Chrome isn't the only browser! $\endgroup$
    – SilverWolf
    Feb 25 '19 at 5:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.