the wwweb snorkeler

⚠ NOTE ⚠

This is very much an experimental addon I’ve developed by myself in a virtual vacuum… so I’m sure there are lots of bugs ( that’s just how these things go ). If you have any issues, bugs or general feedback please please please leave them on the WWWeb Snorkeler's github issues page.

If you or someone you know is a JavaScript / Mozilla Add-on pro and you'd like to help me continue develop the WWWeb-Snorkeler, OMG that would be so fantastic!!! please reach out on github ( @nbriz )

As I mention in The Browser: how it became the artist’s modern canvas episode most folks “surf” the web ( by which we mean simply consume content ) but developers ( who produce web sites ) often “deep dive” into web pages using a hidden feature in most browsers known as “Developer Tools”1. These developer tools allow you to view, examine and edit the source code of any website. The first browsers ( from the SmallTalk browsers to the first web browsers ) were all browser/editors and intended to be spaces for producing content as much as it was for consuming it. Inspired by the developers of those earlier browsers ( folks like Adele Goldberg and Tim Berners-Lee ) I’ve developed a Firefox addon for easily exploring, editing and saving the code behind the web pages we visit: the WWWeb-Snorkeler isn’t a “deep dive” like the developer tools, it’s designed for beginners and functions more as a “dip just below the surface” of the web.

download + install

You can download the latest version of the WWWeb-Snorkeler here on my github. When you do a .zip file ( archive file ) will be downloaded to your computer. Unzip that .zip file and in there you’ll see a folder with two files inside it, a file ( with instructions ) and a .xpi file ( that’s the addon ).

addon files

Then open Firefox and go to the Add-ons tab, theres a few different ways to get there:

  • click the menu icon near the top right of the browser and then click "Add-ons"
  • click on the "Tools" menu then choose "Add-ons"
  • type about:addons into your address bar

When you get to the Add-ons tab click the gear on the top right corner of the page ( to the left of the search box ) and then click on the "Install Add-on From File..." option. Then choose the wwweb_snorkeler .xpi file you downloaded inside the WWWeb-Snorkeler_v1.0.0-beta folder and you're good to go!

install addon

Using the WWWeb-Snorkeler

First, if you just installed the addon make sure you refresh any tabs that were open prior to having installed the Add-on before it'll work properly ( you could just as easily restart your browser ). You should see the WWWeb-Snorkeler icon in your Firefox Toolbar ( somewhere near the top right ). Click on that.

click on wwweb-snorkeler icon

For the Interactive Tutorials

The main reason for this plugin is to be a space for interactively following along with the tutorials. Most of the videos in the series will be covering code ( HTML, CSS and JavaScript ) and when that happens I’ll be demoing this in the WWWeb-Snorkeler. You can follow along and code with me directly in the WWWeb-Snorkeler editor by visiting the different tutorial pages referenced in the videos and opening up the WWWeb-Snorkeler and clicking the “Play Tutorial” button. These buttons only appear on special tutorial pages I’ve uploaded to this site. Otherwise the WWWeb-Snorkeler can be a tool for exploring any other page on the web.

playing with webpages

Your browser will open up the WWWeb-Snorkeler code editor on the left. There you will see the source code behind whatever website you’re on. You can edit any part of the source code and immediately see the change on the page to the right. You can close the WWWeb-Snorkeler by either clicking the X on the top right hand corner of the editor or by clicking the WWWeb-Snorkeler icon in your Firefox Toolbar again.

discovering different bits of code

Placing your cursor on certain parts of the code will make a yellow triangle with a question mark appear on the left over the number of the line you’ve clicked on. You can click on these yellow triangles to learn what that piece of code is for. This isn’t super helpful by itself, but alongside the tutorials in this series ( where we’ll be learning all this stuff in detail ) these tips will be helpful reminders.

cleaning up messy code

As explained in the Markup: in HTML something wrong is nothing wrong indentation isn’t required in HTML,CSS or JavaScript. Because of this you may encounter websites that look totally messy ( with no indentations ) and thus hard to read. Or you yourself might get lazy one day and write some sloppy code ( without clean indentations ). You can use the “clean up code” option in the tools menu to clean it all up..

html selector ( very buggy )

When you click the “html selector” option in the tools menu and hover your mouse over parts of the webpage ( to the right of the editor ) your cursor should look like a cross-hair. You can then click on any part of the page to learn about and edit just that piece of HTML. This is admittedly one of the buggiest features ( I may never get around to getting this to work just right ) so expect things to break… and when they do just refresh your browser to request a fresh/clean copy of the website your own ( ie. to reset things back to normal ).

HTML Template ( that looks out for your mistakes )

If you ever just need a blank html page to experiment on you can click on the “html template” option in the tools menu. This will open a new tab with a blank page you can mess around with. Unlike any normal webpage you might explore with the WWWeb-Snorkeler this page will throw errors when you make mistakes. As I explain in the Markup: in HTML something wrong is nothing wrong episode, when you make a mistake in HTML or CSS a lot of times the browser will simply do its best to fix your mistake for you rather than warning you of the mistake you’ve made. This is great, because it really lends itself to experimental work ( being able to embrace accidents and mistakes is key to making interesting Internet Art ) but this can also be a problem for beginners, because you can end up making the same mistake over and over again without realizing it ( until one day when the browser doesn’t know how to correct it for you ). For this reason, it can be helpful to have a space where your HTML and CSS are checked for errors, that’s what this page will do in realtime

Having Issues?

This is very much an experimental addon I’ve developed by myself in a virtual vacuum… so I’m sure there are lots of bugs ( that’s just how these things go ). If you have any issues, bugs or general feedback please please please leave them on the WWWeb Snorkeler's github issues page. You’ll need to create a github account if you haven’t already ( but that’ll come in handy for many reasons in the future, so well worth the minute that takes ).

Why is this only Firefox?

Unlike websites ( which generally look the same on any browser ) addons aren’t quite as standardized yet 2. So I would need to develop and maintain two separate projects if I wanted this to work across browsers ( and quite frankly, I just don’t have the time ). That said the project is open source, so anyone is free to fork it and make a Chrome version if they really really want to. You could then ask, “If you had to pick one, why did you pick Firefox?”, the short answer is because it’s my personal favorite browser, for technical reasons and political reasons. The latter has to do with user rights. Without getting into too much detail I’ll just say that Mozilla ( the nonprofit company that develops the Firefox browser ) has made it a core part of their mission to develop software that respects their users rights. Which is not to say that other browsers disrespect your rights, but rather that they have different priorities that may often come into conflict with what would otherwise be best for the end-user. Exactly what “rights” am I talking about here? ...all in good time, these are issues we’ll be discussing throughout this series.