
<p>
  This blog is trying to show how to enable ASP.NET Bundle &amp; Minification
  for Javascript and CSS.
</p>
<p>&nbsp;Following example is based on these technologies.</p>
<ul>
  <li>Sitecore 7.2</li>
  <li>ASP.NET MVC 5</li>
  <li>Visual Studio 2013</li>
</ul>
<h3>1. Web.config</h3>
<p>add following module to webconfig modules section.</p>
<pre class="language-xml">&lt;system.webServer&gt;
    &lt;remove name="BundleModule"/&gt;
      &lt;add type="System.Web.Optimization.BundleModule" name="BundleModule"/&gt;<br /><br />
</pre>
<h3>2. register bundle to sitecore- part 1</h3>
<p>
  Part of register bundle, you need to add following code to register bundle to
  sitecore.
</p>
<p>
  Note that you don't need to add anything at Global.ascx class to register
  bundle as default ASP.NET MVC bundle behavior.
</p>
<pre class="language-csharp">
using Sitecore;
using Sitecore.Pipelines;
using System.Web.Optimization;

namespace YourNamespace
{
    /// 
    /// SiteCore bundle register
    /// 
    public class RegisterBundles
    {
        [UsedImplicitly]
        public virtual void Process(PipelineArgs args)
        {
            Bundles(BundleTable.Bundles);
        }

        /// 
        /// add bundle collection when application start
        /// at here, you can add as regular 
        /// 
        ///
        private void Bundles(BundleCollection bundles)
        {

            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

        }
    }
}

</pre>
<h3>2. register bundle to sitecore- part 2</h3>
<p>
  You need to add following config, anyname is fine, Sitecore will grap it.
  Let's say, <strong>bundle.config</strong>. Put the file under,
  {YourAspnetWebSiteFolder}/App_Config/Include/{PutHere}. Or put any location
  that your site load the Sitecore config.
</p>
<pre class="language-xml">
&lt;configuration xmlns:patch="http://www.sitecore.net/xmlconfig/"&gt;
  &lt;sitecore&gt;
    &lt;settings&gt;
      &lt;setting name="IgnoreUrlPrefixes"
               value="(all other sitecore paths here)|/vendors/js|/vendors/css"/&gt;
    &lt;/settings&gt;
    &lt;pipelines&gt;
      &lt;initialize&gt;
        &lt;processor patch:before="processor[@type='Sitecore.Mvc.Pipelines.Loader.InitializeGlobalFilters, Sitecore.Mvc']"
                   type="YourNamespace.RegisterBundles, YourDll" /&gt;
      &lt;/initialize&gt;
    &lt;/pipelines&gt;
  &lt;/sitecore&gt;
&lt;/configuration&gt;
</pre>
<p>
  That's it! You should be albe to use ASP.NET Bundle &amp; Minification now as
  following.
</p>
<pre class="language-csharp">
@Scripts.Render("~/bundles/jquery")
</pre>
<h4>Referenced</h4>
<p>
  <a
    href="http://sitecoreexperiences.blogspot.com/2013/05/sitecore-with-mvc-4.html"
    target="_blank"
    >Sitecore with MVC4</a
  >
</p>


This blog is trying to show how to enable ASP.NET Bundle & Minification for Javascript and CSS.

MVC Bundle and Minification at Sitecore


<h1>Javascript, CSS Bundling and Minification</h1>
<p>
  This's project that I'm trying to create bundling and minification library for
  ASP.NET application.
</p>
<h2>What's this?</h2>
<p>
  There're just a lots of benefit if we use this, but I try to list all the
  things I could come out. <em>* Bundling</em>* will have following benefit to
  the site.
</p>
<ul>
  <li>
    improve request load time. browsers have limit connection. If you have 20
    script, broswer could only load certain number, let's say 6 at a time.
  </li>
  <li>reducing the number of request to the server.</li>
  <li>reducing the size of requested CSS and Javascript.</li>
  <li>protect source code Javascript and CSS.</li>
  <li>
    reduce potential problem which some browser imposes a maximum limit of
    request(CSS, JS).
  </li>
  <li>able to create modulized javascript.</li>
  <li>able to better organize javascript and css.</li>
</ul>
<hr />
<p>
  By default, Bundle will always bundle javascript and css if used the new
  method, production mode, which minified version.
</p>
<h2>
  However, if pass the <strong>EnableBundleKey</strong> and
  <strong>EnableBundleValue</strong> from request, will be development mode,
  which unminified version.
</h2>
<hr />
<p>
  Unlike the default ASP.NET Global Bundle, <em>* Bundle</em>* focus using at
  the razor(.cshtml). However Bundle will still support existing ASP.NET Global
  Bundle, which you include all the bundle(js or css) at C#. The cons for this
  is, if you site will never have lots of javascript or css, this solution will
  works good for you. However, that's not good building a modern, enterprise web
  application. You'll have global javascript and css files which are
</p>
<h2>
  using all the pages on your site. You'll also want to choose different
  javascript and css files depend on page or module.
</h2>
<h2>Source Code and interface</h2>
<p>
  Basically, we still use the .NET defautl bundle, which they reference from
  System.Web.Optimization. file under /Helpers/Bundle.cs
</p>
<pre class="language-csharp"><code>IHtmlString Js(params string[] files)
IHtmlString Css(params string[] files)
IHtmlString JsInline(Func&lt;object, object&gt; markup)
IHtmlString CssInline(Func&lt;object, object&gt; markup)
</code></pre>
<h2>Modules Dependencies</h2>
<h4>dependencies Dll</h4>
<ol>
  <li>WebGrease.dll (1.5.2.14234)</li>
  <li>System.Web.Optimization.dll (1.1.0.0)</li>
</ol>
<h4>dependencies Application Config setting</h4>
<ol>
  <li>
    PrefixBundleBasicTildeName
    <ul>
      <li>default value: <strong>~/bundles/</strong></li>
    </ul>
  </li>
  <li>
    PrefixBundleCssTildeName
    <ul>
      <li>default value: <strong>~/content/Common/css/</strong></li>
    </ul>
  </li>
  <li>
    EnableBundleKey
    <ul>
      <li>default value: <strong>lndk</strong></li>
    </ul>
  </li>
  <li>
    EnableBundleValue
    <ul>
      <li>default value: <strong>g</strong></li>
    </ul>
  </li>
</ol>
<h2>support features</h2>
<h3>main logic</h3>
<ul>
  <li>Bundle GLobal level (Js &amp; CSS) - done!</li>
  <li>Bundle Individual Page, Module Level (Js &amp; CSS) - done!</li>
  <li>Bundle Inline Javascript - done!</li>
  <li>Bundle Internal Style Sheet - done!</li>
</ul>
<h3>others</h3>
<ul>
  <li>turn development mode on via querystring</li>
</ul>
<h2>not support features</h2>
<ul>
  <li>not support use ASP.NET MVC razor "section"</li>
  <li>
    only support generic bundle url name, client(razor) can't pass their own
    name.
  </li>
</ul>
<h2>Example</h2>
<ul>
  <li>
    <p>Bundle GLobal level (Js &amp; CSS)</p>
    <pre class="language-html">
@Bundle.Css("~/Content/Common/CSS/bootstrap.min.css", 
"~/Content/Common/themes/smoothness/jquery-ui-1.10.4.custom.min.css", 
"~/Content//CSS/.css", 
"~/Content//CSS/Responsive/_Responsive.css")
</pre
    >
  </li>
  <li>
    <p>Bundle Individual Page, Module Level (Js &amp; CSS)</p>
    <pre class="language-html">
@Bundle.Js("~/Scripts//modules/myjavascript.js")
</pre
    >
  </li>
  <li>
    <p>Bundle Inline Javascript</p>
  </li>
</ul>
<p>&lt;script\&gt;</p>
<pre class="language-javascript"><code>    &lt;script type="text/javascript"&gt;
    @Bundle.JsInline(
    @&lt;text&gt;
    var MYAPP = MYAPP || {};
    MYAPP.commonMethod = {
        regExForName: "", // define regex for name validation
        regExForPhone: "", // define regex for phone no validation
        validateName: function (name) {
            // Do something with name, you can access regExForName variable
            // using "this.regExForName"
        },

        validatePhoneNo: function (phoneNo) {
            // do something with phone number
        }
    }

    // Object together with the method declarations
    MYAPP.event = {
        addListener: function (el, type, fn) {
            //  code stuff
            return el * type * fn;
        },
        removeListener: function (el, type, fn) {
            // code stuff
            return el - type + fn;
        },
        getEvent: function (e) {
            // code stuff
            e = e + '';
        }

        // Can add another method and properties
    }
    &lt;/text&gt;)
    &lt;script&gt;
</code></pre>
<p>&nbsp;</p>
<ul>
  <li>Bundle Internal Style Sheet</li>
</ul>
<p>&lt;script\&gt;</p>
<pre class="language-css"><code>    &lt;style type="text/css"&gt;
    @Bundle.CssInline(
    @&lt;text&gt;
        .iphone-back
        {
            /* The back side is flipped 180 deg by default */
            transform: rotateY(180deg);
            -webkit-transform: rotateY(180deg);
            background-position: right center;
        }
    &lt;/text&gt;)
    &lt;/style&gt;
</code></pre>
<p>&nbsp;</p>
<h2>Unit Test</h2>
<p>
  need to write unit test against to /Helpers/Bundle.cs, for testing the main
  function.
</p>
<h2>Reference</h2>
<p>
  <a
    href="https://www.asp.net/mvc/overview/performance/bundling-and-minification"
    >Blog - ASP.NET Bundling and Minification</a
  >
</p>
<p>
  <a href="http://www.browserscope.org/?category=network"
    >Community- Browser Simultaneous Connections</a
  >
</p>
<p>
  <a href="http://jockstothecore.com/bundling-with-sitecore-mvc/"
    >Blog - Bundling with SiteCore MVC</a
  >
</p>
<p><a href="https://github.com/jetheredge/SquishIt">Library</a></p>
<h2>What!&nbsp;</h2>
<ul>
  <li>Shouldn't we turn development mode off at production?&nbsp;</li>
</ul>
<h2>What's Next</h2>
<p>
  Although I build above Javascript, CSS Minification module in C# and able to
  use at .cshtml. I think should use Grunt &amp; Gulp for client side assets
  build.
</p>


This is about .NET Library I build for Javascript, CSS Bundling and Minification

Pack.net javascript css bundling and minification


<h4>Only showing Play Icon for youtube video</h4>
<p>
  If you don't like youtube default setting as, title, youtube mark, just append
  following parameters to your youtube url and your embed youtube will looks
  like following.
</p>
<p><code>?showinfo=0&amp;color=white&amp;autohide=1</code></p>
<pre
  class="language-javascript"
><code>http://www.youtube.com/embed/9tzyJEwO9Os?showinfo=0&amp;color=white&amp;autohide=1
</code></pre>
<p>
  <iframe
    src="http://www.youtube.com/embed/9tzyJEwO9Os?showinfo=0&amp;color=white&amp;autohide=1"
    width="300"
    height="200"
    frameborder="0"
    allowfullscreen=""
  ></iframe>
</p>
<p>if you want to check the rest of the parameters.&nbsp;</p>
<p>
  <a
    href="https://developers.google.com/youtube/player_parameters"
    target="_blank"
    >&nbsp;YouTube Embedded Players and Player Parameters</a
  >
</p>
<p>&nbsp;</p>
<h4>vimeo video</h4>
<p>
  Following is another video site, vimeo's default view. Good thing for vimeo is
  you can easily change the play icon color like following.
</p>
<pre
  class="language-javascript"
><code>&lt;iframe src="http://player.vimeo.com/video/108883478?title=0&amp;byline=0&amp;portrait=0&amp;color=a89767" width="300" height="128" frameborder="0" allowfullscreen=""&gt; </code></pre>
<p>&nbsp;</p>
<p>
  <iframe
    src="http://player.vimeo.com/video/53755097?title=0&amp;byline=0&amp;portrait=0&amp;color=028482"
    width="300"
    height="225"
    frameborder="0"
    allowfullscreen=""
  ></iframe>
</p>
<p>&nbsp;</p>
<h4>Load youtube iFrame from javascript</h4>
<p>
  <small
    >from
    http://stackoverflow.com/questions/18220209/load-youtube-video-listen-to-onplayerstatechange</small
  >
</p>
<pre class="language-javascript">
// Load API asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        height: '220',
        width: '300',
        videoId: '9tzyJEwO9Os',
        playerVars: {'showinfo': 0, 'color': 'white', 'autohide': 1},
        events: {'onStateChange': onPlayerStateChange}
    });
}

function onPlayerStateChange(event) {    
    if(event.data === 0) {          
        hideVideo();
    }
}

$("#link").click(function(){
    $('#player').show(); // show player
    player.playVideo(); // begin playback
});
</pre>


How to Embedded Video on Your Site


<p class="MsoNormal">
  Turn off the Browser Link features (Visual Studio 2013).
</p>
<p class="MsoNormal">
  You might already know, but if don&rsquo;t and noticed following request
  <strong>poll?transport= [GET] </strong>is annoy, which keep fire request at
  your browser.&nbsp;
</p>
<p><img src="https://d1p0mp3f1fx0hz.cloudfront.net/_cuhszgcan.png" alt="" /></p>
<p class="MsoNormal">&nbsp;</p>
<p class="MsoNormal">
  You can Turn off the Enable Browser Link from visual studio 2013 as following.
</p>
<p>
  <img
    src="https://d1p0mp3f1fx0hz.cloudfront.net/_4oa3hm9x3.png"
    alt=""
  />&nbsp;
</p>
<p class="MsoNormal">
  <span style="font-size: 10pt; mso-bidi-font-size: 11pt"
    >Browser Link is turn on by default, and suppose to test multi
    browser&rsquo;s UI layout,(for instance, if you add
    &lt;h1&gt;Hello&lt;/h1&gt;) and want to check how is look like at all
    browser, however doesn&rsquo;t work always, you want to setup project visual
    studio-like.</span
  >
</p>
<p class="MsoNormal">
  <span style="font-size: 10pt; mso-bidi-font-size: 11pt"
    >For how to use Browser Link see following.</span
  >
</p>
<p class="MsoNormal">
  http://blogs.msdn.com/b/webdev/archive/2013/06/28/browser-link-feature-in-visual-studio-preview-2013.aspx
</p>
<p>&nbsp;</p>
<p class="MsoNormal">&nbsp;</p>


Turn off the Browser Link features (Visual Studio 2013).You might already know, but if don’t and noticed following request poll?transport= [GET] is annoy, which keep fire request at yourbrowser.

How to Turn off Browser Link for Visual Studio


<p>
  Few list to learn sitecore. Athough, I don't like Sitecore, but just in case
  if I have to do it, following are list of resource for reference.
</p>
<p>
  <a href="http://www.sitecore.net/" target="_blank">Sitecore Official Site</a>
</p>
<p>
  <a href="http://sitecoreexperiences.blogspot.com/" target="_blank"
    >Sitecore Blog - 1</a
  >
</p>
<p>
  <a href="http://sitecoreblog.blogspot.com/" target="_blank"
    >Sitecore Blog - 2</a
  >
</p>
<p>
  <a href="http://larsnielsen.blogspirit.com/index-1.html" target="_blank"
    >Sitecore Blog - 3</a
  >
</p>
<p>
  <a href="https://briancaos.wordpress.com/" target="_blank"
    >Sitecore Blog - 4</a
  >
</p>
<p>
  <a href="http://sitecore.alexiasoft.nl/" target="_blank">Sitecore Blog - 5</a>
</p>
<p>
  <a href="http://webcmd.wordpress.com/" target="_blank">Sitecore Blog - 6</a>
</p>
<p>
  <a href="http://thesitecoreexperience.blogspot.com/" target="_blank"
    >Sitecore Blog - 7</a
  >
</p>
<p>
  <a href="http://www.newguid.net/category/sitecore/resources/" target="_blank"
    >NewGuid.Net</a
  >
</p>
<p style="padding-left: 30px">&nbsp;all Sitecore related cotent</p>
<p>
  <a href="http://en.wikipedia.org/wiki/Sitecore" target="_blank"
    >wikipedia Sitecore</a
  >
</p>
<p>
  <a href="http://firebreaksice.com/" target="_blank"
    >Learn Sitecore - 1 - firebreaksice</a
  >
</p>
<p>
  <a href="http://learnsitecore.cmsuniverse.net/" target="_blank"
    >Learn Sitecore - 2</a
  >
</p>
<p>
  <a
    href="http://www.sitecore.net/learn/blogs/technical-blogs/john-west-sitecore-blog/posts/2010/11/best-sitecore-documentation.aspx"
    target="_blank"
    >Learn Sitecore - 3 - great documents</a
  >
</p>
<p style="padding-left: 30px">&nbsp;</p>
<p style="padding-left: 30px">&nbsp;</p>


Few list to learn sitecore. Athough, I don't like Sitecore, but just in case if I have to do it, following are list of resourcefor reference.

List of Useful Links to Learn Sitecore


<p>
  <span
    style="
      color: #e2e2e2;
      font-family: 'andale mono', 'lucida console', monospace;
      font-size: 20.4px;
      line-height: 30.6px;
      background-color: #202020;
    "
    >PM&gt; Install-Package CSharpMongo.dll</span
  >
</p>
<p>
  Start create my own nuget dll, since I have worked with MongoDB a little bit.
  So I'm trying to create useful library that I don't need to write code same
  code at my different solution. Unlike the original or old deployment,
  development, you'll chec-in your application's dependency dll. Nuget
  development is different! You don't need to check-in the dependency dlls, you
  will manage as package file which contains list of dependency dll of your
  current projects.&nbsp;
</p>
<p>
  So, when you build the solution of your visual studio, if you setup nuget
  correctly, visual studio will go to network to download the necessary dll to
  your local, by default should be inside the package folder. In additional, at
  the end of the build, these dll will copy to your bin folder.
</p>
<p>Following instructure is about how to manully deploy to nuget.</p>
<p>1. Register to get Nuget account</p>
<p>
  Anyway, this blog I try to write how to simple create your own nuget package.
  First you need to go to&nbsp;<a href="https://www.nuget.org/" target="_blank"
    >nuget.org</a
  >&nbsp;to register.&nbsp;
</p>
<p>2. Make sure your application is build and able to deploy to nuget</p>
<p>
  You have to make sure your application is build successfully, so when people
  get the dll by nuget won't break stuff. You should, think it as deploy to
  Production.
</p>
<p>3. Create and publish a package.</p>
<p>
  <a
    href="https://docs.nuget.org/create/creating-and-publishing-a-package"
    target="_blank"
    >See here for publish nuget package.</a
  >
</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


TechnoApple Blogs

Developer's daily notes, blogs, and tutorials about software development, C#, Node.js, Javascript, AWS.

MVC Bundle and Minification at Sitecore

Pack.net javascript css bundling and minification

How to Embedded Video on Your Site

How to Turn off Browser Link for Visual Studio

List of Useful Links to Learn Sitecore

How to Create Your First Nuget Package