4
$\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$
2
$\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$
  • $\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 - Reinstate Monica Feb 25 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.