Test Responsive Layout in different devices

Check the responsive layout of your website in different devices and different modes (landscape & portrait)

http://www.responsinator.com/?url=http://foundation.zurb.com

RequireJS and ASP.NET MVC

RequireJS is a javascript file and module loader.  It is used to load your javascript frameworks/plugins dynamically when needed and can optimize the time taken by your website to load your pages.

I'll demo a simple ASP.NET MVC 3.0 Application with RequireJS

Step 1: Download latest version of RequireJS from http://requirejs.org/docs/release/2.1.10/minified/require.js

Step 2: Create an ASP.NET MVC project and include the require.js file in your _Layout.cshtml page or Site.Master if you're using ASP.NET MVC 2.0.

<script src="@Url.Content("~/Scripts/require.js")" data-main="/scripts/main.js" type="text/javascript"></script>

data-main  attribute refers to main.js file which would act as a single point of interaction.  You can load all your javascript files dynamically through this js file.  This attribute would load the main.js file asynchronously after require.js file is loaded.

Step 3: Include jquery file in your scripts folder

Step 4: Add a div with the id="container" in a view

Step 5: Below is the code for Main.js file

require(['Scripts/jquery'], function () {
    $().ready(function () {
        $('#container').html("Hey! Require.js rocks!!");
    });
});

The code above loads jquery file dynamically and initializes the document.ready event.  The code would simply insert a static html inside "container" div.

Note that "Scripts/jquery"  would be your path of jquery.js file excluding the ".js" extension.

For example, if you are refering to a file jquery-1.10.1.js located in scripts folder, you have to use require(['Scripts/jquery-1.10.1'],....)

Visual C# Code Snippets

http://msdn.microsoft.com/en-us/library/z41h7fat.aspx

Get Compile-Time View Errors in ASP.NET MVC

ASP.NET MVC developers generally face an issue with compiling their views.  The errors are not reported when compiling views and they eventually turn out to be "Yellow Screen Of Death" issues from client.  Below are the steps to enable compilation errors in views:

1. Right-click on your project file in Visual Studio’s Solution Explorer and choose Unload Project.
2. Right-click the project file again and choose Edit YourProject.csproj.
3. Look for a node called <MvcBuildViews> in the first <PropertyGroup> node (the one without any other attributes). If it’s not there, add it.
4. Add or update the value inside the <MvcBuildViews> node to true. When you’re done it should look like this: 
   
   <MvcBuildViews>true</MvcBuildViews> 
   
5. Save the project file changes.
6. Right-click the project file in Solution Explorer one last time and select Reload Project.

How to get the substring of a string that contains HTML tags using C# .Net

public string HtmlSubstring(string html, int maxlength)

        {
            //initialize regular expressions
            string htmltag = "</?\\w+((\\s+\\w+(\\s*=\\s*(?:\".*?\"|'.*?'|[^'\">\\s]+))?)+\\s*|\\s*)/?>";

            //match all html start and end tags, otherwise get each character one by one..
            var expression = new Regex(string.Format("({0})|(.?)", htmltag));
            MatchCollection matches = expression.Matches(html);

            int i = 0;
            StringBuilder content = new StringBuilder();
            foreach (Match match in matches)
            {
                if (match.Value.Length == 1 && i < maxlength)
                {
                    content.Append(match.Value);
                    i++;
                }
                //the match contains a tag
                else if (match.Value.Length > 1 && i < maxlength)
                    content.Append(match.Value);
            }

            return Regex.Replace(content.ToString(), string.Empty, string.Empty);
        }

CSS media queries for all the devices

/* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { /* Styles */ } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ } /* iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ } /* iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ } /* iPads (portrait) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ } /* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) { /* Styles */ } /* Large screens ----------- */ @media only screen and (min-width : 1824px) { /* Styles */ } /* iPhone 4 ----------- */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { /* Styles */ }

CSS3 to display Image in GrayScale mode

CSS3 really made lot of new innovations in styling the HTML objects.  Here is a trick by which you can convert an image to grayscale with pure CSS.


Create a file "filters.svg"  with below content:

<svg xmlns="http://www.w3.org/2000/svg">
 <filter id="grayscale">
  <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
 </filter>
</svg>

Use below CSS to refer the above file:

img {
    filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
}

You can also disable grayscale effect on hover

img:hover {
    filter: none;
    -webkit-filter: grayscale(0);
}