JavaScript

Google search on my website

Laurent Bugnion — Sat, 01 Sep 2007 21: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 — Mon, 26 Mar 2007 11: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 — Sat, 24 Mar 2007 21: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 — Fri, 23 Feb 2007 15: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 — Mon, 05 Feb 2007 14: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 — Sat, 27 Jan 2007 21: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 — Mon, 15 Jan 2007 20: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 — Sat, 06 Jan 2007 21: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

Saving files with JavaScript: CExplorer (demo)

Laurent Bugnion — Mon, 19 Jun 2006 11:54:00 GMT

Many people assume that client-side JavaScript cannot perform file-system operations on the client computer. Actually, the objects needed are often found in the browsers, and the rest is only a matter of compatibility (the way IE saves files is very different from the way Firefox saves files...) and of permissions.

In order to perform critical file-system operations, the script must be granted privileges. There are different ways to get these privileges, and unfortunately, these are very different depending on the browser your application run on.

I won't debate long on the subject of security and permissions in the browser, others did that much better than me (check Google for more information). The demo here demonstrates as a proof of concept that saving a file locally is possible in both major web clients available today (IE and Firefox, tested only on Windows platform).

Setting cookies with JavaScript: CCookie

Laurent Bugnion — Tue, 13 Jun 2006 18:34:00 GMT

I posted my CCookie JavaScript object in answer to a question asked in comp.lang.javascript. This object offers an abstraction to the cookie interface present in the web browsers, and allows using methods instead of manipulating the cookie string directly.

The code is self documented, and I'll extract the documentation soon. To document my JavaScript object, I use an extended version of the XML code documentation used in C#. The extensions allow to specify the type of a parameter, of a return value... As usual, I plan to blog on that when I have time (get used to that sentence, folks) and eventually to write some kind of tool to extract it to HTML.

Note to self: Make a "list of things to blog about" on my LifeDrive.