Re: [Galeon-user] Brainstorm: Web Development Tools

[Tarax <tarax mdk netcourrier com>]

On Thursday 19 February 2004 23:12, Adam Hooper wrote:
> 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.
>
Didn't begin to read yet but all this sounds _VERY_  interesting !

> *** 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?
>
yes, I think the very first improvement of browsers from the web dev point of 
view would be a full set of local, ergonomic validation services including: 
(x)html, css, wai, svg, xml, javascript console, to make it short, all that's 
processed or can/could be procesed by the web client.
Aside of validation, the availability of specs would be a nice complement. 
Sites like zvon.org already offer side bars for that.

> *** 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").
>
You fead my dreams Dude ! that would be SO cool !

> 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.
>
automatically ?! no reloading ? nice :-)

> 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?
>
yes definitely !

> *** 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,"
Don't get this one, could u explain ? But makes me think about having blocks 
squared with a shiny color (or transparently tinted) when u select them in 
the DOM tree. Is that what u meant ? That would be very nice :-) Thus, 
selecting all the blocks u could _see_ the whole page "_architecture_". 
Pushing the limits, a graphicaly efficient way to represent the 
nesting/overlaping of the blocks would be the "cherry on the cake" ;-)

> "cell phone display," etc. These are easily implemented in bookmarklets,
> but it'd be nice to have them integrated (properly) in the browser.
>
cellphone display + the basic set of currently used resolutions :800x600, 
1024x768, 1280x1024 (but it's already available via bookmarklets opening pop 
up windows at the corresponding size) + text mode browser "emulation" (or at 
least an "open in" functionality like in konqueror).

> 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
may I dream of vim integration ? tell me yes please ! 

> 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?
>
Nights and days !

> *** 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.
WebDAV ?

> 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.

Man u have great ideas, If u care, I'll carry on thinking about all this and 
keep u on touch

_best_ regards

Tarax

PS: do u have any url where we could keep track of ur work and ideas ?
will have a look back at epiphany's website...

-- 
Future Is Free, Fight Against Bill & Friends
Linux User # 274160
Linux Boxes #157052, 157053, 157054
MandrakeClub Member