Subtle Technology

A blog about Microsoft .NET, MVC, Ext JS, Silverlight, FaceBook, Twitter, and other technologies by Michael Urvan

Pages

Recent posts

Tags

Categories

Navigation

Archive

Blogroll

Disclaimer

The opinions expressed herein are my own personal opinions and do not represent my employer's view in anyway.

Web Development Portfolio Pages

I have added a Portfolio Page to show some of my recent web application work. The first is on TripFiles.com:

Click here to view the portfolio for TripFiles

Posted: Mar 11 2014, 08:00 by Michael Urvan | Comments (0) RSS comment feed |
  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Filed under: Bookmark and Share
A jQuery dataTable plugin for sorting currency or formatted numbers with html

The dataTables.net website lists a number of sorting plugins for the jQuery dataTable, one of them being the formatted-num plugin for sorting currency and the other is num-html that strips html you have inside your table (but it doesn't handle commas or dollar signs).. so I combined the two to create a pseudo-number sort. It will sort any number as long as the numbers are displayed in the datatable with consistent decimal precision. If you display two decimal places on numbers then you must always display two ("1.50" and "1.00"). You can't have other numbers in the datatable with varying decimal places or the sorting will not work correctly("1.2" or whole numbers like "1"). It will sort ip addresses, tags like NNN-NNN, currency, numbers with comas, numbers with currency symbols, and other types of mixed numerics. It works similar to the formatted-num plugin except that it strips all characters out, including periods or commas (for internationalization). The resulting number (if you are maintaining the same decimal places) will sort.

I can understand why they list the datatable sort plugins separately, but it is better if the sorting does not break just because someone needed to add html into a datatable at a later time.

First, the code strips off currency symbols and commas, leaving the digits and minuses. Later, it checks for a beginning minus then strips all but digits and inserts the minus back on.

jQuery.extend( jQuery.fn.dataTableExt.oSort, {
    "pseudo-num-pre": function ( a ) {
        a = String(a).replace( /<[\s\S]*?>/g, "" );
        a = a.replace( /[^\d\-]/g, "" );

        var negative = false;
        if (a.length > 1 && a.slice(0, 1) == "-")
            negative = true;

        a = a.replace( /[^\d]/g, "" );
        if (negative)
            a = "-" + a;

        if (a === "-" || a === "")
            return 0;

        return parseFloat( a );
    },
 
    "pseudo-num-asc": function ( a, b ) {
        return a - b;
    },
 
    "pseudo-num-desc": function ( a, b ) {
        return b - a;
    }
} );

 

here is a more efficient (twice as fast) version, it still strips html but leaves the period(s) so the flexability drops considerably:

jQuery.extend( jQuery.fn.dataTableExt.oSort, {
    "pseudo-num-pre": function ( a ) {
        a = String(a).replace( /<[\s\S]*?>/g, "" );
        a = a.replace( /[^\d\-\.]/g, "" );
        if (a === "-" || a === "")
            return 0;
        return parseFloat( a );
    },
 
    "pseudo-num-asc": function ( a, b ) {
        return a - b;
    },
 
    "pseudo-num-desc": function ( a, b ) {
        return b - a;
    }
} );

Not my best work (probably the multiple regex could be combined) but I thought someone might find it useful.

Posted: Feb 20 2014, 15:27 by Michael Urvan | Comments (0) RSS comment feed |
  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Filed under: jQuery Bookmark and Share
A technique for ASP.NET MVC 5 themes via css optimization bundling

In this article I will demonstrate a technique to dynamically apply the concept of individual themes to an ASP.NET MVC website. They could be custom themes, bootstrap themes, or any kind of extra CSS that you want to include in a dynamic way. Each time the web application starts up it will enumerate the directories in ~/App_Themes and add the CSS files from the chosen theme subdirectory to the .net bundling and minification process.

Once you have the following code in place, you just create subdirectories in /App_Themes in your MVC web site, like /App_Themes/DarkBlue. Inside the sub folder you can place as many css files as you need for your theme. The folder name can be anything, I just use App_Themes as an example and its familiar to people who come from ASP.NET Web Forms. Later in the example I use AppUser.CurrentUser.Theme.Name to get the "DarkBlue" string from the currently user based on their saved preference. AppUser being a static thread safe helper class or an injected dependency for all views.

For instance you can have:

/App_Themes/DarkBlue/firstpartoftheme.css
/App_Themes/DarkBlue/secondpartoftheme.css
/App_Themes/DarkBlue/images/darkblueicon.png

and in your css (or less files if you want to compile from it) you can use relative paths like background-image:url(images/darkblueicon.png) to reference them if you like.

    public class BundleConfig
    {
        public static void AddThemesFolderBundles(BundleCollection bundles)
        {
            string themesFolderName = AppSettings.ThemesFolderName;

            string themesPath = HttpContext.Current.Server.MapPath("~").AppendBackSlash() + themesFolderName;
            if (System.IO.Directory.Exists(themesPath))
            {
                IEnumerable<string> themeFolders = System.IO.Directory.GetDirectories(themesPath);
                foreach (string path in themeFolders)
                {
                    string folderName = new System.IO.DirectoryInfo(path).Name;
                    string bundleName = String.Format("~/{0}/{1}/CssBundle", themesFolderName, folderName);
                    string bundleVirtualPath = String.Format("~/{0}/{1}/{2}", themesFolderName, folderName, AppSettings.ThemesIncludeFileName);

                    bundles.Add(new StyleBundle(bundleName).Include(bundleVirtualPath));
                }
            }
        }

        public static void RegisterBundles(BundleCollection bundles)
        {
            AddThemesFolderBundles(bundles);

and a typical global.asax.cs might look like:

        protected void Application_Start()
        {
            try
            {
                AreaRegistration.RegisterAllAreas();
                GlobalConfiguration.Configure(WebApiConfig.Register);
                FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
                RouteConfig.RegisterRoutes(RouteTable.Routes);
                BundleConfig.RegisterBundles(BundleTable.Bundles);

then in your cshtml page for instance _Layout.cshtml you would add a line after the <title> section:


    <title>My Web Page Title</title>
    @Styles.Render("~/css/othercssbundles")   
    @Styles.Render("~/" + AppSettings.ThemesFolderName + "/" + AppUser.CurrentUser.Theme.Name + "/CssBundle")
    @RenderSection("Styles", required: false)

The AppUser.CurrentUser.Theme.Name would resolve to "DarkBlue" for this example.

I usually make a static AppSettings class in my web projects for type-safe, easy access to web.config-possible settings:

    public static class AppSettings
    {
        public static string ThemesFolderName = ConfigurationManager.AppSettings["ThemesFolderName"] ?? "App_Themes";
        public static string ThemesIncludeFileName = ConfigurationManager.AppSettings["ThemesIncludeFileName"] ?? "*.css";

 

because we are dynamically including the theme you can use this example to set the theme based on the logged in user or via a web.config setting.

 

AppendBackSlash is part of a simple String extension:

    public static class StringExtensions
    {
        public static string AppendBackSlash(this String s)
        {
            if (s.EndsWith(@"\"))
                return s;

            return s + @"
\";
        }
        public static string AppendForwardSlash(this String s)
        {
            if (s.EndsWith(@"
/"))
                return s;

            return s + @"
/";
        }
    }

Bundling and minification are two techniques you can use in ASP.NET 4.5 to improve request load time.  Bundling and minification improves load time by reducing the number of requests to the server and reducing the size of requested assets (such as CSS and JavaScript) - quote as borrowed from the bundling and minification tutorial http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification )

I hope this article saves you some time.

Posted: Dec 18 2013, 07:54 by Michael Urvan | Comments (0) RSS comment feed |
  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Filed under: ASP.NET | C# | MVC Bookmark and Share
Sencha ExtJS and jQuery, Intellisense and getting started

It's probably been quite a while since I blogged anything really useful. So I have been working for the past few months at a company called AgilityNOW, making some modifications, adding new features, and learning the framework architected by the two business entrepreneurs. Their framework is designed around ExtJS, Microsoft ASP.NET with ASP.NET WebMethods for web services. The mainly JavaScript based ExtJS front end consumes said web services and the ASPX pages/server side is mostly for serving up the data and CRUD operations. I have been learning about ExtJS, which has a pretty steep learning curve and I wanted to begin sharing some of my experiences about getting started with ExtJS and their controls in this type of environment. Since I have been doing server side ASP.NET using the ASP.NET UI controls for such a long time, it is especially hard for me to step away from the ASP.NET framework and begin using 100% JavaScript based UI that consumes web services. There are some benefits to doing it this way, and elimination of the postbacks and viewstate is nice but I still was very reluctant to go down this path if it weren't required by the company. My experience for the past few months have been exclusive to ExtJS, since jQuery is not allowed (from my understanding of the reasons why, it is that mixing the frameworks will cause confusion without a standard framework and there is a valid point there). I have a lot of positive experience with jQuery and I still think it is easier to use, but I will write about my experience with ExtJS to help others who are having the same difficult time learning how to use it. I've also been trying to decide on what kind of Testing framework to suggest to be used here, I've used a few that could be helpful but ExtJS adds its own complexity to the testing situation.

First off, ExtJS and jQuery were from my limited understanding, originally frameworks used for difference purposes. Originally jQuery started out as a DOM manipulation framework and not really trying to provide heavy functional controls. The jQuery UI was released a while after jQuery started, sometime in 2007. ExtJS from my understanding was really built from the ground up to be UI centric and provide controls that are used to build full featured UI from. ExtJS has a good object oriented design / architecture and their UI controls are meant to be used together to create great looking, theme-able UIs. Every UI framework, including ASP.NET, has their own ways of doing things and once you understand them the pieces start to fall together and you can progress more easily building great UI. The difficult part is getting started and making sure that you have a solid foundation to begin with.

And so my first helpful tip on working with ExtJS will be adding Intellisense support to your web pages if you are working with Visual Studio 2010. There are patches and updates that get the Intellisense to work under VS 2008, and I will post that in a later article but for now I show you the simplest method for enabling it.

Adding JavaScript Intellisense with ExtJS revolves around making sure that your ExtJS code is separated out into ".js" files. This is just good programming practice but a lot of developers may get used to entering their JavaScript inline to the web pages. To use the Intellisense hints below, they must be at the top of a ".js" file for Visual Studio to recognize them. I know that they do not work on ASPX pages for obvious reasons, but I haven't tried using them on ".html" or other file types yet.

/// <reference path="~/scripts/ext/adapter/ext/ext-base.js" />
/// <reference path="~/scripts/ext/ext-all.js" />

You can also add more of your own .js references, and have one .js file reference another for Intellisense purposes, for instance:

/// <reference path="~/scripts/ext/adapter/ext/ext-base.js" />
/// <reference path="~/scripts/ext/ext-all.js" />
/// <reference path="~/scripts/HomePage.js" />
/// <reference path="~/scripts/AboutUsPage.js" />

Ext.onReady(function() {
        … initialize your controls here …
    });

For simplicity I used web page naming conventions for our JavaScript includes and assuming we have a HomePage.aspx or HomePage.html we would have a corresponding HomePage.js include file. When working with ExtJS, you will want to use fully qualified namespace naming conventions or class naming conventions for the files names. If you are designing UI components with ExtJS, many times you will have classes that are reusable and do not necessarily have to be tied to a page.

The last tip you will need to know is that you must press CTRL-SHIFT-J to manually tell Visual Studio to reload your JS references. If there are javascript warnings or errors (quite possible) in your javascript references, they will be shown on the Output window in Visual Studio.

Unfortunately, the Intellisense does not give you insight into the many class properties that you have to initialize when you are building the controls, but it does help for some of the simpler dom manipulations. Sencha has updated the ExtJS documentation site recently, and it has a great autocomplete/suggestion search box format that really helps find things quickly (the old version of the doc site was not so good).

Here is a link to the Sencha Ext JS docs for any versions of their framework:
http://docs.sencha.com/

Posted: Nov 16 2011, 01:49 by michael urvan | Comments (0) RSS comment feed |
  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Filed under: Bookmark and Share
FaceBook’s Like / Share feature and your website thumbnail image

An awesome discussion on the local web design group email list reminded me about the FaceBook Developer Tools page:

http://developers.facebook.com/tools/

At the bottom of this page is a tool called the URL Linter. It will check your website for FaceBook properties and meta data that FB expects, and it shows you what thumbnail image you may have entered in your HTML metadata. One of the users in the discussion group (thanks Dede!) mentioned that it also has the side effect of refreshing FaceBook’s cache of your thumbnail.

Sites wanting to display a thumbnail image when a user enters their URL for the Share or Like feature on FaceBook have to put specific HTML markup on the home page. The Linter tool mentions FaceBook’s Open Graph protocol properties a lot, as this is the new system that handles rendering the thumbnail image for your website.

One of the easiest ways to learn something is by example, just remember that my examples may not be perfect or will become outdated. Here is a sample of Subtle Technology’s home page HTML:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server" profile="http://gmpg.org/xfn/11">
    <link rel="stylesheet" href="style.css" type="text/css" />
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
    <link rel="image_src" href="http://www.subtletechnology.com/SubtleTechnologyFBThumbnail.png" />
    <meta property="og:title" content="Subtle Technology Inc - Technical blurbs by Michael Urvan"/>
    <meta property="og:type" content="company"/>
    <meta property="og:url" content="http://www.subtletechnology.com/"/>
    <meta property="og:site_name" content="SubtleTechnology"/>
    <meta property="fb:admins" content="1321525614"/>
    <meta property="og:description"
          content="A blog about Microsoft .NET, Silverlight, FaceBook, Twitter, and other technologies for Subtle Technology Inc by Michael Urvan"/>
    <meta property="og:image" content="http://www.subtletechnology.com/SubtleTechnologyFBThumbnail.png"/>
</head>

The image_src is the old method of specifying the thumbnail image for your web site, and FaceBook will probably continue to support that method. Remember that the thumbnail image is grabbed and cached by FaceBook systems, and using the URL Linter tool will help refresh that cache if you are seeing an old Thumbnail Image when you try to test the Share or Like FaceBook feature. Remember that FaceBook servers may abide by cache period metadata returned in the HTTP headers by your webserver or caching pragmas in your HTML markup.

Posted: Jul 23 2011, 14:30 by michael urvan | Comments (0) RSS comment feed |
  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Filed under: Facebook Bookmark and Share
Tumblr Yoda Bot

Yoda has decided to add his daily words of wisdom to Tumblr.

http://yodabot.tumblr.com

 

Posted: Jun 05 2011, 21:29 by Michael Urvan | Comments (0) RSS comment feed |
  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Filed under: Star Wars | Tumblr | Yoda Bot Bookmark and Share
Donation 4 CURE

Subtle_Technology_CURE_Letter_B I watched some of the WOW4CURE live game-a-thon coverage as it was happening. It was quite entertaining with some lively quips in response to my pointless virtual banter; even The Police got involved due to the gamers' rowdy sod-stomping antics. I kid though - I hardly saw them stand up over several hours, much less make enough noise worthy of constibulary involvement. It had all the same antics, and yet was more entertaining than most reality TV shows. In the end, it was a cause worthy of encouragement so I had to donate.

Props to the gamers lending their time to this cause. Thank you Jann / CURE for the thank you letter, I look forward to donating in the future.

CURE Childhood Cancer - http://www.curechildhoodcancer.org/

Technorati Tags: ,
Posted: Aug 26 2010, 04:13 by Michael Urvan | Comments (0) RSS comment feed |
  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Filed under: Bookmark and Share
Twitter Yoda Bot

Yes, yes.image Launched a twitter bot, I have.  Send you words of wisdom when tweet #yoda you do.

Posted: Aug 19 2010, 21:57 by Michael Urvan | Comments (0) RSS comment feed |
  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Filed under: Twitter | C# | Star Wars | WCF | LINQ to SQL Bookmark and Share
ASP.NET Page Life Cycle Diagram / cheat sheet

image An ASP.NET developer needs to understand the ASP.NET Page Life Cycle and refer to a life cycle reference from time to time. Here is a good reference that comes from an MSDN team member blog. I've used other diagrams before, but this one is recent and comes from an MSDN source:

http://blogs.msdn.com/b/aspnetue/archive/2010/01/14/asp-net-page-life-cycle-diagram.aspx

Here is also an older one that does not come from an official source, but looks reasonably accurate and includes a PDF version for printing:

http://spazzarama.wordpress.com/2009/02/04/aspnet-lifecycle/

Posted: Aug 16 2010, 17:09 by Michael Urvan | Comments (0) RSS comment feed |
  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Filed under: ASP.NET Bookmark and Share
Video Card Performance Reference

image Futuremark has one of the best quick reference and comparison web pages for video card benchmarks. You can browse the benchmarks of all the video cards from ATI and Nvidia and compare them. It's a great reference tool when deciding on a new video card. Here is the link.

They provide a simple dropdown list, and although the pick list itself isn't sorted alphabetically (maybe it is sorted by review date), you should be able to find almost every popular desktop video card chipset variation listed.

image

Posted: Aug 06 2010, 14:53 by Michael Urvan | Comments (0) RSS comment feed |
  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Filed under: Hardware Bookmark and Share