In an era where the web has invaded into all dimensions of life, understanding the language of the web has become important for people to actively participate in shaping the digital world, to change from passive viewers to “webmakers”. This idea led Mozilla to develop three different tools, The Popcorn Maker to “supercharge web video” (read our review), Thimble to “Make and share your own web page” and X-Ray Goggles to “Explore and remix any web page”.
Of these the tools, Thimble and X – Ray Goggles were developed with the purpose of helping aspiring “webmakers” familiarize themselves with the language of the web. Let’s take a look
X-Ray Goggles
To design a web page one must have an understanding of it and one of the best paths towards enlightenment would be to look into the code of existing websites. X-Ray Goggles is a bookmarklet that makes it easy to analyse the building blocks of a web page and customize it.
Using X-Ray Goggles
To install it, go to the web page and drag the X-Ray Goggles button to your bookmarks toolbar. Once you have done that, go to any web page that you desire to look into and customize, and activate the bookmarklet. Make sure that your browser doesn’t block the script from running.
Some websites might block X-Ray Goggles from running
Once X-Ray Goggles is activated you can get a quick overview of the tags used in the page by hovering over the elements. Click on any of the elements in the web page and the remix window pops up where you can make the changes and commit. Tap “h” to get a list of keyboard shortcuts for the app. One thing I noted here was that X-ray goggles couldn’t remix larger elements.
Remix the page to your liking
Once you are done, press “p” to publish your work as a new web page or to get the HTML code of the web page.
Publish your remixed page or download the html code
Caution: Don’t go on a remix spree once you start using X – ray goggles. Make sure that the content that you publish is not copyrighted.
Pros
X-Ray Goggles is a great tool for you to quickly inspect webpages. This helps you understand page layout of web pages quickly and easily. Further, the remix tool also lets you use any web page as a starting point for your own design.
Cons
I would have liked X-Ray Goggles better if it had more functionality. Unlike a web browser’s developer tools, the bookmarklet shows only the tags enclosing the web page elements and not their style attributes prior to remixing the page. It does not show the style attributes that you define for a tag.
Mozilla Thimble
Thimble is a web based project, that provides a simple and easy to use development environment for coders with support for HTML and CSS.
Features
The Editor
Nope, it does not have the sophistication and complexity of a full fledged editor. It rather features a minimalistic notepad like editor where you can type in your code. The editor supports code coloration and has a built-in simple spell checker and hints to help you with the code syntax.
Simple notepad like editor with live preview
The preview frame shows you a live preview of your html code as and when you type it in. This makes correcting mistakes a lot easier, since you’ll know exactly what caused a problem as soon as you type it.
Hints, a handy option for beginners
Once you’ve finished designing your web page click the publish button. Thimble will host your page and provide you with two URLs – one for sharing on the web and another to edit your page.
Publish and share your webpage
Remix
You also have the option of remixing existing projects if you do not want to design a page from scratch. Just click on the project, edit it and publish it as a different web page.
What I like
I like the simplicity of the editor. it sports just the undo/redo buttons and a dropdown to select the font size. Add to it the live preview option and you can easily track errors. I also like the one click publish. Click the Publish button once and you’ve got yourself a one page website, a web portfolio, or an ad.
What I don’t like
While remixing is good it is also a drawback in Thimble. Suppose you wish to make changes to the page you just published, you might think “ no problem, I have the url to edit the page”.
But wait…
Thimble saves the edited page as a new web page with a different url. So the previous page becomes redundant.
Another drawback is that Thimble, as of now, doesn’t support javascript (The app cites security reasons).
Final Thoughts
I believe that Mozilla through its set of webmaker tools and projects are on the right path to achieve their goal – “To help millions of people move from using the web to making the web.” But these efforts would yield better fruit if the webmaker tools are refined and more funtionality is added. As of now, these tools have a long way to go to distinguish themselves from other like-minded apps out there on the internet.