Showing posts with label javascript. Show all posts
Showing posts with label javascript. Show all posts

Wednesday, April 24, 2013

Deferred Loading

On my job we are trying to decrease time for loading pages as much as it is possible, we simply want 'fast pages'. We don't want our users waited for 2 seconds each time they load page. We are focusing to keep not more then 0.5-1 second per page and we are doing really a lot in that area. Nowadays It's quite common for most of websites to include javascripts just in head area (or at bottom area) as static html so each time we load pages they will be not responsive till all resources will be loaded. I want to share how to load of javascript files (or any another resouces) just after page loads. It could increase speed dramatically. This solution loads all javascrip files deferred after page load on onload event. That snippet should be minimized and be present on every page where you want to use deferred loading.

Snippet of deferred loader
 function deferred(success){
    if (typeof window.onload != 'function') {
   window.onload = success;
  } else {
   var old = window.onload ;
   window.onload = function() {

 function getScript(url,success){
  var script=document.createElement('script');
  var head=document.getElementsByTagName('head')[0],done=false;
  script.onload=script.onreadystatechange = function(){
    if ( !done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete') ) {
   script.onload = script.onreadystatechange = null;

 function getScripts(urls, success){
  var total = 0;
  function trySuccess(){
   if(total == urls.length)success();
  for (var i = 0; i < urls.length; i++) {
 var DeferredLoader = window.DeferredLoader = {};
 DeferredLoader.getScript = getScript;
 DeferredLoader.getScripts = getScripts;
 DeferredLoader.deferred= deferred;

How to use loading, in that example we load jQuery, then when it's loaded we load kissmetrics libraries and only then utils.
var urls = {
 jquery: "/javascript/jquery-1.9.1.min.js",
 dependent: ["/javascript/util-2013-04-10m.js"],
 kissmetrics:['//','//' + window._kmk + '.1.js' ]

DeferredLoader.deferred(function () {
 DeferredLoader.getScript(urls.jquery, function () {
  DeferredLoader.getScripts(urls.kissmetrics, function () {
   DeferredLoader.getScripts(urls.dependent, function(){})

Saturday, October 08, 2011

JavaScript: use power of console

console.log() - is pretty nice way to display debug information without interrupting user's actions. But do you know that 'console object' has lot of other useful methods? In this article I will try to show another important method in console object.

1. power of output
most common case for using console object is:
console.log("hello word")
but here few more ways how we can use it
console.log("string1", "string2", 1, 2, {proper1:"val1", proper2: 5});
console.log("Do you know that word %s same for all language except english %s. %d < %d", "ananas", "pineapple", 1, 2);
There are few another kind of log (works same as log but has different status)
console.debug(),, console.warn(), console.error() and console.groupEnd() allow you to format very nice output with categories, it is very usefull when you have tons of data in log so you can easy control what is related to etc."Food")"Fruit")
2. power of time
just put console.time()/console.timeEnd() before/after code where you want to measure time .
Aslo there are profile methods console.profile() and console.profileEnd() which allow to see "stack".

3. power of inspection
I guess most of us often want to see specific properties in HTML fragment, for such tasks we can use console.dir(object) or console.dirxml(element)

Some usefull articles about logging: Firebug about logging and Joe Hewitts about console

Tuesday, January 18, 2011

short dojo + ajax example how to get data from db

Links to this post
There are 3 most useful ahax-approaches I use when working with Lotus Domino:
- getting view as JSON. database.nsf/viewname?readviewentries& OutputFormat=JSON (fast and modern)

- agent approach (example here, most flexible and probably most slow approach)
- page/form/view as elelemnts, f.x. database.nsf/myform?openform&unid=123123 (easy to use but not  flexible, I use it very rarely)

Very small and known example of dojo's ajax, I'm getting some information from agent and then will use it in my JS later.

var jsondata;
url: "database/agentGetData?Openagent&param1=id1",
sync: true,
load: function(data) {
jsondata = data;

I'm interesting in any another 'smart' approaches, so if u have some interesting idea we can discuss in comments them.

Monday, January 03, 2011

Native JSON

Links to this post
var jsonObjStr = '{"name":"Erast Fandorin", "speciality":"detective"}';
var object_person = JSON.parse(jsonString);
// object_person is object now with 2 properties

var personString = JSON.stringify(person);
// personString now keeps the string '{"name":"Erast Fandorin", "speciality":"detective"}'

this native JSON is now supported mostof browsers, so just use it :)

Tuesday, November 16, 2010

JS staff: Use Object instead of Switch.

Links to this post
Well, many of us use switch to solve own tasks, but there is another way I would like to show. We can use Object approach to solve our problem and it looks more intelligent from my point of view.

Let me show couple examples

1. Example with switch
function FoodType(food) {
var getfoodtype;

switch(food) {
case 'apple': getfoodtype = 'fruit'; break;
case 'cucumbers': getfoodtype = 'vegetable'; break;
case 'watermelon': getfoodtype = 'strawberry'; break;
default: getfoodtype = 'not recognized';

return getfoodtype;


var getfoodtype, case, and break, we can avoid them.

2. Example with Object
FoodType {
apple: fruit,
cucumbers: vegetable,
watermelon: strawberry,

GetFoodType: function(type) {

return(this[type] || 'not recognized');


Ofc there could be cases where Object approach does not work and we have to use switch, but it is alternative, so keep in mind this.

Friday, November 12, 2010

Dynamical counter in Lotus Notes client

Have you ever tried to show length of field (f.x. just below the field) ?

Let me show my example, I've a form, there I have couple fields I need to show length of it (because there is some validation of length for this field).

So when user input new char in Title field, Character count should increase to 1. Know how to do that? I believe many of you know, but anywhere I would like to share this approach.

There are actually 2 fields: 1 for input and another one is just below the Title of field (computed type).

What we need to do - use some simple JavaScript lines..

step 1.
go to JS Header even in form/subform and put there couple lines of JS (select Run: Client and JavaScript)

 var f = document.forms[0];  
 var stopDynamicalCounter = 0;  
 function updateCharCounter(delay) {  
   if(stopDynamicalCounter == 0) return;  
   f.AlternateTitle_length.value = f.AlternateTitle.value.length;  
   setTimeout( 'updateCharCounter( ' + delay + ' )', delay);  

step 2.
select input-field, and go to onFocus event, select Run: Client and JavaScript and put there 2 lines
 stopDynamicalCounter = 1;  

step 3.
select input-field, and go to onBlur event, select Run: Client and JavaScript and put there 1 line

 stopDynamicalCounter = 0;  

That's all.

Thursday, September 16, 2010

Change encoding attribute after XLST

Links to this post

I've done some transformation my DXL using XSLT. The funny thing was that after transformation using

// Transform
var str = docxml.transformNode(xsl);

I always got 'encoding' as UTF-16, that's not correct, so after some time I found nice solution

here is code I used:

var doc = new ActiveXObject("Microsoft.XMLDOM");

// Print initial encoding
var pi = doc.firstChild;
var eattr = pi.attributes.getNamedItem("encoding");
var encoding = eattr.value;

// Convert to string and reload (this loses the encoding)
var xml = doc.xml;

// Reset the encoding to "ISO-8859-1"
pi = doc.firstChild;
var eattr = pi.attributes.getNamedItem("encoding");
if (eattr == null) {
eattr = doc.createAttribute(
eattr.value =

// And save document with new encoding."test2.xml");

It works fine for me (and not, output option in XSL did not help)

Wednesday, September 15, 2010


Links to this post
I did not find that method how can I add days to my date, so here is solution:

// add days
Date.prototype.addDays = function(days) {
var secsDay = 86400000; // there are 86400000 secs in 1 day
var time = this.getTime(); // number of milliseconds since midnight of January 1, 1970.
var newdate = new Date(time + (days * secsDay));

If anybody has better solution, you are welcome!

Tuesday, September 14, 2010

'wget' as way to download files

Links to this post
Need to download files from our Domino server by this path http://host/myfile.log, using MS DOS command?
You can try to use wget as one of possible way to do that.
here is an exmplae of DOS command:
wget.exe http://host/myfile.log
I've run this DOS command in my JS file (yes ActiveX is required for that), but anywhere it is quite interesting approach.

Monday, June 08, 2009

JavaScript libraries and reference sites

Links to this post
Got it from BestPracticesWebAppDevDomino8.pdf
a site dedicated to improving Web development
- A another site for Web development information


A fast, concise, JavaScript Library that simplifies working with HTML documents
The home page for JSON information

A compact, modular, OO JavaScript framework that is designed for the intermediate to advanced JavaScript developer

Provides an easy-to-use, cross-browser user interface

Yahoo UI
Provides a set of utilities and controls, written in JavaScript

Provides for a cross-browser UI libraries

Some useful links:

Web development tools

Web development resources

Domino resources

isNumeric for web

Links to this post
as I think the best approach to check value in web for IsNumeric is:
function IsNumeric(inputVal,sErrorMsg) {
if (isNaN(parseFloat(inputVal))) {
return false;
return true

I also used such approach, but I don't like it anymore
function IsNumeric(expression) {
var nums = "0123456789";
if (expression.length==0)return(false);
for (var n=0; n <>