Thursday, December 31, 2015

Authorization in SSRS


Authorization can be achieved by assigning roles to the users.

Types of role


Wednesday, December 30, 2015

Build reports using report builder


Report Builder is a report authoring tool for business users who prefer to work in stand alone environment instead of using Report Designer in the visual studio environment. 








Monday, December 14, 2015

SQL Injection

 Sql injection occur when untrusted data is sent to an interpreter as a part of a command or query. The attacker's hostile data can trick the interpreter into executing unintended commands or accessing data without proper authorization

Why SQL injection matters





















Sunday, December 13, 2015

Enable static caching in web.config

Why do we need static caching?


Contents like css, javascript which are static would be stored in browser memory for future processing. which would yield enormous performance improvements 

Advantages of specifying in web.config

  •  If we are on shared hosting and can't configure IIS directly
  •  want our config to carry between all environments we target.

CacheControlMaxAge : is the time interval the content would be cached. In the example below the static content would be cached for an year

<system.webServer>
    <staticContent >
      <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="365.00:00:00"/>
    </staticContent>
   </system.webServer>

Performance report before caching








Peformance report after caching





Note: The primed cache size reduced to 1k from 13.8 k , Score increased by 4 points ( 94 to 97)

Enable Gzip compression in web.config


We can enable GZIP compression entirely in your Web.config


Why do we need GZIP compression ?

Minimize the total size the browser needs to download which would increase performance





Advantages of specifying in web.config 

  •  If we are on shared hosting and can't configure IIS directly
  •  want our config to carry between all environments we target.

<system.webServer>
    <!--Enable Gzip -->
    <urlCompression doStaticCompression="true" doDynamicCompression="true" dynamicCompressionBeforeCache="false" />
   </system.webServer>

Render blocking css

By default css is treated as render blocking resource, which means the browser would hold rendering of any processed content until CSSOM is constructed.

Assume a scenario where the postman comes with a letter and he has to wait for the Gate to open. He cannot deliver the letter till the gate is open






Solution










Media type and media query allow us to mark some resources as non render blocking

Note: we need to move the media styles to 2 separate files ex portrait.css and print.css
we need to reference it with media attribute in the link

The browser would only download print.css when it needs to print

<link href="style.css"    rel="stylesheet">
<link href="portrait.css" rel="stylesheet" media="orientation:portrait">
<link href="print.css"    rel="stylesheet" media="print" >



Parser blocking JavaScript


Why is javascript parser blocking?

When the browser encounters "<script> " it has to pause DOM construction.The reason, the script reference might try to access the css properties.

Assume a scenario where the postman comes with a letter and he has to wait for the Gate to open. He cannot deliver the letter till the gate is open




Solution:

  • inline java script. 
      Note:With this approach we would end up with redundant code
  •  Load javascript after onload event

<script type="text/javascript">
function deferOnload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", deferOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", deferOnload);
else window.onload = deferOnload;
</script>
  • Deferred loading by moving javascript reference to the bottom
       Note: We might have to have script reference at the top
        ex: Google analytics
  • Deferred execution with "async "   .It tells the browser that it does not have to block DOM construction when it encounters script tag and it does not block on CSSOM
<script src="demo_async.js" async></script>

Thursday, December 10, 2015

SPA web application architecture

  • Single page web applications deliver the sleekness and fluidity of native desktop application in a browser
  • Usually all necessary code is downloaded including HTML,CSS and JavaScript , Appropriate resources are downloaded based on the need (usually data through ajax call)

Solution architecture

  • Is a practice of defining and describing an architecture of a system delivered in context of a specific solution
  • Key methods by which solution architects define value to the organizations
  • A solution architecture typically applies to a single project or project release


Tuesday, December 8, 2015

Overview of SQL-RD

  • is an application for Windows that saves time and money by making it easy to define single or packages of Microsoft® SQL RS reports
  • Schedule and run reports automatically, and send them to print, fax, disk, ftp, sms or email in a number of standard formats

Cache buster for IIS



Optimizing a web site includes specifying a long expiration headers.If we do this we need to make sure we have a cache buster


Drawback : If there is a change in the cached files the browser would not take the latest version.

Wednesday, December 2, 2015

Minify css files using Grunt


Grunt-contrib-cssmin

Need : 
  • We can remove unwanted space and reduce the size of css sent across the network
  • Minification will provide an additional 6-16% lower file size.


I used to use yahoo compressor and also used asp.net minification
However I like grunt 
reason
  • Physical file are created at compile time
  • Grunt provides thousands of useful plugins ex: To convert less file to css

Concat css files using Grunt


Grunt-concat-css

Need : We can reduce the no of http request to the server which would directly improve performance














Monday, November 30, 2015

Exception handling in Angular using $exceptionHandler

Handling uncaught exception

Edit in plnkr






















Steps involved
  • Use $provide service in config section as shown below
Note:We need to customize the handler action
In the example shown below $scope is not defined. This exception is handled and alert is shown to the user

Sunday, November 29, 2015

Confirm message before close


If the user unknowingly closes the application. He might loose important information.

Solution
We can avoid this by providing confirm message before close. The user would have the option to save his work or to close the application

The event which we can use is window.onbeforeunload 

Creation of DOM


What do we mean by DOM?

Document Object Model (DOM) is a cross-platform and language-independent convention for representing and interacting with objects in HTMLXHTML, and XMLdocuments.

Steps





Critical rendering path

What is critical rendering path ?

It is the sequence of steps that the browser goes through to render the actual pixels on the page

Critical : Important or absolutely needed
Render : When the page can be seen by the user
Path     : Chain of events that lead to our web page being displayed in a browser 


Need for understanding critical rendering path ?

We can optimize website performance

Steps involved:                   


Saturday, November 28, 2015

Remove JSON properties

We can easily remove specific properties from a JSON object in an array.

Edit in plunkr

Steps involved

  • Loop through the JSON object
  • Specify the properties which needs to be filtered

In the example below I was supposed to remove some properties. I have removed "Date" property.


Wednesday, November 25, 2015

Angular ng-class for error message


We can use angular ng-class to change the style based on error. 

Edit in plunker

ng-Class : Directive allows us to dynamically set CSS classes on an HTML element by data binding an expression that represents all classes to be added.

Steps involved


  • Include css class
  • Use control-group class from bootstrap
  • Specify error condition 

Angular Patterns

ng-Pattern : We can use angular patterns to validate input type. adds the pattern validator to ngModel. It is most often used for text-based input controls, but can also be applied to custom text-based controls

Edit in plunkr

Steps involved
  • Specify input type
  • Specify the angular pattern in regular expression

Tuesday, November 24, 2015

Refresh Iframe

We can refresh and Iframe content using one line of code

Edit in plunker

document.getElementById('iframeid').src += '';

In this example we can reset the position of the map based on button click

Implementing TransactionScope

The TransactionScope class provides a simple way to mark a block of code as participating in a transaction, without requiring you to interact with the transaction itself.

Steps

  1. Add reference to System.Transactions                                                                             








Friday, November 20, 2015

Issue with installing protractor in windows

I was trying to install protractor in  windows 7. However I was no able to install it easily.
I have listed the steps which you need to perform in order to install protractor in windows 
npm install -g protractor
The step involves.
  1. Before running the above command install python 2.7.3 https://www.python.org/download/releases/2.7.3

Thursday, November 19, 2015

Logoff MVC

We cannot call logout function directly from an anchor tag or javascript .Reason they are supposed to be [HttpPost] with [ValidateAntiForgeryToken]

http://localhost:54673/Account/logOFF

we can achieve this by removing  [httpPost] and [ValidateAntiForgeryToken]

ASP ODBC Connection

In classic ASP we had the option to use odbc for connecting to the database. I had to use this in one of my project. I did not find any useful article on this.

Establishing ODBC connection for classic ASP

We can specify the odbc connection in ASP as shown below

Saturday, November 7, 2015

Performance through image optimization


What are different types of Image?

   GIF
  • Simple format
  • Only supports 256 formats
  • Supports animation
  • Initially patented

Friday, November 6, 2015

Performance using css sprites




What is the advantage of using css sprites?

  • It reduces the round trip required to the server
  • Increases performance
  • On resource several uses

What is the disadvantage of using css sprites?

  • Maintenance : If you change one image we have to change other image's css properties 
Sample sprite Images 

The Image on the right has width of 50 pixels and height of 100 pixels. 

First-Image : Top 50 pixels
Second-Image: Bottom 50 pixels


Css would be
.First-Image {width:50px; height:50px; background:url(images/sprite.png) 0 0px;}

.Second-Image {width:50px; height:50px; background:url(images/sprite.png) 0 -50px;}




Note:
We cannot have sprite images for all website images. Best use case would be for icon , footer menu images.


Thursday, November 5, 2015

Mapping using automapper

Need  for using Automapper 

Eventually, in any application, a developer will need to translate data from one object type to another.
Common examples include DTOs (Data Transfer Objects), View Models, or even just some request or response object from a service or Web API call.

Usually we end up doing manual mapping.


Tuesday, November 3, 2015

How to Create simple SSIS package?


We need Sql server Business intelligence development studio to create packages.

Steps involved

  • Open BIDS (Business intelligence development studio)
  • Select new project as Integration Services Project

Monday, November 2, 2015

Caching specific file types

            

Today I would be writing about caching specific file types in IIS. By default this option is not provided in IIS. 















Sunday, November 1, 2015

Angular pass selected item

We need to pass the selected list from the table. This can be achieved by passing the selected item list as shown below

  • On ng-click  we need to pass the selected item list as parameter
  • We can fetch the selected list in java script function as shown below
EDIT IN PLUNKER


Tuesday, October 20, 2015

Web site performance caching

                  

web cache (or HTTP cache) is for the temporary storage (caching) of web documents, such as HTML pages and images, to reduce bandwidth usage, server load, and perceived lag.

The ability to cache and reuse previously fetched resources is a critical aspect of optimizing for performance.

There are 2 types of cache scenario

Empty cache scenario and Primed cache scenario
























Monday, October 19, 2015

Web Site Performance Compression

                  

When we talk about web site compression. we are actually referring to HTTP compression.

HTTP Compression : Is a capability that can be built into web servers and web clients to improve transfer speed and bandwidth utilization.
  • Http data is compressed before it is actually sent from the server
  • Compliant browsers will announce what method are supported before downloading the correct format





















  • Browsers that do not support compliant compression method would actually download uncompressed data
  • Additional CPU is used on both server and browser to compress and uncompress the content. Bytes saved over the network make this trade worthwhile. Usually we have CPU available on both end.
















The most common compression scheme include GZIP, Deflate






Enable IIS to compress content

The server handles 2 types of compression
Static Content --> html, javascript and css
                             By default this is checked.

Note:1)  IIS has a threshold of no of times the file has to be requested in a given period of time before it would compress the file. By default it is 2 times within a 10 sec period. Reason to save CPU time.   

If the files are requested frequently then it might not compress the file

         2) IIS would only compress a file over a specific size


Dynamic Content --> Aspx, Cshtml, JSON 



  •      Need to install dynamic compression module in IIS . We can use platform installer
  How to check if Dynamic Content compression is enabled?





C:\Windows\System32\inetsrv\config folder where we have IIS configuration file












Note

1):By default no compression is done for JSON and XML. We need to enable it
in the config file








2) We need to make sure that the mime type is supported by the client












Thumb rule for compression:

If it is text based content then we can compress

Angular two way binding

                       

Two way data binding:  When the view changes model changes and when the model changes view                                        changes
Note: In angular we do not need observable as we need in Knockout

Thursday, October 15, 2015

Tuesday, October 13, 2015

Excel export from JSON

                               

I have a previous posts on generating Excel file from a table. Unfortunately they do not work in IE. We can generate Excel file from a JSON file as shown below

What do we need?

  • JSONtoCSVConverter javascript file.
  • JSON Data
  • Jquery 
This line is important
 JSONToCSVConvertor(data, "Blog Report", true);

Wednesday, October 7, 2015

Java script cheat sheet

                                        Java script cheat sheet

Replace a character

$scope.SelectedUsers.selected.Text.replace("– ", "-- ")

Monday, October 5, 2015

Why Protractor?

                           
Use : End to End testing

Advantages
  • Test like a user
  • Improve test efficiency
  • Pain point in testing is it is repetitive. It takes care of it
  • It always remembers to check everything
  • Protractor runs while we are working
  • It would interact with the browser faster then humans
  • It would enter data faster then humans
Note: It is built on selenium

For more information :
https://docs.angularjs.org/guide/e2e-testing

Sunday, October 4, 2015

Angular - Export to table (XML, PDF, JSON..)

       
we can export data from a table into various format including 
Json, Xml, Pdf .....

What do you need
  • Angularjs
  • Jquery.js
  • Files referenced below

Note: This example would not run in IE 


Angular export to Excel


Note: You can refer to my other post where it would support different flavors like Excel, Pdf
Edit in plunker new

Note: For excel it does not allow "-" character. We have to use replace function


$scope.SelectedUsers.selected.Text.replace("– ", "-- ")

Monday, September 28, 2015

Angular Cheat Sheet

                                      

Allow only numeric data

<input id="primaryLocationNumber" ng-model="PrimaryLocationId" type="number" class="form-control" />


Set initial selected value

Thursday, September 24, 2015

CSS Implement Image loading on ajax call

                    Implement Image loading on ajax call

When we have a long awaiting ajax call we would like to disable any click events from the user. We can achieve this as shown below.

  • we need an div tag
  • Gif loading image
  • Css class
  • Javascript to show and hide the div and image
html 

We can have this image on the top of all the html tags

Wednesday, September 23, 2015

CSS cheat sheet

Remove default bullets from unordered list
#notepad li { list-style: none; 
}

Text-Align



.panel{
   text-align: center;
}

Border Radius
border-radius: 14px;


Align table to center within a div (responsive)





table {
   margin:0 auto;
}

Adjust left and right margin



.panel{
   margin-right:auto;
   margin-left:auto;
}










Class with round edges

.mainBody{
 
    margin: 100px 250px;
    border-radius: 25px;
    border: 2px solid #73AD21;
    padding: 20px;
    width: 1303px;
    height: 703px;
   
}

Hover effect in table selection
.table>tbody>tr:hover {
        background: #99B2E6 !important;

    }

Specify font-awesome styles for specific div
#notepad li .fa-ban:before {
    color: #FA0A26;
    padding-right: 0px;
    margin-left: -41px;
}
Add vertical line

.vertical-line {
     border-left:1px solid #47473D;

 }








Add shadow box

Edit in plunker

div { width: 300px; height: 100px; 
        background-color: yellow; 
       box-shadow: 10px 10px 5px #888888; }

 Text Transform

.text-change
{
text-transform: none;
}
.text-change
{
text-transform: capitalize;
}
.text-change
{
text-transform: uppercase;
}
.text-change
{
text-transform: lowercase;
}



Pointed Cursur


<span style="cursor:pointer">pointer</span><br>




Specify styles to multiple tag


input[type=text],input[type=password],textarea
{ 
width:150px;
}

Display html as block 
span#mySpan {display:block; }

Borders for div
container{
    background-color:#ccc;
    height: 200px;
    width:200px;
     border-color: #000;
     border-style: solid
    }
Hide text overflow with ellipses

Borders for div

.ellipsis {
  text-overflow: ellipsis;

  /* Required for text-overflow to do anything */
  white-space: nowrap;
  overflow: hidden;
}


Labels