nav-left cat-right
cat-right

ASP.NET – Simple Page Load Improvement #1...

While doing some development, I came up with a small slick-trick that I would like to share. Maybe I’m just slow to the game and you’ve already thought of this, or are doing this. Regardless, one way to improve page load time is to decrease the amount of content sent to the requesting browser. Search engines often consider load time as a factor in ranking page results. Because of this, getting your page size as small as possible can yield a return on investment. At the same time, if you get carried away, an ASP.NET page can become difficult to maintain.

One way to keep your page maintainable is to include comments. This includes both HTML and JavaScript comments. When you use HTML and JavaScript comments though, your page size increases (just a small bit). In addition, your page viewers really don’t care about the comments. Because of this, it doesn’t really add any value to them. The comments are purely there for the individuals maintaining the page. The question then becomes, how do I skip sending comments to the client, but still have them for development purposes?

The answer is server-side comments. Server-side comments prevent a code block in an ASP.NET page from being processed and rendered. Because it is not rendered, it does not get sent to the client page. For instance, compare the following two small blocks.

 Before (size: 308 bytes)

<!-- Greet the user -->

<div>Hello! How are you? The time is <div id='ds'></div></div>
<script type="text/javascript">


  // Insert the time based on the client browser
  var now = new Date();
  var ds = document.getElementById("ds");
  ds.innerHTML = now.toTimeString();

</script>
 After (size: 214 bytes)

<%-- Greet the user --%>

<div>Hello! How are you? The time is <div id='ds'></div></div>
<script type="text/javascript">


  <%-- Insert the time based on the client browser --%>
  var now = new Date();
  var ds = document.getElementById("ds");
  ds.innerHTML = now.toTimeString();

</script>

The sizes mentioned above represent the size of the content actually sent to the browser. As you can see, using server-side comments gave us a ~30% savings! While your typical savings will generally not be this high, it still proves the point that you can help your users load the content quicker and help save bandwidth costs.

Center JQuery Dialog...

By default, the JQuery Dialog widget will open in the center of the page. To demonstrate, imagine that you have a dialog created as follows:

<div id="myDialog" title="Help">
  [Some help information]
</div>

<script type="text/javascript">
  $(document).ready(function () {
    $("#myDialog").dialog({
      autoOpen: false,
      modal: true,
    });
  });
</script>

This dialog is instantiated when the page is loaded. Because of this approach, the center is determined by the height and width of the page at load time. Now, imagine that you have a page that dynamically adds content. Or maybe you have a tree of elements and one of the nodes gets expanded. In either case, the height of the page will most likely change. Because of this, if you open the dialog now, it will look off-center. To re-center the dialog, add the following line of code:

$("#myDialog").dialog('option', 'position', 'center');

Voila! This code will re-center your dialog. As a recommendation, you may want to execute this code at one of two times: 1) Right after your page size changes, for instance, after the new content is added or node is expanded. 2) Just before you open the dialog. The choice is yours :)

Windows Phone 7 – Call Phone Number from Hyp...

When developing a Windows Phone 7 application with Silverlight, you may want to dial a phone number. To help you accomplish this, Microsoft provides the “Microsoft.Phone.Tasks” assembly. When you reference this component, you can do things like:

  • Compose an email (EmailComposeTask)
  • Prompt the user to choose an email address (EmailAddressChooserTask)
  • Send a text message (SmsComposeTask)
  • Perform a search (SearchTask)
  • Place a phone call (PhoneCallTask)

There are more options available in the Microsoft.Phone.Tasks namespace. Still, notice that each of these options ends with the word “Task”.  The term “Launcher” is also sometimes used. Regardless of the word, these items interact with the phone’s operating system to do the heavy lifting for you. When you begin a task, it is given the focus and your application gets sent to the background.  To demonstrate,  imagine that you wanted to call your favorite local restaurant through a HyperlinkButton.  As an example, we will add a HyperlinkButton to the inital XAML loaded by Visual Studio when you start a new Windows Phone 7 Silverlight application. The updated XAML will look like the following:

<phoneNavigation:PhoneApplicationPage
  x:Class="Sample.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:phoneNavigation="clr-namespace:Microsoft.Phone.Controls;
  assembly=Microsoft.Phone.Controls.Navigation"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800"
  FontFamily="{StaticResource PhoneFontFamilyNormal}"
  FontSize="{StaticResource PhoneFontSizeNormal}"
  Foreground="{StaticResource PhoneForegroundBrush}">

  <Grid x:Name="LayoutRoot"
    Background="{StaticResource PhoneBackgroundBrush}">
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <!--TitleGrid is the name of the application and page title-->
    <Grid x:Name="TitleGrid" Grid.Row="0">
      <TextBlock Text="SAMPLE" x:Name="textBlockPageTitle"
        Style="{StaticResource PhoneTextPageTitle1Style}"/>
      <TextBlock Text="phonecalltask" x:Name="textBlockListTitle"
        Style="{StaticResource PhoneTextPageTitle2Style}"/>
    </Grid>

    <!--ContentGrid is empty. Place new content here-->
    <Grid x:Name="ContentGrid" Grid.Row="1">
      <HyperlinkButton x:Name="myHyperlinkButton" Content="Call Restaurant"
        FontSize="22" Click="myHyperlinkButton_Click" />
    </Grid>
</Grid>
</phoneNavigation:PhoneApplicationPage>

This XAML will generate an application that looks like the one shown to the right. To make it actually call the restaurant though, we will listen for the user to click the HyperlinkButton. When they click the link, we are going to execute the following code:

private void myHyperlinkButton_Click(
  object sender, RoutedEventArgs e)
{
  PhoneCallTask task =
    new PhoneCallTask();
  task.PhoneNumber = "123-456-7890";
  task.Show();
}

When this event handler is executed, the desired phone number (in this case “123-456-7890″) will be sent to the Windows Phone 7 dialer application. This application is launched when the Show() method is executed. This method is defined in the ITask interface, which is implemented by all of the tasks mentioned earlier. At the time of this post though, the Show() method is the only method available in this interface. Because of this fact, you cannot automatically dial a phone number at this time. Instead, the phone user will actually need to click the “call” button that is shown here:

Image 1
Dialer Application This is just a quick introduction to tasks within Silverlight for Windows Phone. The big thing to recognize is that tasks basically start up an application associated with the Phone OS and sends yours to the background. Either way, this post will be updated if the APIs are updated to allow automatic dialing from an application. I hope you found this post valuable. What else would you like to know about Windows Phone 7?

« Previous Entries