web maker html goggles












AppStorm

Web.AppStorm

Web Apps

  • Web
  • Home
  • Reviews
    • AIR Apps
    • App Management
    • Blogging
    • Chrome
    • Communications
    • Copyright
    • Data Management
    • Email
    • File Management
    • Finances
    • Fitness
    • Gaming
    • Graphic Design
    • Holiday
    • Images
    • Media
    • Mobile
    • Office
    • Portfolio
    • Project Management
    • Social Networking
    • Storage
    • Twitter
    • Web Dev
  • Roundups
    • Account Management
    • AIR
    • Browsers
    • Communication
    • Data Management
    • Design
    • Email
    • Finances
    • Freelancing Tools
    • Games
    • Holidays
    • Icons
    • IDE
    • Media
    • Mobile
    • Philanthropy
    • Presentations
    • RSS
    • Self-publishing
    • Shopping
    • Social Media
    • Start Pages
    • Task Management
    • Time Management
    • Tips & Tricks
    • Travel & Recreation
    • Video
    • Web Development
    • Web Hosting
    • Web OS
  • How-To
    • App Management
    • Bookmarklets
    • Collaboration
    • Data Logging
    • Gaming
    • Marketplace
    • Microblogging
    • Office
    • Personal Media
    • Planning
    • Productivity
    • Social Media
    • Web Dev
  • General
    • App News
    • AppStorm News
    • Ask The Editor
    • Features
    • Giveaway
    • Interviews
    • Opinion
    • Sponsors
    • Web.AppStorm News
    • Weekly Poll

Mozilla Webmaker Tools: X-Ray Goggles & Thimble
Web Dev

Mozilla Webmaker Tools: X-Ray Goggles & Thimble

Godwin Jebakumar on March 29th 2013

  • Mozilla ,
  • thimble ,
  • x-ray goggles

Check out the best Web Dev Apps on GetApp

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

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.

goggles block

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.

goggles remix

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.

goggles publish

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 main

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.

thimble editor

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.

hint

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

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.

Check out the best Web Dev Apps on GetApp


  • Our Score
  • Related Posts

Summary

Tools to create webpages from scratch or remix existing webpages and publish them

  • X-Ray Goggles, Thimble  | 
  • Free. Open Source  | 
  • Mozilla

6


X-Ray Goggles, Thimble

Reviewed by Godwin Jebakumar on

Mar 29
.
Tools to create webpages from scratch or remix existing webpages and publish them

Rating:
6 out of
10

Related Posts

  • Mozilla Popcorn Maker – The Future of Media?
  • Mozilla Marketplace: The One-Stop-Shop App Store for All Devices?
  • Notifications and the Web
  • How Mozilla Can Resurrect Phone Web Apps

Popular Posts

2018 Top 5 Business Apps

AppStorm

Apps reviewed, explained & rounded up.
Terms of Use – Privacy Policy

AppStorm is a registered trademark of Nubera eBusiness, S.L. in the U.S.