How Dark Patterns Trick You Online
It’s a basic tool that with a single click alters the functionality of your viewed web-page, such as changing text, colors, searching a highlighted word online, or translating a page. It is designed to customize and alter the current experience.
They are essentially small lines of Javascript (or jQuery) that alter a page’s HTML or CSS.
Dan Shiffman’s
Lee’s
In 2018 the New York Times featured the article The Simple, Serendipitous Joy of Browser Extensions. Days earlier the Times had printed an article that referenced the Time of Shedding and Cold Rocks. It was an error in printing. A page editor had the browser extension on and it changed the word Millenials to Snake People and other satirical changes, that then were saved and somehow made it to the print edition of the Times.
As the name implies, a browser extension is a plug-in that you add to a web browser to extend its functionality. In my browser I currently have ad-block extensions, a color picker, and an extension to make it easier to navigate via keyboard instead of the mouse. They are created with standard website creation tools HTML, CSS and Javascript. Browser extensions can make certain tasks simpler, like the ability to easily tweet a link to the current page you’re browsing
Airhorn by Todd Anderson
Hitchhiker by Todd Anderson
Yung Jake - Embedded (site is down) - Original no longer works. Read this article about the video.
Discernment Music Video - extension by Dina Kelberman - I highly recommend trying this interactive music video in your browser out! It lasts five minutes. Don’t have anything important (that is unsaved I mean) open in your web browser before running!
For this assignment, please use Google Chrome! Each browser works differently when it comes to bookmarklets, so it will be easier for us if we use the same browser. Once you get it to work, feel free to try another browser.
Make a simple bookmarklet to funkify the web. Your bookmarklet, when you click on it, should add CSS, change placement of things, alter words or otherwise affect the page a viewer is looking at.
For inspiration, check out a previous year’s iteration of my Scripting class site for heavy CSS hacking, or make your own easy-to-read-hack, or alternative-dark-mode or remove-adds on a website you frequent.
You should use a querySelector to grab HTML and CSS and change them.
Add a unicorn to Any page bookmarklet
Change the font to Papyrus on any page
Watch the video linked above
Additional Coding train videos.
For complete info and requirements, see homework section in the week 4 notes or on Moodle.