Archive for the ‘Web Development’ category

Google Chrome caches “Like a Boss”

July 18th, 2012

If you do much web development at some point with google chrome you will notice that it is notorious for caching your web pages, which is very frustrating to a web developer when you want to see your changes.  I came across some settings that you can stick in the startup link that will set chrome to never use any cache.

–disk-cache-dir
and
–disk-cache-size

are the parameters…

Simply close Chrome, right-click your Chrome shortcut, click Properties, and then in the field labeled “Target:”, make it look something like this:

“…chrome.exe” –disk-cache-dir=”CACHE_DIR” –disk-cache-size=N

Where ‘CACHE_DIR’ is the new cache location, and ‘N’ is the cache size limit, in bytes.

Here is what mine looks like:  C:\Users\eddie\AppData\Local\Google\Chrome\Application\chrome.exe –disk-cache-dir=”C:\temp” –disk-cache-size=0

 

Publishing apps to Windows Azure from Visual Studio 2010

April 5th, 2012

I have been tinkering around with Windows Azure using Visual Studio 2010 and I am finding that more and more of the articles you find on the internet are either outdated or just wrong. This is very well likely due to the fact that things have changed over the course of the last year or so with Windows Azure. Here is the steps I took to get my app actually published to Windows Azure, hope it helps.

I am not going to go into the creation of the app, just the publish part of it, there are tons of examples out there that go into details of how to create your app and there are several example apps you can download as well. You have to make sure you have a Windows Azure account of course to go through this tutorial I have here as well, again, pretty self-explanatory.

 

The first thing to do is open your project in Visual Studio 2010 and right click on your Azure Project and click on Publish:

The next step you will see a screen like this:

You will need to create a Certificate by dropping down the Credentials dropdown and then hitting “New”, that will bring up a screen like this:

You can make your certificate in this screen and then use the “Copy the full path” link there to get it copied to the clipboard and then you will also need to get your subscription ID from the Windows Azure portal, you can find that under “Hosted Services” under the right hand pane in the “Subscription ID” box.  When you get that created, you can click on ok and you are almost ready to publish your app to azure.

Before you click OK on the next screen, over in your Azure portal, you need to make sure to upload your certificate to Windows Azure so that your app will be authenticated with the server.  In the azure portal, locate the “Management Certificates” under “Hosted Services, Storage Accounts and CDN”, click on that and you will see something like this below.

Then just click on the “Add Certificate” button

and you will see a screen like this one:

Your subscription will have been chosen assuming you have already taken care of all of that before by signing up for azure, you then click on the Browse button and then paste in your directory, you will probably have to clear out the certificate key filename to allow you to open the directory to choose the file, then ok that and then ok this screen and you will have your app authorized for azure.

Finally you can go back to studio and click on your ok button to publish your app to azure, it does take a while and the progress of the publish will show up in the lower section of studio in the activity log.

Backbone.js and jQuery Mobile with template

March 29th, 2012

I have been doing a lot of research in my spare time with Javascript apps and I feel like I have a decent understanding of the Backbone.js framework and I recently tried to give it a front end using the jQuery Mobile framework.  Well, that turned out to be quite the challenge to get it to render it to the browser the way it was supposed to look.  Take the Backbone.js View below for instance:

var CommentsTable = Backbone.View.extend({
        el: $("#comments"),

        initialize : function(){
            _.bindAll(this, 'refreshed', 'addRow', 'deleted');
            this.template =  _.template($("#entry-template").html());
            Comments.bind("reset", this.refreshed);
            Comments.bind("add", this.addRow);
            Comments.bind("remove", this.deleted);
        },

        // Prepends an entry row
        addRow : function(comment){
            var view = new EntryView({model: comment});
            var rendered = view.render().el;
            $("#commentList").append(rendered);
        },

        // Renders all comments into the table
        refreshed : function(){
            // reset the table
            $("#comments").html("<ul class='ui-listview ui-listview-inset ui-corner-all ui-shadow' id='commentList' data-role='listview' data-inset= 'true'></ul>");
            if(Comments.length > 0){
                // add each element
                Comments.each(this.addRow)
            }
        },

        // A comment has been deleted, so we rerender the table,
        // because this update could also come from another user via the
        // _changes feed
        deleted : function(){
            this.refreshed();
        }

    });

On line 22 you will notice that I have hard-coded the actual CSS styling for the jQuery Mobile listview, I have tried every sort of method I could think of to get this work and the only way I could get it to work was to actually put the listview in there with it’s styling, here is the template I am using as well:

<script type="text/template" id="entry-template">
            <div class="ui-btn-inner ui-li"><div class="ui-btn-text">
                <a href="#page1" data-transition="slide" class="ui-link-inherit">
                    {{name}}
                </a>
            </div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span></div>
        </script>

I have more hard-coded styling in there to make it work correctly. So far this is the only way I can get it work correctly, it totally goes against how its recommended but it is working for me. If you have any suggestions, I am completely open as I am just learning this stuff myself.

Converting Array of Guids to a List

March 21st, 2012

I have been doing more web work these days and on a recent project I was working on I had a need to convert an incoming string of guids to a List<Guid> for usage over in our repositories.  Well, my first thought to get the string to be split up into an Array[] of strings was to just call the Split() function in .net, and that will do the job if all you are wanting is an Array[] of strings.  it would look something like this:
request.Headers[“ids”].Split(‘,’).ToArray()

The problem was when I tried to get .net to cast that over to a List using Cast or ToList(), it won’t convert this although you would think it would be smart enough to convert an array of strings that are Guids to a List that is Guids, but whatever.  This is where the ConvertAll() method on the Array class comes into play, it is in the .net 4 libarary so make sure you are on the right version.  The ConvertAll() will convert an array of one type to an array of another type, so I have updated my code to look like so:

Ids = Array.ConvertAll(request.Headers[“ids”].Split(‘,’).ToArray(), Guid.Parse).ToList();

Hope this helps somebody :).