TSW Blog

Improving the usability of TSW WebCoder 2012 part 1: Inline feature help

Kasper (TSW) — Sat, 05 May 2012 13:46:47 +0000

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!

Improving the usability of TSW WebCoder 2012: Introduction

Kasper (TSW) — Mon, 30 Apr 2012 08:13:01 +0000

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!

The making of TSW WebCoder 2012 part 5 – The new Settings dialog

Kasper (TSW) — Fri, 20 Apr 2012 18:02:46 +0000

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.

The making of TSW WebCoder 2012 part 4 – The new Color Dialog

Kasper (TSW) — Thu, 05 Apr 2012 08:00:38 +0000

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

The making of TSW WebCoder 2012 part 3 – Design of the dialogs

Kasper (TSW) — Tue, 06 Mar 2012 10:29:23 +0000

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

The making of TSW WebCoder 2012 part 2 – IntelliSense improvements

Kasper (TSW) — Thu, 09 Feb 2012 11:16:14 +0000

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

The making of TSW WebCoder 2012 part 1 – Projects

Kasper (TSW) — Tue, 24 Jan 2012 08:02:07 +0000

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

The making of WebCoder 2012 – Introduction

Kasper (TSW) — Mon, 16 Jan 2012 16:31:53 +0000

As promised, I will once again be doing an entire series of blog posts about the upcoming version of WebCoder. With this new version, I started all over as I have done many times before, re-building the application from scratch. Technically I went from Windows Forms to WPF, which is not very interesting to most of you, but it meant that no UI could be re-used – only the code behind it could. I made this change for several reasons, one of them being that it gave me the opportunity to create at least a couple of features that you have been requesting for some time now – more on that later. Another benefit of starting all over like this, was that it gave me a chance to do something that I have been thinking about doing for quite some time: Trimming! I don’t think that WebCoder had gotten bloated, but it DID contain a lot of functions and settings. This is simply what happens to a big application like WebCoder, which has been through many beta phases where people have had different requests and takes on how things should work.

With WebCoder 2012, I have been re-implementing things only if they still made sense, and for each feature, I have thought long and hard on whether it should still be in WebCoder, and if so, how I might change it to make it even better. While doing this, I have been reading up on your wishes for WebCoder 2012, and even on some of the wishes you had during the beta testing of WebCoder 2010. Some of them were impossible to do at that point, because it would require way too many changes, but because I was doing everything from scratch this time, I was able to make some fundamental changes in some areas, which I think you will appreciate.

During the next months, I will post much more information about these changes and how WebCoder is going to look. You might want to prepare for some pretty big changes this time, but speaking as the only one who have done actual work with an early build of WebCoder 2012, I promise you that it’s all for the better. Stay tuned :)

Merry Christmas 2011

Kasper (TSW) — Sat, 24 Dec 2011 11:40:19 +0000

Dear all,

I would like to wish you all a very merry Christmas and a happy New Year! I know that the year has been very quiet here on the blog, but I promise that I will make up for it in 2012. During the last 6 months, I have been working very hard on a brand new version of WebCoder, and I can hardly wait to start telling you about it. I plan to do an entire series of blog posts during 2012, where I will tell you all about the many, MANY changes in this new version, so you can surely look forward to that.

Until then, have a very merry Christmas and an excellent New Year!

TSW WebCoder 2012 – what would you like?

Kasper (TSW) — Thu, 07 Jul 2011 09:55:42 +0000

Hello all,

Since Saturday, all the TSW websites have been down and we’ve had problems with our mail servers as well. Our ISP, which is one of the biggest in Denmark, had to move all their servers after one of their datacenters lost all power due to a huge rainfall in Copenhagen and other Danish cities. The newspapers are talking about “the biggest rainfall in 500 years” and telling us that we received the same amount of rain in a couple of hours that we would have normally received within a couple of months. Hopefully everything should be okay now, and while there was not much I could do during this entire process, I do apologize to everyone who has tried to access the website and instead received an error.

Now, let’s move onto something more interesting! I’m currently writing down ideas for the next version of WebCoder, which will likely be named TSW WebCoder 2012, and while I do have some ideas of my own, I would love to hear what you guys would like to see in this next version! I have created a brand new forum for this, where I hope you will post all of your ideas. This can of course be ideas for new functionality, or wishes for modifications of the existing functions. Since I haven’t started coding anything yet, everything is possible, at least in theory, so let’s talk about how we can make WebCoder even better in the future! I’m looking forward to hearing all of your good feedback :)

Enter the TSW WebCoder 2012 forum!