The TSW Blog

It brings me a lot of pleasure to write this specific part in the "Making of..." series :). For the last couple of WebCoder versions, and with phpCoder as well, the most requested feature has been JavaScript IntelliSense. JavaScript is more popular than ever before, and I have been wanting it just as much as you guys. But if you look around, you will notice that only very few editors has JavaScript IntelliSense - JavaScript is a tricky technology to support! Fortunately, I have received loads of help from the most talented JavaScript guru I know, Brian Hjøllund. He has written the JavaScript parser for WebCoder 2009, and it allows me to combine knowledge of your code with knowledge about both the JavaScript language and the Document Object Model and thereby bring you some very cool functionality. I promised to make WebCoder 2009 even more web-centric, and I think that the added JavaScript functionality is a very important step in that direction. Here's a couple of screenshots that will show you what I'm talking about:

So, what do you think? :)

As promised in my last post, I will be discussing one of the new and very cool features of WebCoder 2009 today. It's called "Inspect mode", and empowers the preview browsers with the ability to make WYSIWYG like changes to both HTML and CSS, in realtime, without the usual disadvantage of messy code. The "Inspect mode" uses the preview browsers to show you how your code look, and at the same time it lets you explore the various elements of the page, and make changes to them with a few clicks. This is especially handy in the early design phase, when you want to try out a lot of different looks and designs of various elements on the page, but also when you want to make minor adjustments to the final result. It's probably hard to appreciate from my description alone, so I created a special video for you guys, the very first WebCoder 2009 demonstration, to show it:

Watch a video of the TSW WebCoder 2009 "Inspect mode" in action

Please have a look and let me know what you think - your feedback is highly appreciated :)

As mentioned in my previous post, the preview part of WebCoder 2009 comes with a lot of changes. In this edition of the "Making of WebCoder 2009" series, I wish to tell you about a more subtle, yet very important change. For several versions of WebCoder, it has been possible to preview with both the Internet Explorer and a Mozilla based browser. As I have mentioned before, implementing IE preview is very easy, due to Microsoft's decision to offer it as an ActiveX control, included in pretty much every version of Windows. The Mozilla foundation never really did that, perhaps because it's a multiplatform browser, with no special focus on Windows. Unfortunately, this made it very cumbersome to have a Gecko based preview in an external application like WebCoder. Some efforts were made by various people, and especially the person behind the Mozilla ActiveX control contributed to making it possible. However, Mozilla is now an old browser, mostly replaced by the wildly popular Firefox, and to use the Mozilla preview, this ActiveX control from a 3rd party site had to be downloaded and installed.

Fortunately, I'm finally able to make the change in WebCoder 2009, offering a Firefox based preview instead of the old Mozilla one, where all you need is a copy of Firefox 3 installed. In case you don't have that, you can simply click a link in WebCoder, to download  a copy of the required data files. I have tested this on various machines, and it seems to work much better and easier than the old Mozilla ActiveX based solution. Hopefully the upcoming beta test will show the same results. In the next post, I will show you one of the new preview related features of WebCoder 2009, made possible by this change. Stay tuned!

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