# Wednesday, 23 July 2014

Thanks to a colleague I got to know about this free eBook: http://read.humanjavascript.com/ch00-foreword.html.

It’s not the typical dry to read tech book and doesn’t get you started with javascript. On the contrary it reads in a nice way and talks about what the author was confronted with and how he dealt with it. Something extra to read while sitting outside in the evening sun (when there is any in Belgium).

Grz, Kris.

Wednesday, 23 July 2014 08:14:38 (GMT Daylight Time, UTC+01:00)  #    Disclaimer  |  Comments [0]  | 
# Thursday, 26 September 2013

Since several years javascript has become increasingly more popular. Because of that a slew of frameworks and libraries became available and usually there starts the journey for developers to spend their, usually free, time to learn it all. The choice is so overwhelming nowadays that it becomes hard to focus and choose those frameworks in which one wants to excel.

Luckily there’s such an initiative as TodoMVC which gives a slew of code samples for the same application, a todo list, built with different javascript frameworks. A very interesting approach and one to keep in the back of your mind the next time you want to start a new SPA (Single Page Application).

TodoMVC

Grz, Kris.

Thursday, 26 September 2013 13:49:53 (GMT Daylight Time, UTC+01:00)  #    Disclaimer  |  Comments [0]  | 
# Thursday, 01 September 2011

Visual Studio is a great tool but not all tooling is well known. I see this question still way too often on the ASP.NET forums so I thought I would blog about it.

Problem:

You have a nice -vsdoc.js file sitting in your solution explorer and are used to get that great Intellisense kicking in when you work inside a webpage or webform doing some cool ASP.NET coding.

scriptsinsolutionexplorer

Figure 1: Solution Explorer showing our –vsdoc.js files

However if you want to follow good habits and make use of best practices and opt for a non obtrusive javascript approach, meaning simply that you put your script in a separate file with .js extension, you find yourself out of luck. Intellisense is gone!

nointellisenseforjavascript

Figure 2: No Intellisense when we expect to see some assistance for jQuery

Yikes!

Solution:

Of course there’s a solution. And luckily for us, a very easy one:

  1. Open the .js file
  2. In the Solution Explorer pick the right –vsdoc.js file
  3. Drag and drop that in the .js file like in figure 3
  4. Now try to type $( again and you’ll see like in figure 4 that Intellisense is back again.
  5. Drink a beer and celebrate (this last step isn’t really necessary but can spice up the fun factor)

dragdropjsfileonjsfile

Figure 3: Drag and drop from the Solution Explorer into the opened .js file

intellisenseisbackforjavascript

Figure 4: Intellisense is way back. Woohoo!

Grz, Kris.

Thursday, 01 September 2011 21:18:55 (GMT Daylight Time, UTC+01:00)  #    Disclaimer  |  Comments [0]  | 
# Thursday, 22 July 2010

Sometimes you just stumble upon something new that looks interesting. After a short vacation, too short, I was surfing the web, following twitter, … and ended up at a new page at MSDN: scriptjunkie{} Serious web development.

It’s a new place for people working with HTML, CSS and Script. I like it that Microsoft shows the love for these 3 quite essential parts of technology as most people became so dependent on them during the last years. In addition to that, after a reorganization on the ASP.NET forums there’s one dedicated to these 3 too: HTML, CSS and JavaScript.

Grz, Kris.

CSS | HTML | Javascript | MSDN | scriptjunkie
Thursday, 22 July 2010 18:58:58 (GMT Daylight Time, UTC+01:00)  #    Disclaimer  |  Comments [0]  | 
# Monday, 27 July 2009

Since more and more people are using ajax and as such javascript/ecmascript, you as a developer/designer need tools to make it through the day. Here are some that I like to use:

Grz, Kris.

Monday, 27 July 2009 09:16:03 (GMT Daylight Time, UTC+01:00)  #    Disclaimer  |  Comments [0]  | 
# Thursday, 05 February 2009

With all the web 2.0 buzz that started a couple of years ago javascript gets used more and more in modern websites and –applications. Most of the time everyone wants to plug in some cool flashy effect but forgets completely about performance or download size of all that goodness. Also correct placement of certain file types can make your application more performing. I recently found a very interesting article: Best Practices for Speeding Up Your Web Site.

Making css and javascript files external so that they can get cached by the browser is something known to a lot of (web)developers. However placing css as high as possible in the page and the scripts as low as possible is mostly something new. ASP.NET AJAX introduced the scriptmanager control in which one can add scriptreferences. Seen in the light of placing script files at the bottom one can also make benefit of the property LoadScriptsBeforeUI which got introduced with ASP.NET 3.5. It defaults to true, so the scripts will still render at the top. However I suggest that you don’t just switch it to false that lightly but carefully test everything before going to acceptance/production.

Other interesting articles are 10 ASP.NET Performance and Scalability Secrets and 10 Tips for Writing High-Performance Web Applications.

Grz, Kris.

Thursday, 05 February 2009 10:46:00 (GMT Standard Time, UTC+00:00)  #    Disclaimer  |  Comments [1]  | 
# Wednesday, 04 February 2009

Though external javascript and css files can be cached by a browser the initial download can still be quite large. For example the minified jQuery library compared with the uncompressed one, or even the visual studio documented one is considerable. A while ago, for my current project, I also faced the problem of lots of script files in the project either created by the team or provided by a design company. This however hurt performance so I took some time to dig into the matter and try out several compression tools. The best one I found so far is YUICompressor from Yahoo!. It’s written in java but that shouldn’t stop you from giving it a try. The nice thing about it is that one can provide arguments to the command line tool to get a different outcome like for example the switch --nomunge which tells the tool to only minify the javascript and not to obfuscate local symbols. According to Wikipedia obfuscation means:

Obfuscation is the concealment of meaning in communication, making communication confusing, intentionally ambiguous, and more difficult to interpret.

It also has a side effect benefit that mostly the file even becomes a little bit smaller.

Because as a .NET developer I mainly work with Visual Studio and I like to stay in that environment instead of going to a command prompt, typing in the commands to run the tool. Luckily Visual Studio provides the needed mechanism to automate this process without leaving the IDE itself.

In the menu select Tools > External Tools…
There you can add a new entry like in the image by clicking the Add button.

YUICompressor

I added the YUICompression entry. The command is the executable file, in this case java.exe which is needed to run the jar file. The arguments section is the most interesting one though as this provides us the way to tweak the arguments of the command line tool. Also note that I put the compression tool in my c:\ root directly.

The whole line reads as:

-jar C:\yuicompressor-2.4.2.jar $(ItemPath) -o $(ItemDir)$(ItemFileName).min$(ItemExt) –v

For the CSS file compression I added another entry but with this in the Arguments section:

-jar C:\yuicompressor-2.4.2.jar $(ItemPath) -o $(ItemPath) –v

The reason for this is because I like the javascript, when minified, get the filename that indicates that it was minified so I add the .min in between. The added benefit for this is that you can still keep the original .js file for changes, and then minify it again of course. I don’t do this for the css files as they don’t get obfuscated and it’s easy to reformat the document again with the default keyboard combination ctrl + k, ctrl + d (Menu > Edit > Advanced > Format document).

Now that we’ve got this into place it’s quite easy. In the Solution explorer you just select a .js or .css file and from the menu Tools > YUICompression you can let the tool do its magic.

Grz, Kris.

Wednesday, 04 February 2009 23:19:01 (GMT Standard Time, UTC+00:00)  #    Disclaimer  |  Comments [0]  | 
# Tuesday, 28 October 2008

I just noticed that on the site of jQuery there’s now also a download available for having a much better intellisense experience. It’s actually a big js file with xml comment that Visual Studio can interpret but it can be used to power up the development experience. Also when you do reference this only do so while developing and don’t put this into production since it’s waaaay bigger than the minified version (or the packed one). So make sure that you set that into production instead.

Update: I just found out about these extra handy tips for adding the documented jQuery file to your pages.

Grz, Kris.

Tuesday, 28 October 2008 08:29:43 (GMT Standard Time, UTC+00:00)  #    Disclaimer  |  Comments [0]  | 
# Tuesday, 29 August 2006

People that use ASP.NET know that it's very easy to use the Properties pane in visual studio to quickly set some properties on a server control. By default already a lot of such properties are made available but sometimes you just want something that just doesn't come out of the box. Luckely the WebControl class also provides the Attributes property which is of type AttributeCollection. You can use the Add method to add new attributes to your control.

To make it more clear I created a small demo page that I used to answer a question on the ASP.NET forums.

    1 <%@ Page Language="C#" %>

    2 

    3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    4 

    5 <script runat="server">

    6 

    7     protected void Page_Load(object sender, EventArgs e)

    8     {

    9         ListBox1.Attributes.Add("ondblclick", "GetValue();");

   10     }

   11 </script>

   12 

   13 <html xmlns="http://www.w3.org/1999/xhtml" >

   14 <head runat="server">

   15     <title>Untitled Page</title>

   16     <script type="text/ecmascript">

   17     function GetValue()

   18     {

   19         box = document.getElementById('ListBox1');

   20         x = box.options[box.selectedIndex].value;

   21 

   22         if(document.all)

   23             document.getElementById('Label1').innerText = x;

   24         else // FireFox doesn't implement the innerText property.

   25             document.getElementById('Label1').textContent = x; 

   26     }

   27     </script>

   28 </head>

   29 <body>

   30     <form id="form1" runat="server">

   31     <div>

   32         <asp:ListBox ID="ListBox1" runat="server">

   33             <asp:ListItem>One</asp:ListItem>

   34             <asp:ListItem>Two</asp:ListItem>

   35             <asp:ListItem>Three</asp:ListItem>

   36         </asp:ListBox></div>

   37         <asp:Label runat="server" ID="Label1" />

   38     </form>

   39 </body>

   40 </html>

On line 9 you can see that I add an attribute. In this case the ondblClick javascript event. This results, once rendered in a browser to have the ability to double click on an item and have the selected value set as being the text of the label control. The javascript function that accomplishes this task is on line 19 - 25.

Tuesday, 29 August 2006 19:21:02 (GMT Daylight Time, UTC+01:00)  #    Disclaimer  |  Comments [0]  |