JavaScript

Talking at MIX09: Las Vegas and the continuum

Laurent Bugnion — Sun, 22 Feb 2009 10:33:30 GMT

One of my dreams is going to come true: Since the very first time I attended MIX in 2006, I have wanted to talk there. MIX has a very special meaning for me. It is in the Venetian conference rooms that I heard about Windows Presentation Foundation and what would later become Silverlight. It is there that me and my two colleagues Andreas and James decided that we wanted WPF for the project we had just started at Siemens. A decision that was definitely the right one, from a technical point of view but also from a user experience point of view. It is at MIX 2007 that I started to talk to people from my current firm IdentityMine about the possibility to join them, which I did in December 2008.

In short, the MIX conference has a special place in my professional life, and I am very glad and honored to announce that one of the sessions I proposed has been accepted. Yes, I will be talking at MIX 2009! My session just appeared on the sessions list at
https://content.visitmix.com/2009/sessions/

And my short bio can be seen at
https://content.visitmix.com/2009/speakers/

The session's title is:

Working across the Client Continuum

Come see how to build a continuum of client applications including HTML, AJAX, ASP.NET, Microsoft Silverlight, and Windows Presentation Foundation (WFP) that all consume the same Windows Communication Foundation (WCF) service. Learn how to reuse as much code as possible, how to optimize the development process, and how to address key logistical issues like external servers and cross domain communication.

I really hope I will see many of you at my session. For those of you who cannot come, it will be recorded (like MIX08 and PDC08 were too). But let's face it, nothing replaces the real MIX, and nothing replaces Vegas, baby!

Microsoft to add jQuery in Visual Studio: Why I think it's great

Laurent Bugnion — Mon, 29 Sep 2008 12:44:28 GMT

The news took the community by surprise and the reactions are overwhelmingly positive: Microsoft is going to ship jQuery with the ASP.NET MVC framework (very soon) and with Visual Studio (in a near future). For more details, ScottGu and Scott Hanselman are talking about that in a very complete way.

I think it's great news on many levels. First, because I hear that jQuery is a great framework. I must admit I never used it, because I didn't do much web development lately (but I will get back to it in a number of private projects soon) and also because I am usually wary of frameworks and prefer to develop my own JavaScript. Of course this is only viable because I used JavaScript mainly on small private projects for the past few years, and I wanted to have the learning effect of programming against it directly instead of having a higher level framework to "talk to". I think that now is the time for me to look more into it, however, and this is just what I will do for my site www.galasoft.ch which needs a rather heavy facelift anyway.

But more importantly, it's a major step forward for Microsoft. There was a request for similar functionality in ASP.NET AJAX. This was on the list of requirements for a future version. And yet, instead of using the vast resources at their disposal, Microsoft decided to use an existing, widely acknowledged open source framework. They also plan to contribute patches to jQuery, but will do so following the standard procedure that this open source framework is already using.

This is really newsworthy because there are many other areas where such a decision could also be taken. I don't even want to talk about the Entity Framework vs NHibernate fiasco that so many others already dissected. But think about all the other areas: Testability immediately comes to mind...

Of course this also raises questions. Scott Koon already mentioned some of them, the one that I particularly appreciate being: "How will companies who are normally allergic to OSS code react to this [...]". After having worked for almost 13 years for Siemens, I know what he means. Every time we proposed an OSS technology, the question was always: Is that really safe. And I have to admit that, given the development timespan of some of our projects (typically 2 years between variant analysis and first release) and the lifespan of our products (typically more than 10 years and often much more than that), sometimes I have been careful with that too. See what happened to NDoc for example.

Still, there are so many other projects where OSS totally makes sense, and where Microsoft can save time and energy instead of reinventing the wheel. I am really glad to see that happening today, and think it's a great sign for Microsoft and for all .NET developers out there.

Google search on my website

Laurent Bugnion — Sun, 02 Sep 2007 11:20:20 GMT

I've been wanting to add a search box to my website for quite some time, and also wanted to play with Google AJAX Search API. Turns out it's a very easy API to use! I simply wrapped their search control in a PositionedNode and FadedNode, and added a higher-lever object to "hide" Google's syntax and offer a higher level interface. So from today, you can now use the "Search" menu to search the website and also (in the same dialog) this blog.

Google Search API also offers the possibility to search for YouTube videos and for places (using Google Maps), but I don't use this, so I left that out of my wrapper.

Next on my list is:

Add the same feature to the GeeksWithBlogs blog
Wrap the client-side control in a server-side ASP.NET control, to make it even easier to use.

Let me know if you have other suggestions!

Updated PositionedNode (DHTML effect) / Arrived in Tacoma

Laurent Bugnion — Tue, 27 Mar 2007 01:17:00 GMT

End of January, I made an update to my PositionedNode DHTML effect, but too busy with WPF activities, I never managed to publish it. Having just sat 14 hours in a plane, I finally took the time to do it. There are 4 major changes:

With V1.2, it's now possible to use any CSS unit to position the HTML element, for example em, points (pt), pixels (px). This functionality uses the JavaScript class gslb.CssLength.
It's now possible to specify all the style attributes in external CSS files, using either the "class" or the "ID" notation. Of course cascaded classes are supported.
When using the method relocate, the new position can now be saved to a cookie. This way, when the page is refreshed, the new location is preserved. Use the options bSaveRelocationInCookie and iCookieExpirationHours to control this feature.
The code has been refactored in 2 objects (PositionedNode and PositionedBase) to facilitate future development. The basic class gslb.Object is used for the inheritance.

Tacoma, WA

So I am now in Tacoma (actually, I am still sitting in the plane to Chicago as I write this, but I am anticipating that the rest of the journey will go OK). I took my new Linksys wireless router, because the rooms are having wired internet "only", curious to see how it's going to work out (PS: it works great!). I tested on Saturday at home and it worked great with my laptop and my Palm TX. Should make surfing in the room easier! Today we're starting with the training, I can't wait (literally... haven't been so excited by a software training for a loooong time!). I'll report more in the next few days.

Updated FadedNode (DHTML) / Archived old JavaScript pages

Laurent Bugnion — Sun, 25 Mar 2007 10:19:00 GMT

This DHTML fading effect, where a given node's opacity changes smoothly from one minimum value to a maximum value and back, has been updated. The update is very minor: Now it's not necessary anymore to define an opacity in the node's "style" attribute. The opacity can be defined in external CSS files, or even not be defined at all (in which case the opacity is equal to 100%).

Also, I archived my old "JavaScript consulting" pages. Most of the advices given on these pages are still valid, but the pages are not maintained anymore, and this is now clearly indicated. These pages are still available on my website anyway.

JavaScript code minimizer (not obfuscator!)

Laurent Bugnion — Sat, 24 Feb 2007 04:47:00 GMT

A few years ago, I translated Douglas Crockford's JsMin from C to C#, because we wanted to use this functionality in our build process. JsMin is a code minimizer for JavaScript. It will remove all comments, empty lines, turn tabs into single spaces, etc... The goal is to reduce the size of JavaScript files to the minimum necessary, without modifying the functionality.

Additionally to reducing the script's size, JsMin also makes it more difficult to read, however it is not an obfuscator. Objects, variables, methods names are not modified. While such a functionality wouldn't be very difficult to add, we believe that it is pointless to obfuscate JavaScript files.

Note: This is a direct translation from C (procedural) to C#. I didn't refactor the object too much, so the design is far from perfect, but it works well.

Note 2: I just found out that Douglas translated JsMin from C to C# too, his version is available here, so pick the one you prefer ;-)

Live demo

This page has a form allowing the user to send a JavaScript file to the web server. The file will be minimized and returned to the user.

Methods list

JsMin has only a default constructor, but it also has a few public properties used to set options:

string BakFileExtension: The extension used for the backup file. Note: The default file will be kept only if the method Go( string, bool ) is used, and the second parameter set to true. Default: "bak".
string[] FirstLines: An array of strings which will be added on top of the minimized file. Each entry in the array is one line in the target file. This can be used to specify copyright information, author name, etc...
int KeepFirstLines: A number specifying how many lines in the original file will be copied as is in the target file. For example, this is useful to preserve copyright information, author name... present in the original file.

The C# version of JsMin provided here offers 3 public methods to minimize JavaScript files:

Go( string filePath ): Minimizes a script file and saves it under the same name as the original file. No backup is kept.
Go( string filePath, bool keepBakFile ): Minimizes a script file and saves it under the same name as the original file. Depending on the value of the parameter keepBakFile, a backup file will be kept or not.
Go( StreamReader reader, StreamWriter writer ): Minimizes the content of the "reader" stream and saves it to the "writer" stream. This method is useful when no file is available. For example, in ASP.NET, this method can be used to minimize script files contained in resources dynamically. Another use is described here under: The user of this webpage selects a local script file and sends it to the web server. The file content is minimized, and returned to the user as an attachment, so that the user can choose to open or save the file.

Code example: ASP.NET

private void bnSubmit_Click( object sender,
  EventArgs e )
{
  try

  {
    // Clear the response to avoid any unwanted
    // additions to the file.
    Response.Clear();
    Response.BufferOutput = true;

    // Instantiate the minimizer.
    JsMin jsMin = new JsMin();

    // taFirstLines is a text area allowing the

    // user to enter first lines to be added to
    // the minimized file.
    if ( taFirstLines.Text.Length > 0 )
    {
      string[] firstLines
        = taFirstLines.Text.Split(
          new string[] { "\r\n" },
            StringSplitOptions.None );
      jsMin.FirstLines = firstLines;
    }

    // tfKeepLines is a text field, where the user can

    // specify how many lines of the original file
    // must be written as is to the minimized file.
    if ( tfKeepLines.Text.Length > 0 )
    {
      try
      {
        int keepLines
          = Int32.Parse( tfKeepLines.Text );
        jsMin.KeepFirstLines = keepLines;
      }
      catch

      {
      }
    }

    using ( StreamReader input
      = new StreamReader( fupScriptFile.FileContent ) )
    {
      using ( StreamWriter output
        = new StreamWriter( Response.OutputStream ) )
      {
        // Call the minimizing method.

        jsMin.Go( input, output );

        // Specify the content as text to trigger
        // the "open/save" dialog.
        Response.ContentType = "text/javascript";
        // Specify that the content should be returned
        // as an attachment.
        Response.AddHeader( "Content-disposition",
          "attachment; filename="

          + fupScriptFile.FileName );
      }
    }
  }
  catch ( Exception )
  {
    // There was an error --> clear the response
    // and return a HTML formatted error message.
    Response.Clear();
    Response.ClearHeaders();
    Response.ContentType = "text/html";
    Response.Write( "We're sorry, there was an error." );
  }
  finally

  {
    // Flush the response and close it.
    Response.Flush();
    Response.Close();

    // Prevent that anything more is added to the Response
    Response.End();
  }
}

Receiving, minimizing and sending a script file in ASP.NET

JavaScript guidelines published

Laurent Bugnion — Tue, 06 Feb 2007 03:19:00 GMT

In agreement with the head of our R&D department, I published my firm's JavaScript Coding Guidelines. I work for Siemens Building Technologies. We developed these guidelines for a web application project in 2004, based on our C# guidelines.

Please note the following:

The purpose of publishing this document on the World Wide Web is to promote and encourage consistent practices in the JavaScript programming community.
We publish this document as information only. Siemens will not accept any responsibility regarding its content.
The guidelines are recommendations based on our experience, and may or may not make sense in the context of a different company, or a different project. Their intent is to be a source of inspiration for other JavaScript developers, and nothing more.
The guidelines are dated 20th of April 2004, which is quite some time ago. I think that most of the recommendations are still valid, but of course additions can be made.

JavaScript: CSS length manipulation and conversion

Laurent Bugnion — Sun, 28 Jan 2007 10:49:00 GMT

CssLength class: In the course of improving my DHTML PositionedNode, one thing I really wanted is to be able to handle other units than just pixels. In order to do that, some conversions are needed. To make this easier, I developed a helper class named CssLength.

Converting from one unit to the other can be tricky. The conversion depends on quite a few things (mostly the way font size is set in the node's hierarchy in the DOM), and there is not a simple arithmetic way to convert ems to pixels for example. This class provides a factor calculation allowing easy conversion, by using the browser's own CSS engine. It also provides a few helper methods, for example to extract the unit from the CSS string, to add or substract pixels or other units from the value, etc...

var oCssLength = new gslb.CssLength( "2.2em" );

oCssLength.addPixels( 150 );

document.getElementById( "divTest" ).style.left
  = oCssLength.toString();

Creating and working with a CSS length instance

More information about the CssLength class.

DHTML effect: Positioning

Laurent Bugnion — Tue, 16 Jan 2007 09:38:00 GMT

Continuing to clean up the DHTML effects I use on my site (see my previous post), I published a Positioning and Scrolling effect. It's quite handy, in that it allows to easily keep a DOM node (DIV, ...) in sight of the user at all times. This can be used, for example, for a "floating menu" like I have on my main page.

The DOM node moves with a variable speed. What I especially like in the way this effect is implemented is that the user can specify his own function to calculate the speed of the DOM node according to the distance to the target position. Of course I provide a default function, which is a factor of the square of the distance. This way, the Node "glides" smoothly to the position.

The Node can be repositioned either manually by calling a method, or when the user scrolls the page. Additionally, it can be pinned in both axis separately, so that it stops repositioning itself.

DHTML effect: Fading

Laurent Bugnion — Sun, 07 Jan 2007 10:14:00 GMT

I am working on a new addition to my RealSimpleBlog control (more about that later), and that gives me the occasion to clean up a few DHTML effects I have on my website. The goal is to make a JavaScript library, which, contrarily to the well known prototype.js or others, should be lean and modular, and use advanced JavaScript programming technique while sticking to accepted best practices for JavaScript programming (quite a program...

To achieve this, I have one JavaScript file per effect (this allows choosing precisely which script code you want to send to the web client). Effects are added to a given DOM node (typically a DIV, but that could be any other node) simply by creating a new instance of a JavaScript object and passing the DOM node to it. Additionally, options can be defined in a literal object, which allows them to be totally optional.

Of course, all the effects are cumulative, so a given DOM node can have as many effects as wanted (though good taste will probably limit the number of effects :-)

The first effect I am publishing is a fading effect, where a given node's opacity changes smoothly from one minimum value to a maximum value and back. Since opacity is unfortunately not handled in a standard way by the web browsers yet, only IE and Mozilla (Firefox, etc...) browsers have been fully tested. If you experience problems with this effect, please contact me with details.

Note: For opacity to work in Internet Explorer, it is necessary to set either "position: absolute" or a "float" value. If other positioning attributes are used, the opacity settings are ignored by IE. Firefox, however, doesn't have this limitation. That can be a real bother!

var oOptions = { iMinimum : 10,
                 iMaximum : 90,
                 iDeltaFade : 2,
                 iTimerMilliseconds : 15,
                 bRemoveAfterFade : true };


var oFadedNode
  = new gslb.FadedNode( document.getElementById( "divLogo" ), oOptions );

(with:)

<div id="divLogo"
     style="filter: alpha(opacity=50);
            -moz-opacity: 0.5;
            display: block;
            float: center;">

  <img src="http://www.galasoft-lb.ch/logo/smallhead.gif" />
</div>

Creating a fading node