[Webmaker] Idea: Dev Tools as model for Web Lit Tools?

Dethe Elza dethe at mozillafoundation.org
Wed Dec 18 13:42:02 PST 2013


The cool thing is you can build webmaker tools into Dev Tools itself, because it takes add-ons, and thanks to Jetpack you can write add-ons in Javascript (and HTML/CSS/SVG). There is an example of that written up on the hacks blog: https://hacks.mozilla.org/2013/12/ember-inspector-on-a-firefox-near-you-2/.

I just talked with Jeff Griffiths, PM for Dev Tools and he says there are a bunch more APIs coming soon to help support these types of extensions to the dev tools, but it can certainly be done now.

Some nice things fall out of that. From an add-on you can add features to a page (like a Remix button everywhere) and you have access to the debugger for much more powerful interactions than you can get in a normal web page.

--Dethe

On 2013-12-18, at 12:34 PM, Michelle Thorne <michelle at mozillafoundation.org> wrote:

> Hey David,
> 
> I love parallel discovery! Tobias Leingruber and I have been brainstorming
> similar ideas, namely "Webmaker Tools" in Firefox.
> 
> As you describe, this could be a simplified mode of the Dev Tools.
> 
> Imagine a "remix button" on every web page. Or an easy-to-use editor so you
> can modify web pages as you surf. We could also level up some great
> visualization tools, like 3D and Tilt, to expose the structure of a web
> page. Users could publish remixes via the MakeAPI.
> 
> There is also great opportunities to integrate existing Mozilla stuff. MDN,
> for example, would be a really useful to link to. And of course surface our
> teaching kits and other resources so people can learn more about a
> particular skill--and how to teach it to someone else.
> 
> This is a really compelling line of thinking--would love to hear from
> others and maybe make some mockups! ^^
> 
> // m
> 
> 
> 
> On Wed, Dec 18, 2013 at 1:19 PM, David Humphrey <
> David.Humphrey at senecacollege.ca> wrote:
> 
>> I have been thinking about a tweet by Christian Heilmann from earlier
>> today:
>> 
>> https://twitter.com/codepo8/status/413363661143416833
>> 
>> He's linking to a pic of what the Developer Tools look like in Firefox
>> (hint: they are really becoming amazing, and if you haven't played with
>> them, you should).
>> 
>> In 2014 one of the things I want to explore in earnest is how we can
>> leverage the Dev Tools for Webmaker.  Today I had another thought, and I
>> want to plant the seed with the rest of you:
>> 
>> Idea: "As Dev Tools is to a web developer, Web Lit Tools could be to a
>> literate web user/maker."
>> 
>> Consider the Navigation section of the Web Lit Standard:
>> https://webmaker.org/en-US/standard/exploring#navigation, in which URLs
>> and hyperlinks are discussed.  What if I want to understand the URLs and
>> hyperlinks in a page I'm looking at?  We don't provide simple tools for you
>> to just get a list of them all, or to examine them as a curious tinkerer.
>> You might be interested in how many go to a particular domain, or in how
>> they are constructed, or navigating to content above you in a relative path.
>> 
>> Consider the Building section:
>> https://webmaker.org/en-US/standard/building#composing, in which we talk
>> about being able to Identify and use HTML tags.  View Source is great, but
>> overwhelming if you're not an expert.  What about a tool that showed you
>> all the HTML tags in use on the current page, and offered docs to explain
>> what they are?  What about pretty-printing the HTML so you can make better
>> sense of it?
>> 
>> In both cases I'm describing tools built into the browser that let you
>> explore and ask questions of the pages you visit--any page vs. just an
>> exercise with a built-in script.  These aren't necessarily editing tools,
>> but rather lenses through which I can observe the web and how it's built.
>> 
>> I think having a set of Web Literacy Tools, similar to the Developer
>> Tools, would make it possible for non-developers to engage with more than
>> just the manifest web content rendered in the browser: the web is most
>> interesting when you can peer at what lies beneath.
>> 
>> Dave
>> _______________________________________________
>> webmaker mailing list
>> webmaker at lists.mozilla.org
>> https://lists.mozilla.org/listinfo/webmaker
>> 
> 
> 
> 
> -- 
> [image: Mozilla Webmaker] <https://webmaker.org/>
> *Michelle Thorne*
> Global Strategist
> Mozilla Foundation
> webmaker.org
> 
> michelle at mozillafoundation.org
> @thornet <https://twitter.com/thornet>
> _______________________________________________
> webmaker mailing list
> webmaker at lists.mozilla.org
> https://lists.mozilla.org/listinfo/webmaker



More information about the Webmaker-dev mailing list