Bootstrap: Understanding Grid System

Bootstrap is a 12 column grid, but you can put more than 12 columns in a row. The remaining columns will simply wrap onto the next line below, depending on the viewport. Think of the grid layout more in terms of a different grid for every size, lg, md, sm, and xs (or break points to be specific) that use the same markup.

Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.

• Use rows to create horizontal groups of columns.
• Content should be placed within columns, and only columns may be immediate children of rows.
• Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. Less mixins can also be used for more semantic layouts.
• Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.
• The negative margin is why the examples below are outdented. It’s so that content within grid columns is lined up with non-grid content.
• Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.
• If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
• Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, e.g. applying any .col-md-*class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg-* class is not present.

Bootstrap: Class for Text Align

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

AngularJS: Factory to show/hide loader

app.factory("ajaxLoader", [
        function () {
            return {
                show: function() {
                    $('#dvProgress').show();
                },
                hide: function() {
                    $('#dvProgress').hide();
                }
            };
        }
    ]);

Invoking Code inside controller(you have to include above factory into
controller inject list):

ajaxLoader.hide();
ajaxLoader.show()

AngularJS directive to set visibility of html element

The visibility property specifies whether an element’s content is visible or not. Its values can be visible, hidden, collapse, and inherit. The default value is inherit. If visibility is set to visible, the element displays normally. If visibility is set to hidden, the element’s content is hidden (but transparent), but the element still takes up the same location of its generated box. If visibility is set to collapse and the element is not a row or column, according to the CSS2 specification, collapse should have the same meaning as hidden. Firefox does this correctly, but IE6 and IE7 do not treat collapse as hidden.

app.directive('visible', function() {
        return {
            restrict: 'A',
            link: function(scope, element, attributes) {
                scope.$watch(attributes.visible, function(value) {
                    element.css('visibility', value ? 'visible' : 'hidden');
                });
            }
        };
    });

Performance Enhancement in asp.net [Client Side]

Performance Enhancement

1. Minify Resources (HTML, CSS, and JavaScript):¨

Minification refers to the process of removing unnecessary or redundant data without affecting how the resource is processed by the browser – e.g. code comments and formatting, removing unused code, using shorter variable and function names, and so on.

2. Enable Compression:

¨All modern browsers support and automatically negotiate gzip compression for all HTTP requests. Enabling gzip compression can reduce the size of the transferred response by up to 90%, which can significantly reduce the amount of time to download the resource, reduce data usage for the client, and improve the time to first render of your pages.

Solution:

¨All excel templates/uploaded files etc in application

3.Optimize Images:

¨Images often account for most of the downloaded bytes on a page. As a result, optimizing images can often yield some of the largest byte savings and performance improvements: the fewer bytes the browser has to download, the less competition there is for the client’s bandwidth and the faster the browser can download and render content on the screen.

Solution

¨Sprites
¨Save Image as font [using @font-face]
¨Using SVG’s [bit controversial]

4.Optimize CSS Delivery:

¨Before the browser can render content it must process all the style and layout information for the current page. As a result, the browser will block rendering until external stylesheets are downloaded and processed, which may require multiple roundtrips and delay the time to first render.

¨If the external CSS resources are small, you can insert those directly into the HTML document, which is called inlining. Inlining small CSS in this way allows the browser to proceed with rendering the page.

¨If the amount of data required exceeds the initial congestion window, it will require additional round trips between your server and the user’s browser. For users on networks with high latencies such as mobile networks this can cause significant delays to page loading.

5. Reduce the size of the above-the-fold content:

Solution:

To make pages load faster, limit the size of the data (HTML markup, images, CSS, JavaScript) that is needed to render the above-the-fold content of your page. There are several ways to do this:

¨Structure your HTML to load the critical, above-the-fold content first

¨Reduce the amount of data used by your resources

6.Remove Render-Blocking JavaScript:

¨Before the browser can render a page it has to build the DOM tree by parsing the HTML markup. During this process, whenever the parser encounters a script it has to stop and execute it before it can continue parsing the HTML. In the case of an external script the parser is also forced to wait for the resource to download, which may incur one or more network roundtrips and delay the time to first render of the page.

Solution:
¨Inline JavaScript [if few lines of code]
¨<script async src=”my.js”>

7. Working with the DOM:

¨Working with the DOM can cause browser reflow, which is the browser’s process of determining how things should be displayed. Directly manipulating the DOM, changing CSS styles of elements, and resizing the browser window can all trigger a reflow. Accessing an element’s layout properties such as offsetHeight and offsetWidth can also trigger a reflow. Because each reflow takes time, the more we can minimise browser reflow, the faster our applications will be.

function addAnchor(parentElement, anchorText, anchorClass)

{

var element = document.createElement(‘a’); parentElement.appendChild(element);

element.innerHTML = anchorText;

element.className = anchorClass;

}

Solution

function addAnchor(parentElement, anchorText, anchorClass)

{

var element = document.createElement(‘a’);

element.innerHTML = anchorText;

element.className = anchorClass;

parentElement.appendChild(element);

}

8. Avoid Plugins:

¨Plugins help the browser process special types of web content, such as Flash, Silverlight, and Java. Most mobile devices do not support plugins, and plugins are a leading cause of hangs, crashes, and security incidents in browsers that provide support.

Solution:

¨Use HTML5
¨Removal of activeX control from application

 

Dev Tool: Client Side Performance Evaluation

Page Speed Insight [Extension by Google Chrome]
¨Minimise payload
¨Minimise delay in page load
¨Other

Notes prepared From Google Blog