Scott Hanselman

ASP.NET and jQuery

November 6, '08 Comments [8] Posted in ASP.NET | ASP.NET Dynamic Data | ASP.NET MVC | Javascript
Sponsored By

image It looks like many of you have already noticed that there's an official Visual Studio autocomplete file for jQuery posted up at the jQuery site. It's significant that it's hosted by the jQuery team in that it's a contribution by the Visual Studio team but it's not up at CodePlex, because it really belongs to jQuery so there's where you'll find it.

This isn't a new jQuery file and nothing's been "forked" so don't freak out. It's just a documentation file, as you can see if you go to the Download jQuery page.

Now, the Visual Studio-specific aspect of this is a temporary thing, as it's planned for Visual Studio to support a more standard syntax at some future date, but until then, there's this file and we'll make sure it's kept updated.

Jeff King has details on how to use this file in your projects. In the VERY near future there will be a hotfix that will cause Visual Studio to look for files that end in "-vsdoc.js" for intellisense which will make including it in your project automatic.

UPDATE: The very near future is NOW. You can now download a small hotfix that causes Visual Studio to automatically look for intellisense files named *-vsdoc.js" next to the runtime file. From Jeff King's blog:

Last week I mentioned we would be releasing a Hotfix to accompany our new jQuery VSDoc file.  This Hotfix is now available at the MSDN Code Gallery.  Here's a direct download link for this small (2MB) patch:

http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?ReleaseId=1736

I want to emphasize that this patch is intended for all JavaScript files, not just those related to jQuery.  Generally, we will opportunistically look for documentation files related to the script file.  For example, given "mylibrary.js", we will search in the same directory for:

  • mylibrary-vsdoc.js, then if we don't find it we will search for...
  • mylibrary.debug.js, then if we don't find it we will search for...
  • mylibrary.js

There's a few things that are nice about this jQuery file is that it supports and understands jQuery plug-ins. If you're into jQuery and ASP.NET, go check it out.

Related Links

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by SherWeb

The Weekly Source Code 36 - PDC, BabySmash and Silverlight Charting

November 6, '08 Comments [6] Posted in ASP.NET | ASP.NET MVC | BabySmash | Open Source | PDC | Silverlight | Source Code
Sponsored By

Scott Hanselman presenting at PDC 2008First, let me remind you that in my new ongoing quest to read source code to be a better developer, Dear Reader, I present to you thirty-fifth in a infinite number of posts of "The Weekly Source Code."

At the end of my crazy babies talk at PDC (Tips on how I prepared here) I had a big demo where I gave a URL to a Silverlight version of BabySmash that Grant and I built for the show. You can watch the presentation online if you like and fast forward to the end (around 60 minutes in) and see the big demo. Basically we had the Silverlight BabySmash talk via ADO.NET Data Services (I'll post in detail in the near future) to a SQL backend. Then I had an MVC reporting site that had some charts that would update as folks smashed. There were over 90,000 smashes during the talk.

imageThe chart was updating as folks were smashing and we even had a Baby vs. Baby fight break out where the "A" people and the "J" people were going at it. Jeff Atwood started the bloodbath with this tweet as he urged on the overflow room along with Phil Haack. That man's trouble, I tell you.

In the talk, I started out with a old .NET 1.1 chart from 2003 and showed it working, unchanged, in ASP.NET 3.5 SP1. It's just a nice reminder that things usually work just as they should. Then I upgraded it to a new .NET 4.0 ASP.NET Chart that I'll blog about in detail soon. Then, I showed the final site with the new Silverlight Charts. Tim Heuer has a great post on how to databind with these new charts.

What's really cool about these Silverlight Charts is that they are Ms-PL (Microsoft Public License) which is a REALLY relaxed license. They're released as part of the larger Silverlight Toolkit up at http://www.codeplex.com/Silverlight. There's a bunch of controls in there. It is a preview release though, so things will change, and hopefully only get better:

You can check out the Toolkit Chart samples and run them yourself here. It's nice that the chart sampler actually includes the source code within the Silverlight sample app. You can browse dozens of charts, then switch tabs and see the XAML and code-behind. This all lives in Microsoft.Windows.Controls.DataVisualization, the namespace (so far) for these controls.

image

My reporting page included a Silverlight Chart and a Virtual Earth control to show where people were smashing from. The data is coming from the Astoria ADO.NET Data Service, which is easy to get to via either JavaScript or from Silverlight.

You add the charts to your Silverlight application by adding a reference to the assembly then assigning a namespace to them:

xmlns:charting="clr-namespace:Microsoft.Windows.Controls.DataVisualization.Charting;assembly=Microsoft.Windows.Controls.DataVisualization"
xmlns:datavis="clr-namespace:Microsoft.Windows.Controls.DataVisualization;assembly=Microsoft.Windows.Controls.DataVisualization"

Them, lay them out. I've got two charts here, one column and one pie. I also did some stuff like the linear gradient for the background, etc. Still, pretty simple.

<charting:Chart Grid.Column="0" Height="300"  StylePalette="{StaticResource PaletteColors}" Style="{StaticResource ChartStyle1}" >
<charting:Chart.Background>
<LinearGradientBrush EndPoint="1.332,1.361" StartPoint="-0.107,-0.129">
<GradientStop Color="#FF6CA9D5"/>
<GradientStop Color="#FFFFFFFF" Offset="1"/>
</LinearGradientBrush>
</charting:Chart.Background>
<charting:Chart.Axes>
<charting:Axis x:Name="colAxis" Orientation="Vertical" AxisType="Linear" Minimum="0" Maximum="1"></charting:Axis>
</charting:Chart.Axes>
<charting:Chart.Series>
<charting:ColumnSeries x:Name="colSeries" ItemsSource="{StaticResource BasicValues}" DependentValueBinding="{Binding Count}" IndependentValueBinding="{Binding Character}" Title="Character">
</charting:ColumnSeries>
</charting:Chart.Series>
</charting:Chart>
<charting:Chart Style="{StaticResource ChartStyle1}" Grid.Column="1" Height="300" StylePalette="{StaticResource PaletteColors}" >
<charting:Chart.Axes>
<charting:Axis Orientation="Vertical" AxisType="Linear" Maximum="100000"></charting:Axis>
</charting:Chart.Axes>
<charting:Chart.Series>
<charting:PieSeries x:Name="pieSeries" ItemsSource="{StaticResource BasicValues}" DependentValueBinding="{Binding Count}" IndependentValueBinding="{Binding Character}" Title="Character">
</charting:PieSeries>
</charting:Chart.Series>
</charting:Chart>

We had a generic list of "CharacterSmash" data, as in List<CharacterSmash> that we'd be binding to the chart.

private readonly List<CharacterSmash> characterData = new List<CharacterSmash>();

For the purposes of the presentation, I just polled for the data by making an asynchronous call to the service, then updating the bar and pie chart when it returned:

private void RequestSmashCountData()
{
var container = new SmashMetricsContainer(new Uri("/BabySmashPDC/SmashService.svc", UriKind.Relative));

// Setup data query
var query = container.SmashCount;

// Start the async query
query.BeginExecute((asyncResult =>
{
// Get the matching results from the service call
var matches = query.EndExecute(asyncResult);
UpdateCharacterData(matches);
UpdateBarChart();
UpdatePieChart();
}), null);
}

See how the BeginExecute includes the "do this when you return" as a lambda? It's a tidy syntax.

UPDATE: Tim Heuer emailed me to say that we're re-databinding the results. Instead, he wisely points out:

"On the code where you are getting the smash metrics for the silverlight charts…I see that you are re-binding the data?

If you bind to an observablecollection and just change that the chart should change with the data…including the Y-axis growth."

Excellent point! Tim's right. The way I'm doing it works, but it's old school. If I just updated a ObservableCollection the chart would notice the changes and update itself.

The updates are also clean, just databinding the results:

private void UpdateBarChart()
{
var axis = (Axis)FindName("colAxis");
if (axis != null)
axis.Maximum = GetMaximumCount() + 50;

var colSeriesControl = (ColumnSeries)FindName("colSeries");
if (colSeriesControl != null)
colSeriesControl.ItemsSource = characterData;
}

All we had to do that was interesting at all was to make sure the Y-axis grew as the data grew.

Who do we have to thank for this charting control? David Anson is who. Basically he was the Primary Dev and only Tester on the whole thing, and you should check out his blog for lots of inside information on charting in Silverlight.

UPDATE: David had development help from Jafar Husain, Jeremy Sheldon, Delian Tchoparinov, Alex Gorev and Sean Boon and designer Mehdi Slaoui Andaloussi.

If making a complex chart seems daunting, David has ChartBuilder that you run now in your browser. It'll generate and show you the XAML you need for your chart.

image

There was so much announced at PDC, I wanted to make sure that folks heard about this important release that might have been lost in the shuffle. Even better, the source is open so if you don't like it, change it.

Related Links

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by SherWeb

2008 - Congratulations, America has a President-Elect

November 5, '08 Comments [72] Posted in Musings
Sponsored By

We have a new president here in the US. He is president-elect Barack Obama. This was a very long presidential race, long by even American standards. We're all exhausted from this race as a country and excited for January 20th, when the new president is inaugurated. It was a good race. John McCain gave a thoughtful and gracious concession speech. Barack Obama gave an inspirational acceptance speech.

My wife, Mo, voted in her first election as a US Citizen. My boys will grow up in a country that values people of all kinds, including ones that look like them. Voter turnout was at historic levels and was organized and peaceful - THAT is a testament to this country and what we stand for.


Now, let's get to work, America.

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by SherWeb

Tips for Preparing for a Technical Presentation

November 4, '08 Comments [12] Posted in PDC
Sponsored By

I felt pretty good about my presentation at PDC last week. They are WAY more uptight about presentations at PDC than at TechEd. You have to go through dry-runs and slide reviews and all sorts of things that I was dodging at every turn.

The talk is available, as are all PDC talks, up at http://sessions.microsoftpdc.com. You can get them in these formats WMV-HQ, WMV, Zune, MP4 which is cool. I like the WMV-HQ version, over the WMV version, because it includes picture-in-picture video. My talk is no fun if you can't see me being silly. You can also watch it streaming in the browser via Silverlight and download my PPTX. If you saw it live, don't forget to evaluate the session as I have to Crush Anders in the scores. (Note to self, register CrushAnders.com and .net)

Anyway, someone was asking how I prepare for a talk, so I figured this would be as good enough time as any for a post on the topic.

imageThese basic tips from a few years back still stand - 11 Top Tips for a Successful Technical Presentation, but this post is about the actual preparation process and some tips and techniques that might help.

I thought I did a good job, with 72 slides and 8 demos in 75 minutes and only one person said it felt rushed in the comments. ;) Of course, I had about 9 hours of content, but I did prepare in specific ways in order to pull it off.

Know Where Things Are - Beforehand

You can easily waste 2 to 5 minutes over an hour long talk looking for crap. Seriously, I don't need to see how slow you are with Explorer. If you want to have your audience rush the stage, be slow in finding stuff. ;)

Make a folder of links that is specific to your talk. I made one and numbered each link in the order I was going to use them. That includes links to folders, files, browsers, batch files, reset scripts, whatever.

My talk also included a lot of websites that I knew I'd be visiting. I made a Links toolbar in IE and setup links to everything I'd visit, in order.

image

My tiny head is on those links not because of my huge ego, but because those links are inside my domain and IE used my favicon.ico. ;)

"Sync to Paper" and Know Your Timing

I'm a gadget guy, sure, and I've got the same todo.txt file on my desktop that the rest of you do, but there's really something about "syncing to paper." before every talk I write a few things down. I do it on a Moleskine notebook that I wrote about in my Personal Systems of Organization post.

Over the years I've come up with a few techniques on paper that have helped me greatly. Scanned below is the notes I used in my PDC talk.

On the left-hand side you'll see 5 sections, numbered from top to bottom. I make one section per 15 minute segment. This was a 75 minute talk, so there's 5 sections. Sometimes I'll take the FIRST and LAST section and split them into 5/10 and 10/5 respectively. Regardless of how you do it, the point here is to know these things:

  • Know Where You Are Supposed to Be
    • I use the segments to let me know where I'm supposed to be at 15 min, 30 min, etc. Looking at the notes, if I'm on the PLINQ demo and it's only 20 minutes in, I'm going WAY too fast for example.
  • Know Where You Are Going
    • It's nice to be free of knowing what's next. The mind can free associate better if it isn't saddled with where it's headed. That's the paper's job. I glance down just to see that I'm on track.
  • Know Your Pacing and Know What You Can Drop
    • On the left side I've numbered the demos 1 or 2. The #2's I can drop if I need to save time. The #1's can't be dropped or it'll ruin everything. Have enough demos to fill the time, but also know ahead of time which demos to drop if need be.

BabySmash Presentatio nNotes

Know Your Narrative and Where to "Pivot"

If you've ever been unfortunate enough to come upon me freaking out before a talk at a conference, I've likely accosted you and run through the narrative or the "story arc." I keep doing this until it really resonates with me and the half-dozen folks I abuse regularly, like Phil Haack and Rob Conery.

It's all the same basic middle-school speech stuff we've all learned before, but I'm constantly reminding myself of these questions:

  • Why is the audience there?
  • Who is the audience?
  • How can I avoid wasting their time?
  • What's the one thing they should get out of the talk?

I also try to focus on a story arc that looks like:

  1. What is this?
  2. This is it.
  3. What was that?

The .NET Framework UniverseSeems silly, but it works. You'll see that I repeat myself four or five times to make sure important points get hit and pounded in. This style of arc works in most technical talks, but others are more complex so I use what I call a "pivot point."

I call it that because in basketball once you've planted your feet you have to pivot on one foot. You can move all over as long as you keep that one foot planted. If the basketball analogy doesn't work for you, then think of holding your finger on a chess piece while you think of your next move.

For the PDC talk, we had these nice posters to pass out. They look nice as placemats or on the wall, but they look busy on a slide, so I covered them with bright colored shapes. The Core shape was my pivot point. I'd start there, go to Client, then come back to Core. I'd go to Data, then back to Core. Just like that, Rinse, Repeat.

If you've got a meandering talk, like I did, finding a place to keep coming back to can really help. It helps me.

Have a Pre-Talk Checklist and Demo Reset

Make a complete list of everything that you need to do before your talk. If that means find a Diet Coke and use the bathroom, fine, put it on the list. Here's mine for this talk, unedited.

reset the database
resize and prep the browser
cache the font list
remove my son's face from the xaml
* Pick up the Samsung SilverLight Phone
Test the Phone remote viewing software
prep the mac, test the mac's video output (1280)
*dvi-vga adapter for the mac
check all font sizes in all apps
run zoomin
shutdown services, and the mesh
Warn orcsweb that traffic is coming

I had a bunch of stuff that could have gone wrong if I hadn't checked ahead of time. The Mac I used for the Surface demo only output at 1280x1024. I checked that with the tech guy at 8am. I didn't have a DVI-VGA adapter, so I got one at Radio Shack. I went into every app I was going to run and made sure the fonts were at a visible size (I like Consolas 15pt). I also shutdown all non-essential services. ALL of them. I go from 107 programs running to less than 50. I shutdown piles of stuff in Services.msc like "Infrared Service" and all that crap. I called my ISP, Orcsweb, and warned them I was doing a demo so they'd babysit the box and not think there was an attack.

Preparations like this, and batch files that reset your demos, drop and recreate your database, clear caches, prime caches or whatever administrivia you need, just take a few minutes to do, but they make a presentation look much more professional.

Related Posts

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by SherWeb

Tiny Victories Inside Microsoft - SmallestDotNet makes headway

November 4, '08 Comments [23] Posted in Musings
Sponsored By

GET .NETSometimes there's little victories, tiny victories that make me happy. It's a big*ss company, Microsoft is, and sometimes it's hard to get stuff done. But sometimes I get something small done that might make a larger difference.

Remember SmallestDotNet.com (blog post) from August? Well, that kicked off a number of discussions about how it was hard to find and install the .NET Framework. It was hard for end users and it was hard for developers to get it.

We put together to small "swat teams" and fixed two small things.

First, the brouchureware. The site http://www.microsoft.com/net/ has a nice URL, non-threatening clipart dude, and some marketing stuff, but had no way to get the .NET Framework it was talking about. Now it also has an unambiguous button that links directly to the small 2.6 meg .NET Framework bootstrapper. Directly. No download interstitial page. Magical. Duh.

Screenshot of the .NET Framework page on MSDNSecond, the .NET Framework page on MSDN. It's at http://msdn.microsoft.com/en-us/netframework, is linked to all over and gets a lot of traffic.

However, when you visited it before it had a bunch of generated links like "Popular Downloads" that were either old or stupid and would point folks to .NET 2.0 redists that were old. It was hard to find nearly everything.

We redesigned it to include (as above) a giant and unambiguous Install It Now button. However, if you click More Info you get a nice list of other versions to download. Madness!

I say some of this with some slight sarcasm because I've learned that there are tens of thousands of pages out there in Microsoft-world and like any garden, you'd be surprised that some sections just aren't tended to as often as they should. Pages that you look at all the time might not be looked at as often as they should from the inside.

It also includes a link to the Full Package just under the link to the bootstrapper. It's generally a lot tidier, IMHO. There's also some talk about taking my SmallestDotNet.com detection code, or code like it, and putting it on these sites to make everything as easy as possible.

I believe there's talk of tending to a lot of these gardens in the coming months and I'm hoping to stick my nose in get involved with those layouts as well.

Anyway, this was a tiny victory and it made me smile. I hope it helps you, as there were a lot of people involved in what appears to be small changes.

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by SherWeb

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.