What's in a RIA Software Engineer's Tool Chest

Major Power Tools

• Microsoft Visual Studio
• Adobe Flex Builder, Flash Builder
  
• Adobe Coldfusion Builder
• SQL Server Management Studio

Browsers

• IE
  
• FireFox
• Google Chrome
  

Eclipse Plugins

• Subclipse: SVN client
  
• Flex Formatter: auto indent and format Flex code
  
• Aptana: excellen JS, HTML, CSS editors
  
• CFEclipse: Coldfusion editor
  

Firefox Plugins

• Firebug
• Html Validator
• Screengrab: take screenshots of browser content (including Flash)
  
• YSlow
• Web Developer

Free or really affordable utilities

• Data Dictionary Creator: manage and generate data dictionary
  
• Service Capture: capture HTTP traffic in/out of local computer, with built-in parser of Flash Remoting content
  
• Fiddler: capture HTTP traffic, well known in .NET community
  
• JSON Viewer: all you can ask for to navigate, search, format JSON data string
  
• VNC: remote desktop
  
• Tortois SVN, CVS, GIT: version control with Windows Explorer integration
  
• Tour De Flex: Air application showcasing Flex controls and sample code
• Skype: IM, talk, video conference, share desktop, ...
  
• Google Desktop: search code, design document with ease
  
• GIMP: free replacement for Photoshop
  
• Sysinternals: a group of Windows Utilities now owned by Microsoft. Here are a few of my favorites:
  
• Process Explorer: advance task manager, mostly used to search for locked resources
  
• Port Mon: serial port traffic analyzer
  
• Autoruns: manage autorun programs that can start through various mechanisms
  
• Depends: Dependency Walker
• WinMerge: graphical diff, can be easily integrated with Tortoise clients
  

Online Resources in Browser Bookmarks

• Google Code Search: search open source code
  
• Google Analytics: keep tab on web site usage
  
• Stackoverflow: ask questions, search for answers, and answer some questions. Occasionally get job offers due to your answers here
  
• EETimes: resource on embedded, semiconductor development
• TechCrunch
  
• DZONE: daily digest of tech blogs similar to TechCrunch
  
• ScottGu's Blog: MSFT VP of several .NET products
  
• MIX: Video, PPT of past conference
  
• PDC: Video, PPT of past conference
  
• GOOGLE IO: Video of past conference
  
• BeanStalk: online SVN server
• Github: onlien GIT server
  
• Gist: code snippet management
  
• CFLib.org: Coldfusion library
  

Open Source Software

• FlexLib: Flex controls
  
• AS3Core: Actionscript 3 utilities
  
• PureMVC: MVC framework, popular in Flex community
  
• Cairngorm: official MVC framework in Flex community
  
• Report.NET: .NET PDF library
  
• ZedGraph: .NET chart library
  
• SQLite: light-weight database, popular in embedded community
  
• NUnit: .NET unit testing framework
• FlexUnit: Flex unit testing framework

Icons

• Java Look and Feel Graphics Repository: official JAVA icon set
  
• Visual Studio Image Library: came with Visual Studio Installation
• Web Application Icons from WebAppers.com
• famfamfam.com
  

Refeactor! for C++ -- Review

Tried Refactor! for C++ (free version 9.1.5 published June 29, 2009). Visual Studio 2005

Summary of my experience:
Pros:

• Free;
  
• The idea is very attractive: refactor C++ code with right click and no modal dialogs;
• Rename class names seem to work fine;

Cons:

• Does not work most of the times. Usually global search and replace did a better job in renaming things;
• Affects VS grammar highlight. After installation, code grey out by "ifdef"s are totally messed up. Unistall the softwate, Visual Studio went back to correct grey out;
  

Recommended? No. I uninstalled the software after a few days.

Still looking for a decent C++ refactoring tool.

Firefox keep crashing -- a solution

Every couple of days, I will see my Firefox using 99% of CPU and crash.

I am a web developer. My Firefox has all sorts of add-ons: Abduction, Firebug, Html Validator, ScapBook, Screen grab!, Web Developer, YSlow. So, I do not need YSlow to know why my Firefox is slow and tend to crash.

I have an idea: how about start two instances of Firefox, one with all the add-ons and the other one clean. I will use the clean one for normal web browsing, and the fully loaded one with development. And, guess what, there is already someone who has done this and posted a blog about it: Firefox: Run a Regular and Development Profile at the Same Time. I used the solution, and it works perfectly.

How to Delete Broken Windows Service

As a developer who writes Windows Services, I sometimes get services registered with the source code and executables long gone (because I no longer work on that project). When it finally came the time to cleanup. I found it difficult to remove them from the registry without the original executables.

After a bit of Google, however, I found a useful tool: sc.exe (Service Controller Tool) come with Windows Resource Kit. This command line tool make deleting service very easy, just run:

sc.exe delete [service name]

Notice: the service name for the command line is not the same as "Name" you see in the list (this is usually the "Display Name"). You need to double click the service to open the properties page. And there you will find "Service Name".

Embedding Chart in Web Pages Made Easy

This week, embedding charts in your web page (either dynamic or static) is made extremely easy by the release of two new tools by Yahoo and Google. Both released free tools to help create chart online.

I am not sure if this is competition between Yahoo and Google or just coincidence. The two tools are released within the same week (this week):
YUI 2.4.0 released on 12/04/2007
Google Chart API released on 12/06/2007

The two tools actually complement each other.

Google Chart API:
Nothing can describe it better than the following text on their web site:

The Google Chart API lets you dynamically generate charts. To see the Chart API in action, open up a browser window and copy the following URL into it:

http://chart.apis.google.com/chart?cht=p3&chd=s:hW&chs=250x100&chl=Hello|World

Press the Enter or Return key ...

Pros:
- absolutely the simplest and the easiest chart tool I have ever seen;
- there is no CPU overhead on your web server and client's computer;
Cons:
- may have problem serving chart over SSL (at least IE will complain about secure and non-secure content on the same page);
- chart is static, no user interaction;
- very limited control over chart's look and feel;
- can only show limited data range;
- can only show limited number of data points;
- your data has to be sent to a Google server, it may be a security concert;

Below is a sample chart serve by Google Chart API. It is the real thing! Served dynamically from Google's server farms! It takes me only 20 seconds to embed it into this blog.




Yahoo! User Interface Library (YUI):
YUI implementation is based on a Flash component. You will need to write JavaScript to control the data and look&feel on the Flash chart.
Pros:
- Rich user interaction (there is potential to allow user zoom, pan, or edit charts);
- More control over look and feel;
- Can show more data;
- Can be hosted on your own server (no worry about Google being BIG BROTHER or going BANKRUPT);
- Less Internet traffic is required (only need to download data, not PNG or any other image files);
- Can serve live data (again, only data download is needed, we can afford to update the chart frequently);
Cons:
- substantial JavaScipt programming and HTML editing is required;
- end user need to have Flash Player 9.0.45 or higher (not many people have that as on December 2007);
- end user's computer must have some spare CPU power, especially when multiple charts are embedded on the web page;

As an obvious proof of the difficulty to start using YUI, I am not willing to try to embed a sample chart here in my blog! :-(

The Verdict:
If you want a simple chart embedded on a static page or your blog, use Google Chart API.
If you have total control of your web server, and want to create powerful dynamic charts, use YUI 2.4.0's experimental chart component.

Last Words:
Of course, if you have enough server side CPU power and deep programming knowledge, server side chart rendering always give you ultimate control over the look and feel of your charts. On this end, you have these great open source libraries to help you: ZedGrap (C#), JFreeChart (Java), ASTRA (Flash).

Aptana Out of Beta: 1.0 Released

Just noticed that Aptana has been out of beta. In the 2.0 era when everything stays "BETA" forever, this is a rare achievement.

In version 1.0, an open-source Community edition and a commercial Professional edition are available at the same time. The professional edition definitely deserves the nominal price it asked for. But as its name suggests, only professionals really have an urge for that edition. The free Community edition has enough features for 90 percent of its potential users.

My main IDE is still Visual Studio 2005. But the Javascript editor in Aptana is the best I ever seen. Its auto-complete is way better than even the latest Visual Studio 2008 Beta2.

JSLint with ANT

jslint4java:

"This is a java wrapper around the fabulous tool by Douglas Crockford, jslint. It provides a simple interface for detecting potential problems in JavaScript code."

With this tool, batch scan JavaScript files with JSLint is a piece of cake. Here is a sample ANT target:

<target name="jslint.src.js" depends="init">
<description>scan javascript files using jslint</description>
<apply executable="java" parallel="false" failonerror="false">
  <arg value="-jar" />
  <arg file="${tools.dir}/${jslint}" />
  <arg value="--bitwise" />
  <arg value="--browser" />
  <arg value="--undef" />
  <arg value="--widget" />
  <srcfile />
  <sort xmlns:rcmp="antlib:org.apache.tools.ant.types.resources.comparators">
    <rcmp:name />
    <fileset dir="${web.js.dir}">
      <include name="**/*.js" />
      <exclude name="**/YUI/**" />
      <exclude name="**/*-min.js" />
      <exclude name="**/*-debug.js" />
    </fileset>
  </sort>
</apply>
</target>

For ease of future reference, JSLint output can be redirected to a text file:
ANT jslint.src.js > jslintreport.txt

YUI Compressor in ANT

Here is a sample ANT target to batch minify all JavaScript files using YUI Compressor:

<target name="js.minify" depends="init">
<description>minify js files</description>
<apply executable="java" parallel="false" failonerror="true">
<arg value="-jar" />
<arg file="${tools.dir}/${yuicompressor}" />
<arg value="--nomunge" />
<!-- line break set at 20 characters, so that we can get many line breaks, this
   is good for debugging in IE-->
<arg value="--line-break" />
<arg value="20" />
<arg value="--preserve-strings" />
<arg value="--preserve-semi" />
<arg value="--charset" />
<arg value="ISO-8859-1" />
<arg value="-o" />
<targetfile />
<srcfile />
<!-- files are processed in alpha-order so that we can know the progress,
   and easily identify the file that is failed.-->
<sort xmlns:rcmp="antlib:org.apache.tools.ant.types.resources.comparators">
 <rcmp:name />
 <fileset dir="${src.dir}">
  <include name="**/*.js" />
  <exclude name="**/YUI/**" />
  <!-- avoid cycling -->
  <exclude name="**/*-min.js" />
 </fileset>
</sort>
<!-- define output file name -->
<mapper type="glob" from="*.js" to="*-min.js" />
</apply>
</target>

About YUI Compressor: it is a tool to minimize JavaScript and CSS files. I have used it for more 6 months on a public web site without any problem.

About ANT: I have been using APACHE ANT for 7 years, since 2001. To me, an ANT build file structure is more intuitive and scalable than MAKE files.

Apache Ant is a Java-based build tool. In theory, it is kind of like Make, but without Make's wrinkles.

This is the post that gets me started on this direction:
Building Web Applications With Apache Ant

Free Screen Capture Tools for Windows

Here are two free screen capture tools that work decently well for small tasks:

1. CamStudio 2.0: Open Source software that comes with Visual Studio solution, and Win32 installation package. It works very well. Can capture to .AVI, and has a tool to convert AVI file to .SWF file and a HTML template to embed the Flash file. The captured file size is big. 40 seconds capture generated 20MByte AVI file and 1.5MByte SWF file.
Links:
SourceForge Host: http://sourceforge.net/projects/camstudio/
CamStudio - Free Streaming Video Desktop Recording Software: read the "Issues" section on this page. You will need to manually edit the generated HTML template in order for it to play in Firefox or Netscape.

2. Windows Media Encoder: Free Microsoft tool for video capture and editing. Capture result is WMV file format. File size is very small. But I recommend to use at least medium quality option which will generate a 500 KByte WMV file for 40 seconds capture.
Links:
http://www.microsoft.com/windows/windowsmedia/forpros/encoder/default.mspx

My environment: Windows XP Professional, Dual Monitor

Regular Expression Designer

Writing regular expression is always tough for me, not to mention trying to read regular expressions written by other programmers. I found this excellent FREE tool: Regular Expression Designer provided by radsoftware.com.au a Sydney based company.

As you can see from the screen-shot below, it makes it very easy to experiment and visually inspect output of regular expression applied against various text input. You can try MATCH, SEARCH or REPLACE with one click. Match results are displayed in a tree format, so that you can instantly see all the matches and captured groups. An online help of regular expression language elements is provided as a quick reference.


This application only runs on Windows computer with .NET Framework 1.1 or 2.0.

View Generated Source in IE

I have "Web Developer" add-on for Firefox installed for a while. I love the "View Generated Source" function. Recently, I discovered an excellent way to add this functionality to IE by Favelet or Bookmarklet. This approach is inspired by the reference links below. I tried 2 variations of the Favelet, and end up using the first one.

javascript:void(window.open("javascript:'<xmp>' +
opener.window.document.documentElement.outerHTML + '</xmp>'"));
Good: HTML source is shown in new window.
Bad: Only works for pages served from localhost, due to IE's policy against cross domain access. However, this is not a concern for me, because the main reason I want to see "generated source" is for web development on local computer.

javascript:document.write("<xmp>"+document.documentElement.innerHTML+
"</xmp>");

To make this function easily accessible, I added it to IE bookmark "Link" folder (see screenshot below). Now, I can see the generated source (including generated HTML and Javascript) with just one click on the link named "source".



Related Links:
http://www.eggheadcafe.com/tutorials/aspnet/a4a16033-9811-45dc-8c6b-15d093c0c3ea/javascript-debugging-tool.aspx
http://ajaxian.com/archives/ie-tip-cheeky-way-to-see-the-current-state-of-the-page#comment-3928

The Best of Both Worlds (Visual Studio + Eclipse)

I use Visual Studio 6.0, 2003 and 2005 every day. But when it comes to write Javascript code, Visual Studio left a lot to be desired.

The emerge of Aptana plug-in make me seriously consider install Eclipse on my development computer. Here is what I do to take advantage of Aptana's superior JS edit functions in my Visual Studio web project.
1. add a simple eclipse project under my web application development folder (this will only add one file to my project: .project);
2. associate "*.aspx" to "Aptana HTML Editor", "*.css" to "Aptana CSS Editor", "*.js" to "Aptana JS Editor";
3. add my JS library to "Code Assistant Profiles";

From now on, no matter I am writing javascript in a .js file or .aspx file, I can use Eclipse. When I am working on C# code and ASP.NET controls, I go back to VS2005.

Please look at the screen-shot to see what Aptana can do: code auto-complete with documentation of parameters, tree structured outline of code file, code refactor, code snippets, to name a few. (a side note: also get "Firebug" for JS and CSS debugging in Firefox.)

ASP.NET AJAX 1.0 released

From Atlas to ASP.NET AJAX, this nice development tool is finally released, and it is free. For ASP.NET developers, this is the time to seriously check it out. It is a huge enhancement to ASP.NET in Visual Studio 2005.

The official web site for this product: http://ajax.asp.net/default.aspx

Also check this blog for more behind scene information: http://weblogs.asp.net/scottgu/archive/2007/01/23/asp-net-ajax-1-0-released.aspx
(Scott is a Microsoft employee. His blog is one of the few I subscribe to. It has latest news about ASP.NET, IIS, and lots of tutorials.)

HTML Validator (Firefox Extension)

Recently, I discovered this tool. And it soon becomes the "must-have" tool for me. I develop web pages using ASP.NET. I always call HtmlEncode function before I insert any text from database to web page. But, there is one problem this function call won't solve. And I didn't notice this problem until I used the "HTML Validator" tool to inspect all the web pages I created.

In this case, I grabbed a piece of text from database and inserted it into the web page as tooltip. I called HtmlEncode function before inserting the text to the "title" attribute. Guess what, I forgot one thing: replace the single quote "'"! So, HTML like this can be generated.
<span title="'blogger's">space<font>

Of course it is wrong. You will only see this tooltip: "blogger". But, no web browsers have complained about this. And no users complained about this (well, they just don't know what they should see). I bet it won't be noticed by anybody not for this wonderful extension.

Link to this extension:
https://addons.mozilla.org/extensions/moreinfo.php?id=249&application=firefox

FlashBlock (Firefox extension)

I only have 3 Firefox extensions installed. FlashBlock is one of them.

Pros: It replaces flash animation with a button which user can click to start the flash content. Since 99% of flash contents on the web are Ads that just distract your attention from reading and slow down the CPU, this extension is a big saver. It also has a white list option to allow some customization.

Cons: Uninstall is not as easy as install. There are other known problems.