Project Description
A tiny javascript library that provides a handy function "ensure" which allows you to load Javascript, HTML, CSS on-demand and then execute your code. Ensure ensures that relevent Javascript and HTML snippets are already in the browser DOM before executing your code that uses them.
For latest news and updates, visit my blog http://omaralzabir.com

Production use
Ensure is used in the http://dropthings.omaralzabir.com project to load widget related javascripts on demand.

Ensure test bed
http://labs.omaralzabir.com/ensure

Detail article about ensure
http://www.codeproject.com/KB/ajax/ensure.aspx

Ensure.png

What is ensure

ensure allows you to load Javascript, HTML and CSS on demand, whenever they are needed. It saves you from writing a gigantic Javascript framework upfront so that you can ensure all functions are available whenever they are called. It also saves you from delivering all possible html on your default page (e.g. default.aspx) hoping that they might some day be needed on some user action. Delivering unnecessary Javascript, html fragments, CSS during initial loading makes initial loading slow. Moreover, browser operations get slower as there are lots of stuff on the browser DOM to deal with. So, ensure saves you from delivering unnecessary javascript, html and CSS upfront instead load them whenever needed, on-demand. Javascripts, html and CSS loaded by ensure remain in the browser and next time when ensure is called with the same Javascript, CSS or HTML, it does not reload them and thus saves from repeated downloads.

For example, you can use ensure to download Javascript on demand:

ensure( { js: "Some.js" }, function()
{
    SomeJS(); // The function SomeJS is available in Some.js only
});


The above code ensures Some.js is available before executing the code. If the SomeJS.js has already been loaded, it executes the function write away. Otherwise it downloads Some.js, waits until it is properly loaded and only then it executes the function. Thus it saves you from deliverying Some.js upfront when you only need it upon some user action.

Similarly you can wait for some HTML fragment to be available, say a popup dialog box. There's no need for you to deliver HTML for all possible popup boxes that you will ever show to user on your default web page. You can fetch the HTML whenever you need them.

ensure( {html: "Popup.html"}, function()
{
    // The element "Popup" is available only in Popup.html
    document.getElementById("Popup").style.display = "";    
});


The above code downloads the html from "Popup.html" and adds it into the body of the document and then fires the function. So, you code can safely use the UI element from that html.

You can mix match Javascript, html and CSS altogether in one ensure call. For example,

ensure( { js: "popup.js", html: "popup.html", css: "popup.css" }, function()
{
    PopupManager.show();
});


You can also specify multiple Javascripts, html or CSS files to ensure all of them are made available before executing the code:

ensure( { js: ["blockUI.js","popup.js"], html: ["popup.html", "blockUI.html"], css: ["blockUI.css", "popup.css"] }, function()
{
    BlockUI.show();
    PopupManager.show();
});


You might think you are going to end up writing a lot of ensure code all over your Javascript code and result in a larger Javascript file than before. In order to save you javascript size, you can define shorthands for commonly used files:

var JQUERY = { js: "jquery.js" };
var POPUP = { js: ["blockUI.js","popup.js"], html: ["popup.html", "blockUI.html"], css: ["blockUI.css", "popup.css"] };
...
...
ensure( JQUERY, POPUP, function() {
    $("DeleteConfirmPopupDIV").show();
});
...
...
ensure( POPUP, function()
{
    $("SaveConfirmationDIV").show();
);


While loading html, you can specify a container element where ensure can inject the loaded HTML. For example, you can say load HtmlSnippet.html and then inject the content inside a DIV named "exampleDiv"

ensure( { html: ["popup.html", "blockUI.html"], parent: "exampleDiv"}, function(){});


You can also specify Javascript and CSS that will be loaded along with the html.

 Omar AL Zabir on hard to find tech stuffs News Feed 
Monday, September 29, 2014  |  From Omar AL Zabir on hard to find tech stuffs

While working on open source projects, you have to frequently build your code, clean up all temporary files, remove your own passwords, connections strings from web.config, then create a binary deployment package in a zip format and then commit and git push to GitHub. Let’s automate all these using a configurable powershell script. Here’s the ...

More

Monday, September 29, 2014  |  From Omar AL Zabir on hard to find tech stuffs

Oracle Performance Dashboard (OPD) is a small ASP.NET website that shows you performance & problems of one or more Oracle instances in near real-time. It uses the Dynamic Performance Views (DPV) and runs some popular DBA scripts in order to get meaningful, easy to understand information out of the server. You can use it to ...

More

Monday, July 21, 2014  |  From Omar AL Zabir on hard to find tech stuffs

SQL Server Performance Dashboard (SSPD) is a small open source web app that shows you performance & problems of one or more SQL Server instances and their databases in near real time. It uses the Dynamic Management Views (DMV) to gather useful data from the verbose output and combines them with utility stored procs in order ...

More

Tuesday, July 08, 2014  |  From Omar AL Zabir on hard to find tech stuffs

Do you sometimes fail to notice Outlook reminder window? Do you wish a chat window would remain always on top of other windows so that you never miss a message? Do you want to have a notepad always on top so that you can take quick notes anytime, while working on other apps? We have ...

More

Monday, July 07, 2014  |  From Omar AL Zabir on hard to find tech stuffs

Sharepoint Task List is a great place to record tasks for your team members. However, once you have recorded and assigned the tasks, then the fun begins. You have to remind your team members repeatedly about what they need to do today, what tasks are overdue, what’s coming this week and so on. Here’s an app that ...

More

Sunday, May 25, 2014  |  From Omar AL Zabir on hard to find tech stuffs

Google docs is a great platform to write documents, especially when you compare it with the WordPress editor.  It would be good to have a clean way to export a Google doc to a wordpress post or generate nice looking emails. If you copy and paste a Google doc into a WordPress post, it loses many ...

More

Monday, April 07, 2014  |  From Omar AL Zabir on hard to find tech stuffs

When a dynamic page is executing on the server, browser is doing nothing but waiting for the html to come from the server. If your server-side code takes 5 seconds to perform database operations on the server, then for that 5 seconds, user is staring at a blank white screen. Why not take this opportunity ...

More

Friday, May 24, 2013  |  From Omar AL Zabir on hard to find tech stuffs

Windows Azure is offering Extra Small Virtual Machines (1 vCPU, 768 MB RAM) at $9/mo, free for first 3 months. Yes, you read it right. You can get a Windows VMs at $9 (until May 31st) and Linux VMs at $15, at the same rate as Amazon Micro Instance, which is free for first year [...]

Wednesday, May 01, 2013  |  From Omar AL Zabir on hard to find tech stuffs

My article on “Essential IT Admin skills for .NET Developers” is published on DNC .NET Magazine May 2013 issue. Please subscribe to this FREE magazine at: http://www.dotnetcurry.com/magazine/

Thursday, April 11, 2013  |  From Omar AL Zabir on hard to find tech stuffs

My talk at London AJAX User group on some performance optimization techniques that can give a javascript rich Single Page Application big boost in terms of page load performance. See the lecture here: http://skillsmatter.com/podcast/ajax-ria/7-real-life-lessons-learnt-from-a-single-page-application/mh-6922 Here are the slides.
No related posts.

Saturday, March 30, 2013  |  From Omar AL Zabir on hard to find tech stuffs

My talk at London .NET User Group on couple of essential skills every .NET developer should have under their belt before going live. If you are a startup or a developer who has to code, deploy and maintain .NET apps on production, you will find these techniques very handy. http://skillsmatter.com/podcast/design-architecture/10-it-admin-skills-every-dot-net-developer-should-have-before-going-live/mh-6871 Watch the video at Skills [...]
No related posts.

Tuesday, September 18, 2012  |  From Omar AL Zabir on hard to find tech stuffs

Custom fonts are widely used nowadays to give your websites trendy look, but at the great expense of page loading speed. Each custom font has to be downloaded, initialized and applied throughout the page before browser can render anything. If you have a custom font in any CSS, anywhere on the page, most browsers (like [...]
No related posts.

Wednesday, September 12, 2012  |  From Omar AL Zabir on hard to find tech stuffs

Here’s my talk on my Open Source project Droptiles, which replicates the Windows 8 Start UI on the web using HTML 4, JS, CSS 2. I have given an walkthrough on how to use Twitter Bootstrap to create modern looking UI. Then how to use KnockoutJS to build a web applicatoin following the Model-View-ViewModel pattern. [...]
No related posts.

Sunday, July 15, 2012  |  From Omar AL Zabir on hard to find tech stuffs

Droptiles (http://droptiles.com) is a Windows 8 Start like Metro style Web 2.0 Dashboard. It builds the experience using Tiles. Tiles are mini apps that can fetch data from external sources. Clicking on a tile launches the full app. Apps can be from any existing website to customized website specifically built to fit the Dashboard experience. Droptiles is built almost entirely of HTML, Javascript and CSS and thus highly portable to any platform. The sample project is built using ASP.NET to show some server side integration, like Signup, Login and getting dynamic data from server. But with very little change you can port it to PHP, Ruby, JSP or any other platform. Droptiles is the sequel of my Dropthings, which is the first Open Source Web 2.0 Dashboard.

Monday, June 04, 2012  |  From Omar AL Zabir on hard to find tech stuffs

Codeuml.com is a web based UML designer where you code the diagram using a special language and it generates the diagram on the fly. It is faster than using any visual designer where you have to drag & drop diagram elements and use mouse to connect them. Codeuml uses the open source plantuml engine to [...]

Wednesday, April 04, 2012  |  From Omar AL Zabir on hard to find tech stuffs

When you use WCF services from Javascript, you have to generate the Javascript proxies by hitting the Service.svc/js. If you have five WCF services, then it means five javascripts to download. As browsers download javascripts synchronously, one after another, it adds latency to page load and slows down page rendering performance. Moreover, the same WCF [...]

Monday, March 12, 2012  |  From Omar AL Zabir on hard to find tech stuffs

Here’s an implementation of MemoryStream like buffer manager where one thread can write and many threads can read simultaneously. Each reading thread gets its own reader and can read from the shared stream on its own without blocking write operation or other parallel read operations. It supports blocking Read call so that reader threads can [...]

Friday, March 02, 2012  |  From Omar AL Zabir on hard to find tech stuffs

When you are reading data from a binary stream, like NetworkStream or FileStream and you need to read both binary chunks as well as read one text line at a time, you are on your own as BinaryReader nor Stream supports ReadLine. You can use StreamReader to do ReadLine, but it does not allow you [...]

Saturday, February 04, 2012  |  From Omar AL Zabir on hard to find tech stuffs

Here’s the recent presentation made on LIDNUG on scaling ASP.NET websites from thousands to millions of users. Scaling ASP.NET websites from thousands to millions of users by Omar AL Zabir Here’re the slides. Scaling asp.net websites to millions of users

Thursday, December 29, 2011  |  From Omar AL Zabir on hard to find tech stuffs

Internet is full of flash ads nowadays that make page load slower, render slower and consumes more CPU, thus power. If you can browse without having any flash ads or in fact any ads loaded and without any of the tracking scripts – you can browse much faster, scroll through pages much smoother and have [...]

 Omar AL Zabir on hard to find tech stuffs News Feed 

Last edited Dec 28, 2010 at 12:06 PM by oazabir, version 14