Hacking The Browser

Hacking the Browser - Week 2: Create a bookmarklet against users

PREVIOUS POSTS:

Week 1: Create a responsive web site

 

TITLE: Bootstrap is the new Geocities

DATE: Feb 7, 2017

INSTRUCTORS: Cory Forsyth

 

When I was preparing my website for graduate school application last year, I knew nothing about web development and I learned how to use bootstrap. I was so fascinated with it, which made making a responsive website easy enough for beginners.

But things have changed when I keep digging deeper into web development. The layout of bootstrap becomes lack of attraction since all the web pages based on bootstrap look similar. It seems a little boring nowadays.

Obviously, there are some weirdos have the same feeling with me. Let me introduce it with a great honor: Geo Bootstrap

The author of Geo Bootstrap.css is brilliant, based on bootstrap and bootswap, he built a very funky CSS for bootstrap based website. It will take you back to windows 95, when there is no flat design, user experience research, and full bleed banners, which means, it works against its users.

Here is the source code of my bookmarklet, I call it Bootstrap is the new Geocities. It works on websites that use bootstrap, like NBA, Lyft, Walmart, Codecademy and Vogue, changes the design styles and images of the website back to the golden 95's.

  • Drag the link on the right to your bookmark bar:

The 95's style reminds me of my childhood when I sneaked into that internet cafe to play DOS games and click those meaningless links waiting to see a strange world. 

 

My reference include:

How to get the stylesheet: https://dzone.com/articles/automatically-reload

How to change the images: images swap chrome extension by Leon Eckert

Generate bookmarklet: http://chriszarate.github.io/bookmarkleter/

 

The bookmarklet I found is Warp! (https://www.andrewt.net/blog/a-stupid-bookmarklet)

It wraps the content of website every time I click it, very simple and elegant. Though it lost me when I reverse engineering it..

It uses 

document.getElementsByTagName('*')

to select all the content and a callback function to control the animation. But also I'm a little confused about this part:

for (var y = 0, t, s = strength / f[x]; y < 4; ++y) m += (m ? ', ' : '') + ((Math.random() * s - s / 2) + (x == y));

since it doest have {} in it, which part is in the loop?

And how it tell the times you click is also sort of misery to me.