Scott Hanselman

CoffeeScript, Sass and LESS support for Visual Studio and ASP.NET with the Mindscape Web Workbench

July 22, '11 Comments [30] Posted in ASP.NET | ASP.NET MVC | Open Source | Tools
Sponsored By

imageThere's some really impressive stuff happening in the .NET Community lately. Folks are reaching outside their standard built-in tools and pulling inspiration from everywhere. It's been said that (some) Microsoft developers don't like to use tools or technologies that aren't built in to Visual Studio. However, myself and others have been pushing the concept of LEGO blocks snapping together. Rather than thinking of Visual Studio as a giant single block, consider it as a small block amongst many others. Feel empowered to choose the technologies that work for you and discarding the ones that don't. I talked about this LEGO analogy in my DevDays keynote in The Netherlands earlier in the year.

Snap in tools like the HTML5 Web Standards Update for Visual Studio, loggers/profilers/debuggers like Glimpse, MiniProfiler and ELMAH, Package Managers like NuGet and OpenWrap,  all work together to make your development experience more enjoyable (and some new Visual Studio Styles/Themes and a little fresh wallpaper never hurt either! You can even make VS2010 look like 2008 if it make you happy).

One of the most impressive (free!) tools I've seen lately is the Mindscape Web Workbench. It is a 100% free plugin for Visual Studio 2010 to provide CoffeeScript, Sass and Less editing.

What? CoffeeScript? Sass? Less? What are these silly names and why should I care? Well, remember when I blogged about "fanciful names?" These are some names you'll want to know about. Here's a little about each and how Mindscape makes them fun for Visual Studio Developers.

CoffeeScript

"CoffeeScript is a little language that compiles into JavaScript." I've blogged a few times lately about how JavaScript is becoming not just THE ubiquitous language on the web, but also a valid target for high level languages to compile to. Script# compiles C# to JavaScript, GWT compiles to JavaScript, ClojureScript compiles to JavaScript, etc. However, each of these languages has semantics that require some significant mapping to JavaScript. They aren't JavaScript and don't know about it.

Here's the difference with CoffeeScript. "The golden rule of CoffeeScript is: "It's just JavaScript". The code compiles one-to-one into the equivalent JS, and there is no interpretation at runtime."

CoffeeScript "uplevels" JavaScript to make it more expressive and more idiomatic. You know when you're explaining something and you can't think of a word? Or perhaps you don't know the right word? CoffeeScript adds those new words to JavaScript and you find yourself going, YES! That's what I meant to say!

For example, from their website, here's some CoffeeScript:

# Assignment:
number = 42
opposite = true

# Conditions:
number = -42 if opposite

And here's what it "compiles" into:

number = 42;
opposite = true;
if (opposite) {
number = -42;
}

So what, you say. How about:

# Existence:
alert "I knew it!" if elvis?

Turning into...

if (typeof elvis !== "undefined" && elvis !== null) {
     alert("I knew it!");
}

Now we're talking. See how one is more expressive (and more enjoyable) then the other? This has a multiplying effect and makes your CoffeeScript code more expressive and your resulting JavaScript more robust.

list = [1, 2, 3, 4, 5]

square = (x) -> x * x

math =
root: Math.sqrt
square: square
cube: (x) -> x * square x

cubes = (math.cube num for num in list)

becomes

list = [1, 2, 3, 4, 5];
square = function(x) {
return x * x;
};
math = {
root: Math.sqrt,
square: square,
cube: function(x) {
return x * square(x);
}
};
cubes = (function() {
var _i, _len, _results;
_results = [];
for (_i = 0, _len = list.length; _i < _len; _i++) {
num = list[_i];
_results.push(math.cube(num));
}
return _results;
})();


Remember how jQuery made you feel empowered? Released from tedious DOM code? Well, CoffeeScript does that for tedious JavaScript code.

Here's what it looks like in Visual Studio. Oh, yes.

CoffeeScript in Visual Studio

All this is enabled by the Free Web Workbench.

Sass

CSS is great and we all have a love hate relationship with it. When it works, it's great. Demos are nice, but the reality of CSS (much like that of JavaScript) is that it never quite reads like the fine poetry you were hoping for.

Two syntaxes are trying to improve on CSS in the same way that CoffeeScript improves on JavaScript. Remember that the reality is we can't change CSS and JavaScript, but we can change the Domain Specific Language that we write them in. You can't change Aseembler, but you can use C. Then layer in #defines, or perhaps just use C++...you get the idea. Up level your abstractions and favor the more expressive language.

Sass could mean Super Awesome Style Sheets. It's a meta-language on top of CSS. A better, redesigned CSS that is still a super set of CSS itself. CSS, cascading though it is, is still very flat.

If you write this SASS, it makes sense, doesn't it? It's intuitive and you might even think it's CSS as it is.

.fakeshadow {
border: {
style: solid;
left: {
width: 4px;
color: #888;
}
right: {
width: 2px;
color: #ccc;
}
}
}

Here's the resulting CSS:

.fakeshadow {
border-style: solid;
border-left-width: 4px;
border-left-color: #888;
border-right-width: 2px;
border-right-color: #ccc; }

This clean nesting works with #IDs of course as well such that this Sass:

#navbar {
width: 80%;
height: 23px;

ul { list-style-type: none; }
li {
float: left;
a { font-weight: bold; }
}
}

expands to this valid CSS:

#navbar {
width: 80%;
height: 23px;
}
#navbar ul {
list-style-type: none;
}
#navbar li {
float: left;
}
#navbar li a {
font-weight: bold;
}

Which would you rather write? I'm sold.

Sass uses an indentation syntax primarily but you can use brackets rather than indentations and semicolons rather than new lines. It's up to you. I like mine to look like nested CSS.

Your Sass files are converted into CSS as you click save in Visual Studio. It's a wonderfully clean integration.

Sass is sassy CSS

Sass is attractive because you really don't need to learn another syntax. You just use scoping and indenting rules you already know and you get cleaner CSS.

But, there's another alternative...

Less

Less extends CSS and adds more dynamic behaviors, variables, functions and more. Because it's more complex and a more dynamic translation, LESS actually runs on the client side and is supported by a client side JavaScript file called http://lesscss.googlecode.com/files/less-1.1.3.min.js.

Because of this, the Web Workbench doesn't do the same automatic developer-time conversion of LESS files. For me, this makes LESS (ahem) less attractive.

That said, you still these features from the Web Workbench, which is nothing to sneeze at.

  • Syntax highlighting
  • Intellisense
  • Warnings of syntax errors
  • Warnings of unknown variables and mixins
  • Go to variable or mixin definition

Here's an example LESS file...

@the-border: 1px;
@base-color: #111;
@red: #842210;

#header {
color: @base-color * 3;
border-left: @the-border;
border-right: @the-border * 2;
}
#footer {
color: @base-color + #003300;
border-color: desaturate(@red, 10%);
}

This is then compiled and results this CSS. Note what happened with functions, statements and variables:

#header {
color: #333;
border-left: 1px;
border-right: 2px;
}
#footer {
color: #114411;
border-color: #7d2717;
}

Interesting stuff.  I think it's important not only that you, Dear Reader, give this stuff a good hard look, but that you continue to look for ways that the open source community, both .NET and otherwise, are innovating. You maybe able to integrate these tools easily into your existing projects and not only have more fun but be more productive.

Thanks so much to the folks at Mindscape for releasing this free and elegant tool!

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

NuGet Package of the Week #9 - ASP.NET MiniProfiler from StackExchange rocks your world

July 22, '11 Comments [40] Posted in ASP.NET | ASP.NET Ajax | ASP.NET MVC | NuGet | NuGetPOW | Open Source
Sponsored By

Glimpse, MiniProfiler and ELMAH equals Love and Kittens (VENN DIAGRAM)I LOVE great debugging tools. Anything that makes it easier for me to make a site correct and fast is glorious. I've talked about Glimpse, an excellent firebug-like debugger for ASP.NET MVC, and I've talked about ELMAH, and amazing logger and error handler. Now the triad is complete with MiniProfiler, my Package of the Week #9.

Yes, #9. I'm counting "System.Web.Providers" as #8, so phooey. ;)

Hey, have you implemented the NuGet Action Plan? Get on it, it'll take only 5 minutes: NuGet Action Plan - Upgrade to 1.4, Setup Automatic Updates, Get NuGet Package Explorer. NuGet 1.4 is out, so make sure you're set to automatically update!

The Backstory: I was thinking since the NuGet .NET package management site is starting to fill up that I should start looking for gems (no pun intended) in there. You know, really useful stuff that folks might otherwise not find. I'll look for mostly open source projects, ones I think are really useful. I'll look at how they built their NuGet packages, if there's anything interesting about the way the designed the out of the box experience (and anything they could do to make it better) as well as what the package itself does.

This week's Package of the Week is "MiniProfiler" from StackExchange.

MiniProfiler for ASP.NET

Each are small bad-ass LEGO pieces that make debugging, logging and profiling your ASP.NET application that much more awesome.

So what's it do? It's a Production Profiler for ASP.NET. Here's what Sam Saffron says about this great piece of software Jarrod Dixon, Marc Gravell and he worked on...and hold on to your hats.

Our open-source profiler is perhaps the best and most comprehensive production web page profiler out there for any web platform.

Whoa. Bold stuff. Is it that awesome? Um, ya. It works in ASP.NET, MVC, Web Forms, and Web Pages.

The powerful stuff here is that this isn't a profiler like you're used to. Most profilers are heavy, they plug into the runtime (the CLR, perhaps) and you'd avoid messing with them at production time. Sometimes people will do "poor man's profiling" with high performance timers and log files, but there's always a concern that it'll mess up production. Plus, digging around in logs and stuff sucks.

MiniProfiler will profile not only what's happening on the page and how it renders, but also separate statements whose scope you can control with using() statements, but also database access. Each one is more amazing.

First, from an ASP.NET application, install the MiniProfiler package via NuGet. Decide when you will profile. You can't profile everything, so do you want to profile local requests, just requests from administrators, or from certain IPs? Start it up in your Global.asax:

protected void Application_BeginRequest()
{
if (Request.IsLocal) { MiniProfiler.Start(); } //or any number of other checks, up to you
}

protected void Application_EndRequest()
{
MiniProfiler.Stop(); //stop as early as you can, even earlier with MvcMiniProfiler.MiniProfiler.Stop(discardResults: true);
}

Add a call to render the MiniProfiler's Includes in a page, usually the main layout after wherever jQuery is added:

<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
@MvcMiniProfiler.MiniProfiler.RenderIncludes()
</head>

The, if you like, put some using statements around some things you want to profile:

public class HomeController : Controller
{
public ActionResult Index()
{
var profiler = MiniProfiler.Current; // it's ok if this is null

using (profiler.Step("Set page title"))
{
ViewBag.Title = "Home Page";
}

using (profiler.Step("Doing complex stuff"))
{
using (profiler.Step("Step A"))
{ // something more interesting here
Thread.Sleep(100);
}
using (profiler.Step("Step B"))
{ // and here
Thread.Sleep(250);
}
}

using (profiler.Step("Set message"))
{
ViewBag.Message = "Welcome to ASP.NET MVC!";
}

return View();
}
}

Now, run the application and click on the chiclet in the corner. Open your mouth and sit there, staring at your screen with your mouth agape.

Mini Profiler rocks your world with stats right in your page

That's hot. Notice how the nested using statements are nested with their timings aggregated in the popup.

If you want to measure database access (where the MiniProfiler really shines) you can use their ProfiledDbConnection, or you can hook it into Entity Framework Code First with the ProfiledDbProfiler.

If you manage connections yourself or you do your own database access, you can get Profiled connections manually:

public static MyModel Get()
{
var conn = ProfiledDbConnection.Get(GetConnection());
return ObjectContextUtils.CreateObjectContext<MyModel>(conn);
}

Or, if you are using things like Entity Framework Code First, just add their DbProvider to the web.config:

<system.data>
<DbProviderFactories>
<remove invariant="MvcMiniProfiler.Data.ProfiledDbProvider" />
<add name="MvcMiniProfiler.Data.ProfiledDbProvider" invariant="MvcMiniProfiler.Data.ProfiledDbProvider"
description="MvcMiniProfiler.Data.ProfiledDbProvider"
type="MvcMiniProfiler.Data.ProfiledDbProviderFactory, MvcMiniProfiler, Version=1.6.0.0, Culture=neutral, PublicKeyToken=b44f9351044011a3" />
</DbProviderFactories>
</system.data>

Then tell EF Code First about the connection factory that's appropriate for your database.

I've spent the last few evenings on Skype with Sam trying to get the EF Code First support to work as cleanly as possible. You can see the checkins over the last few days as we bounced back and forth. Thanks for putting up with me, Sam!

Here's how to wrap SQL Server Compact Edition in your Application_Start:

protected void Application_Start()
{
AreaRegistration.RegisterAllAreas();

RegisterGlobalFilters(GlobalFilters.Filters);
RegisterRoutes(RouteTable.Routes);

//This line makes SQL Formatting smarter so you can copy/paste
// from the profiler directly into Query Analyzer
MiniProfiler.Settings.SqlFormatter = new SqlServerFormatter();

var factory = new SqlCeConnectionFactory("System.Data.SqlServerCe.4.0");
var profiled = new MvcMiniProfiler.Data.ProfiledDbConnectionFactory(factory);
Database.DefaultConnectionFactory = profiled;
}

Or I could have used SQLServer proper:

var factory = new SqlConnectionFactory("Data Source=.;Initial Catalog=tempdb;Integrated Security=True");

See here where I get a list of People from a database:

 (45)

See where it says "1 sql"? If I click on that, I see what happened, exactly and how long it took.

SQL Profiler

It's even cooler with more complex queries in that it can detect N+1 issues as well as duplicate queries. Here we're hitting the database 20 times with the same query!

 (46)

Here's a slightly more interesting example that mixes many database accesses on one page.

Detecting Duplicates

Notice that there's THREE chiclets in the upper corner there. The profiler will capture GET, POSTs, and can watch AJAX calls! Here's a simple POST, then REDIRECT/GET (the PRG pattern) example as I've just created a new Person:

Creating a person and profiling them

Notice that the POST is 141ms and then the GET is 24.9. I can click in deeper on each access, see smaller, trivial timings and children on large pages.

I think that this amazing little profiler has become, almost overnight, absolutely essential to ASP.NET MVC.

I've never seen anything like it on another platform, and once you've used it you'll have trouble NOT using it! It provides such clean, clear insight into what is going on your site, even just out of the box. When you go an manually add in more detailed Steps() you'll be amazed at how much it can tell you about your side. MiniProfiler works with WebForms as well, because it's all about ASP.NET! There are so many issues that pop up in production that can only be found with a profiler like this.

Be sure to check out the MiniProfiler site for all the detail and to download samples with even more detail. There's lots of great features and settings to change as seen in just their sample Global.asax.cs.

Stop what you're right doing now, and go instrument your site with MiniProfiler! Then go thank Jarrod Dixon, Marc Gravell and Sam Saffron and the folks at StackExchange for their work.

UPDATE - July 24th

Some folks don't like the term "profiler" to label what the MiniProfiler does. Others don't like the sprinkling of using() statements and consider them useless, perhaps like comments. I personally disagree, but that said, Sam has created a new blog post that shows how to automatically instrument your Controller Actions and View Engines. I'll work with him to make a smarter NuGet package so this is all done automatically, or easily optionally.

This is done for Controllers with the magic of the MVC3 Global Action Filter:

class ProfilingActionFilter : ActionFilterAttribute
{
IDisposable prof;

public override void OnActionExecuting(ActionExecutingContext filterContext)
{
var mp = MiniProfiler.Current;
if (mp != null)
{
prof = MiniProfiler.Current.Step("Controller: " + filterContext.Controller.ToString() + "." + filterContext.ActionDescriptor.ActionName);
}
base.OnActionExecuting(filterContext);
}

public override void OnActionExecuted(ActionExecutedContext filterContext)
{
base.OnActionExecuted(filterContext);
if (prof != null)
{
prof.Dispose();
}
}
}

And for ViewEngines with a simple wrapped ViewEngine. Both of these are not invasive to your code and can be added to your Global.asax.

public class ProfilingViewEngine : IViewEngine
{
class WrappedView : IView
{
IView wrapped;
string name;
bool isPartial;

public WrappedView(IView wrapped, string name, bool isPartial)
{
this.wrapped = wrapped;
this.name = name;
this.isPartial = isPartial;
}

public void Render(ViewContext viewContext, System.IO.TextWriter writer)
{
using (MiniProfiler.Current.Step("Render " + (isPartial?"parital":"") + ": " + name))
{
wrapped.Render(viewContext, writer);
}
}
}

IViewEngine wrapped;

public ProfilingViewEngine(IViewEngine wrapped)
{
this.wrapped = wrapped;
}

public ViewEngineResult FindPartialView(ControllerContext controllerContext, string partialViewName, bool useCache)
{
var found = wrapped.FindPartialView(controllerContext, partialViewName, useCache);
if (found != null && found.View != null)
{
found = new ViewEngineResult(new WrappedView(found.View, partialViewName, isPartial: true), this);
}
return found;
}

public ViewEngineResult FindView(ControllerContext controllerContext, string viewName, string masterName, bool useCache)
{
var found = wrapped.FindView(controllerContext, viewName, masterName, useCache);
if (found != null && found.View != null)
{
found = new ViewEngineResult(new WrappedView(found.View, viewName, isPartial: false), this);
}
return found;
}

public void ReleaseView(ControllerContext controllerContext, IView view)
{
wrapped.ReleaseView(controllerContext, view);
}
}

Get all the details on how to (more) automatically instrument your code with the MiniProfiler (or perhaps, the MiniInstrumentor?) over on Sam's Blog.

Enjoy!

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

Scott's Wonderful Twitter Favorites - Link Roundup 2

July 21, '11 Comments [0] Posted in Blogging
Sponsored By

showhero[1]I realize that many (most) of you are not on Twitter. I am, however, on Twitter and I find it to be a joy. I have had a few complaints (just a few) because I tend to be random on Twitter. If you want only a stream of technical .NET resources, then don't follow me. However, if you want to follow the Whole Person, then please, join the fun.

The most wonderful part of Twitter is just letting it flow over you. I tend to discover lots of interesting and cool stuff. So much so that I've started "Favorite-ing" things I want to save for later. That means clicking the little Star icon. You can access any Twitter user's favorites by putting /favorites at the end of their URL, like http://twitter.com/shanselman/favorites. There are 3rd parties like FavStar that mine this information, both favorites (stars) and retweets (RTs) and then sort by popularity. You can see my most "popular" tweets here: http://favstar.fm/users/shanselman. These tend of be ones that folks want to save for later themselves.

So far I've blogged:

For the people that aren't on Twitter (or aren't on it as much as I am) I thought I'd do a post each week or so with a roundup of the most awesome links I've come upon that week on Twitter. One stop shopping for awesome. I'll also add some commentary about why it's awesome. These aren't all development centric, but they were interesting to me.


mrated: MetroTwit Show is mesmerizing. I can see it being used at trade shows and whatnot. Well done @longzheng and Co! http://is.gd/hWo0so

MetroTwit is a great Twitter client for Windows, and MetroTwit Show is kind of a Twitter client screensaver. It's fun to watch the tweets just move around and come and go. I think it'd be great for an office lobby of a company, or a conference! Really nice visualizations.


hugorodgerbrown: the current answers to this question are effectively parking a tank on your lawn -http://t.co/gFOHrBM "If licensing were free, what would be the downsides of using the Microsoft stack for a website?"

This twitter follower tweeted me to let me know an interesting discussion was happening on Quora, a Q&A site. While I didn't feel it was a "tank on my lawn," it did turn into a really good, constructive discussion about choosing a stack, AND I learned more about Quora.

image


rupl developer prank - Put this in your co-worker's user stylesheet: * {-webkit-transform: rotateZ(-.1deg); }

This is evil. If you want to really confuse a developer or designer, hide this line in their stylesheet and see if they figure out why things aren't "pixel perfect" anymore!


redditflipboard Putting on her serious face.: #reddit #flipboard http://bit.ly/o7snxB

You may hate animated gifs, but they are BACK and Twitter is full of them. Such old school fun! I'm starting to collect them again and throw them into DropBox. As Jeff Atwood says, "There is no problem animated GIFs cannot solve."

1cWSZ[1] 


Carnage4Life Nerdy proposals make me cry :) http://juliewillyoumarry.me/

This is a great little website and a video of the actual proposal. So clever. Of course, thanks to the ubiquity of the Internet, no one can ever do it again. Or dance in to Chris Brown's "Forever."

image


TheWordsmith215 "What you're comfortable with isn't the only thing you're good at." ~@markchappelle

Yes, Twitter is also filled with pithy quotes, but sometimes that's exactly what you need to hear.


codinghorror How much should you pay developers? http://t.co/zZnLcGm

Jeff Atwood blogs the Stack Exchange Developer Compensation document externally. While no actual numbers appear, it's still interesting to see what Jeff and Joel and friends value in an employee, including Modem Whistling.


GeeDee215 Make Your Kid A Writer http://t.co/LfOY2UZ

I would love for my kid to be a writer. Here's some tips from The Atlantic via Molly Backes:

Give her a notebook and five bucks so she can pick out a great pen. Insist she spend time with the family. It's even better if this time is spent in another state, a cabin in the woods, a cottage on the lake, far from her friends and people her own age. Give her some tedious chores to do. Make her mow the lawn, do the dishes by hand, paint the garage. Make her go on long walks with you and tell her you just want to listen to the sounds of the neighborhood.

Let her be lonely. Let her believe that no one in the world truly understands her. Give her the freedom to fall in love with the wrong person, to lose her heart, to have it smashed and abused and broken. Occasionally be too busy to listen, be distracted by other things, have your nose in a great book, be gone with your own friends. Let her have secrets. Let her have her own folder on the family computer


jonubian Being able to admit fault, accept accountability, and apologize is some high power s***

My twitter friend Jo breaks it straight down. This is the kind of quote I consider printing out, laminating and framing on my wall.


For more details on Twitter and my tips and tricks, I hope you'll enjoy these blog posts...

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

Fanciful names and acronyms often create LIFE

July 20, '11 Comments [24] Posted in Musings
Sponsored By

I was speaking with some folks at an unnamed technology company today about product names, and in a follow up email someone referenced a document that said:

Spell out the full name and use the acronym sparingly, so customers are able to clearly identify what it means. Fanciful names and acronyms often create confusion.

I jumped up on my desk and began ranting, if you can imagine. Here's some of the results of my rant. No blood was spilled. Well, a little.

Sugar Umbraco Node JS
Cucumber Raphael Glimpse
Wijmo Mochikit MooTools
Prototype Entity Framework Magic Unicorn Edition  Amplify JS
Kinect Skype NuGet 
Ninject Android Lync

What would you add, Dear Reader? What "fanciful product names" give you life?

Give me your suggestions, and I'll add them if they are LIFE!!!

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 Guide to Creating Quality Technical Screencasts

July 19, '11 Comments [17] Posted in Musings | Tools
Sponsored By

Screenshot of ScreencastI've had lots of people ask me to write up a guide to creating great technical screencasts. Here it is.

Initial Setup and Tools

You can use any number of tools for screen capture. They are largely the same. My preferred tool is Camtasia. Other valid tools are CamStudio (a free and open source tool) and Expression Encoder Screen Capture.

Windows Look and Feel

At the risk of sounding uptight, how you setup Windows and your environment is the difference between a professional and an amateurish screencast. It's shocking how many folks will start recording a screencast without changing a thing, then wonder why their 1600x1200 screencast looks bad on YouTube at 360p. If you find yourself doing screencasts a lot, considering making a Screencast user on your machine with these settings already applied.

Aspect Ratio and Resolution

First, decide on your aspect ratio. Is this a 4:3 Square (mostly) screencast or a 16:9 Widescreen screencast? Use 1024x768 for 4:3 and 1280x720 for 16:9. Run with normal 96dpi fonts.

If you're running a VM in a Window, that's cool, but really do take the time to resize it to exactly 1024x768. It can be maddening, especially with Virtual PC, but just do it. Then us the screencast software to record exactly a square of 1024x768

Background Wallpaper and Icons

Choose a standard looking background photo. I prefer to use one from http://www.vs2010wallpapers.com or the defaults that come with Windows 7. Avoid complex backgrounds as they don't compress well during encoding.

Hide your icons. Right click your desktop and hit View | Show Desktop Items. You can also use Stardock Fences and just double click to hide your icons. Either way, we don't need to see them.

Also consider whether we need to see your desktop at all. If it doesn’t add value, don’t show it on the screencast.

Fonts

Use the standard Visual Studio Font Colors. Remember that your audience likely hasn't changed theirs, and if you show them something fancy, they'll be thinking about how they get that fancy widget rather than your content. Go to Tools | Options | Environment | Fonts and Colors and click "Use Defaults."

In all your text editors, change your fonts to Consolas Size 15. It may seem counter-intuitive to have such large fonts but in fact this will make your code viewable even on an iPhone.

Remember, most video sites, including youtube, restrict the video player size to a maximum of around 850x480 unless you go full-screen or use a pop-out. Video is typically smaller than that. Use the font size recommended here, and use Camtasia’s zoom and highlight features during editing to call out key bits of code.

Don’t highlight code in the editor by selecting it with the mouse. It is typically hard to read editor selections in video. Instead, zoom and highlight in post.

Browser Setup

Unless your screencast is about using different browsers, pick a browser and stick to it. Hide your toolbars, clear your cache, history, and your autocomplete history. You'd be surprised how many inappropriate sites and autocomplete suggestions are published on the web forever and not noticed until it's too late. Don't view pr0n on your screencast machine.

Toolbars

Your browser shouldn't show any, and this is a good time to uninstall or hide whatever coupon-offering nonsense or McAffee pixel waster that you've stopped being able to see after all these years. Remember, default is the word of the day. Go Tools | Manage AddIns in IE9 or your favorite browser and remove it all.

If you are using Visual Studio or an IDE (Eclipse, Photoshop, etc) be aware of your toolbars. If you have made extensive customizations to your toolbars and you use them in the screencast, you are doing a great disservice to your audience. Put things to the default. If you use hotkeys, tell the audience, and use them for a reason.

Toast

Fred is online! Yes, but not during your screencast. Turn off Gmail, GChat, Messenger, Skype, Office Communicator and anything else that can "pop toast" during your screencast.

Clock and Notifications

Right click on the clock in Windows and click Customize Notification Area Icons. Remove the Action Center and Window Update and anything else that looks like it could bother you. Next, click on Turn System Icons On or Off. Turn off the clock! Why? You can't easily edit a screencast if there's a convenient time code in the corner that jumps around during your edits. Also, no one needs to know you're doing your work at 3am. I remove ALL notification icons. All of them, including Network and Sound.

Audio and Voice

Use a decent microphone. I use a Samson C01U. You can also use a USB headset-style microphone but be aware that breathing and "cotton mouth" really show up on these. Try moving the microphone above your nose so you aren't exhaling onto it directly. Use a pop filter to help eliminate plosives. You can get them cheap at a music store.

Be aware of your keyboard clicks. Some folks feel strongly about whether or not your keyboard can be heard during a screencast. Ultimately it's your choice, but you have to be aware of it first, then make a conscious decision. Don't just let whatever happens happen. Think about your keyboard sound, your typing style and your microphone, and listen to it a few times and see if you like how it comes together.

Avoid prolonged silence. There should be ebb and flow of "I'm saying this, I'm doing that" but not 10 seconds of "watch my mouse." Speak in an upbeat but authentic tone. Be real.

Don’t apologize or make excuses for mistakes – either work them in as something to learn from, or remove them completely.

If you make a mistake when speaking or demonstrating, clap your hands or cough loudly into the mic and wait a second before starting that portion over. When editing, the mistakes will show up as loud audio spikes, making it easy to find them.

Camtasia has decent automatic noise reduction. Use it. You’ll be surprised how much background noise your room has that you, but not your audience, will easily tune out.

If you must overdub a portion of the audio, sit in the same position you did while recording the original, and have the mic in the same spot. You want your voice to blend in seamlessly.

Preferred Output

Your screen capture should be produced at the highest reasonable quality as it will be compressed later when it's uploaded. Think of it like producing JPEGs. You can make a 5 megabyte JPG, but often a 500k one will do. You can make a 10 gig screen capture if you use uncompressed AVI encoding, but often a high bit rate MP4 will do.

The trick is to remember that your compressed screencast will be recompressed (copies of copies) when it is run through the encoding process.

Edit your screencast, if you do, in its recorded native resolution which hopefully is what you'll publish to as well. That means, record at 1024, edit at 1024, and publish at 1024. Let YouTube or your final destination do the squishing to smaller resolutions.

Personally, I like to know what's going on in my production process so I always select things like "Custom production settings" in Camtasia rather than presets. Ultimately you'll need to try and find what works for you.

When I know that my screencast will be encoding again by some postproduction system, first I'll ask myself, will they have my codec (compressor/decompressor) installed? That means, if they will have the TechSmith Screen Capture Codec used by Camtasia, then I can produce an AVI using this optimized codec, then THEY can make a MP4 or whatever.

But, if they don't, I consider what the post production system prefers, then give them a high bit rate QuickTime file, Windows Media file, or a MP4.

In my experience, if you use Windows, using WMV at the "best bit rate" gives a good balance between size and quality and can be easily squished downstream. Otherwise, use an H.264 encoder with a high bitrate for the video and 44.1kHz/441000Hz 16 bit mono for the audio.

Conclusion

Take some time. I put about an hour of work into a 5 min screencast. Your mileage may vary. Watch your video! Listen to it, and have your friends listen to it. Does it look smooth? Sound smooth? Is it viewable on a small device AND a big screen?

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.