It’s your Internet…start hacking it (part I)

There’s a tendency to think of the web like watching TV. Content is delivered and you either choose to take it as delivered or turn away. But, the web is more like a bunch of magazines that get delivered to your door. With scissors and some glue, you can remake those magazines into whatever you want.

The web is the same — all you need is the right scissors and glue. I’m going to introduce you some tools that will allow you start altering websites to work better for your purposes and we’ll do a small project to improve Twitter.

Let start with some very brief technical background. When you visit a website, the content you get is a combination of three things: HTML, CSS, and Javascript. HTML is the core content. The text, images, and videos are all specified by the HTML. The CSS makes it pretty by setting sizes, fonts, colors, and positions. Finally, the Javascript is what makes it “dance.” When you click a button and part of the page changes, that’s done with Javascript. Javascript is particularly useful because it can be used to change both CSS and HTML.

For our hacking here in part I, we’re going to be using a tool called Stylish to modify our Firefox browsing experience. Stylish is designed to allow you to easily update CSS. (In part II, we’ll use Greasemonkey to modify our Javascript.)

Before you do anything else, install Stylish into your browser. You can install Greasemonkey now too. Once they’re installed, you’ll see icons for each in your toolbar.

As you may recall, back in November ’05, Twitter changed it’s icon for “favoriting” from a star to a heart. Robert McNess put together a stylish script to revert those back to stars. We’ll be taking that and going a step further. Open up Twitter in Firefox and then click on the Stylish icon. Choose “Write New Style” and then “For twitter.com…” This will open up the Stylish editor.

Give your script a name and on line 4, paste in the following:

.HeartAnimationContainer, .Icon — heartBadge, WebToast-action — heart {
 visibility: hidden;
 }

.HeartAnimationContainer:after, .Icon — heartBadge::after {
 content: “🍺” !important;
 visibility: visible;
 display: block;
 position: absolute;
 }

.Icon — heart::before {
 content: “🍺” !important;
 }

This is CSS. It will be added to the CSS already on Twitter adjusting how the page looks. In particular, we’re doing two things: (1) hiding the heart and (2) replacing it with a beer glass. If you want something other than a beer glass, there is a wide variety of other options. You can use any unicode symbol you want. It is easiest to just copy them from one of the many directories such as KreativeCorp.

Once you save your script, reload Twitter. You should start seeing beer glasses or whatever icon you do pick ( 🐶, 🏄, 🍩).

This same technique can be used to hide, relabel, or otherwise adjust any site you want.

Have fun making the web better and please check back for Part II.