Brainstorm: Web Development Tools

[Adam Hooper <adamh densi com>]

-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA1

This is cross-posted and it's lengthy. I won't take offense if you skip
it :).

In a nutshell: I've developed a couple of Epiphany Extensions (and wrote
a guide for anyone who wants to write more, it's on the Epiphany site).
I'm looking to code more extensions which make life easier for web
developers.

My latest extension, called "Error Viewer," is a reimplementation of
Galeon's "Javascript Console" except it also does HTML validation with
OpenSP (the same thing used by validator.w3.org). Yes, it produces the
same output as validator.w3.org, but validation is always local, fast,
pretty, and two clicks away.

When I developed this extension, I meant for it to get integrated into
something bigger... the as-yet-nonexistent "web devel" extension for
Epiphany. Originally I was thinking it should be a conglomeration of
"Error Viewer", "Page Info" (which Galeon already has), and some form of
CSS manipulation.

My goal is to speed up web development: right now, web development
sucks. You have to bounce back and forth from editor to browser, back to
editor, back to browser, etc. If you're trying to make a site look "just
right," you often have to edit the HTML (or PHP) *and* the CSS, then go
back to the browser and Refresh, then go back and.... Well, you get the
idea. If you're a web developer, you know this sucks. And if you've
gotten used to this, you still must admit there's plenty of room for
improvement.

So I'm writing to bounce ideas around. Anybody interested: please send
back any feelings or suggestions you have regarding the ideas below.
Would you use these? If not, what do you do instead? If you *would* use
them, how often, and how could they be improved?

Before I start listing ideas, let me stress that I do *not* want to
build an IDE. I think IDEs suck: I want to *speed up* web development
;). And since I'm coding extensions for Epiphany, I also want these
extensions to be intuitive. (Is this a good philosophy for me to use?
Why or why not?)

Okay, here are my ideas. Please comment.

*** Error Viewer ***
I already implemented an Error Viewer, but it could perhaps be improved.
Right now it does HTML validation with OpenSP (like validator.w3.org)
and finds Javascript errors like in Mozilla/Galeon.

Would CSS validation be useful? What other neat things could it do?

*** DOM Tree ***
I've only used the DOM Tree once or twice in Mozilla. Does anybody know
anything more about it?

I think my ignorance may be an advantage, though, since I can look at it
with an open mind. Imagine: you navigate through the DOM tree and reach
a Node, let's say a <p>. Right-click -> Properties and you'd get a
dialog with all the <p>'s attributes. You'd also see a list of all the
CSS rules applied to the <p>, including which CSS file they came from
(with line number), maybe their specificity
(http://www.w3.org/TR/CSS21/cascade.html#specificity) and how they were
selected (i.e., "div > p").

What other kind of neat things could be done here? (I'm not sure I'd use
this extension -- would you? What features would make it the time-saver
it could potentially be?)

*** CSS Editor ***
There's an "EditCSS" bookmarklet floating around the web. In a nutshell,
it opens up a window with a text box. Put in CSS declarations and the
HTML page is updated automatically to reflect your changes.

It'd be nice to be able to open existing stylesheets, too (I think
EditCSS does this). But to do it properly, it'd need to handle @import
tags. So I was thinking, maybe "Tools -> Edit CSS" would be a submenu
with an entry for each CSS file the document needs. When you go to 'Edit
CSS', it'll open a temporary file and tell Mozilla to use the temporary
CSS file instead of the original. Then you'd edit the CSS and Mozilla
would update the web page on the fly. Optionally, you could 'Save' the
temporary file when the page looks the way you want....

How cool would this be? Would you use it?

*** CSS Hacks ***
I'm not sure about how this would be integrated in the UI. Basically,
these would be little things like "highlight block-level elements,"
"cell phone display," etc. These are easily implemented in bookmarklets,
but it'd be nice to have them integrated (properly) in the browser.

If you were going to use these, where would you expect them to be?
(i.e., which menu/submenu?)

*** HTML Playground ***
I just came up with this idea this morning, and I really like it, but
it's a very "fresh" idea.

The situation: you've made a web page but it looks "wrong." You're not
sure exactly how to fix it: you're going to have to read the w3 specs
and try a whole bunch of slightly different things with <div>s and <p>s
and <table>s and whatnot.

My idea: you'd to "Tools -> HTML Playground". Your browser would split
into two panes. One of the panes would be the regular embedded Mozilla
view. The other, let's call it the "playground", would be a text box of
some sort (syntax highlighted) with the contents of the HTML page you
just browsed to. You edit the HTML in the playground, and as you do, the
page is updated to reflect those changes.

Or maybe there'd be two panes in the Playground: on the left, for about
2/3 of the width, would be the HTML; on the rightmost 1/3 would be some
form of CSS editor. That way you'd be able to edit both your CSS and
HTML at the same time, which is great when you're trying to make a site
"look right."

Alternatively, the Playground would be a fast way to edit your page to
make it valid HTML, in conjunction with my Error Viewer extension.

There's a certain "philosophy" this HTML Playground would use. In a
nutshell: it's not an IDE. For one thing, it *can't* be an IDE in many
cases: for any sites not written in straight (X)HTML, i.e., sites in PHP
or Python, the browser isn't really the right development environment.
However, the browser is perfect for experimentation -- for example,
adding a <div> somewhere, or changing margins, or any of those little
tweaks that are such a pain. After that, you'd go implement your changes
in your PHP or Python or whatever.

Can you see yourself using something like this?

*** Loading/Saving Files ***
Though I'm not really looking for an IDE, I'm not ruling out any forms
of integration whatsoever between these components. I received a
suggestion on IRC: saving files back to the server via FTP. I've
expanded the idea.

Imagine this:
1. Open your website in the browser, say "http://www.example.com";.
2. Click on 'File -> Edit'
3. If you've never edited this website in Epiphany/Galeon before: A
dialog box (or druid) pops up, asking you to set up the server. You
enter the HTML path's corresponding gnome-vfs URI -- for example,
"http://www.example.com"; would correspond to
"ftp://user:password ftp example com/home/user". From this point
onwards, any file inside http://www.example.com would be mapped to its
corresponding gnome-vfs URI (subdirectories too). This would work for
file:/// uris, too, or ssh:/// or sftp:/// uris.
4. The "HTML Playground" comes up. Play with the HTML.
5. Click 'Save' and gnome-vfs kicks in, and uploads your site back to
the server, using the URI you specified in Step 3.

I've also been asked to do a "frontpage extensions" integration, but I
think that would be better implemented as a gnome-vfs module... which
would integrate with this system perfectly.

*** Anything else? ***
Please let me know (preferably via 'Reply All'):
- - Am I about to duplicate some effort somewhere?
- - What additional ideas should I be thinking of?
- - Which of the above would *you* use?
- - What would *you* use that isn't listed above?
...you get the idea.

- --
Adam Hooper
adamh densi com
-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1.2.4 (GNU/Linux)

iD8DBQFANTTCD7ySSW2J9egRArArAJ9FAHAumcmr2bFGiuCEF2rVd5CTrQCg0oyJ
7HdNzog/Us+aEdNP6P2kz5o=
=AHmf
-----END PGP SIGNATURE-----