Do you have a website with multiple JavaScript files? Each one of these
files adds an HTTP request to your pages, effectively increasing the
load time. JMerge is a simple web application that fetches and combines
JavaScript files from a URL to reduce the number of HTTP requests. In essence, it does the work for you. All you do is type in a URL, pick the files you want to combine, and voila! Try it out for yourself:
.Net Gyan
Everything allied to web development. ASP.Net, C#, CSS, HTML, JavaScript, JQuery, Online tools, Best Practices, Optimization Techniques, AJAX, MVC, Free ebooks and ASP.Net Jobs!
Wednesday, November 28, 2012
Tuesday, November 27, 2012
Google PageSpeed
Make the Web Faster
Fast and optimized pages lead to higher visitor engagement, retention, and conversions. The PageSpeed family of tools is designed to help you optimize the performance of your website. PageSpeed Insights products will help you identify performance best practices that can be applied to your site, and PageSpeed optimization tools can help you automate the process.What is PageSpeed Insights?
PageSpeed Insights analyzes the content of a web page, then generates suggestions to make that page faster. Reducing page load times can reduce bounce rates and increase conversion rates.PageSpeed Insights Browser Extensions
PageSpeed Insights is available as an open-source browser extension for Google Chrome and Firefox. Webmasters and web developers can use PageSpeed Insights to evaluate the performance of their web pages and to get suggestions on how to improve them.PageSpeed Insights performs several tests on a site's web server configuration and front-end code. These tests are based on a set of best practices known to enhance web page performance. Webmasters who run PageSpeed Insights on their pages get a score for each page, as well as suggestions on how to improve its performance. By following the suggestions you can make your site faster, keep Internet users engaged with your site, reduce your bandwidth and hosting costs and improve the web!
Google Chrome
In Chrome, PageSpeed Insights extension runs in the Chrome Developer Tools.Supports Mac OS X (x86), Linux (x86 and x86-64), and Windows (XP and up)
Install Chrome Extension
Firefox
In Firefox (4.0 and higher), PageSpeed Insights extension runs in the Firebug web development tool (1.7 and higher)
Supports Mac OS X (x86 and x86-64), Linux (x86 and x86-64), and Windows (XP and up).
Install Firefox Extension
PageSpeed Insights extensions periodically checks for updates. If an update is available, the browser will give you the option of downloading the newer version of PageSpeed Insights to get the latest updates to the rules and functionality that is added by the community.
Supports Mac OS X (x86 and x86-64), Linux (x86 and x86-64), and Windows (XP and up).
Install Firefox Extension
PageSpeed Insights extensions periodically checks for updates. If an update is available, the browser will give you the option of downloading the newer version of PageSpeed Insights to get the latest updates to the rules and functionality that is added by the community.
Friday, November 23, 2012
Google Analytics API - JavaScript and MVC3
I was searching for Google Analytics API in .Net to display the core reporting information in my website from Analytics. I found the ga-ez-dash library (Google Analytics Easy Dashboard Javascript Library)
But, at this time, each user who views a dashboard must have access to the Google Analytics account from which the dashboard data is generated. Currently you can’t create a dashboard for users who do not have access to your Google Analytics data. Getting Started To get started you need to perform the following 3 steps:
All applications that use the Google Analytics API must be registered through the Google APIs Console. When you register in the console, you will create a new project and configure the settings to work with this library. Once configured, the console will provide you with a few values that you need in the configuration step. Here's exactly what you need to do
Select services for the project. (Services -> Analytics API)
Next you will need to configure this project to use OAuth 2.0 authentication. Just like you need to login to your Google Analytics account to view your data, you will need to authorize this dashboard application to view your data. Authorization is handled through the OAuth2.0 protocol.
Note: This dashboard library will only work if the script the page is on is hosted from a web server. The domain (hostname) of the web server must match the values in the JavaScript origins field. This library will not work if it is hosted from a file.
Once complete, your project should have values (Branding information, Client ID for web applications and Simple API Access) as follows
What is ga-ez-dash library?
This library is designed to create an easy way to build a custom Google Analytics Dashboard on your own page. The library is built on top of the Google Analytics Core Reporting and Chart Tools APIs and does all the heavy lifting of handling authorization, issuing queries, and transforming the results into pretty visualizationsBut, at this time, each user who views a dashboard must have access to the Google Analytics account from which the dashboard data is generated. Currently you can’t create a dashboard for users who do not have access to your Google Analytics data. Getting Started To get started you need to perform the following 3 steps:
- Register for a developer key
- Copy & Paste the code to a web page
- Configure the chart
All applications that use the Google Analytics API must be registered through the Google APIs Console. When you register in the console, you will create a new project and configure the settings to work with this library. Once configured, the console will provide you with a few values that you need in the configuration step. Here's exactly what you need to do
Go to the GoogleAPIs Console
To create a new APIs project and manage the API usage, click on Create Project buttonSelect services for the project. (Services -> Analytics API)
Next you will need to configure this project to use OAuth 2.0 authentication. Just like you need to login to your Google Analytics account to view your data, you will need to authorize this dashboard application to view your data. Authorization is handled through the OAuth2.0 protocol.
Getting your Client ID and API Key
In the Google APIs Console, for the project you just created:- Navigate on the left panel to API Access
- Click the big blue Create An OAuth 2.0 Client ID button
- Add a cool product name and logo, then click Next
- Under
- Application Type – select Web Application
- Your site or hostname – add the domain name or host name from where this script will be served.
- Click Create Client ID
Note: This dashboard library will only work if the script the page is on is hosted from a web server. The domain (hostname) of the web server must match the values in the JavaScript origins field. This library will not work if it is hosted from a file.
Once complete, your project should have values (Branding information, Client ID for web applications and Simple API Access) as follows
Once compete, time to copy and paste the code to a web page!.
- Copy the library and save to your server
- Copy and paste the following code into a new web page (In MVC, it's View)
<!DOCTYPE> <html> <head><title>GA Dash Demo</title></head> <body> <!-- Add Google Analytics authorization button --> <button id="authorize-button" style="visibility: hidden"> Authorize Analytics</button> <!-- Div element where the Line Chart will be placed --> <div id='line-chart-example'></div> <!-- Load all Google JS libraries --> <script src="https://www.google.com/jsapi"></script> <script src="gadash-1.0.js"></script> <script src="https://apis.google.com/js/client.js?onload=gadashInit"></script> <script> // Configure these parameters before you start. var API_KEY = 'Enter Your API Key Here'; var CLIENT_ID = 'Enter Your Client ID Here'; var TABLE_ID = 'Enter your Table ID here'; // Format of table ID is ga:xxx where xxx is the profile ID. gadash.configKeys({ 'apiKey': API_KEY, 'clientId': CLIENT_ID }); // Create a new Chart that queries visitors for the last 30 days and plots // visualizes in a line chart. var chart1 = new gadash.Chart({ 'type': 'LineChart', 'divContainer': 'line-chart-example', 'last-n-days':30, 'query': { 'ids': TABLE_ID, 'metrics': 'ga:visitors', 'dimensions': 'ga:date' }, 'chartOptions': { height:600, title: 'Visits in January 2011', hAxis: {title:'Date'}, vAxis: {title:'Visits'}, curveType: 'function' } }).render(); </script> </body> </html>
Configuration
Once you've copied and pasted the code, you just need to configure the chart to work with your data.Replace the API_KEY and CLIENT_ID values with the respective API Key and Client ID that you created in the Google APIs console during the first step.
Replace the TABLE_ID parameter with ga: + your profile ID. Finding your profile ID is easy. Just log into Google Analytics and navigate to the profile you want to use. After logging in, there will be a profile ID at the end of the URL in the address bar after the 'p'. This is your profile ID. Example: p'XXXX'.
Or you can find it in Google Analytics under Admin > Profile > Profile Settings
Use ga: + your profile ID to get your Table ID. So if your profile ID was 8325, your table id would be ga:8325. Save the file. You're done!
Usage
Navigate your browser to the URL this script is hosted on. The script will:- Display a button asking for you to authorize
- Click the button. You will be prompted to login and authorize access
- Once complete, the script will retrieve visitors over the past 30 days, and display the data in a pretty line chart
Result
Result will look like as follows:You can customize your report using Chart Method Reference
Wednesday, October 17, 2012
Picmonkey: An online photo editing tool
Picmonkey is online photo editing tool, comes with many profession features. You can edit photographs, add effects, give some touch-ups, add text on it, create overlays, include frames and textures , apply themes and a lot more!. This is the easiest, cheapest way to make your photos look awesome, using the Internet
Tuesday, October 16, 2012
25 Interactive HTML Websites That look similar to Flash
Keep in mind that those cool interactive media rich websites that were built with Flash? They would frequently feature full screen layouts, animated elements and innovative interfaces that made HTML websites look plain and boring. Unfortunately Flash brought along all kinds of problems from inaccessibility to high processor loads, but these days similar styles of website are being built using HTML5, CSS3 and Javascript libraries such as jQuery. This post rounds up a collection of super cool HTML websites that feature all those intelligent effects we loved about Flash websites of years past
Salt Surf
Blacknegative
Beyonce
TAG Interativa
Lend Your Leg
Michel Doudin
OATBook
Mercedes-Benz A-Class
Martin Gauer
Team Viget
Adidas Design Studios
Keystone Logistics
Ben the Bodyguard
Twenty8Twelve
Planoform
The Kitchen Community
X-Doria
Kolonien
Socket Studios
Love & Luxe
Evolution Bureau
A Book of Beards
Blind Barber
Nike Better World
Labels:
cool designs,
css3,
flash,
HTML,
html5,
interactive,
JavaScript,
jquery,
websites
Friday, September 28, 2012
Code optimization and Best practices for ASP.Net C# Developers
Last week I had a good time with code review, all the guys who did coding are 3-4 years of experience in Microsoft technologies. But still there is scope for Optimization and best practice. Here in this blog post I’ll show you some of them.
1] A field can be made read-only
Consider the following example, Admin_Settings class has a private object ObjDB (an object of class Database)
Code:
Here, this object can be Readonly, by marking this readonly, we get to ensure that this class will not inadvertently modify this object anywhere within its methods.
public partial class Admin_Settings : System.Web.UI.Page { private Database ObjDB = new Database(); }
Code:
The same can be applied for Variables if they they are only being assigned in the constructor and offers to create an additional safeguardprivate readonly Database ObjDB = new Database();
2] Use 'var' keyword when initializer explicitly declares type
The var keyword is fairly contentious in terms of usage, but if there’s one instance where its use is sensible, it’s in initializations alike to the following:
Code:
Since the type is declared on both left and right-hand sides of the initialization statement, I suggest to remove the type on the left-hand side and replace it with var, i.e.:
DataSet DsPaidAmount = new DataSet();
Code:
Or even further, you can remove redundant initializer and write it as
var DsPaidAmount = new DataSet();
Code:
DataSet DsPaidAmount;
3] Use declaration closer to usage
Consider the following example, where many variables are declared which are not really closer to usage. The Database object DsPaidAmount is declared at the top, and used at the very bottom (so, declaration and usage are not closer).
Code:
Here, we can move declaration closer to it’s usage, as follows:
public void Receipt() { double PreviousPaidAmount = 0; double TaxAmount = 0; //variable declared here DataSet DsPaidAmount; double TotalAmount = 0; double PreviousDiscount = 0; . . . . . . . . . . . . if (some condition) { . . . . . . . . . . . . } else if (another condition) { . . . . . . . . . . . . } else if (!another condition) { . . . . . . . . . . . . } if (statement > 0) { //Variable used here! tooooo far from declaration DsPaidAmount = ObjReceipt.GetPaidAmount(somevalue); } else { //statement } }
Code:
if (statement > 0) { //Declared and used at same place! DataSet DsPaidAmount = ObjReceipt.GetPaidAmount(somevalue); } else { //statement }
Further, for better memory management we can use the “using” constructor, and also remove the type on the left-hand side and replace it with var as follows:
Code:
if (statement > 0) { using (var DsPaidAmount = ObjReceipt.GetPaidAmount(somevalue)) { // some statements } } else { //statement }
4] Remove unneeded 'else' keyword
Some if-else conditions can have their else clause removed. Consider the following method:
Code:
In the above, the else statement can be safely removed because its if clause returns from the method. Thus, even without the else, there’s no way you’ll be able to proceed past the if clause body. We can write it as follows:
public double roundNum(double num) { double floorValue = Math.Floor(num); if ((num - floorValue) > .5) { return (floorValue + 1); } else { return (floorValue); } }
Code:
Even better; we can write it by converting it to “?:” operator
public double roundNum(double num) { var floorValue = Math.Floor(num); if ((num - floorValue) > .5) { return (floorValue + 1); } return (floorValue); }
Code:
public double roundNum(double num) { var floorValue = Math.Floor(num); return (num - floorValue) > .5 ? floorValue + 1 : floorValue; }
5] Join declaration and assignment
Consider the following example, where Type can use Implicitly typed local variable declaration and Join declaration and assignment
Code:
Finally by removing redundant initalizer, using Implicitly typed local variable declaration, joining declaration and assignment and with a good naming convention for local variables, we can write this as follows:
if (Page.IsValid) { List<string> ServiceList = new List<string>(); ServiceList = GetChecked(ChkService); }
Code:
if (Page.IsValid) { var serviceList = GetChecked(ChkService); }
6] Convert “IF” statements with “?:” operator
Consider the following example
Code:
Can be written with pretty optimized version using “?:” operators as follows:
if (GvVisit.Rows.Count > 0) { BtnCompleteFollowUp.Visible = true; } else { BtnCompleteFollowUp.Visible = false; }
Code:
Or even better by removing unneeded conditional ternary expression usage. Since condition returns a boolean value
BtnCompleteFollowUp.Visible = GvVisit.Rows.Count > 0 ? true : false;
Code:
BtnCompleteFollowUp.Visible = GvVisit.Rows.Count > 0;
Saturday, September 15, 2012
Best Practices for ASP.NET MVC 3 - Model Suggestions
This blog post presents a set of coding guiding principle intended at helping the ASP.NET MVC developer build concrete applications. Of course, it's up to you as the developer to choose which of these guiding principles are suitable for your application
The model is where the domain-specific objects are defined. These definitions should include business logic (how objects behave and relate), validation logic (what is a valid value for a given object), data logic (how data objects are persisted) and session logic (tracking user state for the application).
DO split the model its own project with a separate assembly.
For applications with a large complex model, it's a good initiative to create a separate assembly for the model to avoid accidentally mixing concerns. You can then reference the model assembly in your ASP.NET MVC project
DO place all business logic in the model.
If you put all business logic in the model, you protect the view and controller from making business decisions concerning data. You also harvest the following profits
DO place all validation logic in the model
All input validation should occur in the model layer. This includes client side validation, which is essential to performance. However, client side validation can be circumvented (with, for example, tools like Fiddler)
You can use ModelState to add validation checking. The following example shows how to add validation checks to ModelState explicitly
DO define interfaces for data access
It is favored that interfaces be used to expose methods on a provider for data access. This strengthens the loosely coupled component design of ASP.NET MVC.
Consider using the Entity Framework or LINQ to SQL as the means of creating wrappers around calls to a database. Both Entity Framework and LINQ to SQL allow the use of stored procedures as well
DO place all session logic in the model.
It is outside the scope of this blog discussion to travel around in depth the different mechanisms for storing session state in the model. As a starting point, here are a few of possibilities of session state storage:
Happy Coding!!
Model Suggestions
The model is where the domain-specific objects are defined. These definitions should include business logic (how objects behave and relate), validation logic (what is a valid value for a given object), data logic (how data objects are persisted) and session logic (tracking user state for the application).
DO split the model its own project with a separate assembly.
For applications with a large complex model, it's a good initiative to create a separate assembly for the model to avoid accidentally mixing concerns. You can then reference the model assembly in your ASP.NET MVC project
DO place all business logic in the model.
If you put all business logic in the model, you protect the view and controller from making business decisions concerning data. You also harvest the following profits
- Fewer duplicated business logic
- The view is easier to read when there is no business logic present
- Testing business rules is out-of-the-way to the model
@if (String.CompareOrdinal((string)TempData["displayFullName"], "on") == 0)
{
<text>Model.firstName, Model.lastName</text>
}
else
{
<text> Model.firstName</text>
}
However, you would have to duplicate this logic in every place this business requirement was needed. Instead, you could put the business logic in the “display Full Name " rule in the model by adding a property to the model that encapsulates the business logic as follows
public string combinedName
{
get
{
return (displayFullName ? firstName + " " + lastName : firstName);
}
private set
{
;
}
}
This would greatly simplify the view as shown<p>Welcome, @Model.combinedName</p>
DO place all validation logic in the model
All input validation should occur in the model layer. This includes client side validation, which is essential to performance. However, client side validation can be circumvented (with, for example, tools like Fiddler)
You can use ModelState to add validation checking. The following example shows how to add validation checks to ModelState explicitly
if (String.IsNullOrEmpty(pageName))
{
ModelState.AddModelError("pageName", Resources.AddPage.PageNameError);
}
Nevertheless, given the advances in .NET Framework, the System.ComponentModel.DataAnnotations should be the favored method for validation. These annotations are added as attributes to the properties of a model class, as the following example shows
public class Page
{
[Required(ErrorMessageResourceName = "nameRequired", ErrorMessageResourceType = typeof(Resources.Page))]
public String pageName { get; set; }
...
}
DO define interfaces for data access
It is favored that interfaces be used to expose methods on a provider for data access. This strengthens the loosely coupled component design of ASP.NET MVC.
Consider using the Entity Framework or LINQ to SQL as the means of creating wrappers around calls to a database. Both Entity Framework and LINQ to SQL allow the use of stored procedures as well
DO place all session logic in the model.
It is outside the scope of this blog discussion to travel around in depth the different mechanisms for storing session state in the model. As a starting point, here are a few of possibilities of session state storage:
- In Process
- Strengths : No extra setup needed.
- Weaknesses : Does not work if the web site needs to balance
- Session State Service
- Strengths : Lightweight service runs on each machine in a web farm. Faster than database session storage
- Weaknesses : Session data is lost if the service goes down
- Database
- Strengths : Session data is persisted
- Weaknesses : Slower than session state, Management cost is relatively high
Happy Coding!!
Labels:
ASP.Net,
ASP.Net MVC 3,
Best Practices,
business logic,
C# 4.0,
coding guiding principle,
controller,
Model,
Model Suggestions,
MVC3,
performance,
validation logic
Location:
Mysuru, Karnataka, India
Subscribe to:
Posts (Atom)