Wednesday, November 28, 2012

Merge JS files using JMerge

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:

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. 

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)

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 visualizations
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:
  1. Register for a developer key
  2. Copy & Paste the code to a web page
  3. 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 button


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.

Getting your Client ID and API Key

In the Google APIs Console, for the project you just created:
  1. Navigate on the left panel to API Access
  2. Click the big blue Create An OAuth 2.0 Client ID button
  3. Add a cool product name and logo, then click Next
  4. Under
    1. Application Type – select Web Application
    2. Your site or hostname – add the domain name or host name from where this script will be served.
  5. 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!.


  1. Copy the library and save to your server
  2. 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>
Once complete, save this file to your server.

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:
  1. Display a button asking for you to authorize
  2. Click the button. You will be prompted to login and authorize access
  3. 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

View the website

Blacknegative

View the website

Beyonce

View the website

TAG Interativa

View the website

Lend Your Leg

View the website

Michel Doudin

View the website

OATBook

View the website

Mercedes-Benz A-Class

View the website

Martin Gauer

View the website

Team Viget

View the website

Adidas Design Studios

View the website

Keystone Logistics

View the website

Ben the Bodyguard

View the website

Twenty8Twelve

View the website

Planoform

View the website

The Kitchen Community

View the website

X-Doria

View the website

Kolonien

View the website

Socket Studios

View the website

Love & Luxe

View the website

Evolution Bureau

View the website

A Book of Beards

View the website

Blind Barber

View the website

Nike Better World

View the website

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:
public partial class Admin_Settings : System.Web.UI.Page
{
    private Database ObjDB = new Database();
}
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.
Code:
private readonly Database ObjDB = new Database();
The same can be applied for Variables if they they are only being assigned in the constructor and offers to create an additional safeguard



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:
DataSet DsPaidAmount = new DataSet();
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.:
Code:
var DsPaidAmount = new DataSet();
Or even further, you can remove redundant initializer and write it as
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:
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
        }
}
Here, we can move declaration closer to it’s usage, as follows:
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:
public double roundNum(double num)
{
   double floorValue = Math.Floor(num);
   if ((num - floorValue) > .5)
   {
      return (floorValue + 1);
   }
   else
   {
      return (floorValue);
   }
}
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:
Code:
public double roundNum(double num)
{
   var floorValue = Math.Floor(num);
   if ((num - floorValue) > .5)
   {
      return (floorValue + 1);
   }
   return (floorValue);
}
Even better; we can write it by converting it to “?:” operator
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:
if (Page.IsValid)
{
     List<string> ServiceList = new List<string>();
     ServiceList = GetChecked(ChkService);
}
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:
Code:
if (Page.IsValid)
{
   var serviceList = GetChecked(ChkService);
}


6] Convert “IF” statements with “?:” operator

Consider the following example
Code:
if (GvVisit.Rows.Count > 0)
{
   BtnCompleteFollowUp.Visible = true;
}
else
{
   BtnCompleteFollowUp.Visible = false;
}
Can be written with pretty optimized version using “?:” operators as follows:
Code:
BtnCompleteFollowUp.Visible = GvVisit.Rows.Count > 0 ? true : false;
Or even better by removing unneeded conditional ternary expression usage. Since condition returns a boolean value
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

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
For example, if you have a business requirement to display a user's full name, you could put the logic in the view as follows
@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
In Next Blog Post, I'll discuss on View Suggestions
Happy Coding!!

Friday, September 14, 2012

Useful Online Tools for Web Designers and Developers - Part 2

Color Scheme Designer

Color Scheme Designer is an easy to use and efficient tool that can help you choose color schemes for your designs.

Kuler

Similar to Color Scheme Designer, Adobe Kuler is an internet application from Adobe that lets you create and save various color schemes.

Typetester

Typetester is an online application for comparison of the fonts for the screen. Its primary role is to make your life (as a web designer) easier when dealing with web fonts.

Pixlr

Pixlr is a free online photo editor. If you just need something to edit, adjust or filter your images, then Pixlr is the tool you’re searching for.

Browsershots

Browsershots is an online web application that provides developers a convenient way to test their website’s browser compatibility in one place. It can help you to make screenshots of your web design in different operating systems and browsers

Pingdom

Pingdom offers an online tool that can help you test the load time of a web page. Just enter a URL and test the load time of all elements on that page.

Iconfinder

This isn’t really a tool, but Iconfinder is a must-have. Just consider it as your number one “search tool” for free icons.

Code beautifier

As its name says, Code beautifier is a CSS formatter and optimiser tool.

CSS3 Please

Need an online place where you can test your CSS3 skills? Then here’s your playground!

Useful Online Tools for Web Designers and Developers - Part 1

Free Online 3D CSS Button Generator


Loading CSS spinners and bars generator for AJAX & JQuery


0 to 255

0to255 is a simple tool that helps web designers find variations of any color.

Spritebox

Spritebox is a WYSIWYG tool to help web designers quickly and easily create CSS classes and IDs from a single sprite image. It is based on the principle of using the background-position property to align areas of a sprite image into block elements of a web page. It was made using a combination of JQuery, CSS3 and HTML5, and is totally free to use!

JsFiddle

JsFiddle is a playground for web developers, a tool which may be used in many ways. One can use it as an online editor for snippets build from HTML, CSS and JavaScript. The code can then be shared with others, embedded on a blog, etc!


Frame Box

Frame Box is an easy to use online tool for creating and sharing wireframes

CSS3 Generator

CSS3 Generator is a simple tool that creates some cross-browser CSS3 code based on whatever values you want.

ProCSSor

ProCSSor is a powerful (and wholly free) CSS prettifier that lets you format CSS in the exact way you want. It empowers you to turn your CSS into something that is visually more compelling, and with a minimum of effort at that.

Super Conversion Button

This little tool let’s you easily create a beautiful, effective call-to-action button in seconds

wordmark.it

Wordmark.it is a tool that lets you quickly preview how a wordmark looks with the fonts installed on your computer before setting out to find new ones.