What's in Your HTML Toolbox?

Milo_Mindbender asks: "I've just ended up in charge of cleaning up an old and rather large website created by some non technical people. It has all the usual problems: paragraph tags with no ending tag; mixed case file names that work on Windows but not on a Linux webserver; files with mixed Windows/Linux/Mac line endings; duplicates or partial duplicates of files created when working on pages; and the list goes on. I'm wondering what tools you guys keep in your HTML/website toolboxes that work good for cleaning up this sort of mess. Things like pretty-printers, HTML 'lint' programs, dead file detectors, batch renamers (that change links and the files they point to into OS neutral names), and 'diff' programs that ignore HTML whitespace. I'm particularly interested in batch processing tools that actually fix problems (not just report them) because I've got a lot of files to deal with and don't have the time to edit every one by hand. So what's in YOUR toolbox?"

Comments

What's in your...

[AKAImBatman]

So what's in YOUR toolbox?

CAPITAL ONE!

[...]

Wait, what was the question again?

FTW

[mr_stinky_britches]

Dreamweaver FTW! It would be a huge timesaver in this situation.

Good luck!

Re:FTW

[mr_stinky_britches]

You can also do batch file processing with vim by using the following commands: vim *.match.files.* then once in vim: :argdo:%s/[^m]//ge | w this would remove the funky windows line endings (mind you, ^m = ctrl-v ctrl-m in vim).

Re:FTW

[Southpaw018]

Eek. I'd say avoid Dreamweaver at all costs. It causes exactly these kinds of problems. And, if not configured correctly, it can even put out malformed code itself.

Debugging HTML/PHP/etc files: UltraEdit-32. $40 for the single best Swiss Army Editor I've ever found. In cominbation with Tidy (which it has 100% integrated in the interface), it can handle every file-related problem mentioned except for the names themselves. Out of the box, it can do everything from line ending conversion to your standard syntax highlighting (though it doesn't have as many languages out of the box as Scintilla) to assisting you with actually correcting the HTML errors.

Re:FTW

[mr_stinky_britches]

Only UltraNoobs use UltraEdit. You need to spend some time learning VIM (http://www.vim.org) and you'll never look back.
Cheers.

Re:FTW

[Baricom]

Agreed. I dismissed people who kept suggesting vim as "crazy UNIX people." I still felt that way about a week into playing with it, but soon after, I realized how powerful it is once you've figured out how the keystrokes work. Since then, I've used vim on every computer I've worked with and gvim (the GUI-enhanced version of vim) is my primary editor on my Windows box.

vim has excellent syntax highlighting, predictive typing, line numbers, search and replace (with regular expressions), code folding, spell-check, built-in help, and more.

Give yourself two weeks with an open-mind, and you might be surprised about it. The easiest way to get started is to type vimtutor from almost any shell account.

Re:FTW

[G-funk]

jEdit is your friend!

Re:FTW

[afd8856]

Amen brother. Although for python coding I've been using Eclipse with pydev a lot lately.

Re:FTW

[Jaruzel]

ebugging HTML/PHP/etc files: UltraEdit-32. $40 for the single best Swiss Army Editor I've ever found.

Seeing as you got flamed for this opinion, I thought I'd help you out.

UltraEdit-32 is damn good, I'm sure it's not as slick as some of the other Editors out there, but it has good syntax highlighting, tabs, and the ability to run macros or spawn sub processes and capture the output. Yes you have to put a bit of work in to get it how you like it, but overall it fits the bill, and if you can actually write code without needing noobie popup helps all the time, then it's a good editor.

Yes, an Editor. It's NOT an IDE. Good for many things, although master of none. Your mileage may vary however.

-Jar.

Re:FTW

[ozbon]

Rather than UltraEdit32, I always swear by TextPad. It's just about the first thing I install on any computer I'm working on - hell, I even paid for a license!

OK, most of the time it's just minor-annoyance nagware, but I figured, I use it so much, might as well pay them for some kind of use.

The only other thing I absolutely swear by for HTML/CSS is BradSoft's "TopStyle Editor" for CSS. Yeah sure, I can use a text editor for the same thing, but TopStyle makes my life easier.

Re:FTW

[thinsoldier]

yip Jedit is the only thing close to BBEdit available for windows, but it's not that close.
I have high hopes for it thos and I check it out regularly.

if you're not a keyboard fanatic like emacs and vim users and have no intention of becoming one BBEdit and Jedit are the 2 best choices.
BBEdit has my most favorite search/replace window compared to the dozen or so text editors I've tried for windows over the last couple months. Including ultraedit and other windows ones mentoined in these comments.

Re:FTW

[thinsoldier]

have you ever tried any of the firefox extension that let you edit the css live in the browser?

Re:FTW

[thinsoldier]

wtf!!!!!!
textpad!!!!
LOOK AT THIS
http://www.textpad.com/products/textpad/screenshot s/index.html

I'm sorry but that is too much crap html in that screenshot for me to take that program seriously!

I wouldn't touch it with a 10 ft pole because of that screenshot.
And if I did touch it with a 10 ft pole it'd be to beat the snot out of it.

Re:FTW

[ozbon]

Yeah, I have - only thing is, you then still have to copy it all back into [whatever program/editor] in order to upload it back to the site when you've made changes.

I use the WebDeveloper toolbar in Firefox all the time, and the edit css piece of it is great, but it does have limitations.

Re:FTW

[ozbon]

What's the issue with there being too much HTML in the screenshot? It's just an example.

I think that you've been partaking too much of the crack-pipe, dear boy.

Seriously, though, it's your choice - it's a program I find useful, and others may. It's their choice too. Like I said it's free/nagware, so they can try it and like it or ditch it.

Just my two pence/cents.

Re:FTW

[drinkypoo]

I just want to second the notion that Dreamweaver is shit. It generates all kinds of screwy, bad HTML. One thing I find funny is that DW used to clean up HTML automatically when you loaded it in but it doesn't do that any more, I can only assume that's because of the plethora of browser bugs. I've been using Dreamweaver since version 2, it's up to what, 8 or 9 now? I t think I have 8. I had to upgrade past 7 because it had serious bugs in the FTP functionality... But anyway, if you want to tidy html code, use tidy, that's what it's for. I will format it for you as well, so you can more easily see structure. It is very, very annoying about how it breaks up long tags though; set your column width nice and wide.

Re:FTW

[drinkypoo]

Give yourself two weeks with an open-mind, and you might be surprised about it. The easiest way to get started is to type vimtutor from almost any shell account.

Wrong. The easiest way to get started is to use gVim on systems that support it, which includes at least Win32 and Unix. I believe it's a GTK+ app on Unix. gVim gives you access to the full range of Vim's functionality, but it even has an "easy mode" where you don't need to enter command mode to do any basic editing. It has menus for all kinds of things I didn't even previously know vim could do out of the box, and the best part is that it shows you the keyboard commands to do it right next to it, so you can see precisely what you would type to do that from the keyboard next time.

Re:FTW

[thinsoldier]

too much BAD, outdated, "should not be written like so", "all caps" kind of html.

I just don't think the programs authors have the best wishes of web developers at heart if their example images of html contain such old code.
I want something obviously by modern web developers obviously for modern web developers.
That screenshot obviously turns me off.

Perl

[hahafaha]

I know many of the geeks out there have forsaken Perl, but it is still, in my opinion, an indisposable tool. I am currently fixing up a website similar to the one you described, especially in terms of the HTML problems. Write a Perl script to fix capitalization, closing of tags, etc. But understand that if code is not written well to begin with, than in many cases, it is impossible to automate the process of fixing it. You are going to have to do some things by hand.

Depending on how bad it is, consider rewriting the HTML and CSS part of the website from scratch. It may be easier than fixing old code.

Re:Perl

[Somatic]

> Depending on how bad it is, consider rewriting the HTML and CSS part of the website from scratch. It may be easier than fixing old code.

I'll second that. If you have your own system of page templates, CSS, etc, just junk all of the old code entirely. Think of how easy it is to paste text into your own (working) template vs. how hard it would be to go through and manually correct every mistake in a large website.

The tagless text could be gotten easily enough via a Perl script. A script smart enough to grab exactly what you want and put it where you want would be impossible, so you'd want to oversee the process yourself, obviously, but it would become a whole lot simpler.

I can't even find and correct the mistakes in one of my own pages. A whole site, written by someone else (who didn't know what they were doing)? Forget it. If you have a job where you are being trusted with large tasks like that, then you must have your own system for designing sites by now. Start from scratch, toss out everything but what the user needs to see, and stick it in your own framework.

Re:Perl

[jonadab]

Indeed. If the code is as littered with unclosed tags, invalid nesting, font tags nested inside of font tags inside of other font tags, deeply nested tables for no good reason, and similar nonsense as I normally expect from web pages created by non-techies, it's easier and faster to recreate the site from scratch. Just copy and past the text (from a browser to your text editor) and add the markup as you go.

Re:Perl

[thinsoldier]

agreed.
It's like trying to get content out of a html file made with Word.
It's better to just preview it in a browser and copy the rendered text instead of the source.

then it's easy to automate

around each line in your editor.

Tidy or Meyer

[hedronist]

There are two approaches: live with it and make as few changes as possible, or bite the bullet and do a complete rebuild. To do a cleanup, checkout tidy - it does a good analysis of the existing pages and can generate CSS that is OK, but not beautiful. If you want the final pages to look the same, but be standards compliant, see meyerweb.com and read his books on rebuilding pages ("Eric Meyer On CSS" and "More Eric Meyer on CSS"). Pragmatic is his keyword: lots of examples and he makes sense.

  Good luck. You're going to need it.

HTML Tidy

[d3ik]

Been there, try this

Re:HTML Tidy

[itwerx]

Parent is absolutely spot on, Tidy rocks!
      And if you're of the OSX persuasion there's a port here.

Re:HTML Tidy

[Anonymous Coward]

• HTML Tidy
• A text editor (I like vim and gedit)
• The GIMP (image editor)
• ImageMagick
• W3C validator
• Various docs and tips such as Checklist of Checkpoints for Web Content Accessibility Guidelines from W3C
• CSS Cheat Sheet

JavaScript and batch files

[Asmor]

I know it's a huge mickey mouse and there's probably (scratch that-- definitely) better ways, but when I need to do repetitive, but relatively simple, that can be done via command line, I use JavaScript to automatically create all the commands, copy them into a batch file, and done.

Re:JavaScript and batch files

[Jerf]

If you're on Windows, look into using the Windows Scripting Host, which you almost certainly already have installed. Windows Scripting Host can run Javascript directly as sort of a super-batch file.

You can start by simply directly executing the commands you generate, but you should learn the basic filesystem objects so you can manipulate files more safely and directly.

I'm assuming you're not on UNIX, because in that case you should either learn some shell or Perl. I prefer Perl because its escaping mechanisms are much saner than shell's, but shell has the advantage that it already works like the command line. (It depends on how much of this you do. If you do it every day, take the time to learn the basic Perl, because the ability to build libraries and ease of escaping will pay back the time. You have to learn about lists and iterations and control structures in shell or Perl either way, so the actual differential for simple Perl is smaller than you might think.)

There are other options, too; I'm just trying to keep the learning minimal for maximal bang. (Personally, if I want maximal shell power I go for IPython, but that's much more obscure, and rare.)

Why use static HTML?

[The MAZZTer]

I use PHP. Server side includes are perfect for standard headers/footers. I check server variables to change behavior based on whether it's on the dev server or the final webserver.

I'd paste an example, but slashdot seems to think PHP code is "junk characters".

Re:Why use static HTML?

[Fraew]

i use php includes too - saves a hell of a lot of effort, but even so dealing with close to 2000 static page elements still leaves a lot of room for dead links, imcompletness etc... maybe some day i'll teach my self to implement a CMS setup. So does anyone have a dead link checker? i've never thought about finding one before...

Re:Why use static HTML?

[hahafaha]

Well, you could always write one in Perl. Scan the page for instances of , then try to see if "text" exists. If not, report it. Also, I believe the W3C has a checker bundled with their validator (validator.w3.org)

Re:Why use static HTML?

[larry bagina]

in that situation, server side includes are just as useful, but faster and more secure.

Re:Why use static HTML?

[Phroggy]

in that situation, server side includes are just as useful, but faster and more secure.

If what you need is very simple (including footers would count as simple), here's more information about server side includes (SSI). Either rename your pages .shtml, or keep the .html name but set the files as executable (chmod a+x *.html) using the XBitHack.

If you want something more complex, you can use SSI to include a mini-CGI script into the middle of your HTML. CGI scripts can be written in any language, even a shell script:

#!/bin/sh
echo Content-type: text/html
echo
echo (insert HTML here)

Re:Why use static HTML?

[jZnat]

W3C has a link validator you might be interested in.

Re:Why use static HTML?

[SanityInAnarchy]

I'd paste an example, but slashdot seems to think PHP code is "junk characters".

It is.

PHP was designed for about what you're describing, when there were better technologies out there to do the same thing. It really looks like it was just supposed to be a bunch of PHP tags you'd mix in with your HTML tags, so you didn't have to think too much like a programmer, and could think more like a web coder.

This is a bad idea in the first place -- if you want to do dynamic stuff, learn to program. Worse, for some inexplicable reason, PHP has been adapted to much more general things.

At my current job, I'm developing a Wordpress plugin. Wordpress is written in PHP. I try to offload as much of the logic to a ruby script and into the MySQL database, because PHP is so ugly and difficult to work with. Much more so than Perl, with none of the upside.

And Wordpress seems to be a really decent, well-designed app. Imagine having to deal with some idiot's homebrew PHP... *shudder*

Anyway, why even bring up PHP here? Unless OP ends up redoing the entire site, what they're really looking for is tidy.

HTMLKit for Windows

[SocialEngineer]

HTMLKit has a lot of great options for developers, and a good plugin system.

Obligatory

[hahafaha]

> :argdo:%s/[^m]//ge | w this would remove the funky windows line endings (mind you, ^m = ctrl-v ctrl-m in vim).

Or, in emacs

M-% (AKA Meta(usually Alt)-Shift-5)
Query Replace: ^M with [nothing] :-)

P.S. Note that ^M is not Caret-M. It is a single character. I usually just copy it out of the file, and then do it in emacs.

Re:Obligatory

[mr_stinky_britches]

Or, in emacs
M-% (AKA Meta(usually Alt)-Shift-5)
Query Replace: ^M with [nothing] :-)

Question for you: how would you do that across multiple files in emacs?
The global search and replace command using vim on a single file would be simply:
%s/^m//g

Re:Obligatory

[shreevatsa]

P.S. Note that ^M is not Caret-M. It is a single character. I usually just copy it out of the file, and then do it in emacs.

Try C-q C-m sometime.
Of course, the simple way of "removing the funky windows line endings" is to run fromdos at the commandline, but kids today... they use Vim and Emacs and whatnot.
;-)

Re:Obligatory

[maxwell demon]

I'd rather use recode. After all, there might be other Windows specific stuff in there, like replacement of certain ISO-8859-1 high-bit control characters by graphic characters. With recode, those can be handleded as well (ideally convert it directly to Unicode).

Re:Obligatory

[ianezz]

Question for you: how would you do that across multiple files in emacs?

Use dired on the directory where files are located (i.e. M-x dired), mark the files you are interested in (with 'm'), then use 'Q' (uppercase) to perform what basically is a query-replace-regexp on all the marked files (actually it is dired-do-query-replace-regexp).

See the GNU Emacs dired documentation for further details.

MY toolbox...

[grammar fascist]

My toolbox has a little white pill that I take every time I get a hankering to work with HTML. It fixes me up right quick.

Re:My toolbox...

[Osty]

Two main things to remember here: Dom Inspector and the Web Developer Toolbar. Dom Inspector to find where what you're looking for lives in the code, and the Web Developer extension (for Firefox) to edit the CSS and see changes reflected in realtime, as well as way, way more stuff than I could possibly mention here, including "view generated source".

For IE, you should look at the IE Developer Toolbar. It does for IE much of what Firefox's DOM Inspector and Web Developer Toolbar can do. Works with IE6 and IE7.

Yes, I know, IE is "teh evil", but sometimes you have to work with IE-only pages, or pages that do things in different ways for IE and Firefox. It's nice to have a tool in your toolbox that will let you inspect things in IE just as you would in Firefox.

Re:My toolbox...

[SanityInAnarchy]

Personally, I avoid messing with my IE, and I only use it for testing, kind of the way I used to use my Firefox (before I discovered the developer extensions). And I make a point never to work with IE-only pages. I develop on Firefox for Firefox, and apply the IE bug suite later, if I'm being paid to.

I may install it at some point, but I'll probably go to something like Dojo first, so I let someone else worry about browser issues.

Re:My toolbox...

[JabberWokky]

MS FrontPage and all of its DAMN CAPS ON EVERY TAG meant I'd run it through HTML Tidy.

Brief aside: during the dot com webpage crunch we hired loads of "people who know html". We tried to keep enough knowledgeable web developers reviewing their work, but some odd ideas still slipped by. I watched somebody -- by hand -- converting all tags to lowercase because they "were smaller" and "would make the file size smaller and make the page load quicker". The guy was very proud of his "hand edited code".

--
Evan

Re:My toolbox...

[SanityInAnarchy]

There's a real reason for lowercase. If you're designing a webpage from scratch, XHTML (even transitional) can help a lot -- validation is like a unit test for your webpage. But it insists that it all be lowercase, because that's now the standard, and XML is case-sensitive.

Anyway, thank God for HTML Tidy -- no more doing that by hand, even if you still think it makes your filesize smaller.

Re:My toolbox...

[JabberWokky]

This was circa 1996/1997, and even then it was for the wrong reason. Some weird times there as companies scrambled for people who knew what they were doing and the tools to help them. I remember attending the Microsoft presentation on the soon-to-be-released FrontPage and thinking it was the bees-knees.

--
Evan

Creating white space

[M0b1u5]

The disaster that was "s.gif" (or "trans.gif" in some circles) used as a layout tool was horribly over-used - and the 'net is a worse place because of it. In most projects now, I seek to replace all instances with a "compatible" approach.

I create a class: .spacer{
        line-height:0;
        font-size:0;
}

Then I replace all those hundreds (and sometimes THOUSANDS) of references to s.gif with the following:



I use a span sometimes, as required - if the DIVs alone cause layout issues.

Say hello to faster web pages instantly!

Re:Creating white space

[suv4x4]

It was called "spacer.gif". It was not abused at the time since empty div/span didn't work. In fact Netscape barely supported any div/span.

Also same can be said for table cells with in them which in some browsers would collapse or misbehave.

You create empty space with "spacer div" today which is not better that what people did back then. In fact it's worse since they had no much alternatives while you do: padding/margin/border where applicable.

White space is rarely just a block of empty space floating around.

Re:Creating white space

[thinsoldier]

that's just horrible.
you suck.

You shouldnt be replacing spacer.gif with anything!
Spacer gifs should be removed entirely then use simple css to achieve the exact same layout (sometimes a better and more flexible layout and definitely faster) without using any tables

Re:Creating white space

[madprof]

That is truly horrendous. Sometimes the only thing to do with code using trans.gif or trans_pixel.gif or whatever you call it is to refactor the site entirely.

Refactor mercilessly and go implement something proper. Don't introduce yet another awful spacing technique as this only adds to your woe.

Oh, the usual

[davidwr]

left- and right-angle-brackets, the more useful tags like

• , squiggley-braces, parentheses, periods, quotation marks, and more.
  
  Those and a bare-bones test editor, what more do you need?

Re:Oh, the usual

[stubear]

What, no ?!?

Re:Oh, the usual

[Southpaw018]

The problem is a bunch of the tags you just listed no longer exist - at least, not in XHTML or HTML 4.1 Strict. and are both gone totally, as are and .
is now />. Everything has shifted over to CSS, which is far more powerful anywho.

Re:Oh, the usual

[reanjr]

Nope.

br is not now br /, one must simply write well-formed documents. Well-formed HTML (with all tags closed) also uses br /.
em and strong are still alive and well as of XHTML 2.0.
b and i are still available in XHTML 1.0.
There is no HTML 4.1. Presumably you meant 4.01 strict, which is pretty much XHTML 1.0 Strict.

Re:Oh, the usual

[Yvan256]

Don't forget to replace those 's with 's and those 's with 's. We want XHTML, not HTML 3.2

Re:Oh, the usual

[jZnat]

What the fuck are you smoking? em and strong are semantic tags (emphasis and strong text), so they're here to stay. b and i are gone because they were just presentational.

Re:Oh, the usual

[masklinn]

WTF? Not a single one of these is gone in either XHTML or HTML 4.01... TT is still in, I is still in, B is still in, BIG is still in and SMALL is still in, the only elements that have been deprecated from HTML3 are STRIKE, S and U... And "<br>" is now not "<br/>", BR is an element, <br> is a self-closing empty HTML tag and <br/> is an empty XML tag. The former is semantics, the latters are grammar.

Re:Oh, the usual

[maxwell demon]

Don't just blindly make this change. Instead determine if the goal was really to emphasize/strongly emphasize, or if it actually had another purpose (e.g. italics is commonly used for foreign words like et al., which certainly should not be marked with <em>. Better replace it with <span class="foreignword"> and add .foreignword { font-style: italic } to your CSS, unless there exists a HTML tag specifically designed for the use, as e.g. <q>for quotations, which also are often done in italics).
Remember, there's a reason that <i> und <b> are removed, and that reason is surely not to force you to type more or make web pages larger.

Re:Oh, the usual

[maxwell demon]

Blink tags are discouraged. Instead use JavaScript to simulate blinking. :-)

Re:Oh, the usual

[thinsoldier]

replaces and replaces .... i thought that was OBVIOUS to everyone.
<b> and <i> are deprecated even if browsers continue to support them in standard compliant rendering modes and strict doctypes.

for lazy people who don't like writing < s t r o n g > just write <b> and find/replace with <strong> when you're finished.

Re:Oh, the usual

[madprof]

Wrong. em is for emphasising text and i is for italicising text. You do not have to always italicise text in orde to emphasise it.

The two are different. Promise. :)

Re:Creating white space - apologies

[M0b1u5]

Oops Sorry!

<div class="spacer" style="width:Xpx; height:Ypx;"></div>

Ohh!

[chris_eineke]

Vim, grep, and sed. I heard they make movies, too! :-)

Dreamweaver

[statikuz]

I've used Dreamweaver pretty successfully to clean up a lot of poor HTML since it has pretty good functionality. I don't really have any suggestions as far as other tools go but for general single page cleanup I like DW. I've cleaned up quite a few huge documents that someone just saved as a webpage out of Word and ended up with 2 MB of HTML. Not really sure if that would work for your batch processing needs but if you have excessive issues with single pages I would recommend it.

Tidy, script, then manually clean

[Bitsy Boffin]

Really, the only way to do a cleanup of your typical dog's breakfast collection of html is

1. Tidy the pages (using htmltidy)
2. Use a custom written script in whatever language (perl is good) to do as much of the task as possible automatically (things like replacing static headers with includes) - you'll need to be good with regex
3. Open the pages manually, and finish the job - I like Dreamweaver for this particularly if it's a complicated table based layout

whatever the case, it's going to take you a lot of time and energy, there is no quick fix.

Firefox with plugins

[bhav2007]

Firefox with the IE Tab (or IE View), Web Developer, View Formatted Source, and HTML Validator extensions.

Re:Firefox with plugins

[Southpaw018]

I'll second all that, though I have no experience with View Formatted Source. I'll make a note to check it out - in debugging page display and layout issues, those other three extensions are absolutely indispensable.

Re:Firefox with plugins

[deek]

Web Developer gets the two thumbs up from me. An absolutely essential plugin for html creators.

I'd also recommend Live HTTP Headers. OK it's not a html tool, strictly speaking, but it is extremely useful for debugging any web server issues. There's no other way to track HTTP issues down, I believe, unless you telnet to the webserver. Error/access logs on the webserver don't often contain enough info, unfortunately.

Re:Firefox with plugins

[an_mo]

Other than web developer plugin, I recomment the color picker plugin; it is not just for colors: it displays the DOM path on the status bar, that is priceless, combined with the web developer plugin tools

Re:Firefox with plugins

[Anonymous Brave Guy]

I think this is great advice, regardless of the other tools you like to use. Firefox has some remarkably powerful and mature plug-ins available for web developers now. With the right combination, you can navigate your document's object model and see how the displayed page is being built from it, view the effective CSS on any element in your document (including any calculated values), view annotated source that shows standard compliance problems, and more, all from within your browser.

Rather than listing specific extensions (and risking missing a good one) I'd simply recommend downloading Firefox if you haven't already, going to Tools->Extensions->Get More Extensions, and browsing through the Developer Tools category. Don't forget to include the optional DOM Inspector when installing, too.

Re:Firefox with plugins

[thinsoldier]

ctrl+shift+y with web developer also displays the dom path....and there are like 4 other menu items in web developer that also display the dom path.
Then there's the DOM inspector which also displays the dom path. And theres an arrow in teh dom inspector that u click, then click somewhere on the page and it automatically navigates to that node in the DOM. And from there you can view every last drop of info about that element, whether is be javascript or css related.

Vim and Emacs

[jZnat]

Vim for the editting, Emacs for the web server, interpreted language, games, database, web browser to check it with, source code management, image editor, vector graphics editor, e-mail client, e-mail server, ...

Actually... Frontpage

[Planesdragon]

Actually... Frontpage.

No, really, stop laughing.

Frontpage, once you convince it to stop the WYSIWTG crap, has three tools that will make fixing a non-technical user's webpage easy. (Never, ever, let a non-technical user use Frontpage without supervision. It's worse than Word.)

1. "Site Management", where you can let Frontpage check for dead files, orphan files, broken links, and do mass re-names of all HTML-based links. (No script correction here, but non-techies don't do that.)
2. Regular Expresions (or a workable subset thereof)
3. VBA, to invoke things like "optimize HTML" and "standardize name"

I'd be shocked if there aren't better tools out there -- but by and large either they don't do as much, or they cost a significant chunk of change.

(Hey, you, with the laughing -- point me to a app that can do #1 with compatible replacements for #2 and #3, and, er, you'll get good karma for being so mean and laughing.)

Re:Actually... Frontpage

[masklinn]

I know that DreamWeaver has very strong "Site Management" features but I don't know if it can check for dead files/broken link and do mass renames (I tend not to use dreamweaver when I can avoid it). It also has a very good (PC)RE support, and you can build "extensions" to the software by using CSS & the DOM to manipulate your documents.

on macosx

[Anonymous Coward]

TextWrangler or BBEdit Lite, vi, telnet, ftp, Photoshop CS (not CS2), GraphicConverter, Firefox, Safari.

Re:on macosx

[fbjon]

What would be wrong with CS2?

Dude...

[shoolz]

Leave it as a giant tangled mess and secure your job for the next 3 years. When they threaten to lay you off, tell them you need at least 1 more years of work before you can straighten up the code and 'hand off' the job to the new webmaster.

Two tidbits

[ptaff]

Tidy is great as others mentioned. Will even allow if you feel confident to cherrypick the data you want to scavenge with XSLT.

Separating grain from chaff

A static HTML project has numerous index2.old.html, index2.html, index_2.html, project2.html.old and so on - files that you just aren't sure are useful?

Copy the project directory (touch all the files) and do a wget -r on the tree; by looking at the access time, you'll know all internal referenced files. Alternatively, scan the webserver logfiles to know which files are useful.

Be sure your filesystem is configured to register access times if you pick the first method...

(As a bonus, a close peek on the 404s might give you some answers on mis-used capitalization of filenames.)

Lynx / Links / ELinks

Can be used to dump the text data of old and unmaintainable HTML documents; most useful when trying to scavenge only the text contents to put in a database or so.

Re:Two tidbits

[martyb]

Copy the project directory (touch all the files) and do a wget -r on the tree; by looking at the access time, you'll know all internal referenced files. Alternatively, scan the webserver logfiles to know which files are useful.

That's creative, and a neat idea. But, I cannot too highly recommend xenu . It only runs on windows, but is FAST, has DETAILED reports, AND it'll construct a site map!

I wouldn't think of testing a website without it! HIGHLY recommended! - MartyB

First, you better learn HTML before complaining ..

[tomhudson]

First, before bitching about something, you should take a moment to learn about it.

"It has all the usual problems: paragraph tags with no ending tag"

There's no end tag required for paragraphs, as per the official spec: http://www.w3.org/TR/REC-html40/index/elements.htm l

HTML is not XML. Closing tags are optional for some elements, and forbidden for several others. and putting a slash at the end of a tag that doesn't have a closing tag, so it looks "xml-y" is an affectation and a waste of bytes.

Search and Relplace

[Seraphim_72]

Actual Search and replace $30, windows only. But Lord have mercy, if you need to do massive replavement in text files it is worth every cent. It does perl regex searches and plain old english pattern matching. Good customer service.....yada yada yada, and no - It is not mine, just a satified customer.

Sera

WebdevTML Survival Kit

[Kent Brewster]

Previous posts have mentioned Perl and PHP; seconding those for high-intensity search-and-destroy missions. As for software, you can't go wrong with TextPad, WinSCP, and PuTTY.

For best practices (separation of content from structure from behavior, mostly) keep an eye on are listed in and around A List Apart and the Web Standards Project. And if you're looking for several sets of outstanding presentation and behavior tools, check out the YUIBlog and the Yahoo! Developer Network. (Hint: their page grid layout, font normalization, and CSS reset libraries are an excellent place to start.)

Unix tools

[dascandy]

Fromdos, grep, sed and awk. Possibly some normal pretty printer too.

Cheat with PHP

[GloomE]

$doc = new DOMDocument();
$doc->loadHTML($junky_html);
echo $doc->saveHTML();

Reads in your crappy HTML, turns it into compliant XML, then dumps it out as nice clean HTML.

tidy, web developer FF extension, search & rep

[Tumbleweed]

Tidy, as others have already mentioned, will be your very best new friend.

Install the 'Web Developer' extension for Firefox, and use some of the HTML/CSS validators in the Tools submenu.

Get a good handle on regex searching & replacing (if you're doing this from Windows, I suggest Funduc's "Search & Replace").

If you're migrating your GIFs to PNG (which I would recommend), then you need to get yourself pngout, to compress them to their smallest possible size (Photoshop SUCKS at this).

And as someone else said, make an empty new standards compliant template, and get to cutting and pasting; it can be a *brutal* initial process, but you'll probably save yourself time in the long run, depending on how clean you want to eventually get the code. If you just want it to be standards compliant, then you can just do a clean up job. If you want to do it 'right,' you'll want to develop a new template and coding style to properly integrate the HTML and CSS. Things like not putting everything in a DIV (a sure sign you're a newbie to CSS), just to style something. Figure out why you should be using H1, H2 tags (& TBODY & TH tags if you're using tables for outer layout), etc, without having to use a lot of unnecessary DIVs all over the place. Inline styles = bad.

Figure out why XHTML may not be the best choice over HTML. Know which DTDs to specify. Know the difference in IE6 between standards mode and quirks mode, and which DTD to use to make IE6 behave. Know that IE7's quirks mode is supposedly identical to IE6's; you supposedly won't get the new 'more-standards compliancy' in IE7 without a DTD.

Oh yeah - the guy who posted about replacing spacer gifs with 'spacer DIVs'? Don't do that to yourself, okay? Yikes.

Learn about usability and readability. Learn about typography, and how light-on-black text should be sized differently from black-on-light. Thinking about grey text on black or grey text on white? Don't be stupid. Make the stuff readable! Learn that sans serif fonts are more easily read at screen density (opposite of print). Learn why Verdana is usually not your friend (go for Trebuchet MS or even Arial).

Oh, and learn to intent your freaking HTML!

Some nice resources:

Activating the Right Layout Mode Using the Doctype Declaration

Quirksmode - a GREAT resource. Awesome info here. Memorize it.

vi anyone?

[4D6963]

When I clicked the page I was so sure I would see at least one "What's in My HTML Toolbox? vi!" comment, modded Funny of course, but no...

Maybe I should check again later...

Re:vi anyone?

[Ashtead]

Of course vi is used. I use it myself, for everything, and I've seen a couple others above mentioning it.

I've also made me a little utility that would take a string from the document I'd be writing in, and generate a link <a href="..."> ... </a> style, and put it back in, courtesy of vi. Useful when writing up documentation about programming and configuration.

Then there is the matter of getting rid of carriage-returns and get the text file into the true format, with lines separated by newline characters.

CSSEdit

[rampant mac]

CSSEdit by Macrabbit.

Awesome program and worth checking out if you use a Mac.

wget

[nicholaides]

If you're using all static HTML, you can get rid of dead pages with wget. Do "wget www.website.com/whatever -r" to download it, and then just use what you've downloaded as your base.

To find broken links, I like to use Xenu. Google it.

Mein Toolboxen

[cheese-cube]

My HTML toolbox, which is my little 64Mb thumbdrive, has really only the bare essentials for website development: Notepad++ and WS_FTP.

Re:Mein Toolboxen

[thinsoldier]

damn i hate the new wsftp. Looks like friggin MSOffice!

Re:Mein Toolboxen

[cheese-cube]

I use the old LE version which you can't actually get officially anymore.

Re:First, you better learn HTML before complaining

[BigFootApe]

Hey, 1998 is calling, it want's it's post back.

HTML is not XML.

It is now.

Re:Creating white space - apologies

[masklinn]

This is worse than image spacer, please go die in a fire

What's in my toolbox?

[lewp]

A hammer for hitting myself over the head, and a bottle of whiskey to numb the pain... of dealing with HTML.

OpenSP

[aamcf]

I've used OpenSP a lot. It's a suite of tools that includes onsgmls, the parser that lies at the heart of the W3 validator. Combined with find you can easily validate local copies of all the files. Its faster than using the validator for multiple pages. It also included onsgmlnorm, which is used to normalize SGML. If you have a load of "XHTML without closing p tags" type HTML, change the doctype to an HTML doctype, run it through onsgmlnorm, switch the doctype back, and all the closing ps are there. (It's not quite that simple though - you have to clean up lots of suprious > s which get introduced for sensible but obscure SGML reasons, usually after img elements. It's trivial to do the cleanup automatically.)

Re:First, you better learn HTML before complaining

[masklinn]

no it's not HTML is still SGML, and still alive and well.

Re:First, you better learn HTML before complaining

[Bazman]

The great thing about web standards is... there's so many of them!

Paradigm shift

[suv4x4]

Changing old code to new code could rarely be automated, it's not a simple syntax change, it's aq paradigm shift, and computers are not as smart yet as to figure out the semantics of old code and rewrite it into HTML/CSS combo.

HTML Tidy is something free and available which will do the very basic work of cleaning up and fixing the HTML where possible.

windows...

[Lord Prox]

try Notepad++. syntax highliting for html php js and conversion for windows/unix line ending, macros, hex editor, html tidy-ier-upper, and more. Lots o nifty stuff and i's OSS.



Place a curse on Microsoft

Re:windows...

[Lord Prox]

Damn, I forgot the Link

Re:windows...

[antic]

Do any of these options have an inbuilt FTP application so I can edit files on a live server? (No "editing live is suicide" responses please, I don't have time.)

Re:windows...

[giorgiofr]

Yes, UltraEdit handles the job quite well. Live editing FTW!

Re:windows...

[RevDobbs]

On Windows, I'm using WS_FTP, and have the "Edit" button set to use gVim as my default text editor.

It's been said before, but let me reiterate: [g]Vim is one of the first programs I install on a new 'puter, be it Windows, Mac, or something Unix-y. The syntax highlighting makes coding a shit-tonne easier, as does easy reg-exp search and replace. And once you get used to the command mode, you'll find that file navigation with the home-row keys is quicker than using arrow keys (especially on many laptop keyboards).

The biggest drawback: you'll start trying to enter "command mode" when posting to slashdot :-)

Re:windows...

[thinsoldier]

on the mac, connect to your ftp using Transmit. 'Open' the file from transmit and it will open in whatever is your default editor for that file (BBEdit, Photoshop, quicktime etc...). When you 'save' the saved temp file gets uploaded automatically.

Re:Creating white space - apologies

[Anonymous Coward]

Or you could just use the padding / margin features provided by CSS.

margin-top: 1px;
margin-right: 2px;
margin-bottom: 3px;
margin-left: 4px;
or margin: 1px 2px 3px 4px;

padding-top: 1px;
padding-right: 2px;
padding-bottom: 3px;
padding-left: 4px;
or padding: 1px 2px 3px 4px;

Re:Macros

[Mad Merlin]

Can't even consider vim because of the macro capability in emacs. I have remapped Crtl-z to be equivalent to 'Ctrl-x e' (repeat last macro -- since I don't use 'suspend', the normal Ctrl-z function). Then I can record a macro ('Ctrl-x (' and type *anything* then close with 'Ctrl-x )') and use Ctrl-z to rapid-repeat the last macro. Makes repedetive editing very efficient. Can also do 'Ctrl-u 50 Ctrl-z' to repeat a macro 50 times, etc.

I'd move to vim if it had similar ease with macro creation / execution. Does it? Huh? Well, does it? Come on, preach it, brother! Make me a vim believer!

q<register> to record a macro, q to finish recording. Execute the macro with @<register>, then you can execute it again with @@. Obviously the @ commands can be prefixed with a number to repeat them that many times, 5@@ would repeat the last macro 5 times, for example.

Re:Macros

[Baricom]

I've heard that these discussions can be dangerous... ;)

My main complaint about emacs (I tried it for about a month) was the key structure. I didn't like holding down Ctrl whenever I want to do something - I prefer vim's modal command system. I could see how it could annoy some people, however.

I honestly haven't found the need for particularly sophisticated macros while I'm editing. The . (repeat last command) and ! (pipe) keys have always been enough for what I need.

I'm still learning vim, but I like what I've seen so far.

Re:First, you better learn HTML before complaining

[discord5]

Although you're right, flamewar in 5..4..3..2..1.. *ducks*

It's not FOSS, but...

[bigHairyDog]

I use Adobe Golive for this, and it's served me well. It detects errors like broken links, and offers batch fixing.

Failing that, perl is probably your best bet.

Re:Creating white space - apologies

[julesh]

Err.. this approach just doesn't work. Images are inline elements, you can't replace them with an equivalently sized block element and expect the page layout to be the same. And setting the CSS 'width' attribute of an inline element doesn't work in Explorer, so the entire approach is flawed. Sorry.

Dreamweaver

[Leroy_Brown242]

As much as WYSIWYG editors some times suck, Dreamweaver is alright. I like that it helps with the organization but also lets me get as geeky as I'd like.

My HTML Toolbox (IAAWD - I am a web developer)

[Qbertino]

jEdit (www.jedit.org) - best editor in existance, unmatched functionality
Dreamweaver 8 (on OS X) DW is an outdated way to do things, but it still is very powerfull
Quanta (Quanta Gold for Win or OS X - > http://www.thekompany.com/products/quanta/; Quanta Plus for Linux -> http://quanta.kdewebdev.org/)
PHPEclipse (has anoyances but very good PHP tools)

For a redo of that old site of yours I recommend simply installing a CMS and migrating the content by hand if neccesary. That's probably faster and more effective than anything else. Static HTML just isn't the way to go these days, which eliminates most of the need for a large-type HTML editor. Check out joomla! (www.joomla.org)

Re:My HTML Toolbox (IAAWD - I am a web developer)

[thinsoldier]

jEdit (www.jedit.org) - best editor in existance, unmatched functionality

Bull.... it's good but still no BBEdit. And yes I do use it and like it. But it's no BBEdit.

my own tools

[qazwsx789]

I wrote many webmaster scripts to deal with all kind of problems I run into while building and maintaining my sites. And here is a script that many webmasters may find particularly useful, it reduces the size of html files: htmloptim

Re:Creating white space - apologies

[soliptic]

How is this better than an image spacer? Elements have padding and margin properties, use them!

mixed case?

[1u3hr]

mixed case file names that work on Windows but not on a Linux webserver

In my experience, mixed case is respected by Linux but not Windows (e.g. if you're testing links on your Windows box, FILE.HTML is the same as File.html; but on Linux they're distinct), which is I assume is what is meant. I use a tiny DOS app called tolow which makes all filenames lowercase, as Windows apps often do capitalise names spontaneously.

My Toolbox == Perl

[rickwood]

I will no doubt get replies that "Scripting Language X would be better", but I have the most experience with Perl. So if time was of the essence, that's what I'd use. Perl is a Swiss Army Knife in this kind of situation, and you can easily get just about any kind of blade or tool you might want to deal with files and formatting via CPAN.

You can use Perl to fix the file names, restructure the directories, extract the content, put it into a database, and even drive the new site if you'd like. No matter what the choice of new site software, Perl can salvage the existing content and transform it into whatever format you require.

If I had more time I might choose Ruby instead simply because I like programming in it more. However the choice of ready-made tools via the Ruby CPAN equivalent is somewhat less.

No matter what scripting language you choose, you'll be saving time in the long run. Building tools is always time well spent. Indeed, taking a few hours or even days to write a script that makes a weeks-to-months long job of reformatting take hours is one of the great joys of programming for a living.

Post Scriptum: I'm sure you already did, but just in case: Don't forget to back up the original. Thrice. They'll tell you it's already backed up. That's fine. Make three of your own anyway. If they'll let you, lock one in the safe. "Whenever testing or reconfiguring, always mount a scratch monkey."

one text editor two browsers

[FudRucker]

NEdet and Firefox & opera

CSamp Color Picker

[ShaunC]

On all of my Windows machines, I keep a copy of CSamp running in the systray at all times. It's a tiny little app that will grab the RGB/Hex values for any pixel on the screen. Great for matching colors in images, or if you like me are too lazy to view source and go digging for a color attribute.

Re:Macros

[bateleur]

I honestly haven't found the need for particularly sophisticated macros while I'm editing.

This is why editor-vs-editor arguments get so silly sometimes. People often fail to realise that requirements differ.

Clever use of emacs keyboard macros (and presumably vim too, I wouldn't know) makes a huge difference to a lot of the common tasks I perform. For example one common task is to take an API document and turn it into a class file (missing only the code in the method bodies). There was a time when I used to do that kind of thing manually. That can easily take half an hour. I know some people who'd knock up a quick script to do it (Perl/Python/some shell) - that takes about half as long. Or you can do the whole job with keyboard macros inside five minutes.

Web Developer and HTML Validator Extensions!

[Selanit]

My biggest web devel tool is Firefox, with the Web Developer extension and the HTML Validator extension. The former does all sorts of amazingly neat things like letting me get precise info about any element within a page (using "Dispaly Element Information" under the "Information" menu, CTRL+SHIFT+F for short), showing me the HTTP response headers to any given page, add custom styles to a page, validate links, check for Section 508 accessibility compliance, resize the window for simulating lower screen resolutions, and on and on and on!

The latter does instantaneous HTML validation using Tidy and displays any errors or warnings on the "view source" page. It also gives me LINE NUMBERS in the view soucrce window, which is a blessing. The beta version (which I prefer) lets you pick between the Tidy algorithm and the W3C's SGML parser. The SGML parser version gives the same errors as the W3C's own online validator, but without any need to submit the page through an online form.

As for editing HTML, I generally use SciTE or one of its derivatives (eg Notepad2). Sadly, those aren't available under Mac OS X, so when I need to work on a Mac box I use Smultron. THAT, however, is just an editor. People get religious about their editors, so my advice is just to pick one that suits you and ignore anybody what sniggers at you.

You might like this, if you don't have it already

[MichaelSmith]

Programming smart indent:

Initialisation:

$XHTML_COMPATIBILITY = 1
# set to 0 if you don't want XHTML like "
" (simply "
" instead)

define TagEnd {
    start = search("= 0) && (search_string(tag, ">",0) == -1)) {
    # it really looks like an HTML tag: " (otherwise, comparison operators in PHP are hard to type)
        newtag = replace_in_string(tag, "^\\= 0) {
        # If this is a tag without content (like
  or
            if ($XHTML_COMPATIBILITY && (length(newtag) > 0 )) {
            # if we want XHTML compatibility AND there really is a tag
                replace_selection(tag " /")
                # insert the XHTML end-of-tag
                gotoPos = $1 + 2
                # as something was inserted, the cursor needs to be moved
            } else {
            # no XHTML compatibility or no tag
                gotoPos = $1
                # essentially: do nothing
            }
            select(gotoPos, gotoPos)
            set_cursor_pos(gotoPos)
            # reset the selection and put the cursor to where the user expects it
        } else {
        # a normal tag with a content
            replace_selection(tag "")
            # insert closing tag - the matched tag (e.g. p or table) ends with /p or /table
            select($1, $1)
            set_cursor_pos($1)
            # reset the selection and put the cursor to where the user expects it
        }
    } else {
    # it's not an HTML tag - leave everything alone
        select($1,$1)
        set_cursor_pos($1)
    }
}

Newline:

return -1

Type-in:

if ($2 == ">") {
                TagEnd($1, ">")
}

Its not mine, I didn't write it but I find I fantastic for working with html. Wish I could credit the writer.

Steve Irwin in your toolbox?!?

[freaker_TuC]

What for do you got him in your toolbox?

To fix the holes in your code? :)

Re:Steve Irwin in your toolbox?!?

[elronxenu]

My HTML toolbox is otherwise empty.

Line endings - use dos2unix

[bcmm]

There is a small utility called dos2unix which changes MS-style line endings in text files to Unix style. /usr/bin/mac2unix is symlinked to dos2unix on my Gentoo box, so I guess it can fix MacOs line endings too.

Re:Steve Irwin Just died

[Edward Teach]

You probably should have put this in the "Steve Irwin is Dead" section rather than the "What's in Your HTML Toolbox" section.

what's so good about dreamweaver?

[MyDixieWrecked]

Dreamweaver FTW!

What kind of advantage would using dreamweaver give you in a situation like this?

I first started with HTML/websites in the mid 90s with AOLPress, then Adobe Pagemill, NetObjects FUSION, GoLive Cyberstudio (which was bought by adobe and turned into GoLive), and eventually, I dropped all of these studio apps in favour of vim using PERL and eventually moved on to PHP.

I've since started using this great app called TextMate, and when I get a complete site that I need to work on, I pipe the code through a handful of PERL programs I wrote to make it readable and make sure all tags are properly closed, then open it in TextMate to start working.

I haven't used any of those big apps (GoLive et al) since the late 90s, so they may have improved since then, but aside from their WYSIWYG aspect and their built-in validators, what other advantages does it earn you? How do those apps aide you when you've got embedded code or PHP or whatever? Do they have built-in interpreters?

I dunno, I've just found that you really need to have a full webserver to properly work on a site. I wonder when Adobe is going to embed apache/php/perl/mysql/etc into GoLive/Dreamweaver to get a proper environment for the previews.

and, I dunno if you can answer this, but how well does Dreamweaver handle Ruby on Rails? I can't imagine it supporting rhtml (erb) or yaml code.

Re:what's so good about dreamweaver?

[thinsoldier]

I think the site he's talking about is just a couple hundred static html files. So dreamweaver is just fine. Although the only thing I'd use it for is building the diagram of what file links to what and detecting unused files and renaming all the badly named files and have all links to them updated sitewide.

elvis

[sgt scrub]

I prefer to use vi (of the elvis variety) unless I'm editing a page some a$$hole has used dreamweaver or frontpage to create. I can't stand "^M"! If I'm doing some heavy php work then I use Bluefish.

My primary tools for fixing sites:

[HappyHead]

http://validator.w3.org/

http://jigsaw.w3.org/css-validator/

Along with awk, sed, vi/pico/nano, and occasionally perl for really complex alterations.

Re:First, you better learn HTML before complaining

[tomhudson]

No its not. The valid doctypes listed by W3C include the one I link to. What you link to is NOT an HTML specification, or did you take the short bus to school?

This specification defines the Second Edition of XHTML 1.0, a reformulation of HTML 4 as an XML 1.0 application, and three DTDs corresponding to the ones defined by HTML 4.

So no, XHTML != HTML.

Perl and Emacs

[onlyjoking]

Perl, especially Template Toolkit, with Emacs takes care of most things.

Re:Steve Irwin Just died

[elronxenu]

When I posted, the "Steve Irwin is Dead" story didn't exist. Check the timestamps, my post was posted 1 minute before the Irwin story.

HTML to Text

[xjimhb]

I had to do some extraction of text from HTML, so I wrote a program for it. It may or may not be useful in this case, and it doesn't always do 100% of the job (but I've found the 98% it does do to be very useful). It is (OF COURSE!) open source so you are free to tinker and improve it for your own use. Download from:

http://jsoftco.8m.com/download.html

My tools

[Falesh]

For batch changing I have found Advanced Find and Replace to be very effective. I had to update a none standards compliant site that didn't use CSS to standards compliance with CSS recently. The site had about 15000 pages at the time, if I remember rightly, but it was quite painless updating it with Advanced Find and Replace.

For HTML, CSS and PHP editing I use TextPad. A great text editor with syntax highlighting and other tools that make writing code easy. For checking the page I use Firefox with Web Developer plugin, Opera (my main browser) and, grudgingly, IE.

i'm no good at regex and never used vim

[thinsoldier]

I would....

bring all the files into Dreamweaver as a 'site' then as I changed the filenames (i think) DW would automatically update all links to those files.

DW will also report which files are used by no pages in the site. And which pages are not linked to by any pages in the site.

Write some sort of applescript that would open all the files in bbedit and change their line endings (should be simple I think but I've never done it myself).

For fixing the broken html, just run it through one of the many applications based on HTML Tidy. I'm sure there's something automated out there.

Re:Macros

[spudnic]

If I need to repeat a macro over a number of lines, I record the macro with qq, visually select the lines and hit @. No need to count the number of lines to do the old 12@ way.

Put this in your .vimrc :vnoremap @ :normal @q

Re:First, you better learn HTML before complaining

[thinsoldier]

One would assume, seeing as it's 2006 and all, that he intends to rebuild the site as a modern standards compliant site. Even if he chose html 4.01 instead of xhtml it's still best practice to close all your tags.

Just rebuild.....

[foniksonik]

Keep the old version around to review with... then rebuild the whole thing in a CMS.

- Set up your stylesheet to cover all the examples in the old version... just click through the old site and pick out consistent examples of html entities... don't forget to scope your entities by providing IDs around such areas as menus, masthead, sidebars, advertising, etc.

- Ignore anything that is similar enough to look almost the same, no one will complain if you resolve inconsistencies... but will if you make unilateral decisions like 'All lists should look the same'

- Add in any custom classes... for when 'All lists just aren't the same'

- Hire an assistant with no web experience to copy/paste all the plain text scraped from a browser view of the page into a vanilla Dreamweaver generated html page and save it using the page title as filename.... no links, no formatting... just text. Takes 10 minutes to instruct on this one, then they go do it for a day or two.

- Instruct said assistant to go back and use the WYSIWYG viewer to add paragraphs and select lists and convert them to html lists. Takes 10 minutes to instruct, another day to complete.

- Instruct assistant to go back and add h1, h2, etc where needed.

- You can see where I'm going. Delegate the job in easy to do, hard to mess up, bite-sized tasks.

- While they are doing this you can be finishing up the more complicated pages and adding in stuff like form validation, unobtrusive dom based javascript to replace the horrible Dreamweaver scripting that's inevitably in there... and swapping script based mouseovers for CSS based ones... etc. and setting up all the chunks of html that need to be handled more delicately for accessibility.

- When pages are complete... just copy/paste the final html into the CMS according to your layout requirements for content regions

Essentially I'm saying that instead of using Tidy or something like that which will require you to go back and double check that it's automation went well... use a human equivalent which if constrained to simple tasks will do a much better job.

The nice thing that you get as a bonus is an assistant who knows enough html to be useful but not so much as to be dangerous... and that's hard to come by without paying for a full fledged developer. If that person wants to learn more, great... you can teach him/her the right way and won't have to unlearn them of bad habits. In the meanwhile you can teach them how to make maintenance updates to text via the CMS using FCK or TinyMCE as a WYSIWYG... very easy for making text changes.

Re:First, you better learn HTML before complaining

[tomhudson]

This has got to qualify as the WTF of the Day:

"One would assume, seeing as it's 2006 and all, that he intends to rebuild the site as a modern standards compliant site. Even if he chose html 4.01 instead of xhtml it's still best practice to close all your tags."

HTML 4.01 IS the current HTML (as opposed to XHTML) standard. And some of those bullshit "best practices", like "closing all tags", are forbidden by that very standard. Its not like its hard to read. I linked to the specific page on the W3C site.

So stop being a Microsoft Weenie (yes - you're easily identified by your willingness to break standards, just as FrontPage breaks those same standards by doing "best practice" shit like closing tags that don't need them).

List of tags that the standard forbids having a closing tag: http://www.w3.org/TR/REC-html40/index/elements.htm l

1. AREA
2. BASE
3. BASEFONT
4. BR
5. COL
6. FRAME
7. HR
8. IMG
9. INPUT
10. ISINDEX
11. LINK
12. META
13. PARAM

Do you close your image tags? Then you're not in compliance with the published standard. So please spare the bullshit about "modern standards compliant site. Even if he chose html 4.01 instead of xhtml it's still best practice to close all your tags.". You don't know what you're talking about, and it shows.

In case you missed it, the article's title asked what was in your HTML toolobx, not you XML toolbox, or XHML toolbox.

Subversion

[Bluesman]

I use Subversion (locally) for my web sites, with hooks to automatically upload changed files on commit.

It saves a ton of time, and probably bandwidth since I can work on a local copy and only upload the changes. (Without having to keep track of which files I've changed.)

So if I were in your shoes, I'd make a local copy, start ripping stuff out little by little until the site doesn't work, rollback the changes until it does, and repeat. Having versioning really helps out if you make a mistake, which is inevitable.

Re:First, you better learn HTML before complaining

[madprof]

But not putting in closing paragraph tags just invites sloppy coding. Always close your tags. Makes it far easier to read, for both yourself and others who may have to read the code, and means you can jump to XHTML without any hassle.
Which you can do now without too much worry.

Re:First, you better learn HTML before complaining

[madprof]

What a lot of hot air.

It is highly unlikely the poster you are replying to was saying you should close all elements, even those who do not require a closing element, as that is madness.

What they were probably suggesting is that elements that can be closed *should* be closed, which is entirely sensible. It makes HTML far easier to parse for a human, assuming you have reasonably sensible code layout.

Re:Macros

[drinkypoo]

Clever use of emacs keyboard macros (and presumably vim too, I wouldn't know) makes a huge difference to a lot of the common tasks I perform.

vim has a macroing and scripting system. The scripting's no LISP, but for some of us, that's a blessing.

wsftp?! Eewwwww

[Lord Prox]

ry filezilla or Novells netdrive. Makes an FTP server look like a driveletter in windows, any app can use FTP for read and write.

Re:wsftp?! Eewwwww

[antic]

Cheers. Yes, I use, like, and recommend FileZilla.

I always use CFStudio for my editing, but sometimes the FTP component is a bit vague.

Re:First, you better learn HTML before complaining

[thinsoldier]

and it means there's less work for the future when he or somebody has to update the site to xhtml or whatever comes in the future that demands properly nested and closed tags.

Let's see

[DaveV1.0]

Mass processing of text files including moving and renaming files and following links?

Sounds like a job for some custom PERL code.

Re:First, you better learn HTML before complaining

[BigFootApe]

What is your criteria for excluding XHTML from the set of valid HTML specifications?

Re:First, you better learn HTML before complaining

[BigFootApe]

HTML is still SGML

As is XML, therefore XHTML.

Re:First, you better learn HTML before complaining

[tomhudson]

The article is about HTML standards. The standard is clear. Closing tags are optional in some cases, forbidden in others. We have enough problems with certain companies breaking standards - we don't need to advocate it here. Sloppy coding is the result of stupidities like breaking standards because you want the code to "look xml-y".

Anyone who can't read HTML 4.0 shouldn't be writing HTML 4.0. Its as simple as that. Don't claim to want to follow the standard, but want to break it because you can't be bothered to learn it.

Re:First, you better learn HTML before complaining

[tomhudson]

Here's what the fucktard said in black and white (yes, its Tuesday):

"Even if he chose html 4.01 instead of xhtml it's still best practice to close all your tags."

Not "close all the tags the standard allows for". All tags, in direct violation of the standard.

Whens the last time you saw an image tag pair with enclosed content? A Break tag pair? Paragraph pairs aren't even needed since logically, the end of one paragraph starts another.

If someone can't read HTML, they shouldn't be writing HTML.

Re:First, you better learn HTML before complaining

[tomhudson]

the HTML spec at W3C ... I've already linked to it twice. They are THE authority.

Here's the link for XHTML: http://www.w3.org/TR/xhtml1/

And here's how its described:

XHTML(TM) 1.0 The Extensible HyperText Markup Language (Second Edition)

A Reformulation of HTML 4 in XML 1.0

Extensible HTML is NOT HTML 4 any more than SGML in HTML. XHTML is a superset of HTML. For example, "All dogs are animals, but not all animals are dogs."

Re:Macros

[Mad Merlin]

Hmm, but that would rely on the macro operating linewise, no? What happens if your macro operates on the next 7 lines and creates 2 of it's own?

Re:First, you better learn HTML before complaining

[BigFootApe]

I'd say that XHTML is a subset of HTML. All of the markup in XHTML can be expressed in valid HTML4, but the reverse is not true.

XHTML1
<p>...</p>
<img ... />
<div class="...">...</div>

HTML4
<p>...
<img ... >
<div class=...>...</div>

The XHTML elements are, of course, case sensitive.

XHTML is a grammatically strict dialect of HTML4 with HTML4 compatible semantics. XHTML grammar rules are HTML4 compatible as well as XML compatible.

Things do get a little more snakey when you start using MathML embedded in the document.

* Perhaps to be clear, I should say that when I refer to XHTML, I mean XHTML 1.0. I don't think XHTML 1.1 has gathered enough steam for me to bother with. XHTML 1.1 breaks backwards compatibility in many ways.

** You fell into a fallacy. e.g. dogs are animals, cats are animals, no dogs are cats.

Re:First, you better learn HTML before complaining

[tomhudson]

Unfortunately, the topic is HTML, not XML or XHTML, which are both totally irrelevant to the discussion. Additionally, what you or I say doesn't matter - the spec and the W3C, which maintains it, are the final arbiters of what is HTML, and they say that XHTML != HTML.

What next - argue that SMGL is a subset of HTML? Forget it.

Re:Hey, Windows/Linux Refugees!

[Milican]

Wow... You I bet you really like the smell of your own farts.

JOhn

Re:Hey, Windows/Linux Refugees!

[Milican]

Dammit.. I should have hit preview... I'm sure grandparent understands what I meant though. His / Her superior intellect could probably even translate this entire thread into eight different languages.

JOhn

Re:Creating white space - apologies

[EchoBinary]

Re: IE CSS -- Thats IE's fault, not CSS's
What about a Table Cell with a width parameter?

Take a look at jedit

[anomaly]

http://www.jedit.org/

I love it - all the features listed above, plus a plugin framework that supports sftp, ftp, and a zillion other tools. (Only complaint is no seamless svn checkin/checkout)

Java - so it runs exactly the same on Windows, Mac, Linux - makes platfor transitions quite smooth.

Not dinging any other tools - just saying that this is an essential tool in my (expanded) toolkit.

Re:Creating white space - apologies

[julesh]

Re: IE CSS -- Thats IE's fault, not CSS's

Yes, but those of us doing real web site development work understand that our results have to work with IE, because a lot of people use it and we have to support anything that significant number of people use. You can't just blindly code to the standards and hope, you have to pick and choose only the standards that actually work for most people.

Table cell widths works fine, in some situations.

Editing live

[tttonyyy]

Well, you could try a combination of SmartFTP and Notepad++

http://www.smartftp.com/
http://notepad-plus.sourceforge.net/

SmartFTP allows you to edit files live. It ftps the selected file down, you edit it in your favourite editor (automatically launched from SmartFTP, of course), SmartFTP automatically detects that the file has changed and ftps it back up again. The overall effect is that you can hit save in Notepad++ then refresh the webpage to see the changes. A very convenient way to break a live website. :)