Drag N’ Validate
Ever find yourself debugging XHTML via your browser’s View Source command? I do it all the time. You know the routine:
- You add a module somewhere on the page and it’s borking your layout.
- You hit
View Source. - You drag-select the module in question, paste it into a Stickie Note, manually indent your tag tree with tabs, and then find out where your tags are unbalanced.
It’s a pain in the ass and maybe there’s a better way to do it, but here’s a tool I’d love to see:
Drag N’ Validate (or Dragon Validate) — Drag select a block of XHTML in any application, right click to pull up a contextual “Validate” menu, and the application will autotab the block for you and point out any validation errors.
That would be money.
Enjoy this? Subscribe to Mike Industries updates via email, or follow me on Twitter @mikeindustries.
on it. I’d love to see something like this as well.
how about a contextual menu for launching textmate and then running a bundle?
probably applescript could do it :)
Let’s see how far I get. pretty much guarantee someone that reads your blog that’s *not* hopped up on pain medication (broken arm, torn tendon, missing teeth) will get it done faster, but I’ll give it my best :)
Since it looks like you’re using Safari, try this:
http://www.zappatic.net/safaritidy/
It doesn’t do exactly what you’re looking for, but it does validate the page automatically, and then adds a nice little table at the bottom of your “View Source” window that gives the line number, column number, type of problem (warning or error) and finally info on the error.
Chad: Nice. Also, to any readers who *are* on pain medication (the good kind) and have any left over, e-mail me.
Tom: Yeah, I’ve tried Safari Tidy, but my problem is that I’m generally only interested in a snippet. My response to most validators is basically “yes, mofo, I *know* our ad server puts a million ampersands in the page… just show me the real errors please.”
Fuck validation man, if it works in IE5 then that’s all I care about! Boo ya bitches!
IE5?! Listen up, FutureBoy, I say that Lynx is here to stay!
Not quite as good, but if you paste that code into TextMate instead of a sticky note you’ll get the indenting and validation almost for free. :)
The Firefox View Source Chart Plugin (aka View Rendered Source) is a quick way to see where your tags are unbalanced, because it color codes them and draws boxes around them.
This is one of the plugins I can’t live without. If your unbalancing happens over a large portion of the screen (ie you have to scroll between the start/end tags) you can simply click on any of the boxes inside the tags you’re interested in and it will collapse them.
Does ANYONE care about ampersands, really?
Can anyone clearly and succinctly tell me how they could cause harm.
I usually try to correct them, where possible, just cause I LIKE things to validate, but I always feel stupid for spending the time worrying about them.
Mike, great idea!
Before I get into the tool I use, let me preface this by stating that I write my XHTML by hand, and by hand only. I used notepad to learn, and moved on to Homesite for the features. That being said, I use a feature in Dreamweaver to help visually validate and format XHTML. There’s an option that will perform all the indentation and such to a highlighted snippet or the whole document. Additionally, unclosed elements appear in highlighted yellow in design view.
@Thomas – What is that feature in Dreamweaver called?
I second the View Source Chart Plugin that Tom mentioned – great tool.
The firefox Web Developer toolbar provides the option to submit the URL to the W3C validator (SHIFT+CTRL/CMD+H), or upload the current HTML source (SHIFT+CTRL/CMD+A).
Given that second option, it should not be that hard for any Firefox extension developer to write something like:
– get source of current selection, or get current selected source (if in source view).
– paste that source in an empty XHTML template (with head in place, and empty body).
– submit that code to the W3C validator.
Shouldn’t be that hard …
Or one could write a page with an input field where you can paste the code in … heck, as I’m typing this I better start off coding …
And yes, the results are in: “MikeValidator – Quick ‘n Dirty” for demo over at http://www.bram.us/mikevalidator/ ;)
wbr,
Bramus!
hmmz, the link ain’t showing: http://www.bram.us/mikevalidator/ ;)
I usually open up a vim window, paste in the snippet and type ‘gg=G’ to re-indent everything. Thats:
gg – move cursor to top of the file
= – start auto-indenting
G – all the way to the bottom of the file
Back when I was but a foolish newb I would type ‘ggVG=’. HAH!
Crazy.
And about the tabbing … Dreamweaver has this nifty option named “Apply Source Code Formatting”, but it does not have a shortcut unfortunately.
The Zend IDE also provides this option; the shortcut is SHIFT+CTRL+F and it has become one of my favorites :)
@Markus: what Bramus said, plus there’s an “Apply Source Formatting to Selection” if you want to affect a selection only.
@Bramus, it’s really easy to assign keyboard shortcuts in Dreamweaver to features that don’t have them. I’ve got Apply Source Formatting at Cmd+Shift+F…
@Markus: just to reiterate, and as a personal response, it’s the “apply source formatting…” option. I know it’s been mentioned a few times, but I felt compelled to respond personally. Apologies for not specifying it by name in the first place.
Yep, what Tom said. Use firefox plug in. Does it for you.
I generally shoot to have my pages completely validate now. It’s been great now that QA can just validate a page to make sure it’s well formed and if they get green it’s a go on that front.
The way we deal with ad server or 3rd party code is to put it in script tags and put the javascript within comments within the script tag so that the validator ignores it.
For example if you take a look at this page that we did, we used that approach to get it to validate and there’s some nasty javascript on it from our ad server and analytics software:
http://www.greatschools.net/city/San_Francisco/CA
We still have a lot of non-validating pages but as we work on them, one by one we’re getting them to validate. Eventually I want page validation to be part of our continuous integration builds.
Mike, I use the tidy service to do this. Install the TidyService from here http://www.pixelfreak.net/tidy_service/readme.html and then create a TidyService.conf file with the following attributes
indent: yes
doctype: omit
indent-spaces: 2
wrap: 72
markup: yes
tidy-mark: no
output-xhtml: yes
input-xml: no
show-warnings: yes
numeric-entities: yes
quote-marks: yes
quote-nbsp: yes
quote-ampersand: no
break-before-br: no
uppercase-tags: no
uppercase-attributes: no
show-body-only: yes
I think that show-body-only and output-xhtml are the important ones. Now you can select a section of code, and in apps that support services you then select Tidy Markup from the services menu. Errors are dumped to the console.
One other note is that this combo works really well with Stand (which is what it looks like Mike is using in his screenshot) and its ability to apply changes in Safari’s source view.
If you hate to have console open all the time like I do, you can use MKconsole to create a window overlay to display console logs on your desktop. It runs in a dockless/faceless mode as well.
http://www.mulle-kybernetik.com/software/MkConsole/
Hmm, really don’t have that problem to be honest.
Generally try and make sure code is indented anyway, not always possible, and working with other people code can lead to different indentation styles.
But then I have Notepad++ which I use these days as a text editor. Open some HTML in that, and you can collapse things like div’s, with some handy gutter bar indications as to where the start and end of a block is.
So I can fairly quickly find problems where I’ve not clsoed a tag or soemthing.
But then, I do use Windows…..
@Bramus: Although the code formatting feature in ZendStudio is quite nice, it won’t help you auto-indent XHTML code, especially not when working with templates in other applications.
In response to Baxter, regarding why it’s important to encode ampersands…
Let’s say you have an application that sends e-mail to your friends. You want to e-mail Joe, so your PHP coding creates the link to Joe below:
http://www.domain.com/my_page.php?id=5&emailing=joe
Well, what happens when they want to copy someone in on the e-mail? You say, oh, well, I’ll just add a $_GET var ‘copy’.
So you make the new generated link to:
http://www.domain.com/my_page.php?id=5&emailing=joe©=bob
Looks good.
Well, what happens when a browser processes that? The browser sees © and outputs a copyright sign. Look where the link below goes:
Hover over this and check your status bar…
Now that’s not a problem if you’re dealing with $_GET vars like id, or sess_id, and whatnot… but what if you mistakenly use £? You get £. How about ¢? You get ¢.
HTML Tidy plug in for Firefox http://users.skynet.be/mgueury/mozilla/
Brings up a view source frame listed with all your errors and shows the line where the fault is, even explains it. Makes for easy and fast validation and code cleanup, Also stricter than w3c validation it seems.
Finally, I am just going throw my flame starter in and say that you shouldn’t be using XHTML anyway when IE in no way supports it, use HTML 4.01 strict man!
I would just like the ability to hover over a closing tag and see the id/class of the associated element. Seems so simple. Some of these programs must do that.
The Web Developer Toolbar for Firefox does all that (albeit post-render, not within the code – I assume that’s what you meant by ‘closing tag’,) and more – with the function ‘Display Element Information’, you can view an object’s attributes, position, ancestors and children.
@ Philip Daun: totally correct, kinda “did not know” that it only indents the PHP code in a very nice way, and not the (X)HTML (been using Dreamweaver for this). Thanks for mentioning!
There’s always the Web Inspector if you’re running WebKit…
Emacs (I know, I know, ctrl+alt+shift+tab is for contortionists, but it really is great for what you need) takes care of all this if you just turn on color coding.
Use the FireFox web developer plug in – it will do that for you and a lot more.
One of my favorites is outlining tables on the rendered HTML – it helps to see which table is overflowing into which region.
Very nice tool that’s hard to live without when working html.
If you just write perfect code the first time, you don’t need this tool! Come on people :) (LOL)
Get in the habit of adding a comment after every closing tag stating that it’s the end of the associated selector and your tags will never be unbalanced:
Lorem ipsum…
Hey Mike – I don’t think the code tag is working in the comment editor. It’s not showing my code. I meant to include this example (formatted properly):
Lorem ipsum…
Dammit!
…Nevermind.
The ‘Format Source’ command in Frontpage helps a lot in debugging XHTML errors.
Visual Studio 2005 also has good XHTML validation module. It will list a lot of warnings and errors. Double-click on the error message and it will take you right to the invalid tag or attribute.
It even looks at the css files and will tell you if a particular style is non-conformant.
Um, why use Frontpage…? It’s been a rather worthless, bloated and buggy tool for too long to have much, if any, redeeming qualities as a serious web dev tool. It’s confusing even for beginners.
Visual Studio 2005 does have great XHTML validation, but it wants to apply it all the time everywhere. If you work in a hybrid environment of ASP.NET 2.0/ASP 3.0 and HTML 4.0/XHTML respectively, it seems to toss too many errors.
It would awesome to select blocks of code and perform a simple check like that. Kind of like how word can spell check a section then ask me “do you want me to do the rest, dude?” That would rule.
I know that most readers here are probably not using VS2005 but this sounds like something you could build as a plug in for that IDE.
Interesting, with this post and its comments i learned more than in any other tutorial, keep on!
Here’s a possibility
First, create a base HTML document, that is missing the at the end, and keep it open in BBEdit or the editor of your choice.
1. Then select your text
2. Append the text into the document with Quicksilver (one key press if you set up a Trigger)
3. Check the syntax (ignoring the error about missing
Now the cool thing is that Quicksilver with remember the document you appended to, so if you trigger again then the document will be ready to open.
If you set up a trigger (F5 say) you could the whole thing with:
Select + F5 + QSTrigger + command-control-y(check syntax)
Giving it a try with the text already selected the whole process takes about 2 seconds :-)
That should read “that is missing the closing BODY and HTML tags at the end,…”
Bramus: awesome! I was just looking for exactly that. Thanks.
[…] Mike Davidson – Drag N’ ValidateMighty powerful dreams….never out of reach….ok fine, I have no idea what they’re talking about. Leave me alone! :p Filed under: News | […]