The TSW Blog

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