Monday, March 28, 2016

Handling jQuery conflicts

Many times you have to deal with multiple versions of jQuery in single page. jQuery provides a way to do that:

 <script src="~/Scripts/jquery-1.10.2.min.js"></script>  
 <script type="text/javascript">  
   var jQuery_1_10_2 = $.noConflict();  
 </script>  
 <script src="~/Scripts/Closure/NewVersion.js"></script>  
 <script src="~/Scripts/jquery-1.7.2.min.js"></script>  
 <script src="~/Scripts/Closure/OldVersion.js"></script>  

HTML
 <div id="container" style="margin-bottom:20px;">  
 </div>  
 <input type="button" id="btnAddNew" value="Add new" />  


Scenario:
There is a div and a button inside HTML page. We want to add new buttons to this div dynamically, when button 'btnAddNew' is clicked. We'll add 2 buttons: 
1) To test the code in older version of jQuery i.e. 1.7.2
2) To test the code in new version i.e. 1.10.2


I've included 2 references of jQuery: version 1.10.2 and 1.7.2.

Version 1.7.2 had live feature, which is obsolete in 1.10.2. 
Version 1.10.2 has on feature, which is missing in 1.7.2.

We'll use both these features on the same page i.e. use both the jQuery versions on the same page.


After including 1.10.2, I've included the script for noConflict. This would tell jQuery to use variable jQuery_1_10_2 instead of default '$' variable for referring jQuery 1.10.2. This means, that if you want to use any function or feature in 1.10.2, you'll have to use jQuery_1_10_2 variable, not '$'.

NewVersion.js contains the code to bind the click event for 'newbtn' class:


 jQuery_1_10_2(function () {  
   jQuery_1_10_2(document).on('click', '.newbtn', function () {  
     alert(jQuery_1_10_2(this).val() + ' clicked!!!');  
   });  
 });  

The code above, binds the click event of the buttons (added dynamically) having the class 'newbtn'. 

OldVersion.js contains the code to bind click event for 'oldjsbtn' class:


 $(function () {  
   $('#btnAddNew').click(function () {  
     var buttonText = "Button " + $('.newbtn').length + 1;  
     $('#container').append('<div class="col-xs-12"><input class="oldjsbtn btn-secondary" type="button" value="Old Js ' + buttonText + '" /><input class="newbtn btn-primary" type="button" value="New Js ' + buttonText + '" /></div>');  
   });  
   $('.oldjsbtn').live('click', function () {  
     alert($(this).val() + ' clicked');  
   });  
 });  


Note that we've used the jQuery variable jQuery_1_10_2 instead of $ here. This can however, make the code very untidy. 

Imaging you'd a javascript file with thousands of lines of code. Changing the $ sign with jQuery_1_10_2 won't be a good solution for that. You'll need to check each and every line and make sure that the code is replaced correctly. This can be cumbersome and time consuming. There is a slick way to resolve this issue using javascript closure.

Closure is basically a self executing function, which initializes and calls itself. You can also pass parameters to this function, which we'll be using in our case. 

Below is our modified NewVersion.js file using closure:


 (function ($) {  
   $(function () {  
     $(document).on('click', '.newbtn', function () {  
       alert($(this).val() + ' clicked!!!');  
     });  
   });  
 })(jQuery_1_10_2);  

We've passed jQuery_1_10_2 as an argument to this closure function and used '$' as alias. Because of it, we'll be able to use '$' throughout our script and get rid of the messy code using the variable jQuery_1_10_2. 

Friday, January 29, 2016

Scrum vs Kanban vs Scrumban

Scrum Kanban Scrumban
Iterations 1-4 week sprints Continuous work alongside releases shorter than one week or bigger iterations like goals Continuous work with short cycles for planning and longer cycles for release
Work routines Push and pull principle mixed with early binding to team members Pull principle with late binding to team members Pull principle with late binding to team members
Scope limits Push and pull principle mixed with early binding to team members Pull principle with late binding to team members Pull principle with late binding to team members
Planning routines Sprint planning Release/iteration planning, demand planning Planning on demand for new tasks
Estimation Must be done before start of sprint Optional Optional
Performance metrics Burndown Cumulative flow diagram, lead time cycle time Average cycle time
Continuous improvement Sprint retrospective Optional Short Kaizen event as an option
Meetings Sprint planning, daily scrum, retrospective Can be avoided Short Kaizen event
Roles Product owner, Scrum master, team Team and other work specific roles Team and other work specific roles
Team members Cross-functional team members Cross-functional team members, specialization is allowed Specialization or preference to tasks
Task size The size that can be completed in sprint Any size Any size
New items in iteration Forbidden Allowed whenever queue allows it Allowed whenever queue allows it
Ownership Owned by a team Supports multiple teams ownership Supports multiple teams ownership
Board Defined/reset each sprint Persistent Persistent
Prioritization Through backlog Optional Recommended on each planning
Rules Constrained process Only a few constraints, flexible process Slightly constrained process
Fit for Enterprise maturity for teams working on product or especially project which is longer than a year Support and maintenance teams, continuous product manufacturing Startups, fast-pace projects, continuous product manufacturing
Continuous improvement Sprint retrospective Optional Short Kaizen event as an option
Meetings Sprint planning, daily scrum, retrospective Can be avoided Short Kaizen event

Thursday, January 28, 2016

Create class from database table

declare @TableName sysname = 'CustomerProfile'
declare @ClassText varchar(max) = 'public class ' + @TableName + '
{'

select @ClassText = @ClassText + '
    public ' + ColumnType + NullableSign + ' ' + ColumnName + ' { get; set; }
'
from
(
    select 
        replace(col.name, ' ', '_') ColumnName,
        column_id ColumnId,
        case typ.name 
            when 'bigint' then 'long'
            when 'binary' then 'byte[]'
            when 'bit' then 'bool'
            when 'char' then 'string'
            when 'date' then 'DateTime'
            when 'datetime' then 'DateTime'
            when 'datetime2' then 'DateTime'
            when 'datetimeoffset' then 'DateTimeOffset'
            when 'decimal' then 'decimal'
            when 'float' then 'float'
            when 'image' then 'byte[]'
            when 'int' then 'int'
            when 'money' then 'decimal'
            when 'nchar' then 'char'
            when 'ntext' then 'string'
            when 'numeric' then 'decimal'
            when 'nvarchar' then 'string'
            when 'real' then 'double'
            when 'smalldatetime' then 'DateTime'
            when 'smallint' then 'short'
            when 'smallmoney' then 'decimal'
            when 'text' then 'string'
            when 'time' then 'TimeSpan'
            when 'timestamp' then 'DateTime'
            when 'tinyint' then 'byte'
            when 'uniqueidentifier' then 'Guid'
            when 'varbinary' then 'byte[]'
            when 'varchar' then 'string'
            else 'UNKNOWN_' + typ.name
        end ColumnType,
        case 
            when col.is_nullable = 1 and typ.name in ('bigint', 'bit', 'date', 'datetime', 'datetime2', 'datetimeoffset', 'decimal', 'float', 'int', 'money', 'numeric', 'real', 'smalldatetime', 'smallint', 'smallmoney', 'time', 'tinyint', 'uniqueidentifier') 
            then '?' 
            else '' 
        end NullableSign
    from sys.columns col
        join sys.types typ on
            col.system_type_id = typ.system_type_id AND col.user_type_id = typ.user_type_id
    where object_id = object_id(@TableName)
) t
order by ColumnId

set @ClassText = @ClassText  + '
}'

print @ClassText

Thursday, June 18, 2015

Display loader until the image gets fully loaded using javascript

One of the most common problems with web based applications involving high resolution images is the time taken to load the images. The images would load slowly section by section and it might be annoying for end users. To resolve this issue, we can display a loader before the image gets fully loaded and then display the actual image with a simple fade effect through jQuery:

First set the loader image as the default image

<img src="/ajax-loader.gif" id="profileImage" />


Declare the javascript to handle image loading

function loadImage(control, src) {
        var loadImage = new Image();
        loadImage.src = src;
        if (loadImage.complete) {
            control.hide().attr('src', src).fadeIn();
            loadImage.onload = function () { };
        }
        else {
            loadImage .onload = function () {
                control.hide().attr('src', src).fadeIn();
                loadImage.onload = function () { };
            }
        }
}


Call the function

loadImage($('#profileImage'), 'https://www.microsoft.com/global/learning/en-us/PublishingImages/ms-logo-site-share.png');

- Notice that I've used jQuery to fetch image object i.e. $('#profileImage') because of which I could use control.hide() in the function directly without having to use $(control).





Tuesday, June 9, 2015

LINQ prioritize order

I recently faced a scenario of prioritizing search results filtered by LINQ. Here is the scenario:

I have these records in database table:

1. Superman vs Batman
2. Batman
3. Dark night rises - Batman
4. Batman Returns

I want to search all the records having 'batman' text, however the words starting with batman should be displayed first. i.e. the order should be:

1. Batman
2. Batman Returns
...


This can be achieved using this simple LINQ query:

DbContext.Movies.Where(w => w.Name.Contains("batman")).OrderBy(d => d.Name.IndexOf("batman")).ToList();

I've highlighted the key part of the query which sorts the results based on the Index of word "batman". This means, if the word starts with 'batman', the index would be 0 and it would be displayed first.

Thursday, June 4, 2015

Executing MySQL sub routine in Entity Framework

Entity framework has an easy and slick way to support MySql. In MySQL stored procedures are called stored routines. Routines can be called from Entity Framework using below syntax:


using (var dbContext = new DatabaseContext())
{
  var subRoutine = string.Format("CALL StoredRoutineName('{0}','{1}')", value1, value2);
   signInAttempts = dbContext.Database.SqlQuery<int>(subRoutine,
                     new MySqlParameter("value1", value1),
                     new MySqlParameter("value2", value2)).FirstOrDefault();

}

Invalid object name 'dbo.__MigrationHistory'

Recently I faced an issue with Entity Framework 6.0. The error did not crashed the website, but I got it frequently in event viewer. To resolve this, I just added a line in DbContext's constructor:

public DatabaseContext() : base("name=Sample")
{
       Database.SetInitializer<DatabaseContext>(null);
}


If you use an existing database with Code First approach, you may not want to execute any initialization code. You can disable the database initialization process altogether by passing null to SetInitializer() method