A Nice 5 Column Bootstrap Layout If You Need It

I am adding this here because someone else might find this useful.
I needed a 5 column layout for Bootstrap.
Here it is what I am using. Feel free to use it if you need it.


The CSS -

    <style>

        @@media (min-width: 992px) {

            .col-md-1-5 {

                width: 20%;

            }

            .col-md-2-5 {

                width: 40%;

            }

            .col-md-3-5 {

                width: 60%;

            }

            .col-md-4-5 {

                width: 80%;

            }

            .col-md-5-5 {

                width: 100%;

            }

        }

        @@media (min-width: 1200px) {

            .col-lg-1-5 {

                width: 20%;

            }

            .col-lg-2-5 {

                width: 40%;

            }

            .col-lg-3-5 {

                width: 60%;

            }

            .col-lg-4-5 {

                width: 80%;

            }

            .col-lg-5-5 {

                width: 100%;

            }

        }

        /* This part is only needed so you can see how the various grid possibilities - this is not needed  */

        .show-grid [class^=col-] span,

        .container-fluid .show-grid [class^=col-] {

            display: block;

            padding-top: 10px;

            padding-bottom: 10px;

            background-color: #eee;

            background-color: rgba(86,61,124,.15);

            text-align: center;

            border: 1px solid #ddd;

            border: 1px solid rgba(86,61,124,.2);

        }

        [class^=col-] {

            margin-bottom: 30px;

        }

    </style>

The HTML -

<div class="container">

    <div class="page-header">

        <h1>Bootstrap Grid (5 columns)</h1>

    </div>

    <h2>Boxed grid</h2>

    <div class="row show-grid">

        <div class="col-sm-6 col-md-1-5 col-lg-2-5">

            <span>sm-6 md-1-5 lg-2-5</span>

        </div>

        <div class="col-sm-6 col-md-1-5 col-lg-2-5">

            <span>sm-6 md-1-5 lg-2-5</span>

        </div>

        <div class="col-sm-6 col-md-1-5 col-lg-1-5">

            <span>sm-6 md-1-5 lg-1-5</span>

        </div>

        <div class="col-sm-6 col-md-1-5 col-lg-3-5">

            <span>sm-6 md-1-5 lg-3-5</span>

        </div>

        <div class="col-sm-6 col-md-1-5 col-lg-1-5">

            <span>sm-6 md-1-5 lg-1-5</span>

        </div>

        <div class="col-sm-6 col-md-2-5 col-lg-1-5">

            <span>sm-6 md-2-5 lg-1-5</span>

        </div>

        <div class="col-sm-6 col-md-3-5 col-lg-2-5">

            <span>sm-6 md-3-5 lg-2-5</span>

        </div>

        <div class="col-sm-6 col-md-1-5 col-lg-3-5">

            <span>sm-6 md-1-5 lg-3-5</span>

        </div>

        <div class="col-sm-6 col-md-4-5 col-lg-1-5">

            <span>sm-6 md-4-5 lg-1-5</span>

        </div>

        <div class="col-sm-6 col-md-5-5 col-lg-1-5">

            <span>sm-6 md-5-5 lg-1-5</span>

        </div>

        <div class="col-sm-6 col-md-3-5 col-lg-1-5">

            <span>sm-6 md-3-5 lg-1-5</span>

        </div>

        <div class="col-sm-6 col-md-2-5 col-lg-1-5">

            <span>sm-6 md-2-5 lg-1-5</span>

        </div>

        <div class="col-sm-6 col-md-4-5 col-lg-1-5">

            <span>sm-6 md-4-5 lg-1-5</span>

        </div>

    </div>

    <h2>Full-width grid</h2>

</div>

<div class="container-fluid">

    <div class="row show-grid">

        <div class="col-sm-6 col-md-1-5 col-lg-2-5">

            <span>sm-6 md-1-5 lg-2-5</span>

        </div>

        <div class="col-sm-6 col-md-1-5 col-lg-2-5">

            <span>sm-6 md-1-5 lg-2-5</span>

        </div>

        <div class="col-sm-6 col-md-1-5 col-lg-1-5">

            <span>sm-6 md-1-5 lg-1-5</span>

        </div>

        <div class="col-sm-6 col-md-1-5 col-lg-3-5">

            <span>sm-6 md-1-5 lg-3-5</span>

        </div>

        <div class="col-sm-6 col-md-1-5 col-lg-1-5">

            <span>sm-6 md-1-5 lg-1-5</span>

        </div>

        <div class="col-sm-6 col-md-2-5 col-lg-1-5">

            <span>sm-6 md-2-5 lg-1-5</span>

        </div>

        <div class="col-sm-6 col-md-3-5 col-lg-2-5">

            <span>sm-6 md-3-5 lg-2-5</span>

        </div>

        <div class="col-sm-6 col-md-1-5 col-lg-3-5">

            <span>sm-6 md-1-5 lg-3-5</span>

        </div>

        <div class="col-sm-6 col-md-4-5 col-lg-1-5">

            <span>sm-6 md-4-5 lg-1-5</span>

        </div>

        <div class="col-sm-6 col-md-5-5 col-lg-1-5">

            <span>sm-6 md-5-5 lg-1-5</span>

        </div>

        <div class="col-sm-6 col-md-3-5 col-lg-1-5">

            <span>sm-6 md-3-5 lg-1-5</span>

        </div>

        <div class="col-sm-6 col-md-2-5 col-lg-1-5">

            <span>sm-6 md-2-5 lg-1-5</span>

        </div>

        <div class="col-sm-6 col-md-4-5 col-lg-1-5">

            <span>sm-6 md-4-5 lg-1-5</span>

        </div>

    </div>

</div>

Please make note of the @@ I am using in the style section. I am only doing that because I am adding the code here in the <style> tag. You don't need this if you are using the CSS in an external stylesheet.

To use this, create your page in whatever language/framework you use.
Copy and paste the CSS listed above between the <head> and </head> section in your code or in an external stylesheet.
Copy and paste the html section between the <body> and </body> section in your code.
Run your code and you should now see a page with examples of the 5 column layout.

Enjoy!

PLEASE NOTE - This Bootstrap layout requires Bootstrap :-)! This layout is Bootstrap 3.0 friendly.

Smooches,
Kila Morton

How To Solve "Missing Name After . Operator" When Using YUI Compressor.Net And EcmaScript.Net

I have been working with a few projects I created that utilize YUI Compressor.Net. I am using this library instead of the native Asp.Net bundling and minification elements because I have found that the .Net libraries mangle css and js in certain cases. I decided to use YUI Compressor.Net after doing some testing with it and discovering that it took care of several of the issues I was having.

The only issue with this .Net port of the very popular YUI Compressor project is that the project itself is old. It worked right out of the box, but it is old. When you look at the project information on Nuget, the project was last updated by the original developer in September of 2014 (the "current" version is 2.7.0). The great thing is, as is the case with a lot of projects created out of need, this project has recent contributions from people who use it currently and update it for their needs and, altruistically, share their changes with the rest of us.

You can take a look at the project on Nuget here -

• https://www.nuget.org/packages/YUICompressor.NET/

You can take a look at the project code on Github here -

• https://github.com/YUICompressor-NET/YUICompressor.NET

You can take a look at the EcmaScript project, which is also a port over to .Net, here -

• https://github.com/PureKrome/EcmaScript.NET 

HOW DID I GET THE ERROR

I was using this project when I decided to change the version of JQuery from 1.x to JQuery 2.2.4. After doing this and rebuilding, I started to get an error when the system tried to create my bundles. The error can be seen below.

WHAT WAS THE ERROR

missing name after . operator

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: EcmaScript.NET.EcmaScriptRuntimeException: missing name after . operator

The image above has been altered to just show the error and part of the stack trace.

HOW TO SOLVE THE ISSUE

Since there is almost nothing new under the sun and this project is old, I figured that someone else might have had this issue. A quick search uncovered the EcmaScript.Net GitHub project and an issue filed by a developer who had the exact same problem. It turns out that this error is happening because of how the EcmaScript project is handling reserved keywords in scripts. This issue became a problem when I switched to a newer version of JQuery that used some keywords EcmaScript didn't like. You can read about the error by clicking here.

The truth is that the developer who found this issue already created a fix for it and did a commit in GitHub of the fix. However, after pulling down the code, you will find that the original developer has not merged the changes into the codebase. Here is what you need to do to solve this error and get on with your bundling/minifying life.

1. Download the EcmaScript.Net project from Github here - https://github.com/PureKrome/EcmaScript.NET
2. Open the project in Visual Studio and find the following two files - EcmaScript.NET/Parser.cs and EcmaScript.NET/TokenStream.cs. 
3. Copy the code from the GitHub commit for TokenStream.cs into the TokenStream.cs file located in your local EcmaScript.Net project. Please note that I have made the letters TokenStream.cs into an actual link to the exact file. Just click on that and it will open in another window and then you can copy the code out of that file and paste it into your local project.
4. Copy the code from the GitHub commit for Parser.cs into the Parser.cs file located in your local EcmaScript.Net project. Please note that I have made the letters Parser.cs into an actual link to the exact file. Just click on that and it will open in another window and then you can copy the code out of that file and paste it into your local project.
5. After you have changed those two files, you are going to save and build your EcmaScript.Net project locally using a release build (or a debug build if that is your preference). 
6. Look at the Output window after the build to see where the dll for the EcmaScript.Net project is located. 
7. Copy the location of the dll from the Output window to your clipboard. It will be the location listed at the bottom of the Output window ending in EcmaScript.dll.
8. Go to the Visual Studio project you are using with YuiCompressor.Net. Open the References folder and find & delete the EcmaScript.Net.dll.
9. Right click on the Reference folder and select Add Reference. Click Browse and the paste the location you copied in step 7 into the textbox and then click Add and then OK. This will add the dll to your current project. You can go back to the references list and look to see that the dll is now listed there again.
10. Now clean and rebuild your project.
11. Run your project in Release mode so the bundler will work and VOILA - see the bundled magic in all of its glory! 

You should now be able to get your bundles correctly without any other issues.

Just in case you don't feel like doing all of that, I have included the EcmaScript.Net dll I created for my project in this blog post. Feel free to take it and replace the broken one you have in your project.

Get the EcmaScript.Net dll I created by clicking on this sentence! That link will allow you to download the dll from my Google Drive account. Have fun!

Smooches!
Kila Morton

How To Change The Names Of The Aspnetuser Tables And How To Stop The Asp.Net Identity Service From Continuing To Create The AspNetUsers Table After Changing The TableNames

I came across something while using the latest version of Asp.Net Identity that will likely save someone out there some time. It was a simple thing, but might not be readily apparent.


By default, when you use the AspNet Identity service, it creates the following set of tables:

• dbo.AspNetRoles
• dbo.AspNetUserClaims
• dbo.AspNetUserLogins
• dbo.AspNetUserRoles
• dbo.AspNetUsers

The default schema is dbo and the table names are the default names created by the AspNet Identity service.

To change the default schema, you can do one of a couple of things.

You can add the schema to the OnModelCreating method like so:

  protected override void OnModelCreating(System.Data.Entity.DbModelBuilder modelBuilder)
   {
      base.OnModelCreating(modelBuilder);
           
      //your default schema would be a string of your choosing
      modelBuilder.HasDefaultSchema("YourDefaultSchemaHere");
   }

or you can change the schema as you rename the table in the OnModelCreating method

   modelBuilder.Entity<IdentityUser>().ToTable("Users", "YourDefaultSchemaHere");

 

Either of these methods change your tables to:

YourDefaultSchemaHere.AspNetRoles

YourDefaultSchemaHere.AspNetUserClaims

YourDefaultSchemaHere.AspNetUserLogins

YourDefaultSchemaHere.AspNetUserRoles

YourDefaultSchemaHere.AspNetUsers

If you want to change the default AspNet Identity table names, you can do it in the following way:


protected override void OnModelCreating(System.Data.Entity.DbModelBuilder modelBuilder)
{   base.OnModelCreating(modelBuilder);

   //this is the default schema that will be used in the system.
   //I have the schema value stored in the app settings area of my web.config 

   modelBuilder.HasDefaultSchema(ConfigurationManager.AppSettings 
   ["DefaultDatabaseSchema"]);

   //the renamed tables

   modelBuilder.Entity<ApplicationUser>().ToTable("Users");

   modelBuilder.Entity<IdentityRole>().ToTable("Roles");

   modelBuilder.Entity<IdentityUserRole>().ToTable("UserRoles");

   modelBuilder.Entity<IdentityUserClaim>().ToTable("UserClaims");

   modelBuilder.Entity<IdentityUserLogin>().ToTable("UserLogins");
}



Using either your new schema name or dbo, you add a field to ApplicationUser like this:


public class ApplicationUser : IdentityUser
{
   [Required]
   public string WebsiteUrl { get; set; }


      //...other stuff here
}


That field, in this case WebsiteUrl, will be added to the AspNetUsers table.
That is what you would expect to happen.
Now, here is where things might get strange for you.
There is a situation where you can rename the default table and add that field, but the field will NOT be added to the new table name! It will STILL be added to the database, but in the AspNetUsers table! That is NOT what you would expect right? Well here is a little bit of news for you, there is a simple fix for this if this behavior is not what you want.


If this is happening to you, it is likely happening because you are identifying the IdentityUser table INSTEAD of the ApplicationUser table when you rename your tables.


protected override void OnModelCreating(System.Data.Entity.DbModelBuilder modelBuilder)
{
   base.OnModelCreating(modelBuilder);


   //this is the default schema that will be used in the system to separate the

   modelBuilder.HasDefaultSchema(ConfigurationManager.AppSettings 
   ["DefaultSchemaToBeUsedToPrefaceCreatedDatabaseTables"]);


   //the renamed tables

   modelBuilder.Entity<ApplicationUser>().ToTable("Users");

   modelBuilder.Entity<IdentityRole>().ToTable("Roles");

   modelBuilder.Entity<IdentityUserRole>().ToTable("UserRoles");

   modelBuilder.Entity<IdentityUserClaim>().ToTable("UserClaims");

   modelBuilder.Entity<IdentityUserLogin>().ToTable("UserLogins");
}


Notice the highlighted field. If you have IdentityUser in that field instead of ApplicationUser, the IdentityUser table and its associated fields will be renamed to Users, however, IdentityUser doesn't know anything about the extra field or fields you might have added in ApplicationUser. ApplicationUser incorporates the IdentityUser fields AND your added field. In my example above, that field is the WebsiteUrl. So, if your system is creating the database tables and STILL creating the AspNetUsers table AFTER you have renamed the table names, check the entity name you are using for the Users table. Remember that it should be ApplicationUser - NOT IdentityUser.


Smooches!
Kila

How To Solve Website Errors: 503 Service Temporarily Unavailable While Using WordPress With A Windows Shared Hosting Accounts

OK. This is an error that will likely have you pulling your hair out (if you have hair :-)). Here is the scenario.

I have several website hosting accounts. One of those accounts is a Windows account that allows me to host multiple website (Deluxe Shared Hosting). I have MANY domains hosted on this account and the websites are a mixture of Asp.Net MVC, Asp.Net Webforms (yes...webforms still work :-)) and WordPress sites. I noticed an odd thing happening with the WordPress sites. From time to time, as I was working in the WordPress admin area, the sites would produce a 503 Service Unavailable error. Sometimes I would be editing a menu and click the Update button and would get the error. Sometimes I would make a change and try to visit the site and get the error. Sometimes I would make a theme edit and save and get the error. It happened at very random moments when some action was initiated on the server.

Initially, I thought it was the version of PHP being used for the shared hosting account, so I upgraded to version 5.4 (I was using 5.2). Nope! That did NOT solve the problem at all. OK. What next? I upgraded WordPress for one of the accounts and started hammering it. No resolution! I kept getting the intermittent 503 errors. OK. So now what? Next I started hammering my Asp.Net MVC websites to try to produce the error. Nope! Couldn't reproduce the 503 error on ANY of those sites. I did the same for the Webforms sites and could not reproduce the 503 error there either. So I realized the first fact about this error -

FACT #1 - The 503 Service Temporarily Unavailable error was ONLY happening on my Windows hosted accounts that had WordPress installed in their folders.

Interesting....

After realizing fact #1, I started to pay very close attention to what was happening when the error happened. I realized something. The error seemed to happen when some function had to be performed - ie. when something had to be saved. It didn't seem to happen on navigation only actions like going from page to page. However, I did notice that if the error happened when I was trying to perform an action in the admin panel, then I would also get the error on the website if I tried to bring that up at that moment. It was like the server was hanging on any server function other than serving pages and would get "stuck" for a few moments. It felt like the request for processing was happening too fast for the server to handle it so it would produce an error. Basically, the request for a function was coming in and being routed, but the underlying process could not move quickly enough to process it.

Since Google is my friend, I started researching the issue. I saw that many people had the 503 error on shared hosting accounts, but no one had a real solution - including the hosting companies! Now I'm no server expert, but this isn't rocket science either. How hard can it be for some of these hosting companies to examine their logs and come up with a solution? Based on what I read, it must be VERY hard for them to do that! Anywho.....I decided to keep researching.

I came across this from Microsoft -

https://support.microsoft.com/en-us/kb/2619402

That article gave me some great information. Since the Windows Deluxe shared hosting account allowed me to interact with IIS in a very limited way, I decided to see if I could tweak some settings in their to prevent, help, solve or stop the 503 errors from continuing to happen. By the way, my hosting account is using IIS 7.0. The IIS area provided by the website was very limited. However, it did allow me to switch from Integrated to Classic Pipeline mode. In integrated mode, all requests are handled in a unified pipeline. However, in classic mode, there are two pipelines. One is for native code applications and one is for managed code applications. You can look up the differences between native code and managed code, but essentially managed code needs a runtime to handle its execution. Native code executes on a particular processor and it takes it's instructions on how to run from the OS it is running on.

So, here is what I did. The IIS 7.0 pipeline was set to Integrated mode. I changed this to Classic. Then I recycled the App Pool. The combination of these two things stopped the 503 errors from happening. This should help you get your websites running if you are on a Windows shared hosting account with limited access to IIS. Do not forget to recycle the app pool.

I will keep you updated on how this "fix" holds. I have tested it quite a bit and haven't received a 503 error again....YET :-)!

If you are experiencing this issue on your shared Windows hosting account with WordPress, try this and let me know how it works for you.

Smooches,

Kila Morton

How To Solve A Failure [INSTALL_FAILED_OLDER_SDK] When Using Android Studio

There are some times when even though you KNOW what to do, you forget some small detail that causes you to waste time. When building Android projects, you know to add the minimum supported version to your manifest file. Well when using Android Studio to create Android projects, Gradle ignores your manifest file. This can make for a little bit of head-scratching as you are trying to figure out why your newly created project isn't running as you expected.

If you get the following error:

Failure [INSTALL_FAILED_OLDER_SDK]

Look build.gradle file for your app and change the following :

defaultConfig {
        applicationId "com.example.test.myapplication1"
        minSdkVersion 15
        targetSdkVersion 21
        versionCode 1
        versionName "1.0"
    }

Notice the highlight. You are going to change minSdkVersion to a version that matches your target test device. Issue solved!

Smooches!
Kila

How To Solve The Gradle DSL method not found: 'runProguard()' Error In Android Studio

After upgrading Android Studio, I ran into the following error -

Gradle DSL method not found: 'runProguard()'

This issue prevented the project from building. The solution was simple.
Do a search and replace.

Press Ctrl-F or Edit/Find and enter the letters runProguard into the search area.
Once you have found runProguard, you will see that it is listed in this procedure:

    buildTypes {
        release {
            runProguard false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }

Change the area I have highlighted to the following:

    buildTypes {
        release {
      minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }

That is it! That will solve the issue for you.
Wasn't that simple?
Here is a link to more information about why this is necessary.

http://tools.android.com/tech-docs/new-build-system/migrating-to-1-0-0
Enjoy!

Smooches!
Kila

Telerik's Just Decompile Offline Installer - Install JustDecompile Using Offline Installers

When .Net Reflector stopped being free, I think little birdies fell out of their nests all across the world. It was a great, free resource that was extremely useful at breaking apart a dll and allowing you to examine the guts. Although it was great, I was unwilling to shell out money for a paid version. I came across Telerik's JustDecompile, which, in my humble opinion, was better and free. That was many moons ago.

Fast forward to now and I have been using JustDecompile for years. However, I recently needed to install it on a "secure" system and found that the system's antivirus software was blocking the download. After dutiful searching to find an offline installer without the bootstrap stuff in Telerik's official JustDecompile download, I came across these links-

http://www.telerik.com/downloads/productfiles/bgctm/JustDecompile_2014.1.117.0.msi

http://www.telerik.com/account/your-products/product-versions.aspx?pmvid=3656&pid=845 

These links will allow you to download JustDecompile if you are behind a firewall, unable to download exe files (the top link) or are in a situation where your antivirus software is screaming bloody murder. If it doesn't work for you, let me know. As a matter of fact, if it DOES work for you, let me know. I just like to know things.....Smooches!

Please note - you WILL need to create a free Telerik account, but why shouldn't you? It is free after all! JustEnjoy (play on words intended)!

Kila Morton