Authorization in SSRS

Authorization can be achieved by assigning roles to the users.

Types of role

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. 

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

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>

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

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.

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

Configure Log4net in 5 minutes

Steps

1. Install log4net using nuget package manager

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

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 HTML, XHTML, 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:                   

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.

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

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                                                                             
   

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

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

Performance through image optimization

What are different types of Image?

   GIF

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

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.

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.

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

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. 

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

Web site performance caching

                  

A 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

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

Edit in plnkr

Angular Pagination Directive

To implement paging in a table we need drpagination directive. 

It is available at drPagination

Edit in pulker

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);

Java script cheat sheet

                                        Java script cheat sheet

Replace a character

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

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

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

Edit in plunker

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("– ", "-- ")

Angular Cheat Sheet

                                      

Allow only numeric data

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

Set initial selected value

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

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;
}