Scott Hanselman

Make a Windows 8.1 Pinned Live Tile for YOUR website in minutes

October 21, '13 Comments [34] Posted in Win8
Sponsored By

imageI actually set this up on my site a few months back when Windows 8.1 preview showed up, but I didn't mention it. If you've got Windows 8.1, you've likely figured out that the most fun apps are ones that have active live tiles.

I'm a web guy and I like web sites, though. Certainly there's no reason or need for a "Hanselman" app anymore than there's a need for an app for, say, The Verge.com. We have perfectly lovely sites today and work just fine. We also have RSS feeds that contain our content and let folks know when a site has been updated.

You can add some HTML META markup to your site now and have a multi-size automatically updating Live Tile for Windows 8.1 in minutes. It's very cool.

Pin a Site to your Windows 8.1 Start Screen

  • Open Full Screen IE (that's the big blue IE from the Start Screen, not the one on your Desktop).
  • Visit the site you want to pin, like http://hanselman.com/blog.
  • Click the Star to Favorite the site, then the Pin to Pin it as a Live Tile
    • Before you finally pin the site, you can click the arrows left or right to pick the size of the Tile.
    • You can change the size whenever from your Start Screen by right clicking the Tile and clicking Resize.

Don't worry about my creepy eyes staring at you. My RSS feed will start coming in soon and the Live Tile will flip over.

Get a Large Live Tile for Your Site

The easiest way to make one of these is to visit http://buildmypinnedsite.com as they have a wizard that helps you make four file sizes and setup notifications from your RSS feed, as well as pick the background color for your Tile.

ASIDE: Back when IE9 came out, I added Site Pinning support to my site in a similar way. You can still do that for your Windows Taskbar, in fact, and get a nice right-click context menu with lots of quick access to my site, archives and podcasts. View Source or visit the link there for details.

There's a very detailed API on MSDN if you'd like to understand all the little details of Pinned SItes with IE9, 10 and 11. It's literally minutes of work on the low end, and maybe an hour if you go nuts with JavaScript.

You can put all your META tags in the HEAD and just have a pile of them if you want, which is fine:







More on that crazy notification one in a second.

Or, if you want a tidy META area, just move this stuff into a static XML file:



And that file, is predictably similar. Again, it's not needed, but you can either put the stuff in META tags, or in a file.









#83382b



360
1


Now, let's look at those notifications. The service above is speeding things up by making the little Tile Notifications XML file for me. This is similar to Facebook's open graph stuff or Twitter Cards, where you want an image (if available) plus the title of a post to show up as a "card" or in this case, a Tile.

ASIDE: You can do similar type things in other browsers with nice custom PNGs and Icons, like Opera's Speed Dial, or iPhone Home Screen icons. I've done all those for my site. There's a lot, but it's minutes each and then it's done.

You get some amount of control as to text and images that can appear in your live tile if you make the notification yourself. The BuildMyPinnedSite service, as you can see in the URL above, takes your RSS feed and makes it WAY smaller (mine is too large to poll, for example) and pulls out prominent images. I set my Frequency at a few hours, since I'm a blog, not a news site. No need to poll me every 30 minutes!

Here's a Wide title generated by a recent post:

image

Or a Large tile:

image

The site will generate those, but if you're a really high-traffic site you might just write a little handler to make these Notification Tile Files from your RSS feed.




CollectionViewSource is crazy useful for binding to filtered Observable Collections on Windows Phone 8



CollectionViewSource is crazy useful for binding to filtered Observable Collections on Windows Phone 8


CollectionViewSource is crazy useful for binding to filtered Observable Collections on Windows Phone 8
SCREENCASTS: What's New in Visual Studio 2013 - learn over lunch!
IE10 and IE11 and Windows 8.1 and __doPostBack


I wonder how hard it would be to write a WordPress, Drupal, Ghost, or MiniBlog plugin to make these notification files? Not hard I think.

UPDATE: Looks like Nick Halsey has already crated a Windows Pinned Sites Plugin for WordPress. Nice job, Nick!

UPDATE: Drupal has Pinned Sites also!

I'm looking forward to seeing tiles like this for sites I visit like LifeHacker, The Verge, CNN, etc. I'll be more likely to pin a site to the home screen if it also shows me updated headlines.

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

CollectionViewSource is crazy useful for binding to filtered Observable Collections on Windows Phone 8

October 21, '13 Comments [8] Posted in WinPhone
Sponsored By

I've been working on this Windows Phone 8 app on the side (it's a news app, but mark my words, it's gonna be huge). 

For the initial development I've been binding to a Pivot to a basic ObservableCollection of type "FeedItem," so basically my XAML was like this.

Really, the only thing you care about here is that FIRST line...ItemsSource=""

<phone:Pivot Title="MAGICAL FREAKING NEWS" x:Name="MainPivot" 
ItemsSource="{Binding Path=NewsData.Feeds}" >
<phone:Pivot.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=key}"/>
</DataTemplate>
</phone:Pivot.HeaderTemplate>

<phone:Pivot.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0">
<TextBlock Text="{Binding Path=title}" Style="{StaticResource PhoneTextTitle2Style}" HorizontalAlignment="Center"/>
<TextBlock Text="{Binding Path=updated_at, StringFormat=F}" HorizontalAlignment="Center" TextWrapping="Wrap" />
<Button x:Name="PlayButton" Margin="0,40,0,0" HorizontalAlignment="Center" Style="{StaticResource PlayStyle}" Click="Play_Click">
<Button.RenderTransform>
<!-- Changes to .5 when in Landscape -->
<ScaleTransform x:Name="OrientationScale" ScaleX="1" ScaleY="1" CenterX="60" CenterY="0"/>
</Button.RenderTransform>
</Button>
</StackPanel>

...snip...you get the idea.

As an aside, I really like the idea of Design Time Data, meaning that I can layout my page in Visual Studio and it will actually LOOK like my app using static data that happens at Design Time. For this, I just add this at the PhoneApplicationPage level:

 d:DataContext="{d:DesignData Content/NewsDataSample.xaml}"

And that sample XAML file just looks like a "XAML-shaped" version of my Object Model, which is actually fed by JSON at runtime:

<vm:AppViewModel
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:vm="clr-namespace:toawesometolive_portable.Data;assembly=icantstandit-portable"
    OperationInProgress="True"
    >
    <vm:AppViewModel.NewsData Force="False">
        <vm:NewsData>
            <vm:NewsData.Feeds>
                <vm:Feed id="0" key="NPR" subtitle="National Public Radio"
...snip...

Fast forward some and requirements changed. Now I needed to be able to individually enable and disable new sources, as well as reorder sources on the fly.

image

That means, if a source is not enabled, it shouldn't be in the first page's pivot. The Sources page and the Main Pivot both bind to the same ObservableCollection, except I need a filter of some kind of the Pivot for "where enabled == true."

I tried lots of stuff things like other sub-collections, properties that returned filtered collections, IQueryable this and that, then discovered the (not really well documented) CollectionViewSource.

Turns out, though, that WPF folks have been using this for YEARS. Here's Beth Massi talking about CollectionViewSource in 2008, for crying out loud (as I discover it a half-decade later on the phone.)

You can have more than one CollectionViewSource on your page. You can use them with Master/Detail forms, for Pathing and for Filtering, which is what I'm interested in. It's also nice because any controls that you bind to the same CollectionViewSource will always have the same current item.

I put one in my Phone Page's Resources like this:

<phone:PhoneApplicationPage.Resources>
    <CollectionViewSource x:Key="src" Source="{Binding Path=NewsData.Feeds}"/>
</phone:PhoneApplicationPage.Resources>

Later, my Pivot binds to the CollectionViewSource by name:

ItemsSource="{Binding Source={StaticResource src}}"

I know folks love to do EVERYTHING in their XAML, but that's not how I roll. (Nor do I have any idea what I'm doing.)

In my page's code behind I set a filter:

collectionView.Source = App.ViewModel.NewsData.Feeds;
collectionView.View.Filter = item =>
{
Feed f = item as Feed;
if (f == null) return false;
if (!f.enabled) return false;
return true;
};

That's it. Now I can enable and disable my items in my source view and the Pivot updates nicely only showing those news sources that are enabled.

Ideally I would have been able to express this somehow in XAML with some kind of where clause as an attribute, but once I figured this solution out it worked famously. I suspect there's actually a LOT of depth to CollectionViewSource and I may end up using it in other parts of my app.

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

SCREENCASTS: What's New in Visual Studio 2013 - learn over lunch!

October 21, '13 Comments [65] Posted in ASP.NET | Screencasts | VS2013
Sponsored By

I could write a whole epic post about what's new in VS2013 for Web folks and front-end developers, but this time instead I did some videos. I'm proud of them and I think they really show some of the cool new features in a very clear way.

These are short, clear and to the point. I did them on my own and there's no marketing-speak, just "here's what we built." Here's the full release notes for ASP.NET and Web Tools for you to check out if you really like reading.

Otherwise, take about 30 minutes total, perhaps over lunch, and watch these short videos with live demos of what's new in Visual Studio for Web Developers and Front End Devs.

HTML5 in VS2013

CSS in VS2013

BrowserLink in VS2013

Page Inspector in VS2013

JavaScript in VS2013

Publishing in VS2013

If you've been paying attention over the last year, you may have seen some of these features. I realize that these may not ALL feel like "amazing new surprises." That's the price for being open, eh? If you'd prefer we hide out for a year and make stuff then appear and DROP it on you, let me now. Otherwise, we're sticking with a more Open Web.

Hope you enjoy the tools and the direction.

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

IE10 and IE11 and Windows 8.1 and __doPostBack

October 19, '13 Comments [50] Posted in ASP.NET | Blogging
Sponsored By

A while back there was a bug in the old browser definition files that shipped with .NET 2 and .NET 4. Fast forward to today and these older ASP.NET’s will mis-detect IE10 and IE11. If you have this, you'll see __doPostBack JavaScript errors in your sites when IE10 or IE11 hit them.

However, I'm still getting email from folks who are seeing this, which means they've got very unpatched installations.

Aside: If you don't have this two year old patch, be sure to check out what other updates your server is missing. Again, rollups like .NET 4.5 and "hotfix rollups" get you the latest in one swoop.

Here’s all the internal details for this fix across every combo of framework and OS if you can’t get .NET 4.5. You may want to run "aspnet_regbrowsers -i" after installing the fix if you're having trouble.

  • 2836939 .NET 4 - Win7SP1/Win2K3SP2/Win2K8R2SP1/Win2K8SP2/VistaSP2/WinXPSP3
  • 2836940 .NET 3.5 SP1 - Win2K3SP2/Win2K8SP2/VistaSP2/WinXPSP3
  • 2836941 .NET 2.0 SP2 - Win2K3SP2/WinXPSP3
  • 2836942 .NET 3.5 SP1 - Win7SP1/Win2K8R2SP1
  • 2836943 .NET 2.0 SP2 - Win7SP1/Win2K8R2SP1
  • 2836945 .NET 2.0 SP2 - Win2K8SP2/VistaSP2
  • 2836946 .NET 2.0 SP2 - Win8RTM/WinRTRTM/Win2K12RTM
  • 2836947 .NET 3.5 SP1 - Win8RTM/WinRTRTM/Win2K12RTM

You really shouldn’t be "sniffing" browsers, you should check for the existence of features in your browser. There have been a number "mobile browser" files, including one I used 4 years ago.

If you are using a custom browser definition file (and perhaps forgotten about it) you may STILL see a problem with IE10 or IE11 because you've got your own overriding custom browser sniffing regexes in there. Either remove the need for a browser definition file (ideal) or open up your custom file and remote the IE portion.

TL;DR Version

  • DO - Keep your Web Servers patched.
  • DO - Upgrade to ASP.NET 4.5 if you can.
  • DON'T - Use old Custom Browser Definition Files from years ago and expect them to work

Hope this helps.


Sponsor: Thanks to Red Gate for sponsoring the feed this week! Check out a simpler way to deploy with Red Gate’s Deployment Manager. It can deploy your .NET apps, services, and databases in a single, repeatable process. Get your free Starter edition now.

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

Generating complex math visualizations in SVG using C# and ILNumerics

October 17, '13 Comments [15] Posted in Open Source
Sponsored By

I was recently turned on to the ILNumerics library. It's a high performance math library for .NET developers that my math skills can barely comprehend. It has a clean and elegant syntax, but more importantly, it's visualization graphics engine is thoughtful, flexible, and well-factored.

Having worked on a lot of websites, including ones that do a lot of backend image generation, resizing and analysis (like check imaging almost 10 years ago) I was impressed at how easily I was able to get an equation onto a basic website with ILNumerics and SVG.

Of course, it's not just a web library, in fact, most of the samples are WPF and WinForms, so it's an engine that you can use anywhere. Regardless, as a web person, I wanted to see how quickly I could get something into my browser.

The ILNumerics website has a cool sample 3D graph on their home page that was generated with this code:

var scene = new ILScene {
new ILPlotCube(twoDMode: false) {
new ILSurface(ILSpecialData.sincf(40, 60, 2.5f)) {
}
}
};
scene.First<ILPlotCube>().Rotation = Matrix4.Rotation(
new Vector3(1f,0.23f,1), 0.7f);
scene;

However, you'll notice in their sample they just end with the variable "scene." That's a no-op there, but it's their coder way of saying "at this point, the scene variable holds a representation of our plot. Do with it as you will."

NOTE: Do check out their home page...the little sample there is deeper than you'd think. The dropdown shows they can generate PNGs, JPGs, JPG HD, SVG, but also "EXE." Hm, download a random EXE from the internet? Yes please! ;) Take a risk and you'll get a nice self-contained EXE visualizer that not only renders the graph but lets you rotate it. You can download the ILView 3D viewer and play around, it's harmless - all the code for ILView is on GitHub! The best part is that it has a built in REPL so you can type your C# right there and see the results! It even runs on Linux and uses Mono. ;)

ILNumeric

Back to my goal. I want to use the library on a basic website and dynamically generate an SVG of this plot.

Here's the same plot, put inside an ASP.NET HttpHandler (which could also be made routable and used in ASP.NET MVC/Web Forms, etc.)

public void ProcessRequest(HttpContext context)
{
var scene = new ILScene {
new ILPlotCube(twoDMode: false) {
new ILSurface(ILSpecialData.sincf(40, 60, 2.5f)) {
}
}
};
scene.First<ILPlotCube>().Rotation = Matrix4.Rotation(
new Vector3(1f, 0.23f, 1), 0.7f);

var driver = new ILSVGDriver(context.Response.OutputStream, 1200, 800, scene, Color.White);
driver.Render();
}

Here I'm passing context.Response.OutputStream to their ILSVGDriver and saving the result not to a file, but directly out to the browser. I could certainly save it to cloud blob storage or a local file system for caching, reuse or email.

using (FileStream fs = new FileStream(@"test.svg", FileMode.Create)) {
new ILSVGDriver(fs, scene: whateveryoursceneis).Render();
}

While a SVG is preferable, one could also make a PNG.

var driver = new ILGDIDriver(1280, 800, whateveryoursceneis); 
driver.Render();
driver.BackBuffer.Bitmap.Save("whatever", System.Drawing.Imaging.ImageFormat.Png);

Their docs are excellent and many include a similar interactive viewer within the website itself.

It's so much more than a plot visualizer, though. It reminds me a little of D3.js, except more math focused and less live-data binding. It's almost as flexible though, with many kinds of visualizations beyond what you'd expect.

3D graph that looks like a mountainDonut graph

Three 3D graphs in one plotTopographical plot

Infinite TrianglesHalf a sphere intersected by a blue gear

Here's the code to show a green sphere that's composed of triangles, but has the top chopped off, as an example. This is just 10 lines of code, and could be made less.

var scene = new ILScene(); 
// create a new sphere
var sphere = new ILSphere();
// the sphere is a group containing the Fill (ILTriangles)
// and the Wireframe (ILLines) of the sphere. Both shapes
// share the same vertex positions buffer. Hence, we only
// need to alter one of them:
using (ILScope.Enter()) {
// take the vertex positions from the Fill.Positions buffer
ILArray<float> pos = sphere.Fill.Positions.Storage;
// set all vertices with a Y coordinate larger than 0.3 to 0.3
pos[1, pos[1, ":"] > 0.3f] = 0.3f;
// write all values back to the buffer
sphere.Fill.Positions.Update(pos);
}
// add the "sphere" to the scene
scene.Camera.Add(sphere);
// add another light (for niceness only)
scene.Add(new ILPointLight() {
Position = new Vector3(-0, 1, -2)
});
// move the camera upwards
scene.Camera.Position = new Vector3(0,3,-10);
// display the scene
scene;

And this gives you:

Half a green sphere

It's a really amazing project. ILNumerics is GPL3 and also uses OpenTK for OpenGL bindings, and Mono.CSharp for C# compiling and evaluation. ILView is under the MIT/X11 license.

You can get it via NuGet with just "Install-Package ILNumerics." Check it out and tell your friends, scientists, and friends of Edward Tufte.


Sponsor: Thanks to Red Gate for sponsoring the feed this week! Check out a simpler way to deploy with Red Gate’s Deployment Manager. It can deploy your .NET apps, services, and databases in a single, repeatable process. Get your free Starter edition now.

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.