Friday, March 19, 2010

ASP.NET Performance Framework

ASP.NET Performance Framework: "

At the start of the year, I finished a 5 part series on ASP.NET performance - focusing on largely generic ways to improve website performance rather than specific ASP.NET performance tricks. The series focused on a number of topics, including merging and shrinking files, using modules to remove unecessary headers and setting caching headers, enabling cache busting and automatically generating cache busted referneces in css, as well as an introduction to nginx.


Yesterday I managed to put a number of those things together into a framework which I hope will make it easier for developer to leverage these best practices. The project is called Metsys.WebOp, and you can download it from github. It comes with a sample application, which not only shows how to use the framework, but also has all the documentation you'll hopefully need.


The first part of the framework is a console application which is meant to be run as part of your build process. This is driven by a text file which supports 4 commands - merging files together, shrinking them, generating cache busting hashes and pre-zipping files. Here's what the sample app's command file looks like:


#combine JS files
combine: js\all.js: js\jquery.js, js\jquery.rollover.js, js\web.js

#combine css files
combine: css\merged.css: css\reset.css, css\main.css

#shrink the generated files
shrink: js\all.js, css\merged.css

#generate cache-busting resource hashes
busting: hashes.dat

#pre-zip our files
zip: js\all.js, css\merged.css

The next part is meant to be used from within a MVC application (it wouldn't take too much effort for someone to make it work with WebForms) - first by allowing you to configure the runtime component, and then by providing extension methods to HtmlHelper. Essentially this gives you 4 methods, Html.IncludeJs, Html.IncludeCss, Html.Image and Html.ImageOver. You can also toggle debug mode, which'll make all of this transparent during development (nothing worse than dealing with merged and shrank files in development).


The last part are a couple HttpModule which make everthing possible. The Zip module will returned the pre-zipped files (generated by the build process) should the browser accept zip files. The WebOp module will remove unecessary headers and add caching headers to js, css and images - only really practical if you are also using the cache busting featuers.


You can download the project from http://github.com/kseg/Metsys.WebOp.


You might also be interested in checking out the mscd project, which does a lot of the same stuff, but is probably more mature.

"

Monday, March 15, 2010

Microsoft Ajax Minifier

Microsoft Ajax Minifier: "One good thing I came across at the Microsoft MVP Summit is that Microsoft released Ajax Minifier, a tool to compress the size of Javascript (.JS) and Cascading Style Sheets (.CSS) files. Later I found a Scott Gu post on it. The Microsoft Ajax Minifier is a small tool to remove unnecessary content from your js or css file. It can bring down the size of js file by 60%. You can download the Ajax

"

Saturday, March 13, 2010

Quick Tip: HTML5 Video with a Fallback to Flash

Quick Tip: HTML5 Video with a Fallback to Flash: "


In this video quick tip, we’ll review how to work with HTML 5 video in your own projects. Because older browsers and Internet Explorer do not understand the <video> element, we must also find a way to serve a Flash file to viewers who are utilizing those browsers.






Viewing Options



Unfortunately, much like HTML 5 audio, Firefox and Safari/Chrome don’t quite agree when it comes to the file format for videos. As such, if you wish to take advantage of HTML 5 video at this time, you’ll need to create three versions of your video.



  • .OGG: This will make Firefox happy. You can use VLC (File -> Streaming/Export Wizard) to convert your video to this format easily.

  • .MP4: Many screencasting tools automatically export to Mp4; so you can use that file for Safari and Chrome.

  • .FLV/.SWF: Not all browsers support HTML 5 video, of course. To compensate, make sure that you add a fallback Flash version as well.


<!DOCTYPE html>

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>untitled</title>
</head>
<body>
<video controls width="500">
<!-- if Firefox -->
<source src="video.ogg" type="video/ogg" />
<!-- if Safari/Chrome-->
<source src="video.mp4" type="video/mp4" />
<!-- If the browser doesn't understand the <video> element, then reference a Flash file. You could also write something like "Use a Better Browser!" if you're feeling nasty. (Better to use a Flash file though.) -->
<embed src="http://blip.tv/play/gcMVgcmBAgA%2Em4v" type="application/x-shockwave-flash" width="1024" height="798" allowscriptaccess="always" allowfullscreen="true"></embed>
</video>
</body>
</html>

There are a handful of attributes available to the <video> element.



  • Controls: Display the play/stop buttons?
  • Poster: The value can be a path to an image, that will serve as the display of the video before it is played.

  • AutoPlay: Immediately play the video when the page is loaded?

  • Width: The desired width of the video. By default, the browser will automatically detect the dimensions of the supplied video.

  • Height: The desired height of the video.

  • Src: The path to the video file. It’s better to use the <source> child element instead for this task.


Dos and Don’ts of HTML 5 Video



  1. DO create three version of your video to make Firefox, Safari/Chrome, and IE happy. (.ogg, .mp4, .flv/.swf)

  2. DO NOT omit one of these formats. Unfortunately, you can’t easily choose to serve HTML 5 video to Firefox, and the Flash fallback to Safari. Safari understands the <video> element, and will expect to find a suitable video format to load. If one is not found, it will display an empty player.

  3. DO keep in mind that full-screen support will not work in Safari and Chrome. However, with the release of Firefox 3.6, you can right-click, and view in full screen.

  4. DO remember that the reason why IE loads the Flash file instead is because it does not understand what the <video> element is. However, if a browser DOES understand that element, it will expect to find a suitable file to load.


Please note that, if I can find a suitable work-around for the full-screen problem, we’ll be using this method on Nettuts+ in the near future!

"

Friday, March 5, 2010

An innovative architect to develop business web forms more efficiently

An innovative architect to develop business web forms more efficiently: "The article introduces an innovative architect to develop business web forms in enterprise software development which is better performance, higher productivity, more configurability and easier maintainability than traditional either ASP.NET or MVC development.

When we develop a web form in ASP.NET or MVC, we need work on the following items,
1. create view template and code behind (controller)
2. style adjustment
3. write event handlers for all actions
4. control visibility of web controls for different actions manually
5. permission integration manually
6. hard to write unit tests (not for MVC)
7. something else

With all of those staff, the source code of developed web forms are very complex usually by mixed logics of webcontrols' visibility control, business logics, style management, permission check etc. The web forms are less productive, bug-ness and hard maintainable.

RapidWebDev solution implements a new UI framework based on ASP.NET which is designed to solve the facing problems. The principle of design is to abstract requirement of web forms for usual business scenarios and define xml schema to configure web forms so that user behavior, style, permission are all managed by the framework. And some interfaces of the framework are required to be implemented which are callback for user behaviors. E.G. there is a query panel with filters configured. When an user clicks query button in query panel, method Query of the implementation to interface IDynamicPage will be invoked with query parameters.

With this design,
1. web forms are configurable and maintainable.
2. code complexity is decreased obviously.
3. implementations are reusable and testable
4. consolidate ui style by the framework"

Wednesday, March 3, 2010

Download Free Web Application Toolkits

Download Free Web Application Toolkits: "Free Web Application toolkits by Microsoft helps web developers to add rapid functionality like Bing Maps integration or adding social capabilities etc Click here to download and read more about Web Application toolkit.



These Web Application Toolkits are available for the following things:-


Mobile Web Applications


Make your website "Social"


Toolkits for Calendars


Toolkit for "Freemium" Applications


Toolkit for [...]



...


"