Scott Hanselman

A world of pretty cloud drive icons - SkyDrive, Google Drive, Dropbox, BitBucket and GitHub

April 24, '12 Comments [16] Posted in Musings
Sponsored By

Today Google Drive and Windows SkyDrive came out with clients for Windows and Mac. There's also SkyDrive apps for Windows Phone, iPhone, or iPad and OneNote apps that sync to SkyDrive for Windows Phone, Android,iPhone, or iPad.

I'm a paying DropBox customer myself with over 60 gigs in there. I also use BitBucket and GitHub for source code.

I also like tidy and pretty icons, for folders, programs and external drives. I made custom icons for the Visual Studio Command prompt as well as Visual Studio in PowerShell.

I put all these new cloud folders as well as my GitHub and BitBucket folders (these aren't custom apps, just folders where I keep my source repositories) in my favorites in Windows Explorer.

I made custom .ICO icons for GitHub and BitBucket from high-res PNGs. Just right click on a Folder, click Properties, then Shortcut Change Icon to select your custom icon.

Pretty Icons for all my Cloud Services

Select your icon from your folder properties as shown in this screenshot:

Checking a folder's icon

That DropBox icon isn't fitting in with my whole "Cloud Folder" aesthetic. I was going to make a custom DropBox icon by combining their icon along with the standard Windows Explorer folder icon but I double-checked the Dropbox.exe first. You never know if the designer may have left some optional or alternative views of an icon in the EXE. Plus we know that the DropBox folks pay attention to details.

I can see in %APPDATA%\Dropbox\bin\Dropbox.exe that there are other views of the main DropBox icon.

Ah, there are hidden DropBox icons!

Ah, that's much nicer!

Changing the DropBox icon to a folder

I put my custom icons up on SkyDrive.

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

Create a great mobile experience for your website today. Please.

April 23, '12 Comments [32] Posted in ASP.NET | HTML5 | Mobile
Sponsored By

People are fascinating with making mobile web sites. It's amazing that we're not impressed with the fact we carry tiny supercomputers in our pockets but we're amazed when a website looks decent on our phones.

There's a few directions you can go when going mobile for your site, and the key is finding balance. You can:

  • Do nothing. Your site will probably work on a mobile device but each day it will look worse and worse to a discerning public with increasing expectations.
  • Use Adaptive/Responsive Design. This is my favorite option. If your site is read-mostly (rather than a data-entry application) you can get a great experience on all devices by adaptively rendering your site based on screen-size. If you're focused on performance you can add a server-side component and resize image for mobile as well. Visit http://mediaqueri.es for inspiration.
  • Use a mobile framework. There's lots great frameworks like Sencha, Kendo, jQuery Mobile and others. These frameworks can get you near-native looking applications using HTML5 techniques.
  • Write a native app. For the time-being while it's cool to try to get native experiences using non-native tools, it's hard. The best native experience on a mobile device will remain a native-built application. This requires the most work with arguably the best experience. However, you CAN get 90-95% of the experience with less than 90% of the effort if you use some of these other techniques. Plus, you'll anger fewer users by not forcing them to download a crappy mobile app by just making a lovely mobile website.

image

If you take a moment and visit my site (this site) on your phone, or just resize the browser to a smaller size, you'll see that this blog is using a "responsive design" by designer Jeremy Kratz. The blog will change it's look based on if it's on a large monitor, an iPad or medium tablet, or a narrow phone. Watch the navigation bar turn into a drop down as the browser gets really narrow, for example.

My site's responsive design, as featured on the MediaQueri.es site

This was a relatively small - although thoughtful - change that instantly made my blog more accessible to the 8% of people who visit my site from a mobile device.

For larger data-focused sites, or sites that are "almost applications" you will want to consider a custom mobile version of your site. This is often done with the help of a mobile framework as mentioned above. I'll use jQuery Mobile as an example here. Let's say I have a conference browser application that looks like this on the desktop. I can navigate by date, speaker, tag, as well as view session details.

My site looks lousy on an iPhone

If I look at this same page on a mobile browser or something like the Electric Plum Mobile Simulator, it looks like crap.

Electric Mobile Simulator

I could use a mobile custom stylesheet just for phones, or I could use a CSS3 media query to make my existing stylesheet more mobile friendly...for example:

@media only screen and (max-width: 1024px) and (max-height: 768px)
{
/* do something, hide something, move something */
}

Or I could use a mobile framework along with a display mode in ASP.NET MVC to render a different view while still using the same controller logic. For example, I could have a _Layout.cshtml (that's like a "master page") and then a _Layout.Mobile.cshtml for mobile devices.

A Views folder with optional *.mobile.cshtml files for each mobile view

Mobile is just a included "display mode." You can create your own however you like. Here's one for Windows Phone. You could theoretically have ones like "tablet" or "nokia." I think you should have as few as you can get away with. Try to avoid complexity. This is just an example.

DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("WP7") {
ContextCondition = ctx => ctx.GetOverriddenUserAgent().Contains("Windows Phone OS")
});

That "WP7" string is what you put in place of * in filename.*.cshtml. So that's _Layout.WP7.cshtml, or Index.WP7.cshtml, etc. For my example I'll just make a _Layout.Mobile.cshtml that will automatically be used when most mobile browsers like Mobile Safari, Blackberry or Windows Phone hit my new site.

Here is a new _Layout.Mobile.cshtml as a starting point for my conference browser mobile site. Remember that you can just File | New Project in Visual Studio with ASP.NET MVC 4 and select Mobile Site to get started on your own.

<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="@Url.Content("~/Content/jquery.mobile-1.0.min.css")" />
<link rel="stylesheet" href="@Url.Content("~/Content/Site.Mobile.css")" />
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.6.4.min.js")"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function() {
// jQuery Mobile's Ajax navigation does not work in all cases (e.g.,
// when navigating from a mobile to a non-mobile page), especially when going back, hence disabling it.
$.mobile.ajaxEnabled = false;
});
</script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.mobile-1.0.min.js")"></script>
</head>
<body>

<div data-role="page" data-theme="a">
@Html.Partial("_ViewSwitcher")

<div data-role="header">
<h1>@ViewBag.Title</h1>
</div>

<div data-role="content">
@RenderSection("featured", false)
@RenderBody()
</div>

</div>
</body>
</html>

Now that I have a custom _Layout.mobile.cshtml for mobile, THIS file will be used when I hit the site on a mobile device rather than the main _Layout.cshtml.

OK, here my application is using the mobile layout, but the existing session HTML which looks, again, like crap. I'm using a mobile layout with a desktop view.

Electric Mobile Simulator Sessions

The desktop view for a session uses a table (and that's OK you tableless-CSS people because it's a table of information):

<table>
<thead>
<tr><th>Title</th><th>Speaker(s)</th><th>Date</th><th>Room</th><th>Tags</th></tr>
</thead>
<tbody>
@foreach(var session in Model) {
<tr>
<td>@Html.ActionLink(session.Title, "Session", new { session.Code })</td>
<td>@Html.Partial("_SpeakersLinks", session)</td>
<td>@session.DateText</td>
<td>@session.Room</td>
<td>@Html.Partial("_TagsLinks", session)</td>
</tr>
}
</tbody>
</table>

But I need a cleaner mobile layout that respects a smaller screen size. I'll copy my SessionsTable.cshtml and make a SessionsTable.Mobile.cshtml with contents like this:

@using ConferenceSessionsBrowserMvc4.Models
@model IEnumerable<Session>

<h2>@ViewBag.Title</h2>

<ul data-role="listview">
@foreach(var session in Model) {
<li>
<a href="@Url.Action("Session", new { session.Code })">
<h3>@session.Title</h3>
<p><strong>@string.Join(", ", session.Speakers)</strong></p>
<p>@session.DateText</p>
</a>
</li>
}
</ul>

There are a few things to note in this HTML. First, I like that it's not littered with CSS that describes the look and feel of the site, but rather it uses the data- attributes from HTML5 to express the "role" of an element. The UL uses data-role="listview" that tells me it's a listview but doesn't dictate what it looks like.

Within the UL I've got some LIs that use standard semantic tags like A, H3, and P along with STRONG and along with the default theme it looks nice on mobile.

A nice mobile view using jQuery Mobile

ASIDE: See the the "Displaying mobile view" link at the top of the image there? With ASP.NET MVC 4 you can make a View Switcher easily with a partial View like this:

@if (Request.Browser.IsMobileDevice && Request.HttpMethod == "GET")
{
<div class="view-switcher ui-bar-a">
@if (ViewContext.HttpContext.GetOverriddenBrowser().IsMobileDevice)
{
@: Displaying mobile view
@Html.ActionLink("Desktop view", "SwitchView", "ViewSwitcher", new { mobile = false, returnUrl = Request.Url.PathAndQuery }, new { rel = "external" })
}
else
{
@: Displaying desktop view
@Html.ActionLink("Mobile view", "SwitchView", "ViewSwitcher", new { mobile = true, returnUrl = Request.Url.PathAndQuery }, new { rel = "external" })
}
</div>
}

And a ViewSwitcherController to change the "overridden" browser when you click the link. This is all in the jQuery.Mobile.MVC NuGet package that we will update for the final release.

public class ViewSwitcherController : Controller
{
public RedirectResult SwitchView(bool mobile, string returnUrl) {
if (Request.Browser.IsMobileDevice == mobile)
HttpContext.ClearOverriddenBrowser();
else
HttpContext.SetOverriddenBrowser(mobile ? BrowserOverride.Mobile : BrowserOverride.Desktop);

return Redirect(returnUrl);
}
}
OK, back to the Dates view. I can apply the same data- jQuery Mobile techniques to other screens, like the list of dates. I've got a data-role="listview" and a data-role="list-divider" as the dates change.
@model IEnumerable<DateTime>

@{
ViewBag.Title = "All dates";
DateTime lastDay = default(DateTime);
}
<ul data-role="listview">
@foreach(var date in Model) {
if (date.Date != lastDay) {
lastDay = date.Date;
<li data-role="list-divider">@date.Date.ToString("ddd, MMM dd")</li>
}
<li>@Html.ActionLink(date.ToString("h:mm tt"), "SessionsByDate", new { date })</li>
}
</ul>

And get a nice result like this:

jQuery mobile applied to a ListView of dates

You can even get cool data filtering "as you type" features for jQuery Mobile list views by using data-filter="true" on a listview.

data-filter=true in jQuery Mobile

Because these templates are all mobile specific they don't affect the way the site looks on the desktop. Also because these are simply new views for existing URLs and Controllers, I don't need write any new business logic.

It is worth reminding you that it won't always be the case that an application will have its controllers and URLs map neatly such that one desktop view = one mobile view. Sometimes you may need to split up a complex single page desktop interaction into multiple mobile views. This conference application ended up with six views for desktop and six for mobile (Index, Dates, tags, Session(Detail), SessionsTable, and Speakers.) It's conceivable if the application included data entry that I would need to break up some views as well as create some custom methods just for mobile, although with some planning around User Experience you can usually keep this to a minimum.

If the default browser sniffing that decides what's mobile and what's not isn't enough for your project, consider using a 3rd party database of mobile devices like the one provided by 51degrees.mobi. Their 51degrees.mobi mobile framework will help your site adapt to support all mobile devices as they include a database of devices as well as their capabilities. They can even compress images and improve low-bandwidth performance.

They have a NuGet package I can install like this:

51degrees.mobile mobile framework for ASP.NET

51Degrees and libraries like it will add new capabilities to the Request.Browser object. These are just a few examples, there's dozens.

Screen Width: <% =Request.Browser.ScreenPixelsWidth %></li>
Screen Height: <% =Request.Browser.ScreenPixelsHeight %></li>
LayoutEngine: <% =Request.Browser["LayoutEngine"] %></li>
AnimationTiming: <% =Request.Browser["AnimationTiming"] %></li>
BlobBuilder: <% =Request.Browser["BlobBuilder"] %></li>
CssBackground: <% =Request.Browser["CssBackground"] %></li>
CssBorderImage: <% =Request.Browser["CssBorderImage"] %></li>
CssCanvas: <% =Request.Browser["CssCanvas"] %></li>
CssColor: <% =Request.Browser["CssColor"] %></li>
CssColumn: <% =Request.Browser["CssColumn"] %></li>
CssFlexbox: <% =Request.Browser["CssFlexbox"] %></li>
CssFont: <% =Request.Browser["CssFont"] %></li>
CssMediaQueries: <% =Request.Browser["CssMediaQueries"] %></li>

You can use this information on the server side to augment these other techniques. For example, if the requesting device supports CssMediaQueries, great, you should use them, but it not, perhaps you need to fall back to another technique. If you know the screen-size on the server and it's below a certain size you can resize the image before you send it.

Thanks to Jon Galloway, Damian Edwards and Erik Porter for their brainstorming and Steve Sanderson for the sample application.


Sponsor: I want to thank my friends at DevExpress for sponsoring this week's feed. Do take a moment and check out a free trial of CodeRush, one of my favorite products!  Introducing CodeRush by DevExpress. The Visual Studio add-in that helps you create more reliable applications. Tools to build & maintain your code without getting in the way of your IDE.

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

Root Cause Analysis for Toddlers and Medical Eyeball Tweezers

April 19, '12 Comments [51] Posted in Musings
Sponsored By

Eye picture from BMJThis has been a very stressful week. Our four year old had a piece of metal in his cornea. Twice. That's two different pieces over multiple days in the same eye. In one week. He's great now, no lasting damage and no vision trouble. That's not his eye pictured at right.

He was having trouble sleeping and was complaining about his eye hurting. He's had eyelashes in his eye before so we check it out, didn't see much, and flushed with saline eye drops anyway. He wouldn't fall asleep and kept waking in a start. About 1 in the morning it was clear that he was in some considerable pain and wasn't going to sleep. We looked again with a bright flashlight. Turns out that little kids not only don't like standing still but they don't like staying still with a bright light in their eyeball. We did get a hint of something, right on the surface of the eye next to the pupil. I couldn't get it out with the edge of a tissue so we headed to the emergency room.

The very kind doctor at the ER took a look with a slit lamp and exclaimed: "It's something metal!" She numbed the eye and tried to remove it but quickly decided it was out of her expertise and call the on call ophthalmologist. They woke up the eye surgeon and brought him in to check it out. We found ourselves with a tired toddler and a tired (but kind) eye doctor after 2am trying to get this metal out of his little eye with some kind of special set of medical eyeball tweezers. Again, may I mention that while my son is and was a trooper, no one likes to hear "eyeball" and "tweezers" in the same sentence, especially when combined into one super scary term: "medical eyeball tweezers."

His patience exhausted, my baby fell asleep crying. The doctor said I got all the metal and 80% of the rust.

Rust? Yes, rust. Rust that looks roughly like this.

Rust rings in your eyeball

Iron rusts in the eye very quickly and creates a rust ring (iron oxide). That ring often needs to be removed as well usually with the equivalent of an "eyeball Dremel tool," like this one below.

Eye Dremel picture from @mycastleproject

We were told to return the following day to get the remainder of the rust. We went home, tired but feeling reasonably comfortable that this strange thing was a fluke and that everything would be cool. The following day an attempt was made to get the last bit of rust but bless him, he wouldn't stay still so the we and doctor decided against further trauma. The chances are that the very small bit of rust will just dissipate. If not, we'd deal with it later when he's older.

My son went to school and the next day came home complaining about his eye. The doctor had said it would feel like there was something in his eye (even though it had been removed) and that this was common. However, he couldn't sleep and insisted something was wrong. We have learned to listen to little people, even and especially at 2am.

There was something new in his eye - the same eye.

I could only assume that the doctor didn't get everything the last time. Off to the ER again (don't mess with eyes) but this time they were not wiling to wake up the eye doctor. We saw him a few hours later first thing in the morning. I asked if it was the same piece and he said, "no, it's the same eye but a different location. You can tell because the original rust ring is a marker."

He was shocked to say the least. "In 30 years I've never seen someone get something in their eye twice. Not even in people who grind metal for a living."

He tried to get it out but my baby wasn't having it. The decision was made (and not lightly) to use general anesthesia to perform the eye surgery procedure and get it out. This kind of thing requires one stays completely still and you just can't ask a 4 year old to do that.

I just couldn't get my head around the idea that this was a new piece of metal. What if a third one showed up? What was he doing or what was he around to cause this? Was he banging metal cars together? Was it shavings off his metal bed? Maybe sandbox sand being thrown in the air? Something from our new car?

My wife and I became obsessed with "root causing." I spent a day moving through my son's life, touching everything. Toys, beds, toothbrushes, car seats, furniture. No luck.

We were at the hospital yesterday and he was put under and had the procedure done. The doctor said it was successful and not only did he get th second piece of metal out but also cleaned up the now two rust rings.

We asked again, "How do we keep this from happening again?"

The doctor said, "You've got to find the cause or it very well could reoccur. The thing is..." he reiterated, "I've never seen this, even in metal grinders or folks in manufacturing."

We took baby home with a healthy dose of paranoia. Should he wear glasses until this is figured out? Then we had an idea. Where does a 4 year old come in contact with grinding metal. Why our son and not the other kids?

Wait. Metal grinders. Where does my son go where metal grinds together?

The playground swing. Specifically the tire swing. I've seen him spin on the swing for hours with his head parallel to the ground, eyes wide open looking at the clouds.

I went to the playground, found the swing and touched the metal ball where the hip joint fits into the bearings. My finger came out covered in what looked like glitter. Metal shavings. The tire swing joint was dry and cold - effectively a metal grinder rotating directly over his eyes.

There's nothing more satisfying than The Answer.

Tire Swing photo by Craigie3000. Used under CC.

I spoke to the principal of the school and he made some calls and actually spoke to the designer of the playground product who hooked him up with the designer of the swivel. They are swapping the Tire Swing Hanger for a Heavy Duty hanger that includes a rubber boot to cover the joint.Tire SwivelHeavy Duty Tire Swivel

This was a clear and satisfying end to a very painful experience for the little guy. I'm just happy we figured it out but I think we are going to be paranoid about eyeballs for a the foreseeable future.

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

Given I like reading Source Code by the fire with my smoking jacket and brandy snifter, a list of books

April 17, '12 Comments [34] Posted in Open Source | Source Code
Sponsored By

lilwaynesomecodeandsomebrandyJeff had a blog post yesterday (seems everything he writes in his retirement gets on Hacker News as well) about reading source code. While Jeff's post is largely a pull-quote of a post on Hacker News by Brandon Bloom, one bit stuck out to me as I'm sure it did to others.

"The idea that you'd settle down in a deep leather chair with your smoking jacket and a snifter of brandy for a fine evening of reading through someone else's code is absurd." - Jeff Atwood.

Absurd? Hardly. Nearly every programmer I've ever spoken to enjoys reading and discovering new code. I've been advocating that Developers need to read as much code as they write for at least half the time I've been blogging (10 years now, as of yesterday.) How could you not be excited about reading source with all the wonderful open source that's available in the world today?

In fact I have an entire category of my blog called the "Weekly Source Code" with 58 different specific entries at last code. That's 58 different great opportunities to read and learn from another programmer, some good some bad.

The idea that reading source code is absurd is really the wrong message to send. Here's a list of interesting books about source and source code that I'd recommend you settle down in your leather chair, stoke the fire and read.

Of course, you don't need to buy any of these books or pay for anything. Just read code. Read your coworkers code, your company's code, your favorite open source library's code. Don't stop reading code.

The Weekly Source Code was weekly but then become "whenever I get the time." Because of Jeff's article I'm going to get a smoking jacket and brandy snifter and start doing new Weekly Source Code posts every week. Ok, it will be a Code Zero snifter but you get the idea. Because you can't be a good writer coder if you aren't a good reader.

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

Visual Studio 11 Express for Web for Front End Development - JavaScript/HTML5/CSS3

April 14, '12 Comments [24] Posted in HTML5 | Javascript | Open Source
Sponsored By

I wanted to work through a new tutorial by former Microsoftie, now Googler Pete LePage along with Chris Wilson. They have a great lab called "WReader" that uses Ember, HTML5 Boilerplate, Moment.js, Bootstrap CSS and LawnChair.js that builds a single page JavaScript application over 12 exercises.

A few weeks ago a non-Microsoft developer saw a post I did on some new HTML5, CSS3 and JavaScript features in VS11 and mentioned he might want to use it over Dreamweaver. I thought that was cool because some client-side developers think VS is all server-side and too "industrial strength."

I wanted to see if VS11 Express Web (the free version) would work well for "front end" web development. This lab that Pete made is all client-side. It doesn't use ASP.NET or anything server-side that Visual Studio is typically built for. However, a lot of work has been done in Visual Studio lately to make web development easier and I wanted to see if it stood up, even when doing all client-side HTML/CSS/JS.

I downloaded Pete's Lab, opened Visual Studio and when Open Web Site and opened the first Exercise's folder.

Opening a folder as a web site

I right-clicked on Index.html and set it as the Startup Page for my project. You can set any page you like a the startup page and they Ctrl-F5 (or a button in the toolbar) will launch the browser without server-side debugging.

At the end of Exercise 2 you will have dynamically created feed items and bound them with a client-side template. Here's a screenshot of what that looks like.

Excercise Two completed and I've got a list of 10 RSS feeds in a list.

While I was typing up this exercise there were a few nice things about VS that made the experience pleasant. The JavaScript editor in VS11 is greatly improved and is actually running the JavaScript in the background as you are running it, so the intellisense autocomplete help is very useful, especially for a JavaScript newbie. It doesn't get everything, but it's VERY smart.

Nice JavaScript intellisense improvements in VS11

There are times when you're working in a JavaScript file that needs to know about objects in another file but the editor can't figure it out. You can add a "hint" or reference so Visual Studio can be smarter for you.

For example, I was using this Ember.js object and wasn't getting any help so intellisense just added all the info that it had.

Ember in VS without intellisense

You can drag a file from the Solution Explorer into your JavaScript file to make a comment that acts as a reference/hint to Visual Studio like this: /// <reference path="libs/ember-0.9.5.js" />. You can see the results below.

Ember in VS with intellisense

If adding that line bugs you, you can put all your references in a _references.js file and never look at it.

This was helpful to me when I got to adding moment.js as I could see what methods my Date had available:

Intellisense available on dates with VS11 and moment.js

Later in Exercise 2 I make a client-side JavaScript template like this with "mustache/handlebar style" expressions like {{ }}:

<section class="mainContent">
  <section class="summaries">
      <script type="text/x-handlebars">
      {{#each WReader.dataController}}
          {{#view WReader.SummaryListView contentBinding="this"}}
              {{content.title}} from {{content.pub_name}} on {{content.pub_date}}
          {{/view}}
      {{/each}}
      </script>
  </section>
</section>

However, Visual Studio syntax highlighting didn't look useful/pretty to me. This seemed like an opportunity to make it better.

A mustache template without syntax highlighting

I mentioned in an earlier post that we have the ability now to update the web editors (HTML, CSS, and JS) easier and more often now as the editors bits are implemented as extensions themselves. I asked the owner Mads Kristensen to prototype what "mustache" template syntax highlighting could/might/would look like if we did it. We'd want all the general templating libraries to work, like Mustache, HandleBars, JsRender, and others, even if templating as a concept changes or disappears.

Here's some of the prototype work he did tonight. This would make my client-side experience just a little nicer. These are screenshots of the private build he is messing with and he's trying different colors.

An example mustache template with highlighting

I like this one the best. I'm not digging the yellow. I like this more subtle approach.

A nice subtle mustache template

I was testing this lab on multiple browsers and switching back and forth between the Chrome Developer Tools and the Internet Explorer Developers Tools (F12). There's a nice feature in Visual Studio 11 that lets you quickly run your project in different browsers with this dropdown:

All your installed browsers in a list

But sometimes you want to run multiple browsers at the same time. There's a little known feature (I'm working with the team on making this more discoverable) where you can right-click on an HTML file and click Browse With, then "Ctrl-Select" multiple browsers:

browsewith

If you click Set as Default while there are multiple browsers selected it will change your toolbar and menu to say "Multiple Browsers." CTRL-F5 will then launch more than one browser at the same time.

Multiple Browsers selected in the toolbar

The UI is a little rough now but it's being improved. It's a really nice little feature and a time saver!

Later in the tutorial Pete includes the Twitter Bootstrap CSS and I wanted to change some of the default colors. You can click a color in the CSS editor and edit it interactively like this. It even does opacity.

The VS11 Color Picker for CSS Colors

I encourage you to go check out Pete's tutorial if you're interested in learning more about JavaScript, HTML5, Ember.js (and frameworks like it) and this emerging style of web development.

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

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