Purify Your Razor Views With Tag Helpers

Hate mixing HTML and C# code in your Razor views? Work with designers who are markup ninjas, but scratch their heads at a view full of HTML helpers?

If so, then ASP.NET vNext has a feature for you. It’s called tag helpers. Tag helpers are custom HTML attributes or tags that you place in your view code. Using tag helpers, you can remove most of the C# code from your views. You can use them instead of HTML helpers. Like HTML Helpers, they render in the browser as standard HTML.

Note – This post covers Tag Helpers in the *-beta4 version of ASP.NET MVC.

All of the source code used in this post can be found on github at https://github.com/DustinEwers/dot-net-mvc-ui-demos. Look in the ASPNET5 folder.

Using Tag Helpers

Here’s an example of tag helpers in action:
Tag Helper View Photo

Notice the lack of C# code. Almost everything here is markup. All the HTML attributes that begin with “asp-” are tag helpers. This form is from the default ASP.NET template. For comparison, here’s a similar form (from the template in the last version of ASP.NET MVC) built using standard HTML helpers:
Standard View Photo

ASP.NET MVC comes with lots of built in tag helpers. Here’s some of the more notable ones:

  • asp-for -> Adds the model specific attributes to the HTML element. This replaces HTML Helpers like “Html.LabelFor” and “Html.TextBoxFor”
  • asp-controller and asp-action -> Works with your form tags to emit the appropriate route. These replace “Html.BeginForm”
  • asp-items -> Populates your dropdown list with items from the model.
  • asp-validation-for -> This attribute is used to populate the validation summary at the bottom of each element.

To use tag helpers in your project, you need to ensure the tag helper directive is in your project.

@addTagHelper "*, Microsoft.AspNet.Mvc.TagHelpers"

This directive points to the assembly that contains the tag helpers. This will give your project access to the standard ASP.NET tag helpers. You can either put this on the page that uses tag helpers, or you can put it in a global page like _ViewStart.cshtml. In the default template it’s in _GlobalImport.cshtml.

Making Custom Tag Helpers

The built in tag helpers are great, but you can also make your own tag helpers. A tag helper is a filter. They allow you to change the tag’s output while it’s being written to the view. Here’s a tag helper that creates a Bootstrap form group container:

    public class FormgroupTagHelper : TagHelper
    {
        private const string SizeAttributeName = "size";

        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            int size;
            Int32.TryParse(context.AllAttributes[SizeAttributeName].ToString(), out size);

            output.TagName = "div";
            output.Attributes["class"] =  string.Format("form-group col-md-{0}", size);
            output.Attributes.Remove(SizeAttributeName);
        }
    }

In this example, we change the name of the tag to a div, take a parameter from an attribute, add a css class, and remove the size attribute (a custom attribute we are using as a parameter).

To build a custom tag helper, you first need to build the tag helper class. Naming is important. The class name must end with “TagHelper” and inherit the TagHelper class. Then you can override the Process or ProcessAsync methods to add your custom logic. In the process method, you can alter the tag in any way you like. You can add or remove attributes and classes. You can also change the name of the tag.

After building your tag helper class, you need to add another addTagHelper directive to your view. This one will be for the assembly that contains the tag helper.

Then, you can use your tag helper in your views. Here’s our formgroup tag helper in action. The “size” parameter is used by the tag helper to set the container size for the form group.

<formgroup size="4">  
   <label asp-for="Address1"></label>
   <input asp-for="Address1" class="form-control" />
   <span asp-validation-for="Address1"></span>
</formgroup>  

And this is a whole page using both custom and built in tag helpers:
Custom Tag Helpers Photo

Conclusion

Tag helpers are a great new feature in ASP.NET vNext. With them, you can make views that look more like web pages than a weird hybrid of web pages and C#. Start up a project in Visual Studio 2015 or grab my demo code and check out tag helpers for yourself.

Additional Resources:
Demo Code

Tag Helpers Source Code

Visual Studio Goes Cross Platform with Visual Studio Code

Today, Microsoft kicked off Build 2015. Among the long list of exciting developments, Microsoft released the first cross platform version of Visual Studio. This new version of Visual Studio is called Visual Studio Code (or VSCode). It’s a lightweight code editor that runs on Windows, Linux, and OSX.

VSCode is built for Node.js and ASP.NET web app development, but it also support lots of other languages. In addition to the languages you’d expect from a Microsoft code editor (C#, JavaScript, TypeScript, F#, etc…), VSCode also supports a laundry list of other languages like C++, PHP, Python, Java, R, Objective-C, PowerShell, and Markdown ( full fist of supported languages ).

While VSCode isn’t a full IDE like the Visual Studio we all know and love, but it does have a lot of features that take it beyond a basic text editor.

Features:
  • Node.js debugging (ASP.NET 5 and other languages are on in progress)
  • Built in Git support
  • Multiple cursors, just like Sublime Text or Atom
  • Intellisense (for Node.js and ASP.NET)
  • Static Code Analysis and Refactoring (for C#, JavaScript, and Typescript)
  • Automatic updates
  • A fast release cadence, with releases coming every few weeks, instead of every few months.
  • Ability to customize keyboard shortcuts and add custom tasks

First Impressions

As a Mac owner who does ASP.NET development, I immediately downloaded a copy of VSCode and started playing with it. To me, VSCode feels like a cross between Visual Studio and Sublime Text (or Atom). On my Mac, it feels snappy and responsive. The intellisense is instant, but I’ve noticed some that it doesn’t include all the files (probably a setup issue on my part).

Visual Studio Goes Cross Platform with Visual Studio Code

VSCode also supports static analysis. This means you can find references and view definitions. I tried a “Find All References” and it took a little longer to pop up, but I like the inline reference window. “Goto Definition” and “Peek Definition” were instant, however.

Visual Studio Goes Cross Platform with Visual Studio Code

Multi-cursor is my favorite text editor feature. I bought a copy of Sublime Text specifically for it’s multi-cursor support. Multi-cursor has saved me tons of time. VSCode has the best multi-cursor support I’ve seen. ( More Info )

Visual Studio Goes Cross Platform with Visual Studio Code

Verdict

In the past few years, I feel like code editors have taken some huge steps forward. Sublime Text set a benchmark for excellence and several competitors have stepped up to the plate. The best one I’ve seen before VSCode was the Atom editor. While it wasn’t good enough to take me away from Sublime, I thought it was a solid piece of software.

At my day job, besides Visual Studio 2013, I use Sublime Text. Sublime has saved me countless hours of time by making repetitive code chores easier. VSCode does all the things I currently use Sublime for AND it has built in support for ASP.NET. I’m definitely going to add VSCode to my developer tool belt.

Where Can I Get It?

Visual Studio Code is available for free at https://code.visualstudio.com/

Documentation can be found at https://code.visualstudio.com/Docs

Book Review – Essentialism: The Disciplined Pursuit of Less

Book Review - Essentialism: The Disciplined Pursuit of Less

Being an adult is hard.

People are constantly vying for chunks of your attention. As you become more successful, you have to weigh lots of options. There are dozens of competing commitments and everyone is so busy trying to fit them all in. It’s maddening.

According to Greg McKeown, it doesn’t have to be this way. In his book, Essentialism: The Disciplined Pursuit of Less, he lays out a case for eliminating the unimportant things in your life, creating boundaries, and focusing on the important few over the trivial many. I recently listened to this book and found a lot of actionable advice.

This book is especially useful for people in the technology industry. We have to deal with lots of stress and constant change. It can be painful to keep up. This book provides some guidance on how to focus and get better results with less stress.

Summary

Less, but better.

The main point of the book is that life is a series of trade offs. You can make these trade-offs yourself or you can let other people make them for you. To control your destiny, you need to figure out what’s essential to you. Then, you can focus on these few essentials and eliminate everything else.

The book divides the process of focusing on the essential into three phases:

Explore

Block off time for exploration and play. Because you’re only going to focus on a few important things, it’s important to explore what’s available. Essentialists spend more time exploring because they don’t go “all in” on every task that comes their way. They have more time and incentive to explore.

Eliminate

Come up with a clear purpose for yourself and use that clear purpose to eliminate extraneous things from your life. Use extreme criteria to reduce the number of options available. Set boundaries for yourself and others. Learn to say “no” gracefully.

Execute

Build systems that reduce the friction of doing essential things. Build smart routines and prepare for setbacks. Focus on small wins to stay motivated.

In addition to the three steps, Essentialism offers specific techniques on how to achieve simplicity in your life. One example is zero based budgeting. Most organizations budget based on last year’s numbers. Zero based budgeting starts everything off at zero. Starting from a fresh place may lead to a budget that is more in line with the priorities of the organization.

Why should you read this book?

Technology professionals have to deal with tidal waves of information while balancing competing interests. Becoming an essentialist can make balancing those interests a lot easier. The essentialist philosophy has many practical applications to software professionals.

Here are some examples:

Requirements
In any given project, people want more features than there’s time to build. Essentialism illustrates the necessity of trade-offs and highlights the need to prioritize.

Career Skills Planning
Essentialism makes a strong case for being a “jack of all trades, master of one” approach to skills training.

Writing
Both code and prose become better with the elimination of extraneous items.

Lean Software
The Lean Software movement displays a solid grasp of focusing on the essentials.

Conclusion

Essentialism is a great read for any software developer or technology professional. It’s made me reevaluate my life and focus more on the essential. I highly recommend it.

How to Find The Best Tech News

How to Find The Best Tech News

Staying well informed is important to every professional, but how do you navigate the sea of infinite content? How can you filter out useful information from political nonsense, irrelevant junk, and clickbait? As someone who tries to focus the essentials, I don’t want to waste time separating the good from the bad. I want useful information that helps me in my life. To address this need, I’ve created an information funnel. I get news from a variety of sources and filter out the best stuff. In this post, I’m going to describe my information funnel and how you can use a similar process to get your own slice of news.

Define Goals

The most important thing to do when trying to find good information is defining what you are looking for and what you want to avoid. I’m looking for the following things:

  1. Useful articles on software engineering and ASP.NET
  2. Mobile platform how-to articles and major product releases (the Apple Watch, Xamarin Forms)
  3. Mobile trends and statistics (smartphone adoption)
  4. Bleeding edge future tech (self driving cars, 3D printed organs, etc…)
  5. Any new developer trends that I should check out (Ionic, Node.js)

This list represents a combination of things I need for my job, things I’m interested in, and potential future technical investments. I’m interested in a lot of different things, but the goal of this list is to focus on the technology.

I also want to avoid any unactionable news. If it doesn’t help me, then I generally don’t care about it. Heres some examples:

  1. Holy wars. I don’t care about which platform is “better”.
  2. Product reviews for things I’m not going to buy.
  3. Political drama.
  4. Uninformed opinions about the future.

Additionally, I don’t want to waste a lot of time finding news. Being well informed is a good, but this endeavor has diminishing returns. News is the information equivalent of carbs. You need a few, but not too many, and you want to stick with high quality sources.

Sources

The next step is to find decent news sources. This is a huge challenge because there are so many news sources. I get my news from a variety of places and have tried various methods of filtration to avoid the junk. I find that a combination of Podcasts, RSS, Twitter, and Prismatic works well for me. I get a variety of sources, which is important to avoid filter bubbles, but I also get some selection, so I’m not buried in junk.

Here’s a list of news sources I use now or have tried in the past:

Podcasts

I listen to a variety of podcasts on technology. Podcasts are great for getting in depth information about technical topics. Podcasts are also great because you can listen to them while doing other things, like driving to work. It’s a good way to multitask. The only disadvantage is that podcasts can be long. Here’s two of my favorite podcasts:

http://www.dotnetrocks.com/
http://msdevshow.com/

RSS Feeds

While other media has chipped away at my RSS feeds, I still subscribe to a few blogs. RSS is good for following specific products or people. The disadvantage is that you can get behind if you subscribe to too many news sources. I subscribe to less than 20 feeds.

Twitter

I get a lot of news on Twitter now. There are two things I like about news on Twitter. First, because it’s a social network, the good stuff tends to find it’s way to the top. Second, if I don’t pay attention to it for a while, I don’t have a huge inbox waiting for me when I come back. It’s also great for keeping up with organizations, like PEW or the Visual Studio team. The big disadvantage of Twitter is it can be a cesspool of ignorant political bickering. You can’t have a political discussion in 140 characters. The key is following the right people. I tend to unfollow folks who use Twitter for politics or idle chit chat.

Here’s a few accounts I like to follow:
https://twitter.com/pewresearch
https://twitter.com/Ionicframework
https://twitter.com/DotNet
https://twitter.com/singularityhub

Prismatic

I’ve recently started using Prismatic. It’s a service that delivers content to you based on your interests. It also tries to learn from you and deliver increasing good content (like Pandora for news). I’m still getting the hang of it, but Prismatic offers interesting articles. I check it every few days. The key to making Prismatic work is only starting with a few interests. I’m interested in a lot of things, so I checked lots of boxes and had to filter out a lot of noise. I ended up removing about 2/3’s of the interests I started with.

Flipboard also gives you streams of news based on your interests. It’s a beautiful app, but I didn’t like it. I could see why some people would prefer it to Prismatic though.

Hacker News

I used to read Hacker News, but it’s become too whiny and political for my tastes. Hacker news still has some good stuff though. I check it once in a while.

Google

Google News is good for getting news for a lot of sources, but it’s not specific enough for me. Google Now, however, has delivered some interesting content to my phone. It’s finds things related to what you’ve searched for or read in the past. My biggest Google Now win is when it delivered the answer to a problem I unsuccessfully searched for the previous day. It’s creepy, but amazing.

Reddit

I’ve recently started using Reddit. While I don’t use it for tech news, you could. There’s a subreddit (a topic specific group) for almost every technology. I found that the same thing that applies to Prismatic also applies to Reddit. It became much more useful once I stopped following so many topics.

Filtering

I prefer to do my reading in long sessions, so I use a “read it later” app to save links. I check the sources mentioned above when I get bored and save anything interesting to my “read it later” app of choice (Pocket). I ignore the vast majority of what I see, but filtering has gotten easier as I’ve gotten better at selecting news sources.

Archiving

If I find something good, I’ll save it to Evernote so I can refer to it later. I only do this for evergreen articles that won’t lose their value over time. Usually these are on business development, software best practices, or personal development.

Conclusion

Separating the signal from the noise is tough in the age of infinite content, but we have many tools at our disposal. What do you do to stay well informed?

How to Build HTML Helpers like Html.BeginForm() in ASP.NET MVC

If you’ve used ASP.NET MVC for more than five minutes, you’ve probably used the Html.BeginForm helper method.


@using (Html.BeginForm()) {
// Form Fields go here
}

This method wraps your content in a form tag. It’s a handy way to build forms, but we can also create our own html helpers for other container elements. In this post, I’m going to show you how to wrap a Bootstrap row in an HTML helper.

Bootstrap, the UI library that comes with .NET, makes it easy to build professional looking web applications. One of it’s primary disadvantages, however, is that you have to write a lot of markup to get your layouts to work correctly. We can reduce this by creating a custom HTML Helper that works like Html.BeginForm().


@using (Html.BeginRow()) {
// Grid content goes here
}

Step 1

Create a Private Class that implements IDisposable. Have the constructor take a TextWriter object. Set the dispose method to use the text writer to output the closing tag for the row.


private class RowContainer : IDisposable {
    private readonly TextWriter _writer;

    public RowContainer(TextWriter writer) {
        _writer = writer;
    }

    public void Dispose()
    {
        _writer.Write("</div>");
    }
}

Step 2:

Create an HTML helper extenstion method that creates the beginning tag and returns the object created in Step 1. You can use ViewContext.Writer to directly output the markup.


public static IDisposable BeginRow(this IHtmlHelper htmlHelper, string cssClass = "") {
    var writer = htmlHelper.ViewContext.Writer;
    writer.WriteLine(string.Format("<div class='row{0}'>", cssClass));
    return new RowContainer(writer);
}
 

Step 3

Use the helper in your Razor view with a using statement, just like BeginForm(). When the using statement disposes the returned object, it’ll close out the tag.


@using (Html.BeginForm()) {
// Form Fields go here
}

Additional Information

Full Code

How the Monty Hall Problem Can Make You a Better Software Developer

Being called the smartest person in the world makes you huge target for trolls. Marilyn vos Savant was listed in the Guinness Book of World Records under “Highest IQ”. This propelled her into the national spotlight. She then proved that IQ doesn’t mean everything by becoming columnist for Parade. The listing also made her a popular target of criticism, especially by academics. There are whole websites devoted to proving her wrong. This is not one of them. This is a story about how she was right and what we, as software developers, can learn from her experience.

How to Play “Let’s Make a Deal”

The Monty Hall problem is a famous math problem that’s based on an old game show called “Let’s Make a Deal”. The game begins with three doors. One of the doors has a fabulous prize. You don’t know what’s behind any of the doors and each door has an equal chance of containing the prize. You are then asked to select a door. After selecting your door, the host of the show reveals one of the other losing doors. You are then given the option to switch.

The question is:

Would switching doors give you a better chance of winning the prize?

The intuitive answer is that switching doors provides no benefit. Remove one door and your 1 in 3 chance becomes a 1 in 2 chance of winning. Since each door has an equal chance of being correct, the remaining door isn’t any better than the one you picked. This is the answer most people come up with when they first hear this problem.

This logic, while intuitive, is flat wrong.

The correct answer is that switching gives you a 2/3 chance of winning, as opposed to your 1/3 chance you have sticking with your door. The key to this problem is that revealing one of the incorrect doors doesn’t change the initial probability. You already know one of the doors is going to be wrong. What is important is that the host is basically giving you the option to select two doors instead of one.

Here’s another way to think about it. Switching and losing means that your initial selection was the right one. Your probability of winning with your initial selection is 1/3. Thus, the probability of you losing when you switch is 1/3, which means your probability of winning is 2/3.

If you still don’t believe me, the Khan Academy explains this problem well:
https://www.khanacademy.org/math/precalculus/probcomb/dependentevents_precalc/v/monty-hall-problem

The Time the Smartest Person in the World Got Flamed by Everyone

Marylin vos Savant answered this same question in her column in 1990. Even though she was correct, the public sent her a truckload of hate mail. Many academics also piled on the criticism.

Here’s a sample of the feedback she received (Source):

Since you seem to enjoy coming straight to the point, I’ll do the same. You blew it! Let me explain. If one door is shown to be a loser, that information changes the probability of either remaining choice, neither of which has any reason to be more likely, to 1/2. As a professional mathematician, I’m very concerned with the general public’s lack of mathematical skills. Please help by confessing your error and in the future being more careful.

Robert Sachs, Ph.D.
George Mason University

May I suggest that you obtain and refer to a standard textbook on probability before you try to answer a question of this type again?

Charles Reid, Ph.D.
University of Florida

And my personal favorite:

You made a mistake, but look at the positive side. If all those Ph.D.’s were wrong, the country would be in some very serious trouble.

Everett Harman, Ph.D.
U.S. Army Research Institute

It took Marylin several tries to explain the concept well enough for the majority of her readers to understand it. I found her explanation to be clunky, so I posed the problem to my Facebook friends. What resulted was the longest comment string I’ve had in a long time. My friends, several of whom have advanced degrees, had a tough time with the problem. The people who knew the correct answer had a tough time explaining it to the doubters.

What can this story teach us about building better software?

There are several lessons this story can teach us about psychology, thinking things through, and humility.

1. People are bad at estimating risk

This story illustrates that people are not good at understanding probability. There’s a whole slew of cognitive biases (brain fails) related to estimating probability.

List of Cognitive Biases

This is important to software development because much of what we do is estimate and mitigate risk. For example, mitigating security risks is incredibly important. Due to our inability to measure risk well, we may spend resources fixing low risk problems that were recently featured in the news instead of fixing high risk issues.

Risk also factors into software estimation. People are terrible at estimating how long it takes to do anything over a day. This is why agile software projects measure tasks using relative complexity (story points, T-shirt sizes, etc…) instead of hours. Agile projects also break down work into bite sized pieces, which are easier to comprehend.

2. Watch out for red herrings

Another important aspect of software development is filtering out irrelevant information. In the Monty Hall problem, the host opening the losing door doesn’t change the probability. You already knew one of the doors was a losing door. I find that it’s important to remember this when I’m debugging code. Good testers tend to report more information than you need and it’s up to you to figure out what’s useful and what’s not.

3. Be skeptical of “experts”

Many of Marylin’s critics were highly educated. All three of the quotations I mentioned were from PhD’s, including one professional mathematician. In our society, we tend to take the opinion of experts at face value. Pew Research recently did a survey on the beliefs of scientists vs the beliefs of the public. (link) This survey was widely reported on.

While the opinion of experts is vital, remember that they specialize in narrow areas. Any opinions they have outside of those areas should be subject to the same scrutiny that you give any smart person. Too often, people who are experts in one area are considered experts in other areas as well. A good example of this is when the media asks famous actors about their opinions on political issues. The tendency to allow irrelevant traits, such as beauty or skill in an unrelated field, to effect our judgement someone’s ability is called the halo effect.

You can use the halo effect to your advantage. Dressing sharp and being a good conversationalist can increase your credibility. While it’s acceptable to go a tech conference in a t-shirt and jeans, people will think you are more professional if you wear something nice.

The halo effect also applies to software. In the book Emotional Design, Don Norman explains how people find aesthetically pleasing objects to be more effective. When building your own software applications, pay attention to the design of the interface. Making things look good will make your software appear to be more useful.

4. Don’t be mean.

When doling out criticism, be nice. It hurts a lot less if you’re later proven wrong. This doesn’t mean you should sugar coat things, but you can deliver sharp criticism without being mean about it. Many of the people who wrote in nasty comments ended up apologizing for it once they realized their mistake.

Conclusion

The story of Marilin vos Savant and the Monty Hall problem has many lessons for software developers. If you want to learn more about the topics in this post, check out the resources below.

Khan Adademy: Monty Hall Problem
Maylin vos Savant: Game Show Problem
List of Cognitive Biases
The Availability Heuristic
The Halo Effect
Emotional Design (Amazon)

Legacy Systems, Legacy Thoughts

There’s nothing like replacing a legacy software system to stoke the fires of self-righteousness. You get to pull some poor users out of the dark ages and save them from a system may have been state of the art last decade, but is junk now. (Ignoring the fact that the old system lasted that long because it did what it what the users wanted it to do.) It’s especially fun when the old system is so laughably bad that it was obsolete the day it was written. Unfortunately, these projects come with a few pitfalls.

The first pitfall is that you can end up building the same legacy system in a new technology. It’s hard to transfer old paradigms into new ones and if you’re not careful, you can end up repeating old mistakes. I worked at a company that was creating an ASP.NET web app built over an existing database. Many of the tables in this database had no keys or relational data. The original system was built on a mainframe using flat files. When that system was upgraded in the 90’s, the flat files were just copied over. There was no regard to modern relational database structuring. When the ASP.NET version came along, the plan was to just copy over each of the old pages, one by one. Management didn’t take modern web and object oriented practices into consideration. Needless to say there was some debate between the developers and management.

The second pitfall can come while gathering requirements. When gathering requirements for the new system, it’s easy (and often correct) to reference the old system. There are two problems using the old system as the primary reference for requirements. First, the system sometimes does things a certain way because of technical constraints. I once worked on replacing a system that had lots of batch processes. Many of those processes were not needed because modern systems were fast enough to process those records on the fly. Second, many times, old systems don’t reflect the business practices of people who use them. There are lots of instances where users have to do something convoluted to get their old system to behave how they need it to. Watch out for these types of scenarios, fixing them is a good way to score brownie points with your customers.

The third pitfall happens when the builders of the new system don’t recognize the advantages of the old system. In the system I mentioned in the first point, the legacy system allowed for rapid keyboard entry. The new system, being a web application, did not optimize for keyboard entry. In the beginning, the developers ignored the users because of the “obvious” superiority of the new way of doing things. Eventually, we realized our error and created a keyboard entry optimized set of web controls. The users were much happier. While it may be fun to mock the old system, you should also pay attention to your users and make sure you aren’t creating a system that’s worse than what they started with. Just because it’s pretty and new doesn’t mean it’s good for the customer.

In summary:
1. Make sure your new system is using new paradigms. Don’t repeat legacy design.
2. Be careful when gathering requirements from the old system. Especially when it comes to implementation details.
3. Don’t make a new system that’s worse than the system you’re replacing.

How I Build Tech Talks: Part 1

How I Build Tech Talks: Part 1

Last year, I created my first tech talk and delivered it to several venues. I enjoyed the experience, so I decided to produce a new talk this year. This time though, I want to document the process of building the talk while I’m working on it. I think it’s important to see things unfold while they happen. Often, you see a polished talk and you don’t see the work that has gone into it. This isn’t meant to be a list of recommendations from on high, but a log of how I like to build talks. Feel free to use what works and forget what doesn’t.

Qualifications

Last year, I gave two versions of my D3.js talk in five different venues. I’ve also delivered several talks at work. Additionally, I did speech and debate in college for two years. While I’m no Scott Hanselman, I know my way around a lectern.

Step 1: Topic selection

Last year, I picked a topic I didn’t know much about (D3.js). I picked that topic because I knew building a talk would force me to learn about it. This year, I want to deepen my understanding of a topic I have experience with. I work with ASP.NET MVC in my current job. Additionally, I enjoy building UI components. When I started using ASP.NET MVC a few years ago, I had a hard time finding information. The books on MVC cover the basics well, but the reference material is incomplete. (Example) Doing a talk on building UI in ASP.NET MVC would deepen my own knowledge while helping others.

Building UI in ASP.NET MVC is a broad topic, so I drafted a list of subtopics to help me narrow my scope down.

Here’s my, clustered into similar topics:

HTML Helpers
Editor and Display Templates
Custom Validation

Grunt / JS automation
LESS and SASS
Bundling and Minification

Web Performance

UI Testing (like Selenium)
JavaScript Testing (like QUnit)

That’s way too many things for an hour long talk. Each of the above clusters could be it’s own talk. To narrow the scope, I’m going to remove anything that doesn’t have to do with building UI components. This leaves me with the following list:

HTML Helpers
Editor and Display Templates
Custom Validation

Step 2: Generate a Theme

Now that I have a topic list, I want to create a theme for the talk. A theme gives structure to the talk and provides a narrative for people to latch on to. I believe that in software development, you should bake good defaults into easy to use components. This lowers the cost of development and increases the quality. Good components allow you to create a great user experience without having to drop a ton of code on each page. My theme for this talk is going to be how to build better software in less time.

Another thing I’m trying to do with this talk is build in more stories. Stories are one of the primary ways people communicate. Studies show that stories engage emotions, which provides a stronger connection than raw data.

Step 3: Generate an Abstract

The next step is generating an abstract. An abstract is a summary of you talk that you can submit to conferences and user groups. It’s important to have a strong abstract because that’s how your talk is picked by conference organizers.

Keys to a Good Abstract

  1. A catchy title.
  2. A clear benefit to the audience.
  3. A summary of the topic.

Here’s my abstract:

ASP.NET MVC UI Recipes: Build Better Interfaces With Less Code

Who doesn’t want to get more done in less time?

ASP.NET MVC gives us an excellent toolset for building web applications. Unfortunately, due to it’s rapid evolution, good documentation is hard to find. However, using some simple techniques, you can build user interface components that can speed up development while maintaining a clear separation of concerns. In this presentation, we’ll learn how to build custom controls, templates, and custom validation. Save time while creating cleaner code.

Step 4: Make An Outline

The next step is building an outline. I don’t memorize my speeches, so the outline is what I study when I prepare. I use my outline to put my topics and demos into a logical structure. I tend to capture a lot of detail in my outlines and then make a simpler outline for reference. I haven’t finished my outline yet, so I’m not going to share it.

Conclusion

This is the first in a series of blog posts documenting my process for building tech talks. As I mentioned before, feel free to use what works and forget what doesn’t.

Telling Stories With Data and D3.js (Video)

If you missed out on my D3.js talk from last year, the fine people at MadJs recorded it.

Psychology for Software Developers: Dunning-Kruger Effect

The more I learn about software development, the more I notice the things I don’t know. Each tactic I pick up or lesson I learn just leads to more questions. It’s like lighting a candle in the dark and realizing that you’re in a room full of doors. Then, as you open each door and turn on the light, you find more rooms to explore. When I started out, I was so sure of myself. Each problem had the “one right way” solution. Now, when I see a problem, I see several imperfect solutions, each with their own trade offs.

This seems like a common problem.

John Sonmez feels the same way:
Simple Programmer: The More I Know, the Less I Know

So does Scott Hanselman:
I’m a Phony. Are You?

They aren’t the only ones either.

Psychologists call this the Dunning–Kruger Effect.

The Dunning-Kruger Effect is when unskilled people overestimate their abilities and skilled people underestimate their abilities. As you become better at something, you realize how little you know. It’s like getting to the top of the mountain only to find that you are at the bottom of a way bigger mountain. It sucks.

This concept has huge implications in software development. Software development is a complex field filled with people who have strong opinions. This creates situations where confident, unskilled people have an advantage when determining technical direction. This can lead to poor choices and technical debt. It’s easy to trust someone who’s confident over someone who isn’t sure of the right answer. Even when not being sure of there is a right answer is the right answer. (This explains most of politics, but I digress…)

What can we do to counter this effect during technical discussions?

If you’re unsure of yourself, don’t be afraid to present the facts and make your case anyway. It’s better to be wrong than to allow bad ideas into your project. You probably know more than you think.

If you’re confident of a particular solution, look for alternative view points. Let the other side make their case. Realize that the person who has a few years of experience on you may know something you don’t. Even if they have trouble articulating that knowledge, it’s your responsibility to listen. You may learn something.

If you’re a manager trying to decide between two viewpoints, don’t let the louder person automatically win. It’s easy to side with people who are confident or articulate, but it’s important to hear out both sides.

What about when you’re just feeling unskilled?

For me, the best way to feel competent is to write code. The code doesn’t care how smart you feel that day. If it works, you win. For me, adding value makes me feel competent. If I can pull off some complex functionality or learn something new, I feel like I know what I’m doing.