The TSW Blog

First of all: This is the last post in this series before the first beta version. It's been a long process, but my TODO list is finally down to a few items and all that's left is to finish it up and get it ready for you to test it. Expect it before Christmas :)

Code navigation is obviously an important aspect of every editor, and while previous version has had some of it, like "Navigate to identifier" and "Identifier search", WebCoder 2013 will do more on this area as well, with Navigation and Navigation History. Both can be accessed from the Ribbon, but most of the functionality will of course be fastest and most convenient to use with keyboard shortcuts.

First, Navigation. It's all about quickly navigating through your code, from tag to tag, function to function and so on. Here's how the menu looks:

Navigating to the next tag and then selecting it and all the way through its end tag can now be done with two key strokes. Jumping through the functions of a long PHP class or the selectors of a huge CSS file can now be done easier than ever before. These are my ideas for navigation functionality - perhaps you have some ideas as well? Let's talk about how this function might be expanded once the beta hits the site and you're able to try this out for yourself.

In the meantime, let's talk about the Navigation History, which looks like this:

The Navigation History tries to track the interesting places that you visit in your open files and then lets you navigate back and forth in them using the back and forward functions or the overview, as shown on the screenshot. Very handy!

These are some of the code navigation improvements in WebCoder 2013. Hope you like it all, because you will soon get a chance to try it out. Stay tuned, and in the meantime, let me know what you think of it all :)

In version 5.4 of PHP, the team behind PHP did something really, really great: They included a built-in webserver. This means that you can now test your PHP code on your Windows machine without having to run a full-blown webserver like Apache. This also saves you from having to setup Apache and PHP to work together - everything can now be done by downloading PHP and running a simple command. TSW WebCoder 2013 takes full advantage of this - the PHP Development Server has been thought into all parts of this version. You can preview and even debug your PHP code in WebCoder through this built-in webserver, and the best part is that WebCoder can set it all up for you!

First of all, whenever you try to debug or preview a PHP file, WebCoder will check for a valid server mapping. If none is found, you will be presented with a dialog like this (the values are automatically filled, based on the location of your file):

With a single click you can either start up a new Development Server instance and have your code previewed through it, or you can create a new server mapping - the values have already been pre-filled and should be ready to use.

If you haven't already downloaded PHP, WebCoder will prompt you to do it with this dialog:

Simply click the Download button and a ZIP file will be automatically downloaded and extracted, ready for you to use.

If you use the PHP Development Server, setting up debugging is literally a breeze - allow WebCoder to download PHP for you and it will automatically configure it for debugging on your machine. I have spent a lot of time making it much easier to use and setup debugging, which you will see very soon, once the first beta version is released. As always, stay tuned, and let me know what you think so far :)

On Facebook I got a cool comment from Daniel:

Like many people I work from multiple workstations and I would appreciate the opportunity to synchronize the TSW so settings, stored ftp server, Sniplets - store them e.g. in Dropbox or other cloud storage to have them on all workstations. Is it possible to implement this (if it is not already)?

I had already been thinking about "mobile settings" many times, but I couldn't seem to find the right approach. However, something in Daniel's comment made me realize how easy this could actually be implemented, so I did. Daniel left this comment a couple of days ago, and since then I implemented a solution in WebCoder 2013 that will help you guys keep your settings on a common local network location or in the cloud through a service like Dropbox.

It all relies on a small and simple text file, placed in the correct location, which will redirect WebCoder to read your settings from another location than the default one. I decided that this would be a job for the Settings Controller utility application that has been included with WebCoder for several versions now, but I also decided that it might be time for a facelift for this little helper. Here's how it looked for WebCoder 2010:

I admit that I didn't really do a lot of polishing on that application - it was a quick and dirty solution to some problems that I knew some users where having from time to time with their settings.

I combined the functionality of the old app with the settings redirection functionality that I wanted in WebCoder 2013, and this time I made it look a bit nicer, so nobody would hurt their eyes when they needed this functionality :). Here's the result:

A click on "Enabled" and the selection of the new location is all you need to redirect your settings to another location. I tried this with Dropbox, using the same settings on my desktop and my laptop, and it seems to be working very well!

Hopefully you will like this little addition to WebCoder, and please, do let me know if you can come up with a better (but not longer) name than "Settings redirection" :). Thank you Daniel, for the inspiration!

As promised in the last post, here's the very first full screenshot of WebCoder 2013 ever published - this is how it looks right now! First the picture and then a few words about it (click for the full-size screenshot):

Your first impression might be that it looks a lot like WebCoder 2010, and sure, the structure is the same. But take a closer look and notice all the subtle differences. Some of them have already been mentioned in previous posts, while others haven't. Here's my list, from top to bottom:

• The new look, which adapts to the version of Windows you're using (this is from Windows 7)
• The Ribbon, of course
• The new validation view, where the line numbers also tell you about the type of message (information, warning or error)
• The status bar that shows you standards and validation information and lets you see and change the document encoding
• The status bar link that tells you about new updates, e.g. from the TSW blog (only visible when there are unread items)

And those changes are just the ones visible on the screenshot - there's plenty of other hidden gems around the interface :)

The above screenshot is, deliberately, a bit "busy", because there's a lot I want to show you. However, don't be fooled - WebCoder can be very minimalistic, with a single press on your F7 key (click for the full-size screenshot):

Lots of room for your code right there, and of course, all the validation can be disabled as well.

So, what do you think? I hope you like what you've seen so far, but we're not quite done yet - stay tuned for more WebCoder 2013 information :)

With Microsoft pushing their Ribbon interface more and more, I decided to look into it for WebCoder 2013. I have used the Ribbon interface in the Office suite quite a bit, but I wasn't sure how it would work out for an application like WebCoder. However, after having implemented it and worked with it for many months, I'm actually very pleased! It has allowed me to get more of the features out in the open, instead of hiding them in the small menus, at the same time giving bigger buttons that are easier to spot and hit with the mouse. It obviously costs a few more pixels in the top of the screen, but it's not that much and of course you still have the option to go into full screen, where the Ribbon is hidden for the maximum amount of working space.

Here's a screenshot of the Home tab of the Ribbon in WebCoder 2013, which consists of all the things you will need the most (click for full version):

Please notice: The layout is not final - it might very well be changed during the beta phase, due to overall changes and user feedback.

Flexibility

One of the things I enjoy the most about the Ribbon, besides the great look and easy access, is it's flexibility. Here's the same Ribbon with the same buttons, but taking up 330 pixels less than the previous screenshot (click for full version):

And it can become even smaller than that, if your horizontal resolution is very low or if you just prefer to work in a small window.

It doesn't resize the same way in the height, but if you need the space there, the Ribbon can be minimized using the ^ button you see on the screenshot. It will then look like this:

In the minimized mode, you simply click the tab that you want access to and it will fold out and look like on the first two screenshots. When you click the desired button, it folds back in, giving you lots of workspace.

I hope this gives you a good impression of how WebCoder looks with the new Ribbon interface, but to get the full picture, you obviously need a full screenshot. I will finally include just that in the next post - stay tuned! :)

This is one of the blog posts I have been looking most forward to writing, because it's about one of the single most requested features for WebCoder through the last several versions: The ability to have more than one document visible, open and ready for editing at the same time. Here's a screenshot of this ability in action:

Documents in WebCoder 2012 works just like all the other Tool windows, which means that you can move them around and even have one or several documents open on a secondary monitor. Having multiple documents visible at the same time is as simple as dragging a document tab to the desired location, or right-clicking it and selecting the desired action:

You can even have several documents open in several directions, in case you have a high-resolution monitor (click for full-size image):

As you can see, the possibilities are pretty much endless - the above setup could be in the main area of WebCoder or as a floating, combined Tool window on my secondary monitor or both at the same time!

The ability to have multiple documents open simultaneously can be a big help, especially for people with high resolutions and/or multiple monitors, which is true for a lot of programmers these days. I hope you like what you see :)

Almost 10 months have passed since I first started telling you about what I referred to as TSW WebCoder 2012, but the truth is that my Visual Studio project for WebCoder has been called "TSW WebCoder 2013" all along. When I first started working on it in July 2011, I knew it was going to be a HUGE amount of work to re-built WebCoder with a new presentation framework (WPF), so when naming the project, I choose a version number that wouldn't put me under too much of a deadline pressure.

Half a year later, when I started these blog posts, I was pretty convinced that I could have it finished within 2012, so I used that that name for the blog posts while keeping 2013 internally. As it turns out, I was right in the first place. Even though we are getting very close to the first beta version, the fact is that once the final version is released, most of 2012 will have passed.

Therefore it doesn't make sense to keep the 2012 name. It will instead be called TSW WebCoder 2013, as the title suggests. Creating this version of WebCoder has taken a lot of time, but all of it has been spent making sure that this will be the absolutely most fantastic version EVER! Very soon I will post the first full-screen screenshots, and shortly thereafter I will have the first beta version ready for you, so you may experience this your self. Stay tuned! :)

I've made a new file properties dialog for WebCoder, which will show more relevant information for a code file. Here's an example of it in action:

I think that this is useful, and definitely pretty interesting, for your various project files, but getting statistics for the entire project will likely be even more interesting. Therefore I made a dialog for that as well:

So, what do you think? Pretty cool, right? :)

WebCoder has supported previewing your content internally in Firefox for several versions now. It relies on the so-called XulRunner components, which are a part of the Firefox browser. At one point, it was enough to simply have Firefox installed to use this feature, but because Firefox are being updated so rapidly these days, WebCoder can't rely on the user having a compatible version of Firefox installed. Therefore, previous WebCoder versions had a link to a compatible XulRunner package, exclusively for previewing in WebCoder - a simple zip file, that you could unpack and then enter the proper path into WebCoder.

However, this might have been a bit too technical and too big a bother for some users, judging by the support mails I got. I therefore decided to streamline the process quite a bit for WebCoder 2012, by presenting the user with a dedicated and informative dialog instead of the old Windows message box. Here's how it looks when you try to activate the Firefox preview without having the necessary XulRunner components:

Unless you have already downloaded the correct XulRunner package, you simply click the Download now button and WebCoder will download it for you directly through the dialog:

As soon as the download finishes, WebCoder will automatically unzip the package, place it within your WebCoder installation and fill out the path for you:

The only thing left to do for you is to click the Ok button and you're ready to start previewing in Firefox :)

This is yet another one of those small, nice-to-have improvements that I hope you will like!

In the previous blog post we talked about the new scripting support with JavaScript syntax, which allows you to extend the functionality of the upcoming WebCoder. Scripting is a really powerful tool, but unfortunately it has previously been a bit hard to learn and use, because you had to use an unfamiliar syntax AND use a class library (.NET) that you likely didn't know.

With WebCoder 2012, we hope to solve the first problem by changing the syntax to JavaScript and the second one with scripting IntelliSense. That's right, writing scripts in WebCoder 2012 just got a whole lot easier. Here's a couple of screenshots that will demonstrate just how cool it is.

The all-round IntelliSense, with JavaScript objects and methods, .NET namespaces and classes and WebCoder classes and methods.

Member IntelliSense, in this case for a .NET string, showing the available methods and properties.

Parameter hints, in this case for the Substring method on the .NET String class.

As you can see, you will now get a lot of help when you write scripts in WebCoder, making it a lot easier to use all the powerful features from the .NET class library as well as the internal functionality of WebCoder. Hope you like it :)