User scripts are javascript files with the extension ‘.user.js’ that are executed client-side to add functionality to a web page. They are natively supported by chrome and opera and are supported via extensions in most other browsers of any note. (Some include Greasemonkey for Firefox, GreaseKit for Safari and Trixie for IE).

I succeeded in reskinning the whole website which was pretty fun. There seems to be a limit to the usefulness of userscripts in that support for the ‘@run-at document-start’ flag which I believe should make the script run before any scripts on the page do, is not supported by most browsers. It’s not all that useful a flag anyway as I imagine you’d often want the script to run after the DOM has been written so that you can work with the content expected to be on the page. In this case however it would be useful as I attempt to strip out a script on the course page that redirects 1% of all hits to a rickroll (sigh). As such the script still runs before the userscript and so the rickrolling still happens.

I might also put some more time into the replacement style sheet some time soon.

Original

Reshaped and restyled

Code after the break.

Final Code:

// ==UserScript==
// @name           !cs16chan
// @namespace      http://zethrae.us
// @description    Strips mematic content from the cs16 course website
// @include        http://cs.brown.edu/courses/cs016/*
// @include        http://www.cs.brown.edu/courses/cs016/*
// @run-at document-start
// ==/UserScript==

(function() {
 //the following function is from http://snipplr.com/view/1696/get-elements-by-class-name/
 //the internet claims that document.getElementsByClassName() is supported in firefox 3.
 //this doesn't seem to be the case on the CIT machines, so I guess this will have to do.
 //and yes. if i was writing this again, I'd just include and use jquery.
 function getElementsByClassName(classname, node) {
 if(!node) node = document.getElementsByTagName("body")[0];
 var a = [];
 var re = new RegExp('\\b' + classname + '\\b');
 var els = node.getElementsByTagName("*");
 for(var i=0,j=els.length; i<j; i++)
 if(re.test(els[i].className))a.push(els[i]);
 return a;
 }

function insertAfter(parent, node, referenceNode) {
 parent.insertBefore(node, referenceNode.nextSibling);
}

function strip_css_js(){
 var jsToRemove = document.getElementsByTagName("script");
 for (var i=jsToRemove.length; i>=0; i--){
 if (jsToRemove[i] && jsToRemove[i].getAttribute("src")!=null){
 jsToRemove[i].parentNode.removeChild(jsToRemove[i]);
 }
 }
 var cssToRemove = document.getElementsByTagName("link")
 for (var i=cssToRemove.length; i>=0; i--){
 if (cssToRemove[i] && cssToRemove[i].getAttribute("href")!=null){
 cssToRemove[i].parentNode.removeChild(cssToRemove[i]);
 }
 }
 }

function import_css(source) {
 var link = document.createElement("link");
 link.href = source;
 link.rel = "stylesheet";
 link.type = "text/css";
 document.getElementsByTagName("head")[0].appendChild(link);
}

//removes memes that won't be wiped by the fix_markup function
function strip_inline_memes(){
 var tagline = document.getElementById('tagline');
 tagline.parentNode.removeChild(tagline);

 var footer = document.getElementById('footer');
 footer.parentNode.removeChild(footer);

 var images = document.getElementsByTagName("img")
 for (var i=images.length; i>=0; i--){
 if (images[i]){
 images[i].parentNode.removeChild(images[i]);
 }
 }

var memesbyclass = getElementsByClassName('preH1').concat(getElementsByClassName('postH1'))
 for (var i=memesbyclass.length; i>=0; i--){
 if (memesbyclass[i]){
 memesbyclass[i].parentNode.removeChild(memesbyclass[i]);
 }
 }

}
function fix_markup(){
 var header = document.getElementById('header');
 header.parentNode.removeChild(header);

 var head1 = getElementsByClassName('h1')
 for (var i=head1.length; i>=0; i--){
 if (head1[i]){
 var newheader = document.createElement("div");
 newheader.innerHTML = "<h1>CS16 / "+ head1[i].innerHTML +"</h1>";
 head1[i].parentNode.replaceChild(newheader,head1[i]);
 }
 }

 var nav = document.getElementById('nav');
 var navcontent = nav.innerHTML;
 var newnav = document.createElement("div");
 newnav.id = "navigation";
 newnav.innerHTML = navcontent;
 nav.parentNode.removeChild(nav);

 var content = document.getElementById('content');
 content.insertBefore(newnav, content.firstChild.nextSibling.nextSibling.nextSibling.nextSibling);

}

strip_css_js();
strip_inline_memes();
fix_markup();
import_css("http://zethrae.us/work/bangCS16chan/style.css");
})();

This was all intended to be tongue in cheek. But yes, memes from ’06 are rather annoying to see every day. And there wasn’t even longcat.

The idea of the feature is to allow for dynamic newspaper style columns on a website. Columns have ordinarily been unachievable though any means but manually separating up content (which would still give unpredictable results).

I’m in the camp that wants the web to be both usable and pretty even with javascript turned off. I’ve missed lots of neat aspects of websites as a result of browsing behind NoScript in past. I think it would be very difficult to make a website designed with such drastic styling done with javascript degrade gracefully in a browser with the tool disabled. However, from a designer’s perspective, this is still one of the most interesting JQuery plugins I’ve seen yet.