The TSW Blog

With the release of WebPad.NET, I had changed the way previewing files would work from previous versions of WebCoder. These changes were used in WebCoder 2007, and in a slightly modified form, in phpCoder 2008 too. I think the changes were good, since they allowed for preview browsers in Tool windows, which made them extremely customizable. To please old users, I made sure that the old way of previewing, where you would toggle between editing and previewing, would still be possible. However, since the changes required between these two modes were pretty comprehensive, a restart was required when changing between them. I was never fully satisfied with this, so I sat down and thought long and hard about what I wanted to accomplish, and then I made the necessary changes in WebCoder 2009. It was quite a struggle, because I wanted to make sure that fans of both the "old style interface" and the "new style interface" would be happy with these changes, while improving both of them.

First of all, there is no longer an "old style interface" or a "new style interface". They have been removed from the Settings dialog, and the concept has been changed into "Preview mode", which can be changed, on the fly, from the preview toolbar. You can currently select between these four modes:

• Hidden. This is like the old style interface, where you will have to toggle between edit and preview. I personally like this mode when I'm doing way more coding than previewing :)
• Tool windows. This is like the new style interface, where both preview browsers will be placed in their own Tool window, allowing you to tab them, float them or position them where ever you like. This is the most customizable setting, and I like it a lot because it allows me to position my preview browsers on my secondary monitor, so that I may write code and do previews at the same time.
• Horizontal-split. The application window is split horizontally, with the code window in the top, and the preview browsers in the bottom. You can enable either IE or Firefox or both, as usual. They will adjust depending on whether only one or both browsers are visible at the same time. This is great if you only have one monitor, or if you simply prefer restricting WebCoder to a single monitor, while still wanting to be able to see both code and preview at the same time.
• Vertical-split. Obviously the same as the horizontal-split, just vertically instead - the code window is to the left, and the preview browser(s) are to the right.

From the same button where you select active preview browser(s), you can toggle between splitting the preview browsers horizontally or vertically, and you can of course adjust the size of the code window, to leave more or less space to the preview part, when it's not hidden. Hopefully, these four modes will leave you with all the flexibility you could dream of, and this time without having to go to the Settings dialog and restart the application - you can change between the modes with only two mouse clicks :). I hope that this will make it better and easier to use the preview functionality in WebCoder, but there's more cool functionality in the preview department. I will tell you more in the next couple of posts, so stay tuned!

With the release of WebCoder 2009, I'm hoping to bring WebCoder and phpCoder closer together. I want the best from both worlds, but as I mentioned in the very first blog post, I don't think that I will get that by putting both editors into one application. I want WebCoder to be the very best tool for creating and designing webpages, and I want phpCoder to be the very best tool for writing and testing PHP code. Obviously, both editors will overlap each other, but they will still be highly specialized, and I think that's a good thing. However, with the release of phpCoder 2008, I discovered that I'm not the only one who can see potential in using both editors. Several customers have purchased a license for both at the same time, and with WebCoder 2009, I wish to make that an even more obvious choice. How?

First of all, the WebCoder 2009 and phpCoder 2008 will be able to import each others project, and thereby save project information to the same file. This will allow both applications to inform the other when a project is changed, so that it can be reloaded. I have already implemented this, and it's working pretty well. Besides that, both applications will send a message picked up by the other, each time a file is saved. This allows you to work on the same file in both editors, and have the changes silently loaded in the other application. For instance, if you save the file in WebCoder, phpCoder will see if that specific file is currently open and if so, reload the content, making sure that cursor position etc. is preserved. I think that's a good basis for using both applications at the same time, but perhaps you have more ideas? I would love to hear them! :)

Second of all, I will be offering bundles with both applications, so that you can buy them both and get a nice discount at the same time, or even include SiteSync, for the ultimate web developer package :)

With each new application I develop, there seems to be one recurring item on my TODO list: Better IntelliSense support! I personally love IntelliSense, and I think that most of you do too - the rest will always be able to turn it off :). In WebCoder 2009, I have introduced IntelliSense in two more areas by now. First of all, I have added HTML entity IntelliSense, so that you can type them faster than before, without having to know their exact name:

The list is pretty comprehensive - it actually consists of each and every HTML entity as defined by W3. Of course, this will only work if you can remember at least the first part of the entity name, as shown on the picture. If you're looking for the entity name of a specific character, you can use the special character CodeLib, which I have updated for WebCoder 2009, so it also comes with every possible entity/character :). That's all good, but have a look at the next screenshot, which shows something that I think is even cooler:

Inline syntax coloring and IntelliSense support for CSS code in the style attribute! It wasn't an easy task to implement, but after some adjustments, it's working out pretty nicely, and I personally love to have CSS IntelliSense outside the regular CSS documents too :)

Besides that, I have added loads of information to the IntelliSense lists. For instance, each HTML tag and attribute will have a small description and a small notification if they are deprecated, CSS properties will show a list of possible values, with the default value marked in bold, and so on. There are lots of small details like that all over the place :)

I have to admit that "changes in the FTP implementation" is not quite as sexy and glamorous as some of the other new things in WebCoder 2009, but nevertheless, I wish to tell you a bit about them. The FTP implementation in WebCoder 2007 was way better than the one in version 2005, and I think that we will take an equally big leap with WebCoder 2009. I have added SFTP and FTPS support, just like in phpCoder, and combined it with some of the good code that I wrote for SiteSync 2.0. This means that most transfers are now done on a separate thread, allowing you to keep writing code while WebCoder works with your FTP server. I have removed the "WebCoder is working..." window while several files are transferred, and instead I have added a queue list, where you can see how many files are to be transferred and how far along in the process you are, just like in the SiteSync FTP window. At the same time, a small status notification will be shown in the statusbar, so that you can see the progress, even when you don't have the queue window visible. These things combined will ensure that you can keep on working in WebCoder, even when you are doing uploads or downloads of multiple files, and it has yet another advantage: Since the transfers are running on a separate thread, canceling transfers will now finally be possible, as some of you have asked for :). All in all, I think you will be quite pleased with these changes. Stay tuned for even more cool stuff :)

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 :)

Ahh, just writing the title of this blog entry makes me excited :). I have been thinking a lot about WebCoder ever since phpCoder was released, about new features of course, but mostly about the direction that I wanted to take WebCoder. Should WebCoder continue to be the big brother for WebPad.NET and phpCoder, and if so, should it have all of the PHP functions found in phpCoder, to be as all-round as possible? You may think that it's an easy question to answer, but it really isn't. A lot of people are depending on WebCoder, and I'm sure that everyone has different wishes for how the next version should look. That's all great, but since a lot of these wishes will obviously be mutually exclusive, I will have to make a general decision on how to proceed. I have to think long and hard about which features should be implemented in which editors, and each time, they have to fit in with the general direction that I wish to take. Some of you will probably say something like "Don't decide, just make one huge, SuperCoder, that does it all", but it's not that easy. The thing will get bloated, with heavy load times and an interface that is difficult to use.

I believe more in specialized applications, but WebCoder 2007 isn't that specialized. It's pretty good at a bunch of things, and overall a very pleasant editor to work with, if you ask me, but I want to do more with it. WebCoder 2009 should hopefully prove this, with it's very strong focus on being the absolutely best place to work with HTML and CSS. In the upcoming blog posts, I will show you just exactly what I mean by that, and I'm pretty sure that you won't be disappointed.

This was just an introduction. The first part of this "making of WebCoder 2009" series will be posted shortly. Stay tuned! :)