The TSW Blog

During the last couple of episodes, we have talked about some of the benefits that the new HTML parser is bringing into WebCoder 2009. This will be yet another one, because I want to share this new feature with you. I'm not sure what it should be called, but internally, I have referred to it as the "Tag chain". Perhaps you guys can come up with a better name? Anyway, here is a screenshot of how it looks:

It works by getting information about tag positions from the HTML parser and then comparing it with the current cursor position. By doing so, WebCoder will be able to pinpoint where in the tag hierarchy you currently are, and show you the chain of tags that are within the current scope. As you can see, you'll have quick access to the same features as found in the HTML Outlining tree, described in post #4: You can navigate to the tag, select it, select the content of it, and then you have quick access to editing any CSS selectors used in either the ID or the class attribute. The tag chain should help you get a faster overview of your current position, when editing your documents, as well as provide quick access to useful features as shown on the screenshot. Let me know what you think :)

In a user comment to a previous episode, sijandi requested a screenshot of the new HTML outlining tree. First of all, it's not completely finished, but I have made some changes in this area, that I wish to tell you a little bit about. In WebCoder 2007, we had a Tool window for both the CSS and the PHP tree, and with the addition of a HTML tree, this would require yet another Tool window, and since I'm also hoping to add a JavaScript tree, things would start to get just a tad bit crowded. I therefore decided to look into combining these trees, and so far, I think the result has turned out pretty well.

As you can see from the image, the new "Document" Tool window consists of toolbar with a dropdown list of the possible outlining trees, a "Filter" textbox for quickly searching the active tree, and then the actual tree. The button on the top toolbar, next to the dropdown list, controls whether the Document Tool window should be context sensitive or not. When it is, WebCoder will automatically show the proper tree, depending on which kind of code you're editing. For instance, as soon as you go from HTML code to a <style> block, the HTML tree will be replaced with the CSS tree and so on. You can manually change between the trees from the dropdown list, of course. As I said, the combining of the outlining trees seems to be working out fairly well, and it will help make the interface less bloated.

Now back to the HTML tree. As you can see, it has a popup menu attached, which will give you access to some extra functionality. Navigate to will move the cursor to the start of the tag in the editor and focus it. Edit tag will activate the HTML Inspector, allowing you to quickly edit the tag with the mouse. Select tag and Select content will select either the entire tag, from start to end tag (if any), or just the stuff within the tag (child tags, text etc.). The Edit #content is pretty interesting as well. Once you click it, the CSS Inspector will be brought up, and you can edit the clicked selector, no matter where it's currently located (inline style block or external CSS file). If the tag has one or several classes attached to it, through the class attribute, you will of course get access to editing those from this menu as well.

I think that's all for now. Questions and comments are very welcome, as usual :)

So, in the last episode, we talked a bit about the new realtime validation functionality in WebCoder 2009, but you only saw a small part of it. The realtime validation checks for a wide range of problems, currently 15 different issues, and reports them back to you, by underlining the problem areas directly in the editor, as shown in the previous episode, but also by keeping a newly added list of issues in the main WebCoder window. This allows you to sort out most of the problems that can prevent your document from passing the W3 validation test, without having to manually validate the document over and over again. Here is an example of the error view, to show what I'm talking about:

As you can see, there is a piece of text for each error, telling the user what's wrong, but in fact, WebCoder 2009 will do more than just that. It will also help you fix the problem:

As you can see, a solution is proposed here, but if WebCoder knows how to fix a problem, then why do it manually? Press the quick fix shortcut, or activate it from the error view, and WebCoder can fix most of the errors for you. Some solutions are obviously more elegant than others, for instance, there's pretty much only one way to fix an "unknown attribute" error: Remove the attribute. Deprecated tags and attributes are fixed more elegantly though: WebCoder 2009 comes with a conversion map, which can be user modified, that tells the application how to convert deprecated tags and attributes into something that will validate and still work as intended. For instance, <font> tags are converted to <span> tags, and the deprecated attributes of it, like "face", "size" and "color", are converted to the CSS alternatives and placed in the style attribute. This allows WebCoder to convert most legacy HTML code into modern HTML and CSS code, with minimal user interaction. Letting WebCoder fix the most obvious validation errors is a real time saver, when compared to manually validating and manually fixing each and every error. Just wait and see :)

In the last episode, I talked about the new HTML parser in WebCoder 2009. The next couple of episodes, including this one, will be dedicated to highlighting some of the cool, extra functionality made possible by the HTML parser. For instance, since WebCoder knows the structure of your document, it can match start tags with end tags and let you know if you have forgotten either one of them. It will use the active HTML definition to decide whether or not a tag needs an ending tag. The realtime validator, which I will write much more about in the next episode, helps highlight this problem:

Errors are highlighted just like a spelling error in your favorite word processor, and you can get more information about the problem, as shown on the image, by hovering the mouse over the highlighted word.

The active HTML definition is used and you will be reminded to close your tags in the correct way. Here it is the img tag, which needs the self-closing forward slash instead of a regular end tag.

WebCoder can help you close the tags you have open, and in the correct order of course, as required by XHTML. This also lets you turn off the HTML AutoComplete feature, where WebCoder automatically inserts the ending tag as soon as you write the starting tag, and then write the ending tag when you actually need it, while still getting help. When you need to end a tag, simply type the < character and press Enter, since WebCoder automatically highlights the appropriate end tag.

Since WebCoder keeps track of begin and end tags, highlighting matching tags is just a benefit! Place the cursor in either the start tag or the end tag, and WebCoder will highlight the matching opposite!

That's all for now, but I have a lot more to tell you about these features. In the next episode, we will take a deeper look at the realtime validation and how it can help you much more than what we've seen today. As always, stay tuned for more :)

As you may have realized from my last blog entry, WebCoder 2009 won't just be a couple of new features and some bugfixes. I have already made a bunch of interface changes, most of them which you will hear more about, and a list of very cool new features are either planned or already implemented. The first thing I actually created for WebCoder 2009, was even more code for parsing and handling HTML tags. Even though WebCoder is an HTML editor, I think you would be amazed to find out how much code is actually written for parsing, handling, formatting and outputting these simple HTML tags.

In WebCoder 2009, I wanted an HTML outlining tree, to show the structure of a document, so I needed a complete HTML parser. Parsing HTML is some what trivial, but building a tree of it's structure is a bit more complicated. Doing it for XML would be a piece of cake, but HTML has so many exceptions and weird ways you can use it, that it becomes quite a job. Fortunately, it's all worth it, because this code has already been used several places in WebCoder 2009, to provide some interesting features. Generally speaking, WebCoder will now know much more about your documents, and it will use this information to help you write better code, with greater ease. I know that sounds a bit like something from the marketing department of a big company, but it's actually true :). In the next couple of posts, I will be much more concrete and tell you exactly how WebCoder 2009 will make your life easier with this information. Once again, stay tuned :)