Archive for the ‘HTML5’ category

How to use the Require.js Optimizer

December 7th, 2012

As the HTML5/Javascript application I am working on comes to a close, it was time I started looking at how to speed up and optimize the site for all the devices that will be hitting it.  I started looking around and I found things like Uglify: https://github.com/mishoo/UglifyJS, which does a good job of minifiying your javascript but was still missing some things I was needing, its mainly for just optimizing a file, not a set of files.  I also came across Grunt.js, which I spoke about in an earlier post, but for now, Grunt does a few extra things I am not really interested in, like Linting and running tests, I should probably use that library down the road but for now I am liking the Require.js optimizer found here: http://requirejs.org/docs/optimization.html.  Basically to use the optimizer, you just create a directory somewhere in your app and grab the r.js file found here: https://github.com/jrburke/r.js/, install node from here: http://nodejs.org/download/ and then place a build file inside there and you will be ready to go, they have a lengthy example of a build file found here: https://github.com/jrburke/r.js/blob/master/build/example.build.js#L27-35.   That file will show you a lot of the features, probably way too many that you don’t care about so I have attached the file that I ended up using that does the job.

({
    baseUrl: "..",
    dir: "../../appdirectory-build",
    paths: {
        "text": "Lib/Require/Plugins/text",
        "bing": "empty:"
    },
    mainConfigFile: '../Main.js',
    preserveLicenseComments: false,
    removeCombined: true,
    modules: [
        //First set up the common build layer.
        {
            //module names are relative to baseUrl
            name: 'Main'
        },
        {
            name: 'Path/To/EntryPoint',
            exclude: ['Main']
        }
    ]
})

Some explanation here, the baseUrl in my example is just the directory relative to where my “Scripts” folder would be, or the folder that contains all my js/html files.  The dir is where you want all the optimized files to go, the paths is just for libraries that you want the optimizer to handle for you, for example, we use the bing control, which is located on the web and the optimizer won’t compile it so I am telling it to ignore it during the build with the “empty:” string.  The optimizer also has issues with the text plugin for require so I have that in there as well.

If you make use of the mainConfigFile, you won’t have to include all the paths to all your libraries, the optimizer will handle that for you, this is just a pointer to your Main.js file, I highly recommend using that and not duplicating all that.  If you set  preserveLicenseComments to false the optimizer won’t keep all the comments in your libraries, resulting in much smaller files.  Setting removeCombined to true removes all the files the optimizer uses to create your files, resulting in a much cleaner output directory and shows you potentially which files are not being used.

The modules section is what I like to call the “Entry Points” of your application, of course the main entry point of the application is “Main.js” so you naturally have to include that one.  Then you will notice that I have the next module just a path to an entry point.  If for example you have a site listing cars, if you have a link that kicks off a view that lists cars, then you would want to include that view, which would tell the optimizer to also go grab any other dependencies and views that are being used by that, it will take all of that and wrap it up into a single file, thus reducing greatly the amount of HTTP requests the application has to make and increasing speed tremendously.

To kick off the optmizer, just open up a command window on windows and type this in once you have node installed: node r.js -o app.build.js

I hope this helps somebody struggling with the optimizer, I spent a few days with it getting it exactly where I wanted, please feel free to ask questions, I will do my best to get back with you.

Twitter Bootstrap not displaying correctly on mobile devices

August 10th, 2012

I have been working on a HTML5/Javascript mobile/desktop application using Twitter’s new bootstrap CSS library found here.  Everything was going along just fine until I tried to view my site on mobile devices, where it didn’t do the formatting I expected it to like Jquery Mobile would do, so I started scratching my head trying to figure out why it wasn’t rendering like it should, then I came across the meta tags for the html.  All I had to add was this line:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

And it renders just like I wanted it to, I would have never thought it would be that simple, but it is. I am really starting to like this library, I will keep you updated at time goes on.

Google Packaged Apps, a very interesting adventure.

July 12th, 2012

I recently stumbled across Google Packaged Apps, something that is in beta testing right now from Google and what could be the future of applications as we know it.  What makes this new technology so interesting to me is that the apps are written completely in javascript and HTML, which runs anywhere.  The biggest drawback that I see thus far is that you are required to run things out of the Chrome browser, which is expected I guess coming from Google, but the idea that you can run an app in its own native window and act and feel like a native app is very interesting.  You can learn more here.

One little piece of advice before you try to run any of the samples, you need to download the latest (experimental) version of the chrome browser called Canary, I tried running the samples inside the current version of chrome and they ran but they won’t run outside of the browser the way they are intended to, the Google guys that wrote the documentation left that little part out, or at least I didn’t see it.

How to resolve issues with embedded images in email.

May 10th, 2012

I am embedding an image into an email that the server is generating using the SmtpClient in .net and I was having an issue with it caching images in certain situations and then Internet Explorer wouldn’t display the images at all, which is probably a security feature of IE, but the images did show up in Firefox and Chrome. Anyways, here is the code below that will make all of it work correctly in IE and should always show the images correctly, it generates a new Guid to always have a unique image Id so that caching won’t happen and then also tells the client that the ContentType is a jpeg which apparently IE needs to display the image correctly.

Guid contentId = Guid.NewGuid().ToString();

AlternateView htmlView = AlternateView.CreateAlternateViewFromString(
  "This is a sample JPG embedded image<br><img src="cid:" + contentId + "">", 
  null, "text/html");

ContentType ct = new ContentType(MediaTypeNames.Image.Jpeg);

LinkedResource EmbeddedObjects1 = new LinkedResource("PathToImage\image1.jpg", ct);
EmbeddedObjects1.ContentId = contentId;
htmlView.LinkedResources.Add(EmbeddedObjects1);

Windows 8 Apps, should I write in XAML or HTML5??

March 12th, 2012

I have been recently doing some research into Javascript and, coming from a .net background, I must admit is a bit daunting due to just my lack of knowledge really.  I have been pondering what road I should stay focused on continuing forward to work on apps to be targeted for future versions of Windows, in particular, Windows 8.

I guess this article should be called, “Is it worth it to learn HTML5 or just stick to what I know in the .Net world?”  I think the answer is pretty simple, I should absolutely continue on and learn all I can about writing apps in HTML5.  I honestly think in the future that “Metro” apps that are written in XAML will only have a very limited market, obviously, cause they are targeted for Windows machines only.  On the other hand, I could write a HTML5 app and it will work virtually work anywhere, that makes too much sense if you ask me.  I also have some years invested in writing WPF/XAML apps so if I am tasked in writing an app in C#/WPF, it won’t be a big deal, I already have those skills, sure I may have to learn a few new libraries, but no big deal.

Javascript has came a long way since I last looked at it several years ago, there are full blown libraries like Backbone.js, that allow you to do MVC programming.  There are literally thousands of libraries to do just about anything you want, with full source to change it however you want.  I don’t want to come across at a Microsoft hater in this post, just posing a question that seems to make too much sense to me.

I am not talking about writing a Javascript app using the WinJS library, which, once again, would tie you to a windows app, I am talking about a full-blown HTML5 app written outside of Visual Studio, so you are sure to not be depending on any kind of Microsoft library.  This whole paradigm is nothing new, I think I am just now getting around to embracing it because its pretty easy to see where things are going, and I think Microsoft is getting behind in this area.  Even still, it never hurts to learn a whole new programming language, and while Javascript is not new to me, I have never taken the time to really learn it and now that there are so many libraries available and it has gotten very powerful, I think its time I gave it a harder look, what are your thoughts?