However there was a tool that helped me a lot. It’s called Visustin . I used the trial and even with the limitations it was really useful to visualize the code.

You just select the language (lots of languages supported) and paste the code. The program analyzes it and displays the diagram of the functions you select.

If you have to maintain a legacy project , this tool could be valuable. It saved me a lot of pain. give it a try.

http://www.aivosto.com/visustin.html

http://rusanu.com/2009/05/15/version-control-and-your-database/

I think is a good way to make maintenance easier for me and my clients.

Solutions

First you have to detect your bottlenecks.

Firefox and other modern browsers have profiling capabilities built-in. With IE6 there are some tools to help you profiling but i wanted something quick so i created a little utility to measure the speed of the javascript methods .

Usage:

1. Call setupProfiler() once to setting things up:

2. call console.profile(“name”) to start monitoring a function or segment

3. call console.profileEnd() to end monitoring. You have to call console.profileEnd() once for every console.profile call. (Nested calls are supported)

You can use this to monitor complete methods or just segments of code .

With the quick profiler i detected the methods that were taking longer to execute in IE6. Some things to note:

1. If you initialize JQuery UI controls in the page loading event performance problems may occur. An alternative is to delay the initialization of datepickers, dialogs and other controls.

2. To optimize the jquery code, pay attention to your selectors, the more specific a selector the faster it runs. If possible use always #id selectors or tag names instead of .class selectors.

3. Use scope with jquery selections $(“div.myClass”,scope) where scope is an ancestor DOM element. JQuery will only search elements inside the scope element.

I hope this gives you some tips to troubleshoot javascript performance problems. The code for the profiler is:

   1: function setupProfiler(enabled) {

   2:     window.console = window.console || {};

   3:     if (window.console.profile == undefined) {

   4:         /*Para IE y otros browsers simplemente imprimimos los resultados*/

   5:         window.colaProfilers = [];

   6:         $("<div id='profilerInfo'></div>").appendTo($("body"));

   7:         var refProfilerElem = $("#profilerInfo");

   8:         window.console = {};

   9:         window.console.profile = function(title) {

  10:             if (enabled == false)

  11:                 return;

  12:             //Agregar a la cola de profilers

  13:             colaProfilers[colaProfilers.length] = { name: title, start: new Date(),deep:colaProfilers.length };

  14:         };

  15:  

  16:         window.console.profileEnd = function() {

  17:             if (enabled == false)

  18:                 return;

  19:             var endTime = new Date();

  20:             var currentProfiler = colaProfilers[colaProfilers.length - 1];

  21:             var duration = endTime.valueOf() - currentProfiler.start.valueOf();

  22:             colaProfilers.pop();

  23:             refProfilerElem.append("<div style='margin-left:"+currentProfiler.deep*10+"'>"+currentProfiler.name + " (" + duration + " ms )</div>");

  24:         };

  25:     }

  26: }

Most of the startups choose an open source stack because of the price, open source tools  and great communities even if the technologies they choose are not better than proprietary alternatives like Microsoft. Big companies like Google have also influenced this by giving the community great tools and Api’s and with a very competitive price (sometimes free).

Microsoft has been late to the party and i see they are right now trying to get the attention of entrepreneurs in different areas:

1. Database tools like SQL Server express
2. IDE’s like Visual Studio Web developer Express
3. Windows Azure and their price scheme.
4. Programs like BizSpark

However i think they that Microsoft has to do better if they want to stop the leak of great programmers from .NET to other technologies. ( The problem here is not for Microsoft but for all of us who won’t be able to learn from them anymore because they got tired of Microsoft policies and decided to go to Ruby on rails so they stop focusing on blogging on .NET ).

Some of the current problems me and others see are:

Yes, free tools but with obvious limitations.

I know Microsoft needs to make money, and i think that corporate clients can cover this aspect, but what about giving their best tools to freelance  developers, enthusiast and startups for free?

Yes i know about BizSpark but as Rob Connery states, BizSpark only delays the payment for 3 years.. So you will still have to pay those 30000(?) dollars for Sql Server standard after 3 years or stop using it.

(Related: TekPub switch from ASP.NET MVC to Ruby on Rails and Linux because of cost projections )

I think that Microsoft thinks that by offering a limited version of Visual Studio or Sql express they will keep people happy. You may think that the 4 gigabytes limit of SQL Server express is a lot and that it is difficult to use it all, however what if your application starts to grow and you need to scale your database? bam!.. you can’t because SQL Express only supports 1 CPU and only 1GB of Ram.

You have other options like SQL Server Web Editions but as Rob Conery mentions. Why would you choose to pay if there are free alternatives with zero cost?, i think he has a point there.

Quality is not an advantage anymore. So saying that you will get a superior product won’t impress developers. They have seen great web products developed with a combination of  MySql, postgress, Rails,Linux, php etc and not that much “cool web 2.0 apps” using the Ms stack.

Azure too expensive?

I find the Tekpub a really useful example of a startup that did the math and decided to go with and open source stack (Even with their founders being great .NET developers). Rob Conery has an interesting conversation with Scottgu in twitter regarding Amazon EC2 prices vs Azure:

And compare those 1400 with the projection of costs using Azure:

I think that there is not much to say about it.

The important point here is that it doesn’t matter how cool or sophisticated the .NET framework is if Microsoft doesn’t make it appealing for startups and open source developers, let’s hope that the situation will get better.

Then i discovered the YUI blog. Is a  blog  written by some of the Yahoo team members (And some guests), with great posts about front end engineering topics, optimization techniques, patterns and utilities. It focuses mainly on the YUI library, but there are lots of topics that will be useful even if you use JQuery or other library.

After some years of writing/reading Javascript code i have realized that there are some topics that are specially important if you want to do it right. I will leave the technical details out , and focus on the concepts, and things typical js developers must do/use/know:

Functions

By understanding how functions work in Javascript you will be able to leverage a lot of flexibility. Things like dynamic parameters, passing functions as parameters, variable scope,closures, anonymous functions are commonly used in Js world and is a good idea to be sure you understand those concepts.

How is javascript executed and when.

If you are starting with Javascript is common to ignore the way js scripts are loaded and executed and then spend time figuring out why you are having problems trying to get an element from the page.

You must make sure that all the elements you are trying to use from your script are already loaded by the time the script runs. The browser will execute javascript code as soon as it finds <script> tags. Keep that in mind if you want to access page elements that may not have been loaded yet.

Common browser events.

Learn the common browser events, like the “load” event of the window object that you can handle to run code when the HTML and images have finished loading.

( Javascript libraries enhance the events support, by creating an abstraction layer compatible with popular browsers so you won’t have too much trouble with different browsers).

Common patterns

I’ve found that patterns like Singleton are widely used by Javascript developers, and large programs will benefit by proper pattern use. I recommend the book  Pro JavaScript Design Patterns by Ross Harmes and Dustin Diaz. ( Before trying to understand patterns in Javascript make sure you feel comfortable with javascript syntax, keywords, and have some experience writing js code).

Understand JSON

After you have studied javascript syntax, arrays, object literals you will understand JSON without trouble, because JSON is just javascript syntax as a string that you can pass between server and client (With some restrictions of course).

Here, you want to use a JSON utility like json2.js (http://www.json.org/js.html) to parse and generate secure json strings. (All the frameworks also have json utilities).

CSS

Yes, is important to understand how CSS rules work. With some frameworks , CSS is the easiest way to obtain a reference to elements in your page. (JQuery supports CSS 3 selectors).

Knowing the CSS rules is also important because most javascript style attributes have similar names to the CSS attributes. (they are the same most of the time, with some exceptions)

Master the tools.

Write basic javascript programs and debug them with Firebug (firefox extension). Some things you should learn with firebug:

1. set breakpoints and check variable values
2. Learn to step-in, step-out when debugging.
3. Get familiar with the Network tab to check if there was a problem loading a resource (js, css, image). This will be useful to validate AJAX requests parameters.

There are lots of tools to help you develop better javascript code. Some of them belong to the following categories:

1. Minify and compress tools (for faster loading pages)
2. Verification tools (like http://www.jslint.com/) detect errors and bad practices.
3. Documentation tools to generate docs for you
4. Debugging tools for different browsers
5. IDE’s

Learn a Javascript Library (at the right time).

Please, understand how javascript works before learning a framework like JQuery. It can be tempting to just skip the “hard” parts of Javascript because frameworks make life easier, however that’s a bad idea, you will lost lots of time guessing why your code doesn’t work, or have conflicts with other on the page.

Having said that, i strongly recommend you to learn a Javascript framework like (JQuery, YUI, mootools, etc.) It will improve your productivity a lot. There are thousands of plugins that you can use, and event write your own. All the popular frameworks make it easy to create extensions.

If you are going to begin with Javascript, all these points will be important. There are tons of tutorials, documents, but hopefully this post will serve you as a guide.

Learning is fun, and addictive.

Wait..Why is that a problem?…

Well, it may not be a problem per se, however with the unlimited flow of information and the ease of access, you could spend your life only receiving information and doing nothing useful with it, and if that’s your goal then its ok. However i see a fundamental problem here, and it has to do with the balance of input vs ouput and the limited time we have in a day. For me it all goes to the following

“You can only be really good in a limited number of things”

Why?, because you only get good in something with experience and hard work, and while you work you must put aside other cool technologies, languages, platforms, etc. etc… I’ve known developers that have a hard time with this, and believe that is the knowledge quantity that matters,  however they are not really good at any of the things they learn because there are other million things in their heads, so no further efforts are made to really know the ins and outs of an specific topic.

Control your input

It has happened to me, someone puts a really cool demo online, i see it, and then i feel the urge to learn that technology/ technique/ tool, even if it is totally unrelated to my main interests and goals. I know that it can give me some “instant gratification” but maybe i can use that time to keep improving the skills i know i will need to develop products for my company or to complete a hobby project.  I’m not saying that learning new things that are not directly related to your job or interests is a bad thing, because it isn’t and it can give you a new perspective and creative ideas, the point I’m trying to make is the importance of balancing the time spent learning and the time spent applying the knowledge building something useful.

I believe that even the learning process should be planned, and with the infinite amount of information available is important to be good at filtering the useful content from the fun-but-useless-and-unrelated information and more important, applying the knowledge creating something that will contribute to achieve your goals.

(Note to the grammar police: If you catch a grammar/redaction error please send an email to hugozap@obassi.com with your suggestions, and help me improve my English

<div customAttribute=”customdata” > </div>

If you are going to use a custom attribute, use the following syntax and your html page will be valid in html 5

<div data-lastname=”edwards”> </div>

Use the "data-variableName" format.

You will be able to access this attributes normally with jQuery, or pure javascript now, and in the future you will be able to access the contents of the attributes with the syntax element.dataset.lastname

More info on custom data attributes in html 5:

http://dev.w3.org/html5/spec/dom.html#embedding-custom-non-visible-data

Check the complete html5 spec here: http://dev.w3.org/html5/spec/

Suppose your web application needs to show a list of items from the database, you use ajax, so when the page loading is complete your javascript code will create an http request to the server to get the data in JSON format.

This is a common pattern, however you can improve the user experience by delivering faster page loading times, how?.

Loading the initial data when the page is rendered and embedding it with the page.

Using this technique you render the proper javascript code with the object initialization to your data.

This simple technique is useful because if the dataset is small (for example a list of countries) then it can be embedded in the html page request. You could also load the initial paged results of a large dataset in this way. True, you have to add a little more code compared to the classic “always make an additional request after the page is done”, but your users will be happier.

How to embed the initial data set into the html?

If you are using ASP.NET MVC You can use the HTML helper included in the sample code. It takes a list of the objects you want to embed in the html page. (The .NET JSON serializer will be used to create an array), you also pass the name of the javascript namespace and variable where the object will be assigned.

The result is a <script> tag with the correct javasript variable assignation, so your javascript code will have access to the json data.

It looks like this:

<%=Html.RenderJavascriptVariable("Application.Global","clientList",Model) %>

The first parameter “Application.Global” is the namespace in javascript where the variable will be created. In the example, the variable is called clientList and will be accessible using Application.Global.clientList. In the example, the data serialized will be in the model, however you can also use ViewData.

Download sample code(ASP.NET MVC Solution)

This is the first post (of ?) about front end engineering in the .NET world. This is a critical topic if you have to do any web development. Maybe you think that with all the RAD tools,drag and drop utilities that Microsoft gives to developers there is no need to code in javascript, know proper CSS, or html, in my opinion that is an illusion that will hurt you in the end.

My goal with this series is to help developers in the .net world to make the jump to properly create web applications and do not feel intimidated by the core web technologies. 

1. Don’t be afraid of HTML, Javascript or CSS

This is essential if you are going to work on any web development project, even if you are using only ASP.NET Webforms controls. What’s the reason to not avoid these technologies? Pretty simple, if you avoid them you will never learn them, and this will cause you stress because you will feel that you don’t really control your environment. Some simple things that can make your life harder if you don’t know the principles of front end:

• Troubleshoot simple HTML issues (what tag should i use, a p, div, span?, what’s the difference?
• Being able to create a decent interface for your applications (I know you are not a designer but a good presentation is always a good thing)
• How can i add effects to my page (that improve usability)
• Why my layout is screwed in browser x? (where x usually is internet explorer), how can i fix it?
• What advanced techniques can i use and how to support them in old browsers?

What should i learn first?. In my opinion you should get yourself familiar with HTML first, then learn CSS and finally get yourself comfortable with Javascript, you will thank yourself the time invested trust me.

2. Understand the main HTML tags. You want to use the proper tag to represent the correct type of data, this is called semantics. Use this page as starting point and reference for xhtml tags

3. Feel comfortable writing CSS by hand. First, you have to understand the basic css syntax, how css rules are defined and be familiar with the common ones. I strongly suggest you to read a css book (from start to finish), if you only read web tutorials, then your knowledge will be “fragmented”, and more important, you will not understand the fundamentals.

4. Learn to write well organized Javascript code. Some developers don’t care to learn javascript and just try to guess the syntax when they need it, with bad results and the “i hate javascript” mindset, that is because javascript is not a toy language, it has a very powerful set of features and rules, but you have to understand them.

Again, get a book on javascript and spend 2 months reading it, if you are already familiar with C#,C, or java you will be able to skip some pages, however there are some concepts that will be new like closures that you have to understand in order to create components.

As you see, there is nothing technical in this post, and most of it is trivial if you already know these topics, however if you have been in the server side world , then you could use this as a guide to make the jump to web development.

Right now, my passions are my business and software development, specially front end engineering and everything .net related.

I have other interests and passions like everybody else and hopefully some of that will be reflected on this blog