Let’s say you have a production code like http://siliconvalley-codecamp.com and you want to have a test site on the internet that will not be seen by anyone unless they login (or maybe even login as an admin).  Using web.config (with Visual Studio 2012), transformations makes that very straight forward.  I know because I just did that.  I created a test site (say: http://test.siliconvalley-codecamp.com) and set up my publish to replace my normal anonymous authentication (allowing anonymous users) to one that denies anonymous users.  Just as an aside, the reason I did this was I notice that google was indexing some of those pages even though my robots.txt file says to deny access to all robots.  Apparently some crawlers don’t respect that signal.

For a little background, I did publish some basics about doing transforms here:

http://peterkellner.net/2013/03/31/vs2012-web-deploy-using-tranforms-for-connection-string-in-production/

So, here is what I have in my web.config file that is part of my normal project source control.

And, here is my transform file (Web.Test.config)

And, just to show the result, this is what end up on my test server:

And Finally, just for some extra bonus stuff here at the end, here is what my tranformation looks like that simply removes the debug option when I publish to production.

The issue I’m showing is how to see the Sql generated from Entity Framework.  My old habit use to be to stop the debugger and hover over the query variable in the code, grab it as a debug variable, then cut and paste to SqlServer enterprise.

Now, I just go to the DEBUG menu in VS, Windows / Intellitrace and I get a nice listing on the right side of all my ADO.NET calls.  The last one is the one I just did. 

My code below is pretty self explanatory.  You can see I’ve just issued a db.SaveChanges().  You can also see the Sql generated for the update.  I was checking because I wanted to confirm it was just updating one column.  It was!

Hope this helps!

http://www.meetup.com/The-San-Francisco-ExtJS-Meetup-Group/events/114540882/

Most of the usual suspects were there.

View Full Album

I often email the folks at JetBrains (the makers of ReSharper) letting them know that one of their refactors is wrong.  They often email me back letting me know my about my misunderstanding.  I actually enjoy this.

Today, was a perfect example but I did not get past the ReSharper feedback form when I realized my code was wrong (sadly missed the exchange with them).  I’m busy writing the SEO save for Silicon Valley Code Camp’s new web site (coming by next week hopefully).  In this case, I’m looking for a trackId passed into the sessions.aspx page. If I find it, then I redirect to a more friendly URL.

Here is my code I was going to complain to ReSharper about as incorrectly warning me that my trackId = –1; is redundant.

My mistake is that trackId is always replaced (even with 0) if the QueryString does not evaluate to a valid int.

The corrected code is this:

One less bug thanks to ReSharper.

I’ve recently started my journey as a Pluralsight author and, as is know surprise, I’m spending a lot of time getting my tools set up.  Regardless of what video editing tool you use, you need to record both screens and voice.  I believe most video authors at Pluralsight have a dedicated monitor running at 1024×768.  They simply record this windows.

Unfortunately for me, that does not work so well because I’m doing all my work on a MacBook Pro with just two external monitors (neither of which run correctly at 1024×768).  So, my process is to create a 1024×768 window in the upper left hand corner of my Thunderbolt monitor (resolution 2560×1440).  I’m going to run camtasia recorder in a custom region sized 1024×768.  The challenge now becomes you have to align exactly your apps.  You’ll see from the video I’m attaching below that my steady hand is not so steady and I would never be able to achieve this exact positioning.

So, just a couple notes

• You need to run Macro Express Pro as Admin
• This will likely not work on anything but windows 8 on thunderbolt monitor
• Small Adjustments may be necessary

http://www.macros.com/ (I believe you need the pro version)

The Macro Exported

And the Video

Well, the title is certainly a mouthful and hopefully a honey trap for SEO.  The thing is, I’m really going to talk about all those things.  I just went through a short exercise that I thought would be useful to share.

Background

For Silicon Valley Code Camp, I use the toolkit ImageResizer written by  Nathanael Jones.  For those of you that deal with any quantity of images on their web sites, I strongly recommend taking a look at this.  Before I used this toolkit I written my own image handlers that did some similar things but not nearly as well or with so many features.  One of the issues we have on code camp is that we try and show lots of pictures all the time.  Sponsors and speakers are really what causes the glut of pictures.  ImageResizer let’s me do things like create a URL as follows:

http://www.siliconvalley-codecamp.com/attendeeimage/1124.jpg?format=jpg&w=300&h=300&scale=both&mode=pad&bgcolor=green

What happens under the covers is that in my ASP.NET WebAPI site, I’ve got ImageResizer configured to do a select from my SqlServer Speakers table the record with id=1124.  Then, ImageResizer scales the image to 200×200 pixels, pads the space so as not to distort the image, then it fill in any area that got did not make the pad with green.  That is, it renders an image like this (but feel free and click yourself to see)

The How To

I’m not going to make this a 20 page post.  I’m just going to go through the highlights and drop a little code here and there.

Let’s start out with ImageResizer.  For that, we want it to:

• Cache Images On Our Local Server
• Cache Images Through Amazon’s Cloud Front
• Size, Scale and Pad as Necessary
• Read Data From SqlServer

To make that happen, I had to install the plugins listed in my web.config below (you can see more doc’s on the imageresizer site).

Then, I need to setup an Amazon CloudFront instance from my amazon console.

Notice that I have a CName so that if someone does a view/source, they see cache.siliconvalley-codecamp.com and not 3984kasdflk.cloudfront.net.  The idea here is that anytime someone goes to 3984kasdflk.cloudfront.net/Images/904.jpg, cloudfront redirects them to my site at siliconvalley-codecamp.com/904.jpg.  The first time that site gets hit, cloudfront pulls the image from my server.  After that, cloudfront has the image and does not have to ask for it again.  That means my image is now scattered around the world and I don’t have to server it over and over.  BTW, the actual link to that gets sent in our page looks more like this: 

http://cache.siliconvalley-codecamp.com/attendeeimage/1124.jpg;format=jpg;w=300;h=300;scale=both;mode=pad;bgcolor=green

If you look carefully, the link above has “;” instead of ? and & characters.  That is because ImageResizer supports cloudfront that way.  I understand there is another way it could have been done, but for now, I’m going with what works.

So, the final step is fix the parameters in my actual razor page to convert from the normal parameter URL with ? and & characters to one that has just ;’s.  Rather than have to go through the code and surgically fix each reference, I thought it better to write a simple HtmlHelper in razor that does the work for me.

So, into my /Code directory of my WebAPI project and I wrote the following code:

Sprinkled a line of code in the web.config file IN the view directory as follows:

And then had my razor code look like this to “fix” the image parameters to be semicolons as follows:

That’s it!  Now, I’m CloudFronted! 

I’ve listened multiple times to Douglas Crockford talk about the importance of following good programming style standards.  I try to normally, but this morning I got a little lazy with the following code:

store.sync({
    success: function() {Ext.Msg.alert("success")},
    failure: function(a,b,c) {…

I wrote this a while back and wanted to keep it short so I did not put the alert message on it’s own line.  Then, today I came along and decided to not have it execute the alert so I simply added a leading “//” giving me

store.sync({
    success: function() {//Ext.Msg.alert("success")},
    failure: function(a,b,c) {..

Well, of course it crashed my production deployment because I was again lazy and did not test.

Had I originally done it correctly as

store.sync({
    success: function() {
        Ext.Msg.alert("success")
    },…

I would have not been bitten today.

Just sayin…

I started at 7AM today as a volunteer at the HTML5 Developer Conference in San Francisco.  As the organizer of Silicon Valley Code Camp (an event with many similarities, yet still quite different and also open for registration), I don’t really get to “enjoy” what it’s like to be an ordinary volunteer.  Let me just say one thing.  It is very fun!  You get to relax, chat with people, share stories, talk to other volunteers, answer lots of questions and do whatever gopher jobs come along with and all at the same time feeling no pressure.

View Full Album

Because I can’t stop myself, I thought that I’d publish a list of all the questions people asked me today along with my best guess at the answers.  Here we go:

• Where is the Coffee? – A: Down the Hall with the sponsors
• Where do I get information on the training sessions? A: The site is almost ready.  Keep checking back there and you answer will come before you really need it.
• I can’t find my badge, help! A: check with Jonathan at the table over there
• Where Are the Sessions? A: The first four columns of the printed schedule are all down on this floor where we are now and the other 4 are up stairs on the next floor.
• Are the sessions being recorded? A: All sessions in columns 1,2,3 and 5 are being recorded (from the schedule handout)
• When do I get my T-Shirt? A: at lunch
• Are the training classes later this week full? A: Yes
• Where are the Sponsors?  A: Some are on this floor and others are upstairs.
• How About Wifi?  A: Choose PalaceMeetingWifi and the password is the first 4 letters of this conference (keep that to yourself please)
• I’m a Sponsor but I don’t see my badge?  A: See Jonathan at the end and he will make you a badge
• I’m a speaker and can’t find my badge? A: See Jonathan
• Where is the Coffee? A: See question 1 (I got that a lot)

I’m having a great time!  The content and sponsors look awesome.  Thanks to all the organizers for another job well done!

Introduction

I should have learned this a long time ago.  I certainly have known about it since VS2010 when it was introduced, I’ve read about it multiple times, I just thought I did not have the time to learn it so for the past couple years, I’ve been making one web.config change after another and of course making all the stupid little mistakes we all make (I think) when we do things manually.

So, in 25 minutes this morning, I updated my http://siliconvalley-codecamp.com site with Web.Config transforms so now, when I “publish” with Visual Studio 2012 I just pick the correct profile (either beta4 or svccprod) and when I do the publish command, I get the correct database connection strings.  svcodecamptest for beta4 and svcodecamp for production.  Here is what I’ mean, then I will go into more details to show just how simple it really is.

Deploy To Production	Deploy To Test

Nuts and Bolts

To make the above a reality, it is really quite simple.  Here are the steps (and for a more complete description, read here:  http://msdn.microsoft.com/en-us/library/dd465318(v=vs.100).aspx (that is where I learned it in under 30 minutes).

First, create two new configuration profiles.  In my case I just used the nice wizard that says copy an existing profile.  I copied the release profile.  The screen shot is something like this:

In the “Active solution configuration” dropdown, the last choice is “create new” and from there you can create a new configuration copying an existing one.  My current one shown is “beta4”.

Then, go to your vs2012 solution explorer, right click on your real web.config and choose “Add Config Transform”.  It will be highlighted if you have a new one like you added above (I’ve already added my transforms).

Now, this next step is the really cool easy part if I had known about I would have done a long time ago.  All you have to do is copy the section you want in this particular configuration (and will be web deployment) your named config and add 2 attributes to that xml (for that named config).  Wow!, that’s it.  I feel so stupid for thinking this was going to be some XSLT transform learning party before I could use this.

Finally, you go to your publish wizard from your “Project” and say “Publish”, make sure you have a configuration set for each server you want to publish to as follows (I’m showing my production one)

And that is it!

Conclusions

I’m annoyed I did not learn this 2 years ago.

(Part 3)

In the first two posts, we built a Microsoft WebAPI REST service, then we built the client side ExtJS app to process the GET request of the service (populate the grid panel), now let’s do the other 3 parts of CRUD (insert, update and delete).  We will not build out the WebAPI side because that would involve adding some kind of persistent storage to the server (which is another topic I did not want to add to this post now, but maybe will later).

So, first, let us go back to the Sencha Architect project and make the “TagName” editable so that we can see the “Update” in action.  We also need to add a save button to the toolbar that will simply so a store.sync() which will push the REST proxy into action once we have modified a TagName.

Without going through all the drag and drop, here is what needs to be done from Sencha Architect.

Add a toolbar to the Viewport

Put a “save” button on the Viewport

Add a click event handler to the “save” button and have the code grab a handle to the store and issue a sync() call when pressed

Add an editor to the text field “TagName” so we can edit that field

Add a CellEditing plugin to the grid

Now, that gives us this:

and it looks like:

Notice that I’ve actually clicked and edited the Tagname for item #3. You can tell because ExtJS puts the little red hat showing the field is edited.

If we press “Save” next we will get an error because the default WebAPI “Put” method does not have the correct signature.  We just change it to take an instance of TagItem and now, when we press the “save” button, we see the browser do a PUT

If we place a break point in the visual studio 2012 server code when the PUT is called, you will see the new value come in for tagName (as follows):

and, if you look at the browser shot above, you will see that the little red hat indicating “dirty” is now gone showing that we generated a clean update.

On your own, you can now do the same for POST (Insert) and DELETE.  The pattern is identical.  Simply make the WebAPI parameter TagItem (like we did for update), then, add to the client a delete button that figures out what is the selected row on the Grid Panel (fire the button again), and for insert, create an add button that simply adds a new row to the store, edit it and fire the save button again.

Hope these posts help.  I’m hoping this gives you a clear roadmap to build WebAPI / Sencha ExtJS applications using Microsoft’s WebAPI.