The TSW Blog

You have been able to extend the functionality of WebCoder with scripting for many versions, first with a Pascal syntax and later with a Python syntax, because IronPython worked so well with .NET. For WebCoder 2012 I would like to offer you something a bit closer to the Web-world though: Scripting with JavaScript syntax. Since a lot of you are already using JavaScript for your websites, I hope that this will make the scripting functionality useful to even more people.

As you can see from the following (admittedly silly) example, scripting will be a nice mix of JavaScript syntax and the .NET class library, combined with the useful classes used from WebCoder it self:

var tag = new TSW.WebCoder.Classes.Html.HtmlTag();
tag.Name = "div";

var sb = new System.Text.StringBuilder();
for(var i = 0; i < 3; i++)
{
	var rnd = Math.floor((Math.random() * 10) + 1);
	tag.SetAttribute("class", "test" + rnd);
	sb.Append(tag.GetMarkup(false) + "\n");
}

alert(sb.ToString());

We use the HtmlTag class from WebCoder to create a new HTML tag, we use the .NET StringBuilder class to hold the tags, we use the Math class and its floor() and random() methods for obtaining a random number between 1 and 10, and we use a regular JavaScript loop to add the tags to the StringBuilder. The alert() method is normally a part of the browser DOM and not core JavaScript, but has been implemented in WebCoder to make it easy for everyone to show a message box, just like in the browser. Here's the result when running the script:

Stay tuned for the next part, where I will show you some more cool stuff from the new scripting functionality in WebCoder 2012. I hope you like what you've seen so far. Let me know what you think :)

Today, exactly one year ago, I created the folder for the WebCoder 2012 source code. I wasn't really sure of the name, in fact I wasn't even sure that creating a brand new version of WebCoder based on the WPF framework was even possible! So, for the first 6 months, I simply coded like crazy, to get a working version of WebCoder, before telling you anything about it.

After the first couple of months, I was actually able to use what I had done so far for a PHP freelance project I was doing at that time - quite a milestone! The basic editor was working, along with a lot of the IntelliSense functionality that I use so much, as well as some very basic project management. Around the same time, I took the first manual copy of the source and put in its own folder.

So, to show you how much has happened during the development process, I will share the file/code statistics with you. I know that this is a bit geeky, but hopefully you will find it a bit interesting anyway :)

10 September 2011

The September 2011 version was the very minimum that I, as the developer, could live with. There was pretty much no dialogs for setting up stuff like projects and settings, so a lot had to be done with test code and manual editing of the data files, and I wrote at least 100 notes about stuff I wanted to change and improve during a couple of weeks of usage. Now, onto the current version, the one I'm using today, which is way more polished:

24 July 2012

So as you can tell, quite a bit has happened. I'm still working very hard to bring you the first beta version and I think that the amount of TODO items on my list is finally going the right way: down! :)

Most of the major features has been implemented and a lot of them are even ready for testing, but there's also some features that I still have to put some work into, to make it ready for your eyes. Stay tuned for more information!

For many versions of WebCoder, you have been able to change the HTML definition used by WebCoder from the Functions menu. Unfortunately, some users didn't realize this, and after validation was added, having the correct definition for your document became increasingly important.

During most of these years, CSS 2.1 was the dominant standard, so it didn't make a whole of sense to make this configurable. However, with the rise of HTML5 and especially CSS3, I felt that there was a need for more focus on which standard was used for your current document. At the same time, I wanted to put more focus on the built-in HTML and CSS validators, because it's very fast at detecting a lot of common errors and general problems.

At the same time, WebCoder 2010 introduced JavaScript frameworks, allowing you to have constant IntelliSense support for one or several JavaScript frameworks. This was also available from the Functions menu and I fear that some users overlooked it as well.

Now, in WebCoder 2010, you could always see the total amount of validation errors in the document in the statusbar. It looked like this:

But as I said, I wanted to do more with this for WebCoder 2012, so after some thinking, I combined the web standard information with the validation information and put it directly in the statusbar, so that you can always see and reach it. It looks like this:

• Validation errors are now shown separately (16 HTML and 1 CSS issue)
• The JavaScript framework selector has been included, showing you the active framework(s)
• Each item is a button which can be clicked for more options, like selecting the current definition

When clicking one of the buttons, you will be presented with options corresponding to the button you clicked. Here's how it currently looks when you click the CSS button:

As you can see, this gives you instant access to changing the currently used definition for the document you're working on.

For shortcuts, you can hold down Ctrl key and click on the button to navigate to the next validation issue. If you instead hold down the Shift key, the Tool window for showing validation messages will be activated.

This is all a part of my plan to make the important features easier available and give you a better overview of your work and I think that this is another step in the right direction. Hopefully you will agree :)

In WebCoder, there are quite a few Tool windows, which are the dockable/floatable areas to the left, the right and in the bottom of the screen. The most of them are pretty self-explanatory, like "FTP", which are for working with your FTP servers, "Projects" for dealing with your projects and so on. These have toolbars in the top that allows you to connect to an FTP server or create a new project. However, a couple of the Tool windows might not be that obvious, a good example being the "Database result" Tool window. It's connected to the "Database" Tool window, but that might not be obvious if you're new to WebCoder. Here's what it looks like in WebCoder 2010:

I got to thinking that if you meet this Tool window for the first time, it might not be very obvious what to do. Therefore, I decided to replace the grey area (where the results are shown once a query is executed) with a short but helpful introduction. It looks like this:

The blue links that you see are actually interactive - click them, and WebCoder will show you the area of interest using animations and arrows! Hopefully this will make it easier for new users to get started with some of the less-obvious, but very useful features of WebCoder.

Another example is the WebDebug Tool window, which is nothing but a toolbar and some empty windows until you actually activate the function - but how exactly is that even done? WebCoder 2012 will help you get started with this very powerful feature as soon as you gain an interest in that Tool window marked "WebDebug":

Hopefully this will help even more people get a great start with WebCoder. As always, let me know what you think and stay tuned for even more usability improvements :)

Disclaimer: WebCoder 2012 is still far from being done. These blog posts are merely to show you what this new version will be like and to give you an impression of the development process. I hope to have the final version of WebCoder 2012 ready in the third quarter of 2012, but nothing is certain yet!

As I have already mentioned several times in the "Making of TSW WebCoder 2012"-series, I've given a lot of thought to how the usability of WebCoder could be improved, while working on version 2012. Often, it's those small nudges of help that will make you feel at home with a piece of software, allowing you to enjoy it even more. I've tried to find all those situations where working with WebCoder might be a bit cumbersome, perhaps because you don't know the application well enough yet, or perhaps just because a little extra help is needed for a specific situation.

While the "Making of."-series focuses mostly on new major features and heavy improvements for the existing ones, this series will focus on all the little details I have added to make WebCoder easier and more pleasant to use. Therefore these posts might not be as interesting as the rest, but I would like to prove to you that I'm dedicated to making WebCoder better in other ways than just adding new features. These posts will be for the WebCoder-fanatics out there, but the features introduced in them is definitely for everyone, so stay tuned!

Several power users have been requesting a re-redesign of the Settings dialog for the last couple of versions of WebCoder. The most common complaint was the dual-tab layout, where you would have to click one tab to access a range of other tabs. When I initially designed it, I thought it was a great idea, because of the many settings already offered by WebCoder, but as these power users pointed out, it made it a bit hard to discover all the configuration possibilities and navigate between them. Therefore I decided to re-structure the settings dialog for WebCoder 2012, in compliance with the most common user change requests.

WebCoder 2010 Settings dialog

First, a screenshot of the settings dialog currently found in WebCoder 2010:

WebCoder 2012 Settings dialog

And here's one of the same settings, but in WebCoder 2012:

Hopefully this new way of showing the settings will be appreciated by everyone. Feel free to let me know what you think of it :)

Please note that the settings dialog above is still a work in progress and may not be completely identical to the one you will find in the final version of WebCoder 2012.

Disclaimer: WebCoder 2012 is still far from being done. These blog posts are merely to show you what this new version will be like and to give you an impression of the development process. I hope to have the final version of WebCoder 2012 ready in the third quarter of 2012, but nothing is certain yet!

Many of you have asked for a more advanced color dialog, so when creating the Color dialog for WebCoder 2012, I used a different approach, while keeping the ideas from previous versions that I really liked. Here is how the Color Dialog looks in WebCoder 2010:

I always liked it for the color picker and the ability to reach my project colors, but several users wanted the ability to tweak the color selection more, as experienced in image editing applications like PhotoShop. Now, WebCoder is no image editor, so that wasn't quite my goal, but as you will see from the first screenshot, it has gotten way more options for fine tuning your color selection:

I especially like the new color picker, where you can select the base color in different ways and then tweak it with the sliders. The User colors section, where you can add your own colors, has also been simplified. You can now just press Add to get the selected color added to the end of the list - no need to select a free spot for it first. The websafe colors, which was on the first tab in WebCoder 2010, has been combined with the standard colors on the second tab:

And the third tab has been extended to show both project colors AND colors from the active document, if any. This means that you can see the colors already used in your document, grab one and then tweak it into a new color you need:

I hope you like the improvements! Let me know what you think :)

Disclaimer: WebCoder 2012 is still far from being done. These blog posts are merely to show you what this new version will be like and to give you an impression of the development process. I hope to have the final version of WebCoder 2012 ready in the third quarter of 2012, but nothing is certain yet!

As I mentioned in a previous blog post, I'm rethinking almost every aspect of WebCoder with this new version, and since I have to make all the application dialogs from scratch, I try to give a lot of thought to what might be changed to create an even better dialog. A great example of this is the dialog for managing the templates of WebCoder. Here's what it looks like in WebCoder 2010:

Nothing wrong with it, but as it turned out, there were actually quite a few things that I wanted to changed for 2012:

• The Icon view is not very good for templates with long names
• The toolbar buttons are a bit small
• The entire dialog is a bit small as well, in case of many templates
• When adding or editing a template, a new dialog would pop up
• There is no way to see what a template contains without selecting to edit it

A lot of these things simply made more sense years ago, when the average resolution was way lower, but today, most developers will have a resolution that justifies using a bit more space when needed. I have used this principle for several of the dialogs, but it's especially visible with the templates dialog, as you will see from this screenshot:

Besides the obvious size difference, I added categories to the templates along with a preview part directly in the dialog. You will also notice that there are now the possibility for placeholders in the templates, for instance to control where the cursor will appear when you use the template.

In case you want to add or edit a template, the dialog will look like this - no new window necessary:

As you can see, I've also gathered some more templates, ready-to-use for you. If you have any suggestions for templates, please do let me know!

I hope you like what you see. Let me know what you think of this new approach to the dialogs of WebCoder :)

Disclaimer: WebCoder 2012 is still far from being done. These blog posts are merely to show you what this new version will be like and to give you an impression of the development process. I hope to have the final version of WebCoder 2012 ready in the third quarter of 2012, but nothing is certain yet!

This time around, instead of only posting about the major new features, I will also be spending some time on those small improvements that makes all of our lives easier. I always enjoy improving the IntelliSense of WebCoder and this post with user contributed suggestions really gave me something to work on! Instead of talking a lot about it, why don't I just show it to you?

CSS3 IntelliSense

Pseudo selectors

Color IntelliSense, both common and from document/project

IntelliSense for existing selectors

Font IntelliSense with preview

I hope you like what you see so far, and if you have questions, comments or any feedback in general, please don't hesitate :)

Disclaimer: WebCoder 2012 is still far from being done. These blog posts are merely to show you what this new version will be like and to give you an impression of the development process. I hope to have the final version of WebCoder 2012 ready in the third quarter of 2012, but nothing is certain yet!

One of the most important functionalities of WebCoder, if you ask me, is the project management. Ever since this feature was first implemented, which was many, many versions ago, files were manually added to the project, either by the user clicking the "Add" button, or when the users chose to synchronize the project. This worked pretty well if you only added, moved and removed files from within WebCoder, but in the end, it did feel a bit old-school. In WebCoder 2012, I have turned this concept completely around. WebCoder 2012 will monitor your project root for any file related changes and then instantly update the project structure accordingly. This means that if you save a file, move a file, delete a file or rename a file, WebCoder automatically detects this and updates the project structure. No need to do manual synchronizations, and when you create a new file and save it within the project root, WebCoder won't bother you with a question on whether to add it or not.

But what if you don't want a specific file or directory within your WebCoder project structure? For this, we have exclusion filters, allowing you to exclude specific files or directories or several files/directories using wildcards and even Regular expressions to specify rules. For instance, you can exclude all *.gif files or all directories which starts with a . (dot) very easily. Excluding a single file or directory can be done with two mouse-clicks.

There are more changes in project management than this, but you will have to see them for your self, once the first beta version hits the page. It will be a while though, but stay tuned for more information about WebCoder 2012 :)

Disclaimer: WebCoder 2012 is still far from being done. These blog posts are merely to show you what this new version will be like and to give you an impression of the development process. I hope to have the final version of WebCoder 2012 ready in the third quarter of 2012, but nothing is certain yet!