Jon Galloway

A New Year's Resolution That Actually Worked: 2 Years of Daily Exercise

Wed, 01 Jan 2020 22:56:00 GMT

Hey! It’s been a few years since I last blogged here! Let’s get this blog thing back in action, starting with something non-technical that I’ve had a few requests for – my story of two years of daily exercise.

Happy New Year! Today’s a day where half the world contemplates starting some new year’s resolutions and the other half of the world tells them that new year’s resolutions are stupid and nobody sticks with them. They’re mostly right, but let me share my experience with a new year’s resolution I’ve actually stuck with for two years now.

Two years ago, I had realized that my loose plan of kind-of-eating-healthy and trying-to-jog-once-a-week-or-so wasn’t working. Each year, I’d make an effort to drop some weight at the beginning of the year, I’d lose a bit, and then by the end of the year I’d put even more back on. My blood pressure was going up, I was getting winded taking out the trash (in my defense, I have a steep driveway!), and in general things were not headed in the right direction. So I made a New Year’s Resolution on January 1, 2018, to commit to 90 days straight of consistent exercise.

TLDR;

It’s been 2 years now and I haven’t missed a day, despite travelling 160 of those days (Russia, Turkey, Serbia, Bulgaria, UK, Norway, Australia, etc.)
I dropped 30 pounds in the first 6 months and have kept it off
I’m down from a size 38 waist to 34
I turned 49 this past year haven’t felt this healthy since I was in my 20’s, just out of military school
I’m not a fitness expert, but if you’re starting on a New Year’s exercise resolution, I can give some advice that’s worked really well for me, and might work well for you

Top Recommendations

Commit to daily activity for a period of time. For example, I committed to 90 consecutive days.
Don’t commit to a goal (drop 20 pounds) or a vague target (try to get to the gym 2 or 3 times a week).
Some kind of accountability / support group really helps.
If you don’t know where to start, I recommend P90X3 as a good, balanced fitness routine.
In my experience, it’s easier to stick with if you don’t have to devote an hour or more of going somewhere like a gym.
Beachbody On Demand is like a Netflix of workout programs – it costs $39/quarter or $100/ year. (note: I'm a fan, but not an affiliate or anything - I don't get anything for recommending them)
Gamify fitness with gadgets (Fitbit, Apple Watch, Garmin, etc.). Many employers will pay for them as part of their fitness programs.

Season Opener

I ran cross country in high school and have always been a jogger. I’m not a fast runner, but regular jogging and generally eating low carb mostly worked for me. But as I hit my late 40’s, that formula had stopped working. Each year I made an effort at the start of the year to drop some weight, had a bit of success, but couldn’t keep with it and ended the year worse than I started it. I was also noticing that my flexibility was getting worse, I was getting winded playing with my kids or doing simple tasks, and was starting to feel old. Not cool.

I figured it was time for a bigger change with some real commitment. After looking into some different programs, P90X3 caught my eye. I partly liked it because the style appealed to me – it wasn’t some gym rat, hyper aerobics mega jam, it was just some real looking people doing some 30 minute workouts. And when I looked into it more, there were some great success stories, like this guy Ed who had lost almost 70 pounds. And I loved the idea of a 30 minute daily commitment, because it felt like something I could stay with long-term. I knew the pitfalls that had derailed me in the past, and 30 minutes daily exercise that worked at home or in a hotel room sounded just right for me.

The First 90 Days

My employer (Microsoft) has a pretty cool program called StayFit that offers reimbursement for fitness expenses. Check it out, your employer might have a program like that, or might consider starting one. I found that P90X3 was available through Beachbody On Demand for $99/year, and I got a subscription.

Side note 1: The name Beachbody On Demand rang the cheeseball alarm for me, but I persevered and am happy I did. Beachbody On Demand is basically a Netflix of exercise programs. You get access to a ton of great exercise programs, and it’s all super tasteful and fitness focused.

Side note 2: P90X3 sounds like a black ops spy program. Here’s the deal: Tony Horton started off with this program called Power 90, a 90 day workout program. Then he came out with an update called P90X (for Power 90 Extreme) in 2005. After that, there was P90X2 (2009), which improved on P90X and brought more intense workouts. All of the above workouts were more in the 60-75 minute range. Then P90X3 came out in 2014, probably competing with other shorter workout programs, and each workout is exactly 30 minutes long. So P90X3 is Power 90 version 3. Oh, and Tony Horton was 55 when P90X3 was filmed!

So I committed to 90 days of daily exercise and cutting out carbs+sugar+alcohol. I dropped most of the 30 pounds I’d hoped to lose, but more importantly:

I learned this was not just a “sweat off those pounds” thing. There as comprehensive health focus on balance, flexibility, strength, agility, as well as cardio. I realized that by just focusing on jogging, I was missing out on a lot. More on that later.
They made me do yoga, I fell over a lot, my wife said I was laughing harder than she’d ever heard me laugh, and eventually my balance and flexibility got a lot better.
I started feeling different throughout the day. When I had to run to catch a flight, I actually like it! I was disappointed when I hit the gate, I wanted to run more. When I was playing with my 11yo daughter at the beach and she wanted to race, I was a little shocked when I shot out way ahead of her and had to pretend to fall over to let her win. So I learned that being in better shape has effects all day, every day – not just when I’m officially exercising.

90 Days And Beyond

So I hit 90 days, lost the weight, and felt great. Here was the challenge: What to do next? Give myself a high five and drop the exercise until the weight crept back on? That didn’t sound right. Plus, I’d realized something – the 30 minutes of exercise was actually something I looked forward to every day! I felt great levelling up on the workouts, and feeling of accomplishment I had when I finished the daily workout was often the highlight of that day. So I kept at it – another 90 days, through the end of the year, etc. And so I’ve hit 2 years now because stopping isn’t appealing at all. And if for some reason I have to miss a day, I think I’ll probably start right back up the next day and try to beat this record.

After finishing 90 days of P90X3, I decided that it was amazing, but I couldn’t handle the repetition and hearing the same jokes again for another 90 days. Fortunately, Beachbody On Demand had a bunch of other programs. Here are some I’ve liked:

Core De Force: Kickboxing + Ab shaping workouts. These are a ton of fun, and are all in the 30-45 minute range. I loved the P90X3 MMX workout, so I was really happy to find a whole program that focused on mixed martial arts. Joel and Jericho are a lot of fun, too.
LIIFT4: After finishing Core De Force, I tried out Joel (from CDF)’s newer program, LIIFT4. It’s a mix of weight lifting and HIIT (high intensity interval training) plus an ab workout at the end. I hadn’t done a directed weight lifting program like this before, and I really liked it. I’ve repeated this program 3 times over the past 2 years, and it’s fun to progress each time. This is an 8 week program, and it was great to work though the full program as Joel pushes the cast and viewers to up their weights every week. I hadn’t lifted weights for years, and never with any real direction. I dig this one.
21 Day Fix Extreme: Autumn Calabrese totally sneaks up on you – she seems low key, but at the end of a 30 minute workout I’m stumbling and gasping for breath and she seems completely unfazed. They’ve recently reshot this in a realtime format, so instead of just 7 routines that you repeat over and over, there are 21 separate recording.
Insanity Max:30: When I first tried this, the choreographed aerobics style bugged me. I gave it another shot later, and liked it a lot more. Shaun T pushes you really hard – the entire 30 minutes felt like I was at my maximum intensity. But, I also started to hit some knee pain, and had to back off a bit (ominous foreshadowing music in the background).

Generally for all the programs, I’ve worked through the program a few times, then incorporated them into my grab bag for periods when I’m not following a specific program.

I’ve started with one other program lately that’s not on Beachbody on Demand – Tony Horton’s The Next Level. It’s actually a little hard to find, although it’s now available through Amazon Prime Video if you’re in the US and also get an additional subscription $6.99/month subscription to this Gaiam TV thing. I really like these routines, and the format includes three levels of intensity for each exercise, which is a nice idea, especially if you’d like to do this with a friend, family member, etc. The one tradeoff is that they’re all an hour long, and I’ve really been spoiled with the 30 minute workouts. I’ve been working them in a few days a week lately.

Exercise Equipment

Core De Force and Insanity Max 30 can be done with no extra equipment.

P90X3 and 21 Day Fix Extreme can be done with just a resistance band set, although for some of the routines it’s better to have some dumbells.

LIIFT is a weight lifting focused, so I got two adjustable weight dumbells (20-50 pounds each in 10 pound increments) that are okay. I’m planning to get some better ones with smaller increments and more range for this year.

I also used an exercise watch to help motivate myself. I went through a few Fitbit Iconic watches – I really loved the watch, but they kept breaking (black screen of death). This year I upgraded to a Garmin Forerunner 945. Both the Fitbit and Garmin watches have great battery life – over a week. I’m not an iPhone person, so I didn’t look at Apple watches, but I hear good things about them outside of the battery life.

Protip: Many employers have fitness stipends. I mentioned Microsoft’s StayFit program earlier, and it’s paid for my fitness watches, weights, running shoes, my Beachbody on Demand subscription, etc. It doesn’t hurt to ask if you’re not sure. Gym memberships are expensive, so fitness equipment that lasts for years is a pretty good investment by comparison.

Exercise While Travelling

Beachbody On Demand includes online video streaming, so it works great on my laptop on hotel Wi-Fi. They’ve also got a mobile app, so I’ve got a few videos downloaded on my phone for offline use just in case.

Travelling is often really tough on schedules, including really early flights, long flights, and red eye flights that make daily workouts challenging. So here are some things that work for me:

Always do a workout before leaving on a trip, just in case, so I don’t miss the day if there’s a travel delay.
Do a yoga workout before and after travel – it works out the travel kinks really well!
Have some hotel room favorite workouts planned – fortunately, most of P90X3 works surprisingly well in a hotel room, without any weights or equipment (especially MMX, Yoga, Isometrics, Dynamix, CVX, and Accelerator). Also the entire Core De Force lineup is great for travel.

Getting Stronger

One really fun part of getting in better shape was seeing how it formed a virtuous cycle. As I felt stronger, I could work out harder. As my cardiovascular system improved, I could push longer. As a long time runner, it was fun to see my course times starting to get a lot faster, despite de-emphasizing running, because I had a lot more strength and cardiovascular base. Even things I’d written off as just “not my thing” like yoga got easier, since the strength, balance, and flexibility I’d picked up in other routines made it possible for me to push a little further every time.

Time Management

Committing to a 30 minute workout every day has also had an unexpected positive impact on my time management and daily planning. It’s forced me to think about my day in more detail the day before – not just for travel, but there’s other stuff like you can’t really do a hard cardio workout right after a big meal.

As a remote employee, I struggle with taking time for myself. It’s easy to get sucked into working all the time, and feeling guilty if I’m not. But I can always take 30 minutes for myself, and often it gives me a burst of energy to be more productive at work.

Dealing with Injury

It’s important to watch out for injuries that could derail the daily workout thing.

As both my endurance and strength increased, I started pushing harder, and started having to deal with some minor injuries. The first was a pulled calf muscle from a switch roundhouse kick in summer 2018, and this year I started getting runners knee when I tried to work in daily treadmill intervals combined with too much HIIT training. In both cases, the answer was to pay attention to notice it early, then change my exercise focus to heal – more yoga and stretching, upper body focus with weight lifting, cut back on running for a while.

I started exercising barefoot when I did the Core De Force MMA routines, then started exercising barefoot for all the programs. It’s worked great, and cut down on knee pain. Recently, I’ve had a few people recommend Vibram Five Fingers shoes for running, so I’ve got a pair on order.

Diet and Weight Loss

Early on, I mentioned that weight loss was an important reason for starting on this, yet I haven’t mentioned diet until now. That’s because, in the past, I’d focused on diet and dropped a few pounds, then put them back on when I couldn’t keep to the rigid diet (due to travel, family events, whatever). So for this fitness regimen, I’ve really focused on the exercise side. Here’s how I generally try to eat:

Mostly keto: meat, healthy fats, vegetables
No sugar (including alcohol)
No non-vegetable carbs (bread, flours, grains, etc.)

After keeping the 25-30 pounds off for 2 years, I’ve learned more about what I can get away with and how to balance things a bit. I love good food, and always have local food when I travel. I avoid processed carbs and sugars, but have some from time to time. I generally avoid alcohol, both due to the dietary impact and the difficulty in exercising hard the day after drinking, but I make allowances for special occasions (e.g. the entire month of December).

The Social Network

There are a few social network things I’ve found to help keep me motivated.

Strava is a social fitness network. It works with workout trackers to upload runs, bike rides, and other workouts and shares your stats with your friends. I mostly started using it when I moved from Fitbit to Garmin as a way to track my workouts that was vendor agnostic, but it’s fun to get and give kudos to friends and get the feeling that you’re surrounded by workout friends. That’s especially nice as a remote worker. I think I’m mostly using it wrong, since most of my friends are sharing cool bike rides and half marathons and stuff while I’m just checking in every day with a 30-45 minute stationary cardio workout, but they haven’t unfriended me yet.

Fun fact: One of my friends on Strava is Tim Heuer, and he’s always sharing cool bike rides. Back when I was kind of new to P90X3, I was googling for some info and came across a blog post he wrote back in 2014: I lost 55lbs using these two amazing simple steps - you can too!

I’ve also joined some Facebook groups from other P90X and LIIFT folks. Again, it’s good to have the feeling that you’re surrounded by people who are working out regularly to keep encouraged. Fun side effect: I’ve started following other Facebook groups that make me happy, including a home coffee roaster group and a sous vide cooking group, and unfollowing (not unfriending, just unfollowing) real life friends that mostly use Facebook to argue. Now my Facebook feed is wonderful!

I’ve used Twitter a bit, but try to do it pretty sparingly because I don’t want to be annoying. I’ve been checking in a few times a year, for two main reasons. First, I wanted to publicly commit to put some extra pressure on myself to stay with it. Second, I wanted to share what’s worked for me to encourage other people and start conversations if they had questions. And with that – feel free to ping me on Twitter at @jongalloway if you’ve got questions!

How to Talk Yourself out of your New Year’s Blogging Resolution… One Day At A Time

Tue, 03 Jan 2017 08:25:00 GMT

It’s a new year! Even though years are an arbitrary construct and all that, you feel reinvigorated! Alive! Ready to take on the world! And you’ve read all those posts and tweets and instatumblrs about blogging! They’re pretty compelling, really, and you’re in a suggestible state of mind. You’re thinking about taking the plunge.

Frankly, you lack the tools and experience to talk yourself out of this one. Perhaps I can be of assistance. I’ve got years of real world practice in talking myself out of blogging, and I’m here to share that knowledge with you.

Procrastination Is Key

Spoiler alert: It all comes down to putting off to tomorrow what you could do today. But for good reasons! Always good reasons. That’s how you can sell it to yourself… it’s all for a good cause, really!

Other People Have Blogged, Are Blogging, Or Will Blog This Anyway

There’s only room for a limited amount of information in the universe. Some scientific estimates [pdf] cap us at figures as low as 10⁹⁰ bits! So we certainly don’t want any duplication whatsoever. Ergo, vis a vis, concordantly, if it’s at all possible that someone else might have blogged this kind of thing at some point, probably better not to muddy the waters or whatever.

Other, More Informed Experts Should Take This One

Okay, maybe nobody’s bloggerated this one up just yet, but this is all very technical and should really be handled by certified experts. We’re sharing technical information here, it had better be just right.

Experience Bonus: The more actual experience you have, the more you know that you don’t know. You also, if you’re lucky, get to come into contact with really quite actually brilliant people who know thing. Now, if you’re lucky, eventually you’ll know people who are, collectively, smarter than you at every possible subject area and you can just sit and watch them talk about all the things. If you’re really lucky, you’ll get to meet, online or even in person, the worldwide expert of a few things. How could you presume to blog on their topic?

Needs More Playtesting

Okay, you’ve actually found a cool thing and nobody’s talking about it yet. But remember that cool utility you were excited about a few years ago? Are you still excited about it now? Moved on, right? How about that super interesting technique of injecting dependencies directly into your spleen using pure ASM? It destroyed your spleen and you’re on spleen replacement pills now, aren’t you, smart guy? The truth is that absolutely anything interesting you know probably needs a little more testing before you recommend it. At least another week or two (wash rinse repeat).

Professionalize This

Look, if you’re going to write a blog post these days it’s got to follow best practices. Are your code samples above reproach? Are you sure??? Have you read the twitters and the hacker news comments lately? I don’t care if you’re writing “Introduction to Lego Mindstorms For Toddlers”, it had better include unit tests in a pure functional language, today’s top front end framework, and a lot of scary stuff you can’t remember right now but you know is vitally important! And have you considered scalability? What about security??? You know security is important, right? Don’t you? What is wrong with you??? Probably better sit this one out.

Experience Bonus: If you’ve happened to write any books, articles, official documentation or official announcement blog post, you’ve got a head start here. You’ve had editors review and critique your work. You’ve seen how the code and text you were so proud of on the first draft had obvious errors that editors and/or commenters immediately discovered. This draft is probably wrong, buddy. Better give it a day and come back to proof it again.

Those Tweets Tho

Look, here’s a loophole! Writing a blog post is hard work, and a lot of it’s really just filler, right? You can probably get the point across in a single tweet.

1/ Or, if not one tweet…

I’ll Blog It When It Ships

Whoa! You just wrote some cool code, it all works, and this is definitely worth sharing!

Slow down, tiger. Let’s wait until this thing actually gets through QA, user testing, and deployment. There have to be some bugs, right? Let’s wait and blog the real deal. Plus, we’re really quite busy now! After we ship, there will be time for low priority things like blogging and smelling the flowers. Wait until we ship, then things will totally calm down and we’ll do all the things we want to do now but don’t have time for.

This works great for cool demonstrations you write up for a tech presentation, too! You’re way too busy preparing for the presentation right now, and that’s really it would be irresponsible to take time away to blog it up right now, but right after the conference, obviously, there will be abundant time!

And also, some of this stuff might even be kind of secret until the ship date! Loose lips and all that, old boy.

The beauty of this excuse, as you know deep in your heart, is that as soon as magical ship day hits, something else will come up, and you’ll never actually get that magical blogging down day.

Magnificent Debut [or] Don’t Call It A Comeback

Okay, logic has failed and you still want to blog. There’s hope for you yet.

Fine, you’ll write some blogerisms, but it can’t be just anything! You have to come out swinging! Billions of people are watching, you can’t enter the fray with some random gibberish! The first one (or, in the restart scenario, the first new one) needs to be plus one insightful! Don’t ship it ‘til it’s ready! Iterate until the urge passes.

And to do this right, you really should have a full code sample. Or, better yet, a repo. Well, probably what you really want is an open source project, right?

Off Topic!

Sure, sometimes you just want to write about some new random thing that’s not strictly in the topic area you normally write about. Let’s just keep that to yourself, then, shall we?

Market Timing

Hmm. None of the above defenses have helped, and you’re actually about to write a technical blog post. Fine, fine, you should totally go ahead with this… but… well, I don’t want to be a jerk, but you know it’s Monday, right? Nobody reads blogs on Monday. They’re all just coming back to work. Tuesday’s maybe okay, but you might want to wait until Wednesday.

Hey, it’s Wednesday, but things are actually pretty busy with work and stuff. Maybe this afternoon… Oh, hey, I know today was busy and all, but you totally don’t want to post in the late afternoon! Do you even know about time zones? People in Europe are sleeping now and you’re about to post? Wait until tomorrow.

Um, good morning. It’s Thursday morning. Dumb time to post. You really want to wait until earlier in the week for maximum hits and all that.

Hello. Happy Friday / Saturday / Sunday. Have a great day, but don’t even think about posting today! Nobody’s going to read it now!

Oh, and this works really well with blog posts about a software or product release! If you can’t post it on the day of the release, game over man.

Okay, Not Really

None of these are really good reasons. I’ll give my rebuttals, but I’m of course interested in yours in the comments or on Friendster.

Other People Have Blogged, Are Blogging, Or Will Blog This Anyway

Unoriginal Thoughts Bear Repeating.
Usually every blog has a new / different / updated take.
Your blog is your personal record. You can review your previous notes, it’ll be there even if other blogs go away, etc.
10⁹⁰ bits is actually quite a lot.

Other, More Informed Experts Should Take This One
- One of the best ways to learn more is to risk being accidentally stupid on the internet. Do your research, ask an expert to review if really necessary, add a disclaimer that you're not an expert, but share what you think you know.
Needs More Playtesting

I actually think there’s a healthy balance here. I think “Hey, look at this thing I just found and might install or not” probably goes in a Tweet, but maybe set a reminder to get back to it in a week to blog your fresh experiences?
There’s always the edit button. If you try something for a while and it doesn’t work out or you find something better, update your post to explain why.

Professionalize This

I think the best way to handle this is separating the decide and do decisions as much as possible, then time boxing. Is this post topic worthwhile? How many hours of investment is it worth? Great, I’ll give myself 2 hours, then out it goes.

Those Tweets Tho

Not sure here. I think the kinds of conversations I have on Twitter are great for exploring a topic, but when a conversation generates some interesting response, it’s time to put it on the //toblog list.
I’m just now checking my top tweets on favstar.fm and Twitter Analytics, and there are probably a few other ways to dig up past interesting conversations if needed.

I’ll Blog It When It Ships

One thing that’s worked for me here is to start writing the blog post up in rough form as I go, so it’s quick and easy to post immediately afterwards.

Off Topic!

I think this is really a judgement call. I know personally that I’m rarely offended by the occasional “here’s a neat thing” post from likeminded nerds. In fact, I usually like them. Sure, if you go overboard it’s too much, but give yourself some leeway.

Magnificent Debut [or] Don’t Call It A Comeback

It’s important to remember that a blog is a “web log”. It’s not a big deal.
I think it’s easier to break the ice – again, really just with myself – with a non-technical post. Hmm, like this one.

Thoughts? What excuses did I miss? Have I helped talk you out of and / or back into blogging?

Two free video courses: Intro to ASP.NET MVC and Responsive UI with Bootstrap

Wed, 10 Sep 2014 23:22:32 GMT

I'm really excited to announce that two of my latest courses on Microsoft Virtual Academy are now live! Both are recordings of live courses Christopher Harrison and I lead in the beautiful Channel 9 studios, and include downloads of all slides, code and live chat logs.

These are live events with two instructors and an active chat, and we pushed the demo code to GitHub throughout the event so attendees could get their hands on it immediately. One really nice benefit of this format (compared to most other video training) is that we were able to watch for common questions and answer them live. It's also hugely motivating to hear from viewers around the world, many who are staying up late at night. Nothing starts the morning off like "Hello from Bangladesh! Hi from Brazil!" Hellos from Holland, Poland, Bulgaria... even New Jersey!

Hey! These two courses are part of our new Web Wednesdays series on MVA. Be sure to join us for the next session: Lighting Up Real-Time Web Communications with SignalR with Brady Gaster and me on September 24!

Quick links for the impatient:

Note: These courses are on Microsoft Virtual Academy, which requires you to log in with a (free) Microsoft Account. No cost or obligations, and the account bookmarks where you're at across multiple courses which is pretty helpful.

Introduction to ASP.NET MVC

Christopher and I put on Developing ASP.NET MVC 4 Web Applications Jump Start last year, built from the ASP.NET MVC certification course materials. Since the course materials are usually covered in a week long class, we had to move pretty quick to cover everything. We've heard from a lot of happy viewers that really liked it (many of whom have written to tell us it was a big part of their successful certification test prep). You can read more about my thoughts on that course here.

However, we also were aware that it was a little fast for some developers who were completely new to the space, e.g. developers who were new to web development or front-end web developers who weren't familiar with C# or Visual Studio. And in the meantime, Christopher had joined Microsoft as a fulltime member of the MVA team (woo hoo!). When Christopher contacted me to strategize about some ideas for courses, we decided it was time for an MVC course that spoke to absolute beginners.

This course is broken into the following modules:

Basics of MVC and the Moving Parts
Creating and Configuring Models
The Power of Visual Studio
Deep Dive into Controllers
Deep Dive into Views
Introduction to Bootstrap
Introduction to Authentication in MVC
Supplement Your Knowledge

View the course here: Introduction to ASP.NET MVC

Building Responsive UI with Bootstrap

Boostrap is a front-end framework that makes it easy to build nice looking sites that respond well to different display sizes using CSS media queries. That means your sites automatically adapt to look nice on desktop, laptop, tablets and phones without any hacky code (on server or client) to try to guess if the user probably wants a "mobile" view of the site (what does that even mean now that we've got giant phones, tiny tablets, and convertibles like the Surface?).

All the ASP.NET project in Visual Studio 2013 (Web Forms and MVC) are built with Bootstrap. It's automatically in every new ASP.NET application.

That's a good start, but I felt like all of the presentations and training I'd seen using on Bootstrap with ASP.NET had been pretty simple: "Hey, check it out, we have Bootstrap now, responsive design is great, here's a new theme, yay! Done!" That's definitely about all I'd covered in my presentations.

Sure, Bootstrap is neat, but there are some challenges: The grid system can be a little complex, especially if you want your content to lay out differently at different sizes. Do I really have to memorize all those Bootstrap class names (especially fun for complex components or layouts)? How do I keep my site from looking like every other Bootstrap site out there? And my personal pet peeve: how do I take advantage of Bootstrap without turning my HTML into a horrible mess of <div class="col-lg-6 col-md-4 col-sm-3"> Bootstrap classes that seem to want to take over?

That's what this class is about. Christopher and I cover the basics pretty quickly, then go deep with things like responsive page design, making Visual Studio pick up some of the hard work, and taking advantage of Less to get the HTML under control. Here's the outline:

Introduction to Bootstrap
Bootstrap Components
Page Design
Visual Studio and ASP.NET Integration
JavaScript Functions
Using Bootstrap with LESS
Bootstrap in the Real World

View the course here: Building Responsive UI with Bootstrap

I'm really happy with this course - I think we really nailed it, and judging from the live response it sounds like they thought so, too. I'll do a follow-up blog post digging into the Bootstrap / Less stuff, it's pretty slick.

We'll Do It Live!

As I mentioned earlier, having two trainers gives us the opportunity to do a lot of things live. We both take turns participating in the attendee chat and giving answers to common questions as they come up. We also work against a live repository on GitHub (using the built-in Visual Studio support), pushing the demo code as soon as each session's completed. If you're able to catch a live event in the future, please do!

Web Camp in Los Angeles with Scott Hunter - July 9

Tue, 01 Jul 2014 20:30:22 GMT

Web devs in southern California, we've got a great Web Camp event coming up next week in Los Angeles on July 9. We're wrapping up the Summer Web Camps tour I announced a bit ago with a blowout! This is a free, one day event and we've got space available in the fancy new Microsoft Playa Vista office.

We're privileged to have Scott Hunter as one of the speakers for this event. Scott's a group program manager at Microsoft for Azure and Tools, including ASP.NET , MVC, Web API, Web Pages, SignalR, Entity Framework, Web Tooling, NuGet and Azure Cache/SDK's. You may have seen Scott's presentations with Scott Hanselman at TechEd and Build over the years. He's got a great perspective for the challenges web developers are solving today in ASP.NET as well as where ASP.NET is going in the future.

We've also got presentations from local heroes Daniel Egan and Adam Tuliper!

If you're an ASP.NET developer in southern California, you don't want to miss this free event. In addition to a full day of solid web dev content, this is a great chance to ask questions directly to the head of the ASP.NET PM team.

Here's the agenda for what we'll be covering:

Session	Speaker	Start	End
Keynote	Scott Hunter	8:30	9:30
Introduction to ASP.NET and Visual Studio 2013 Web Tooling	Jon Galloway	9:30	10:15
Building Web Applications using the latest ASP.NET technologies	Adam Tuliper	10:15	11:00
Break		11:00	11:15
Building web front ends for both desktop and mobile using the latest web standards	Jon Galloway	11:15	12:15
Lunch		12:15	1:15
API Services for both web and devices	Daniel Egan	1:15	2:15
Running, improving and maintaining a site in the real world	Jon Galloway	2:15	3:15
Break		3:15	3:30
Real-time Communications with SignalR	Jon Galloway	3:30	4:30
Wrap Up	Scott Hunter	4:30	5:00

Scripting .NET project migration to Automatic NuGet Package Restore

Thu, 19 Jun 2014 23:53:40 GMT

Background on NuGet Package Restore and Automatic Package Restore

NuGet Package Restore allows you to reference NuGet packages in your project without shipping them with your source code or committing them to source control. The general idea is that the packages are restored - that is, downloaded and installed - into your project when it is build. This offers a number of benefits, including better interaction with source control and smaller code distributions.

NuGet Package Restore was originally implemented using an MSBuild task, so whenever you ran a build in Visual Studio the build step would handle the package restore before continuing with the next steps in the build process. This worked, but had a few downsides. For one, it required MSBuild to work, which conflicts with cross-platform development, build servers, etc. Another issue is that it required a separate .nuget directory be added to your Visual Studio solution, including a copy of NuGet.exe and a targets file.

Migrating Automatic Package Restore

NuGet 2.7 (and later) added support for Automatic NuGet Package Restore without requiring MSBuild. For new projects, this all just automatically works. However, if you had an older project for which you'd manually configured NuGet Package Restore, there is a manual process to be followed:

Remove the .nuget folder from your solution. Make sure the folder itself is also removed from the solution workspace.
Edit each project file (e.g., .csproj, .vbproj) in the solution and remove any references to the NuGet.targets file. To do so, search for Nuget.targets and remove the entire <Import Project> line where it is referenced.

This is really easy - it just takes seconds to do on one project. However, if you've got a lot of projects, it's painful busywork. I was making some updates on the Web Camps Training Kit which has a lot of projects (several demos and hands on labs, each with begin and end state solutions). I wanted a recursive script that dug through all the subfolders and fixed up my projects for me automatically. I asked around on Twitter and heard about IFix, from Terje Sandstrom. It's a nice solution that handles this problem, but I wanted a recursive script, and if I was going to automate IFix with a recursive script I might as well just write a script that handled everything.

Enough Talk, Show Me The Script

Warning! This script edits all projects and deletes all .nuget and packages directories recursively for the specified path. That means if you ran it from C:\ it would modify every project on your C drive. Obviously, be careful about the current directory and make sure your affected projects are under source control.

#this automates the steps found here: http://docs.nuget.org/docs/workflows/migrating-to-automatic-package-restore #yes, you could code golf this to about 6 characters if you wanted to $find= @' <Import Project="$(SolutionDir)\.nuget\NuGet.targets" Condition="Exists('$(SolutionDir)\.nuget\NuGet.targets')" /> '@ foreach ($f in Get-ChildItem -Recurse -Path ".\" -Filter *.csproj | sort-object) { $text = Get-Content $f.FullName -Raw $text.Replace($find, "") | set-content $f.FullName } Get-ChildItem .\ -include .nuget,packages -Recurse | foreach ($_) { remove-item $_.fullname -Force -Recurse }

Here's what it does:

Recursively search for .csproj files in a path
Remove the MSBuild target for NuGet package restore
Recurse through the directory structure, removing .nuget and packages directories

A few admissions / excuses

Yes, it could be more terse. Get-ChildItem could be gci, Set-Content could be sc, all the switches could use the single letter equivalents. I used to be embarrassed posting verbose PowerShell, but I've decided that this is a lot easier to read and there's no real point to minifying PowerShell.

Yes, this is just doing a simple string replace. I looked at doing things the XML way (XPath or DOM manipulations) or using regular expressions, but decided that I want this to be completely explicit. I don't want to match any lines unless they're exactly matching what was written by Visual Studio when I enabled package restore. Because of that, I only want an exact string match. I think that this is a little faster since it's just a string replace, but I didn't test that and don't really care if it isn't.

Yes, this leaves a blank line in the .csproj file. That makes no difference in the way Visual Studio handles it and it was easier than worrying about it.

Yes, that $find declaration is weird. The string I'm searching for (<Import Project="$(SolutionDir)\.nuget\NuGet.targets" Condition="Exists('$(SolutionDir)\.nuget\NuGet.targets')" />) contains a lot of characters that need to be escaped in PowerShell, and even more if doing a Regex replace in PowerShell (which I tested a bit). So instead I used a here-string, which is kind of like a C# verbatim string literal (e.g. @\\server\share\file.txt).

For more information on why you should migrate away from MSBuild based Automatic Package Restore, see these posts:

Migrate away from MSBuild-based NuGet package restore (Xavier Decoster)
The right way to restore NuGet packages (David Ebbo)

MVA: Introduction to ASP.NET MVC - Free Live Training - June 23

Fri, 13 Jun 2014 20:23:00 GMT

UPDATE: The course (including videos, slides, and links to the code) are published here: http://www.microsoftvirtualacademy.com/training-courses/introduction-to-asp-net-mvc

Join Christopher Harrison and me for a fun, free online training event at Microsoft Virtual Academy on June 23, 2014!

Are you a front-end coder who wants to learn how to build data-driven, server-side web applications?

Maybe you know some Web Forms and want to make the jump to ASP.NET MVC?

This exciting new course focuses on the basics of this popular framework for building scalable, standards-based web applications using well-established design patterns, so you can ramp up quickly.

Introduction to ASP.NET MVC

Live event on June 23, 2014

Register Now!

Free! Live! Learn ASP.NET MVC!

ChrChristopher Harrison and I had tons of fun doing a previous MVA event last September: Developing ASP.NET MVC 4 Web Applications Jump Start. That one's available online, and I'm told it's one of the most popular courses on Microsoft Virtual Academy.

We based the previous MVC Jump Start on the the official Microsoft Exam 70-486, which is part of the MCSD: Web Applications certification. We did what we could to make it approachable for beginners, but cramming an entire week long course in ASP.NET MVC into a single day meant it moved pretty quickly.

So Christopher and I both agreed that it's be great to have a more introductory level class that moves a little slower and is easier for beginners to follow. Here's what we'll be covering:

Basics of MVC and the Moving Parts
Creating and Configuring Models
The Power of Visual Studio
Deep Dive into Controllers
Deep Dive into Views
Introduction to Bootstrap
Introduction to Authentication in MVC
Supplement Your Knowledge

We'll be taking live questions, and there will be online chat support as well. If you've been wanting to learn ASP.NET MVC, this is a great opportunity!

And don't let your boss tell you that you can't miss a day of work for this. Remind them that this is free, and you'll be saving them tons of money with your new web dev super powers.

New Book: Pro Windows 8.1 Development with XAML and C#

Fri, 13 Jun 2014 16:06:36 GMT

Between releases of my other book (Professional ASP.NET MVC, next release due out soon!) Jesse Liberty somehow talked me into collaborating with him on writing a book on Windows 8.1 development. Actually, it wasn't a hard sell, because I've done a good amount of XAML dev, love C#, and Windows 8 / 8.1 development is a lot of fun. We co-wrote the table of contents, I wrote code samples and very rough drafts (sometimes just bullet points), and Jesse turned it into prose. That worked pretty well, but was a little too slow - especially once my work on Professional ASP.NET MVC 5 ramped up. Fortunately, Phil Japiske agreed to join us and finish the book off. Phil really nailed it - he polished off the remaining chapters, reviewed and greatly improved the existing chapters, and made sure everything was up to date for Windows 8.1.

Pro Windows 8.1 Development with XAML and C# is focused on teaching you how to use your C# skills to build Windows Store applications. It teaches you the necessary XAML skills, the controls, the application model, and takes you from File / New to publishing an application to the Windows Store.

Here's the table of contents:

Getting Started
Building Your First Windows 8 App
Themes, Panels, and Controls
Binding
Views
Local Data
Remote Data and Services
Search and Share Contracts
Notifications
Application Life Cycle
Making Money
Publishing Your App

I'm especially happy with my contributions to the local and remote data chapters. Any non-trivial application needs to tackle these concerns, and it's important to get right. I went through a few iterations on the pattern for data access and settled on a Task based repository pattern that worked pretty well. For the remote data, I showed how to set up Web API services both as JSON/XML endpoints and leveraging OData.

I also wrote a lot of the Notifications chapter, since the primary example demonstrates using Azure Mobile Services to send client notifications.

The book is a little over 300 pages, so it hopefully strikes a pretty good balance on the thorough vs. longwinded scale. I hope you like it!

Today (Friday June 13, 2014) there's a 40% discount code on the Apress site: FRDY13.

weblogs.asp.net Now Running On Orchard and Azure Web Sites

Wed, 11 Jun 2014 01:21:58 GMT

I'm incredibly happy to announce that my blog - and all 750 other blogs running under weblogs.asp.net - are now powered by Orchard and Azure Web Sites! That's 750 blogs, all hosted in 4 Azure Web Sites all running on only one large virtual machine.

A bit of nostalgia

I've been blogging on weblogs.asp.net since May 2003 - over eleven years. Back then it was called dotnetweblogs and ran on an open source blogging platform called .Text. Over the years, it got moved through varivous versions of Community Server, and had been stuck on an old, customized version of Community Server for almost seven years. It was hard to take myself seriously when blogging about web standards when my blog was being forced to quirks mode in IE due to an ancient HTML header.

I'd exported my BlogML several times and thought about moving, but I really didn't want to. I'd been part of the weblogs.asp.net community for a long time - for a while I subscribed to every single RSS feed and read each of them daily - and I'm a pretty big ASP.NET fan, too. I resorted to cramming a bunch of JavaScript into the "News and Announcements" HTML field on the left. It pulled in jQuery from a CDN and did all kinds of terrible things to insert widgets and hide elements I didn't want and make the page jump around for a few seconds while loading. Kind of like most news websites these days, so maybe I was ahead of my time.

I'd campaigned internally a few times to get the blog platform updated, but understood it was a big job to update several hundred weblogs - with history, and without downtime. Fortunately there's another very high profile blogger on the weblogs.asp.net platform; that may have had something to do with getting the update to happen. :-)

So I was extremely happy to hear that there was finally an effort underway to make the move!

Disclaimer: I did not do any of the dev work for this migration. In fact, I was one of the top whiny customers - my blog was one of the test cases for the migration, and I gave Sebastien Ros and the Neudesic dev team (Peter Fuerte, Samir Patel, Zac Hall, and Terri Morton) tons of feedback and piles of feature requests.

Hosting Details

Orchard is hosted as Azure Websites on a single basic large instance using using 4 websites on a single instance to scale out the memory limit on 32 bits.

We use 4 Azure SQL Database instances, Business edition set to 10GB. Each azure website points to a SQL Azure database, and each database contains around 200 blog using table prefixes.

Each website points to an Azure Cache Service for output caching

All blogs point to the same blob storage account

An Azure Queue is used to synchronize the main portal and the blogs

One ARR proxy in an Azure VM is used to route the requests to the Azure websites. We set it up this way because we already had this VM set up to do the proxy work for the rest of *.asp.net.

Here's a general diagram (stolen with permission from Sebastien's talk at the Orchard Harvest conference this week):

Performance Statistics

Here are our monthly estimated statistics for weblogs.asp.net:

Bandwidth out – 17 terrabytes
Page Views – 1.3 million
Unique Visitors – 750,000
Visits – 1.1 million

Here's the thing: Azure Web Sites is fast and efficient. I was already convinced of that, having run a lot of sites on it over the past few years. But Orchard is crazy efficient, too. I did not know that. I recently saw Sebastien give a presentation on Orchard, and it blew my mind. If you had heard or read that Orchard is slow, bloated or inefficient, you owe it to yourself to look again. I've been shocked by how fast and efficient the current release of Orchard is.

The Orchard output cache module includes pretty moderate caching but delivers pretty extreme CPU performance benefits, as shown in the CPU charts from the production site below. Notice we're hovering around 20% CPU most of the time:

Hosting Cost Summary

It's incredibly cheap to host all 750 weblogs on Azure Web Sites, SQL Database, Storage and Cache. Here's a per-month cost estimate (keep the above stats in mind when you read these):

Item	Usage to Date	Cost to Date	Estimated Cost Per Month
Data Transfer OUT (GB) - Zone 1	1428.41 (GB)	170.81	196.43
Data Transfer IN (GB) - Zone 1	1.21 (GB)	0.00	0.00
Database Units (in 10s) - Business Edition	0.54 DB Units (10s)	53.88	61.96
Storage Transactions (in 10,000s) - Data Management	323.84 (10,000s)	0.16	0.18
Basic (128 MB) - Cache	2.52 (128 MB)	31.52	50.00
Data Transfer (GB) - Zone 1	0.08 (GB)	0.01	0.01
Standard IO - Block Blob (GB) - Geo Redundant	1.92 (GB)	0.09	0.10
Large Basic Web Sites Hours - Web Sites	609.00 (hours)	187.20	215.28
Grand Total		443.67	523.47

This works out to under about 70 cents per blog per month, which is pretty impressive.

What was changed in Orchard to support multi-blog

Nothing!

Multi-tenancy is a native capability of Orchard CMS. It is the primary reason we chose Orchard as the platform. So that's neat.

We're using 4 websites on a single Azure instance to scale out the memory limit on 32 bits, and any optimizations that were made to Orchard itself for this project were rolled back into the core platform (for v.1.8.1.0 and later).

Migrating 750 weblogs (with more than 75k posts and 250k comments)

weblogs.asp.net supported BlogML export and import. BlogML is an open format for Blog content, and it includes everything you'd need to migrate eleven years of blogging - including posts, comments and tags. It's not a slam dunk, though. Years ago, I tried to export my blog and the requests kept timing out because the export (including comment spam) was something like 5 or 6 MB. A year ago I was sick with a flu so I decided to do some blog spam analysis; Terri and team incorporated the results into their spam filters which cut the spam levels quite significantly. Still, lots of data.

On the Orchard side, they took advantage of custom Orchard recipes to handle the import. Recipes are great - they include everything you'd need to initialize a new site, including blogs, users, etc. And they can be based off a template, so you can create multiple (say, 750) recipes from one template. Slick.

At a high level (because I didn't write the code), Sebastien and friends tackled the problem like this:

Export all sites to BlogML
Convert the BlogML to custom Orchard recipes to create the new blogs including:
- Posts
- Comments
- Users
- New passwords
Generate custom commands to automate the recipe processing

Automation was important, because they reran this migration several times.

One other neat thing about the import: they used the VM Berserker technique (my name, I hope it sticks). You may have read about this approach before on Troy Hunt's post titled Working with 154 million records on Azure Table Storage – the story of “Have I been pwned?”

The VM Berserker technique takes advantages of one of the most unappreciated values of cloud computing: the ability to develop cheaply, scale way up for a short time, and then turn off. This lets you do big things for less than the cost of a cup of coffee. Scaling up is nice. Scaling up and then back down is even nicer. So for this migration, they tested things out on a VM, then scaled it up to handle the migration, then turned it off (to stop paying). Done. Oh, and by running in an Azure VM they were running the processing in the same datacenter as the data, so it was really fast.

This is the kind of thing that tells me that cloud computing is the future. Sure, it's great to spin up sites and VM's and worker roles and stuff in the cloud. It's great that I can amp them up when I want. But often lost in the discussion is the power of being able to scale hard for an hour or two, then shut down. The cost-per-awesome on that transaction hasn't sunk in with most developers yet.

Sebastien announced at the Orchard Harvest conference this week that the tools that were written to migrate the content from the old system to Orchard (running Orchard recipes against BlogML export files) will be released publicly very soon.

New Blog Goodness

So much good stuff!!!

New Bootstrap blog theme

This is probably my favorite. In the past I'd written a few custom or inline styles, but now the system's running on a great framework. Bootstrap's tons of fun. There are individual styles and components that make things look better, so I can throw in a Bootstrap table style or grid whenever it's useful.

Plus, it's easy to drop in a new theme from time to time. I grabbed one off Bootswatch to get started, but am looking forward to tinkering with it.

Mobile friendly display

Since Bootstrap 3 is a mobile first framework, it always looks good on smaller displays. Posts automatically scale down for mobile devices using media queries.

More Authoring Options

I've always been a fan of Live Writer, and that's still supported. And there's HTML support, which is good. But Orchard also introduces Markdown editing support, which I'm told will cause my pants to shrink and my beard to grow out. So that's something.

Widgets!

I'd been sneakily creating widgets for years by injecting HTML and JavaScript, but now there's real support. Orchard has some nice widgets, and you can drop them into 19 different zones, as shown on the right.

As I was beta testing, I asked Sebastien if we could move the comments from the content to an after content module so I could insert custom HTML widgets above the comments, and he set that up. So far, the widgets have been incredibly flexible. No complaints at all there.

Spam Control

As I mentioned earlier, the spam was a bit out of hand before. Orchard adds ReCAPTCHA support. No messing around now, I can barely pass it.

Social Media Tag support

Orchard automatically includes support for all the fancy og:tags that are so hot these days. Sebastien wrote a post with more information.

Custom Script Support

I have already admitted to jamming script tags in HTML areas on the previous site. The new site includes the ability to add custom scripts for analytics, syntax highlighting, etc. It's supported, and I can include them in the header or footer as appropriate.

Site Nav Integration

Now new pages can be integrated into the site navigation. Cool.

More Goodness!

There's a lot more! If you're running a blog that's hosted on weblogs.asp.net, see the updated support here. If you'd like to learn more about Orchard - or contribute, as it's an open source project - check out the Orchard Project. I'll be posting more about some things I've learned in customizing my blog a bit, including the code formatting.

A 30 Minute Look At ASP.NET vNext

Tue, 13 May 2014 23:05:50 GMT

This week at TechEd, the ASP.NET team announced some pretty exciting updates on the way for ASP.NET.

What Is It?

In case you haven't read up on it, I'll just quote from the ASP.NET site:

The next version of ASP.NET (“ASP.NET vNext”) has been re-designed from the ground up. The goal is to create a lean and composable .NET stack for building modern cloud-based apps.

Here are some of the features of ASP.NET vNext:

vNext includes new cloud-optimized versions of MVC, Web API, Web Pages, SignalR, and Entity Framework.

MVC, Web API, and Web Pages will be merged into one framework, called MVC 6. The new framework removes a lot of overlap between the existing MVC and Web API frameworks. It uses a common set of abstractions for routing, action selection, filters, model binding, and so on. You can use the framework to create both UI (HTML) and web APIs.

ASP.NET vNext apps can use a cloud-optimized subset of .NET vNext. This subset is factored for server and web workloads, has a smaller footprint than the full .NET vNext, and supports side-by-side deployment.

MVC 6 has no dependency on System.Web. The result is a leaner framework, with faster startup time and lower memory consumption.

vNext will support true side-by-side deployment. If your app uses the cloud-optimized subset of .NET vNext, you can bin deploy all of your dependencies, including the .NET vNext (cloud optimized) packages. That means you can update your app without affecting other applications on the same server.

vNext is host agnostic. You can host your app in IIS, or self-host in a custom process. (Web API 2 and SignalR 2 already support self-hosting; ASP.NET vNext brings this same capability to MVC.)

Dependency injection is built into the framework. Use your preferred IoC container to register dependencies.

vNext uses the Rosyln compiler to compile code dynamically. You will be able to edit a code file, refresh the browser, and see the changes without rebuilding the project.

vNext is open source and cross platform.

To me as a web developer, this means I get:

All the advantages of the .NET platform (performance, stability, security, comprehensive API), and
The development experience of C# and Visual Studio... with
The simplicity, portability, quick dev refresh cycle and flexibility of an interpreted web framework.

And I like the sound of that.

Source Code

All the source code and samples are published under a new ASP.NET organization on GitHub. There are lots of interesting repos to look at; here are some top ones to get started with:

Home repository

This is the place to get started. The readme for this repo explains how to install and run the Hello World samples.

Music Store sample

Ah, the Music Store. The team wanted some samples to validate and test vNext as they developed it, and this was one of them. I updated the source code to ASP.NET MVC 5 and threw it over the wall to them, and it seems to have held up. Cephas Lin has a Music Store walkthrough posted in the vNext content on the ASP.NET site, and it's pretty easy to follow along.

BugTracker sample

The BugTracker is a single page application using SignalR, Knockout.js and Web API. I'm pretty happy that they had a single page application as one of their validation cases from the beginning.

KRuntime

If you're feeling adventurous, this it the actual runtime. It includes things like the compilation system, SDK tools, and the native CLR hosts. (parental warning advisory if stumbling across some C++ gives you nightmares)

Quick Walkthrough

I promised I'd skip the detailed walkthrough, because you really should be looking at the "official" ones I've linked to above. My point here is not really guide you through them, but to give you a look at what the experience is like if you're not feeling up to doing it yourself. So let's see what I can get running in 30 minutes or so (until my next meeting). If you want to follow along, read the walkthroughs.

Important Notes Before We Get Started

I'm doing this on my dev machine. It runs side by side with my existing .NET and Visual Studio 2013 installs.

This looks a bit fiddly because we're doing this all from the commandline. Don't worry if that's not your bag - this will all be supported via Visual Studio. This is an early preview. But, it's good that this level of control is available. Note that I'm doing all of this without firing up Visual Studio or installing any other software.

You'll see the letter K pops up from time to time. This was internally called Project K before it was released. I have no idea if the k will go away now, but I kind of like it. So we've got kvm (k version manager), kre (k runtime engine), kpm (k package manager), and k (the actual bootstrapper to run our app).

The Home Repo samples

First, let's try out the ASP.NET vNext Home repo. I've already got this locally, but for the purposes of science I'll pretend that I don't. Since I'm just kicking the tires here, instead of cloning the repo I'll just download the zip to my desktop, unblock if necessary, and unzip it.

Here's what that gets me:

C:\Users\Jon\Desktop\Home-master\Home-master>dir
 Volume in drive C has no label.
 Volume Serial Number is 5E2E-AE5E

 Directory of C:\Users\Jon\Desktop\Home-master\Home-master

05/13/2014  02:29 PM    <DIR>          .
05/13/2014  02:29 PM    <DIR>          ..
05/13/2014  01:51 PM               851 .gitattributes
05/13/2014  01:51 PM               245 .gitignore
05/13/2014  01:51 PM             1,513 CONTRIBUTING.md
05/13/2014  01:51 PM               356 kvm.cmd
05/13/2014  01:51 PM            17,278 kvm.ps1
05/13/2014  01:51 PM                28 kvmsetup.cmd
05/13/2014  01:51 PM               592 LICENSE.txt
05/13/2014  01:51 PM               481 NuGet.Config
05/13/2014  01:51 PM             6,390 README.md
05/13/2014  02:29 PM    <DIR>          samples
               9 File(s)         27,734 bytes
               3 Dir(s)  11,363,086,336 bytes free

The next step in the readme tells me to execute kvmsetup.cmd, which tells me this:

Copying file C:\Users\Jon\.kre\bin\kvm.ps1
Copying file C:\Users\Jon\.kre\bin\kvm.cmd
Adding C:\Users\Jon\.kre\bin to process PATH
Adding C:\Users\Jon\.kre\bin to user PATH
Adding C:\Program Files\KRE;%USERPROFILE%\.kre to process KRE_HOME
Adding C:\Program Files\KRE;%USERPROFILE%\.kre to machine KRE_HOME
Press any key to continue ...

And with that, we've got the version manager installed. Important: this is the version manager, not the runtime. We can install multiple versions of the runtime engine, and use kvm to select the active one for a project.

Next, the readme tells me to install a named version of the K Runtime Engine: kvm install 0.1-alpha-build-0421

C:\Users\Jon\Desktop\Home-master\Home-master>kvm install 0.1-alpha-build-0421
Downloading KRE-svr50-x86.0.1-alpha-build-0421 from https://www.myget.org/F/aspnetvnext/api/v2/
Installing to C:\Users\Jon\.kre\packages\KRE-svr50-x86.0.1-alpha-build-0421
Adding C:\Users\Jon\.kre\packages\KRE-svr50-x86.0.1-alpha-build-0421\bin to process PATH

Now we've got a runtime installed, so we can run some samples. The readme recommends running the console sample first, and I think that makes sense since it's an incredibly simple app that verifies things are installed. So I cd to samples\ConsoleApp and run kpm restore. This looks scary, but it's really fast, and it's a good thing. The idea is that instead of running on big, monolithic framework assemblies, ASP.NET vNext is grabbing a bunch of small, focused NuGet packages.

C:\Users\Jon\Desktop\Home-master\Home-master>cd samples\ConsoleApp

C:\Users\Jon\Desktop\Home-master\Home-master\samples\ConsoleApp>kpm restore

C:\Users\Jon\Desktop\Home-master\Home-master\samples\ConsoleApp>CALL "C:\Users\Jon\.kre\packages\KRE-svr50-x86.0.1-alpha-build-0421\bin\KLR.cmd" --lib "C:\Users\Jon\.kre\packages\KRE-svr50-x86.0.1-alpha-build-0421\bin\;C:\Users\Jon\.kre\packages\KRE-svr50-x86.0.1-alpha-build-0421\bin\lib\Microsoft.Framework.PackageManager" "Microsoft.Framework.PackageManager" restore
Restoring packages for C:\Users\Jon\Desktop\Home-master\Home-master\samples\ConsoleApp\project.json
Attempting to resolve dependency ConsoleApp >= 1.0.0
Attempting to resolve dependency System.Console >= 4.0.0.0
  GET https://www.myget.org/F/aspnetvnext/FindPackagesById()?Id='System.Console'
  GET https://nuget.org/api/v2/FindPackagesById()?Id='System.Console'
Attempting to resolve dependency mscorlib >=
Attempting to resolve dependency System >=
Attempting to resolve dependency System.Core >=
Attempting to resolve dependency Microsoft.CSharp >=
Attempting to resolve dependency ConsoleApp >= 1.0.0
Attempting to resolve dependency System.Console >= 4.0.0.0
  OK https://nuget.org/api/v2/FindPackagesById()?Id='System.Console' 931ms
  OK https://www.myget.org/F/aspnetvnext/FindPackagesById()?Id='System.Console' 972ms
  GET https://www.myget.org/F/aspnetvnext/api/v2/package/System.Console/4.0.0.0
  OK https://www.myget.org/F/aspnetvnext/api/v2/package/System.Console/4.0.0.0 1696ms
Attempting to resolve dependency System.IO >= 4.0.0.0
  GET https://www.myget.org/F/aspnetvnext/FindPackagesById()?Id='System.IO'
  GET https://nuget.org/api/v2/FindPackagesById()?Id='System.IO'
Attempting to resolve dependency System.Runtime >= 4.0.0.0
  GET https://www.myget.org/F/aspnetvnext/FindPackagesById()?Id='System.Runtime'
  GET https://nuget.org/api/v2/FindPackagesById()?Id='System.Runtime'
  OK https://nuget.org/api/v2/FindPackagesById()?Id='System.Runtime' 659ms
  OK https://www.myget.org/F/aspnetvnext/FindPackagesById()?Id='System.IO' 838ms
  OK https://www.myget.org/F/aspnetvnext/FindPackagesById()?Id='System.Runtime' 841ms
  GET https://www.myget.org/F/aspnetvnext/api/v2/package/System.Runtime/4.0.20.0
  OK https://nuget.org/api/v2/FindPackagesById()?Id='System.IO' 954ms
  GET https://www.myget.org/F/aspnetvnext/api/v2/package/System.IO/4.0.0.0
  OK https://www.myget.org/F/aspnetvnext/api/v2/package/System.IO/4.0.0.0 1779ms
Attempting to resolve dependency System.Text.Encoding >= 4.0.0.0
  GET https://www.myget.org/F/aspnetvnext/FindPackagesById()?Id='System.Text.Encoding'
  GET https://nuget.org/api/v2/FindPackagesById()?Id='System.Text.Encoding'
Attempting to resolve dependency System.Threading.Tasks >= 4.0.0.0
  GET https://www.myget.org/F/aspnetvnext/FindPackagesById()?Id='System.Threading.Tasks'
  GET https://nuget.org/api/v2/FindPackagesById()?Id='System.Threading.Tasks'
  OK https://www.myget.org/F/aspnetvnext/api/v2/package/System.Runtime/4.0.20.0 1919ms
  OK https://nuget.org/api/v2/FindPackagesById()?Id='System.Text.Encoding' 746ms
  OK https://www.myget.org/F/aspnetvnext/FindPackagesById()?Id='System.Text.Encoding' 837ms
  GET https://www.myget.org/F/aspnetvnext/api/v2/package/System.Text.Encoding/4.0.10.0
  OK https://www.myget.org/F/aspnetvnext/FindPackagesById()?Id='System.Threading.Tasks' 843ms
  OK https://nuget.org/api/v2/FindPackagesById()?Id='System.Threading.Tasks' 1051ms
  GET https://www.myget.org/F/aspnetvnext/api/v2/package/System.Threading.Tasks/4.0.0.0
  OK https://www.myget.org/F/aspnetvnext/api/v2/package/System.Text.Encoding/4.0.10.0 1356ms
  OK https://www.myget.org/F/aspnetvnext/api/v2/package/System.Threading.Tasks/4.0.0.0 1721ms
Resolving complete, 8357ms elapsed
Installing System.Console 4.0.0.0
Installing System.Runtime 4.0.20.0
Installing System.IO 4.0.0.0
Installing System.Text.Encoding 4.0.10.0
Installing System.Threading.Tasks 4.0.0.0
Restore complete, 8495ms elapsed

Now I run it with k run:

C:\Users\Jon\Desktop\Home-master\Home-master\samples\ConsoleApp>k run
Hello World

C:\Users\Jon\Desktop\Home-master\Home-master\samples\ConsoleApp>

Like I said, not all that exciting. Just a quick verification check. Now that I know that's working, I'll quickly pop into one of the other sandbox samples, the HelloWeb one. Notice how simple the startup.cs file is (the official walkthrough explains it in detail).

C:\Users\Jon\Desktop\Home-master\Home-master\samples\HelloWeb>dir
 Volume in drive C has no label.
 Volume Serial Number is 5E2E-AE5E

 Directory of C:\Users\Jon\Desktop\Home-master\Home-master\samples\HelloWeb

05/13/2014  02:29 PM    <DIR>          .
05/13/2014  02:29 PM    <DIR>          ..
05/13/2014  01:51 PM           310,647 image.jpg
05/13/2014  01:51 PM               506 project.json
05/13/2014  01:51 PM               227 Startup.cs
               3 File(s)        311,380 bytes
               2 Dir(s)  11,368,951,808 bytes free

C:\Users\Jon\Desktop\Home-master\Home-master\samples\HelloWeb>copy startup.cs con
using Microsoft.AspNet.Builder;

namespace KWebStartup
{
    public class Startup
    {
        public void Configure(IBuilder app)
        {
            app.UseStaticFiles();
            app.UseWelcomePage();
        }
    }
}        1 file(s) copied.

C:\Users\Jon\Desktop\Home-master\Home-master\samples\HelloWeb>

Now I'll call kpm restore , just like before. This time kpm restore takes a bit longer, because there are more included packages (listed in project.json) and their dependencies.

And I'm ready to run it. This time, instead of k run, I'll call k web since it's a web app. If I forget and call k run, it reminds what's what:

C:\Users\Jon\Desktop\Home-master\Home-master\samples\HelloWeb>k run
'HelloWeb' does not contain a static 'Main' method suitable for an entry point

Fine, k web it is. It tells me the server's started, but how do I view it? Well, the readme tells me it's at http://localhost:5001, but if I didn't know I could consult the commands section of project.json:

"commands": {
    "web": "Microsoft.AspNet.Hosting server=Microsoft.AspNet.Server.WebListener server.urls=http://localhost:5001"
  }

Simple enough. And browsing to that gives me a cool hello world page:

Nerd note: That page is shown because we've got app.UseWelcomePage() in startup.cs. There are no images or css in the project because everything's contained in the emitted HTML. It's actually really impressive - it's got embedded fonts, images as data:urls, CSS, and a minimized version of jQuery (for some nice animations), so it's a 287KB HTML payload... but since it's being served locally and you're not going to run this in production, not a problem.

Nerd smackdown: David Fowler reminded me that this welcome page has been in Katana for a while.

Music Store

Okay, now that I've got this stuff installed, let's see how fast I can get the Music Store sample running.

Step 1: Grab the zip from https://github.com/aspnet/MusicStore, verify it's not blocked, and unzip on desktop.

Step 2: Run kpm restore.

Step 3: Select the hosting opeion (Helios, SelfHost, CustomHost - explained here). In this case I'll stick with selfhost, so I run k web and browse to localhost:5002:

Yippee!

Again, the point is that it's pretty quick and painless to get started and play with the samples; just follow the walkthroughs. If you're used to Node or Rails a lot of these steps should seem pretty familiar. If you're not and this freaks you out, don't be freaked out... this will all work smoothly from within Visual Studio in the release version. This is a preview. Take a look! Have Fun! Let us know what you think!

Videos

The best way to get up to speed is by watching the videos I mentioned earlier.

Upcoming Web Camps - Summer 2014

Mon, 12 May 2014 23:21:00 GMT

Web Camps are free, no fluff, lots of code events where you can get learn what's new in the Microsoft web platform and how you can put it to use right away. They're by developers for developers - no marketing, just building web apps.

Upcoming events

Here's the list, with speakers:

May 20 - Lisbon, Portugal - Jon Galloway and Mat Velloso [register (nearly full, hurry!)]
May 22 - Milan, Italy - Jon Galloway and Mat Velloso (additional tracks as part of Cloud e ASP.NET Developer Day) [register]
May 26 - Helsinki, Finland - Jon Galloway and Mat Velloso [register]
May 28 - Brussels (Mechelen), Belgium - Jon Galloway (part of Techorama) [sold out]
June 23 - New York City, NY, USA - Brady Gaster, Nik Molnar, Anthony van der Hoorn [register]
July 9 - Los Angeles, CA, USA - Scott Hunter, Jon Galloway, Daniel Egan, Adam Tuliper [register] (rescheduled)

Fresh ASP.NET and Visual Studio 2013.2 Content

We'll be covering all kinds of great new stuff in ASP.NET, Visual Studio 2013.2 and Azure for web developers. We organized the content so we start with tools and frameworks (e.g. ASP.NET MVC, ASP.NET Web API, Visual Studio 2013.2, Azure Web Sites), then dig into some specific scenarios for modern web application development. Here's the general agenda (varies by location, but should give you the general idea):

Keynote
Introduction to ASP.NET and Visual Studio 2013 Web Tools
Building Web Applications using the latest ASP.NET technologies
Building web front ends for both desktop and mobile using the latest web standards
API Services for both web and devices
Running, improving and maintaining a site in the real world
Real-time Communications with SignalR
Wrap Up

Go on, register (links are up above)! And let your web dev friends and co-workers who don't read blogs know, too, because this is a great way for them to get a recap on what's going on with ASP.NET, Visual Studio 2012, HTML5, JavaScript, and more.

And... if we're not coming to a city near you (this time), you can play along from home. There's a complete video recording of our Web Camp from Vancouver posted on Channel 9, and the Web Camps Training Kit includes all the decks and demos, plus 5 in-depth hands on labs.

Lessons Learned Preparing and Presenting Tech Training Events

Mon, 05 May 2014 23:14:48 GMT

You've agreed to present a full day training event, and the day's approaching. What do you do?

I'm not a training expert, but I've learned a few lessons on the job over the past few years that I think will help. I'd done some technical presentations over the years, but in the 4+ years I've been at Microsoft I've been doing quite a bit more. I've presented at dozens of Web Camp events (both one and two day) all over the world, been in charge of the Web Camps Training Kit for the past few years, helped plan and present two Microsoft Virtual Academy events (both full day, almost 400k online views for some of the sessions). I've also presented some smaller training workshops to some development teams at some large companies as they were looking at making some technology transitions.

Most of these events went pretty well. Some of them, towards the beginning and despite my best efforts, did not go well. Here's what I've learned so far.

Different From One Hour Tech Presentation

I'm going to start with the planning stages in a second, but we need to get one thing out of the way first. A training event is significantly different from a one hour technical presentation. Many of the things are similar - you can start to get a handle on it by breaking an eight hour day into a series of eight one hour talks - but it's different enough that some things you can get away with for an hour won't work for eight, and vice versa.

Just a few of the important differences:

Expectations for the balance training vs. entertaining are different. When people invest a day attending training, they have higher expectations of learning something, whereas some attendees of a one hour session - especially at a conference or code camp - are just "channel surfing" and have greater expectations for entertainment. On the other hand, it's perhaps more important to strategically entertain / engage during a full day of training to break it up.
A full day of training is exhausting. I know an hour presentation seems tiring, but wait until you've done a full day. It's a marathon, not a sprint.
Organization and timing are more important. You might be able to get away with rambling and poor time management for an hour, but it won't fly when you're doing multiple sessions.

Note: Keep in mind that this post is focused on presenting several consecutive hours of technical training. Many of the recommendations I'll give will also apply to your standard one hour technical presentation, but keep in mind that I'm not writing about How To Give A Technical Presentation.

Planning

Ask Questions Early

If at possible, do a short pre-meeting before you get too much into planning. I generally hate meetings and avoid them when possible. This is a meeting you want to have. I get different answers in a meeting than I do in an e-mail thread.

Find out the following:

Who will you be speaking to (numbers, skill level, etc.)?
What do they want to get out of the day?
Get a list of specific questions and topics that they want to learn about.
What is the expected format? Is this presentation style (attendees passively watching speaker), workshop (attendees following along on laptops), a mix, or something else?
Will the presentation be filmed? It usually can be if you ask early enough.
What's the tech setup? What resolution will you be projecting at? What video connector?

Some Anecdotes on Planning

Planning win: A few years back I got a request for a day of advanced MVC training, but during a pre-meeting it came out that the team had no MVC experience and while they were experienced developers, what they needed was an introduction to MVC with a few additional, specific questions addressed at the end of the day after they were up to speed.

Lesson: Ask questions before (or at the very least at the beginning of) the event to determine skill and experience level, don't assume.

Planning fail: Probably my worst presentation ever was an ASP.NET MVC bootcamp I presented at a conference. Having spent a portion of my youth in the military, I'd assumed that the participants at a bootcamp would show up expecting to do some work. In what kind of bizarro world do bootcamp attendees just kick back and watch a presentation? None, right? Right.

So I prepared a long workshop style tutorial wherein I would guide attendees through building an application, completely revolving around them typing things into their laptops. I had a bunch of downloads prepared for them including checkpoints at the end of each section, etc. When I began the presentation, it quickly became apparent that none of my assumptions were correct. Many of the attendees didn't have laptops, many that did have laptops didn't have the development prerequisites, and everyone was expecting to watch me talk to them for half a day. It was horrible. Eventually I just had to give up on my plans, throw out my slides, and come up with something new on the fly. It wasn't good, but it was better than the train wreck my original lesson plan had become. Some left, some stuck around and I did my best to adapt, get those who wanted to follow along set up and speak to the rest of them. Years later, this still haunts me. I'm really sorry.

Lesson: Ask an organizer to make sure you're clear on the format. If you expect people to participate, make sure that's clearly communicated to them before the event. Assume people will be participating as little as they can get away with unless.

Get Another Presenter

Training is SO much easier if you have another presenter who can cover a few of your talks. You'll need breathers, and you'll appreciate time to review notes and set up your demos. Attendees will appreciate the break from watching one person all day, too.

This goes double if you're travelling to another time zone. It's really hard to keep focused and energetic when you're jetlagged. Breaks are important, and you'll be kept busy during scheduled breaks.

Preparing The Lesson Plan

What Matters: The End Result

Decide what you want them to get out of the day and let that drive your outline – not the feature list or demos you want to show off, etc. What will they remember a day after your talk? Focus on that.

Expectations for the balance of training vs. entertaining are different compared to a one hour presentation. When people invest a day attending training, they have higher expectations of learning something, whereas some attendees of a one hour session - especially at a conference or code camp - are just "channel surfing" and have greater expectations for entertainment. On the other hand, it's perhaps more important to strategically entertain / engage during a full day of training to break it up.

A lot of the value you're providing in a full day of training is in the higher level conceptual models and organization. You're not just working through the feature list, you're explaining why the features exist and how they work together.

Work From An Outline

As I mentioned earlier, an eight hour training course is just eight one hour presentations. It takes time an preparation, but you can do this. Let's look at an example breakdown an eight hour course on anything - could be on How To Make Ramen Burgers:

Keynote. You always need an introduction. Explain what you'll cover, set expectations, explain the high level roadmap for the day, cover prerequisites.
The Tools - Explain what you'll use, how it works, where you can learn more. (note: If you're thinking this doesn't apply, remember to adapt tools to the concept. e.g. for Node, this is stuff like NPM.)
The Concepts - Now that we're familiar with the tools, let's build something simple and explain every concept, ever step of the way. Remind advanced folks that we're going to speed up in a bit. Let them feel superior for being so experienced (and stay awake) by asking questions. Key point: the experienced people are not your adversaries! They are your allies, and a huge asset in teaching the class. Include them, don't battle them.
Deep Dive 1
Deep Dive 2
Deep Dive 3
Deep Dive 4
Wrap Up. Summarize what was covered, encourage everyone with what they've learned, give resources for going further. This is important for two reasons. First, you want to tie things up conceptually so they don't just leave with "Whoa, that was a lot of stuff. What was the middle thing?" feeling. Second, you want to make sure they can take advantage of what you just taught them, and learn more or get help.

Yes, steps 4 - 7 are not filled in.

But already you're down from 8 hours to 4 hours, and that's quite something.

Now, for steps 4 - 7, here's the idea. You are the expert. You've been asked to speak because you know something. You're really quite smart, and experienced. Right? If not, well... oh, dear, we should have covered that earlier. You'll really need to be somewhat experienced to do some training. If you're not, and you can't get out of this, hack like mad for a week or two to try to build some experience. Good luck!

So, you're experienced. What would you tell a friend who wanted to learn about this concept? Can you break it into four big things they should know? Either four main concepts, or a four step process? Great. From there, it's just four one hour presentations.

Here's what I currently cover at Web Camps:

Keynote
Introduction to ASP.NET and Visual Studio 2013 Web Tooling <-- The tools
Building Web Applications using the latest ASP.NET technologies <-- The concepts
Building web front ends using the latest web standards <-- Deep dive #1
API Services for both web and devices <-- Deep dive #2
Running, improving and maintaining a site in the real world <-- Deep dive #3
Real-time Communications with SignalR <-- Deep Dive #3
Wrap Up

Note: Presenting several presentations works best if there's a natural flow. In the above case, it's something like Create -> Build -> Deploy.

But be willing to make exceptions. For this example, you'll see there's one small thing that's out of order: Sessions 6 is post-deployment, and 7 is a dev topic. That is completely intentional, based on presenting this content a few times. SignalR is cool and exciting. It's a highlight, and it's fun to end on. Scaling and maintaining a site in production is really important, but it's hard work and requires more energy than most attendees will have at the end of the day. So I break my logical flow to put the hawt guitar solo at the end. And, honestly, to keep people from leaving after session 5, or at lunch time.

A Theme

You've been to technical training, right? It gets hard to keep perspective and focus after a few hours. One really useful way to simplify that is to have a common theme. For me, that's usually a common scenario: we're building a site that does X. It doesn't really matter what X is as long as it fits all of your scenarios and you can excited about it. Really, it should be something you can get excited about. Do you like golfing? Make a golf tracker site, not a Contoso Widget Inventory System. And definitely not a Foo app that tracks Bar and Baz instances.

Demos

Okay, let's start with the bad news:

The only way to keep people awake and interested in a full day training course is with a lot of demos.
It is exponentially harder to do a full day of demos than it is to do a single hour of demos. The hardest part is that you don't really get any set up time in between sessions, but even if you do it might get monopolized by someone with an obscure question who isn't thinking about the time it takes to set up demos for the next session.

So, just plan to give 8 presentations without any time in between them. (Note: Remember that I said it's great to have another presenter? Yeah. Any time another presenter speaks, it resets your clock. Gold.)

Begin / End States

Okay, we've built up some stress. You have to give eight presentations, you can't count on having any prep time between them, and they have to be good. What can you do?

Here's where prep can really help. The idea is that, for each demo, you have a begin state (where the demo starts) and an end state (the way the demo should look when your demo is done). This really helps with your peace of mind: for every demo, you've got a set place to start and - more importantly - a working demo to fall back to in case everything goes wrong. Just like washing your car ensures it won't rain, having a working (and validated) end state for each demo does wonders for both the demo and your peace of mind. Trust me. And, if you get nervous (like me) it's so great knowing there's a working example of your demo app in case things just won't cooperate.

You can do this using source control labels if those come naturally to you. For the Web Camps Training Kit, we just have subfolders with begin and end stats.

Strategic Typing

Think about what you'll be live coding. Does this add value? Does it teach people? Are you 100% certain you can pull it off without dealing with a minor typo here or there? Hey, if you're a ninja coder, more power to you. Run that kata.

For the rest of us, think of what you'll actually show, and what your attendees will profit from seeing. Forget about impressing them, focus on the actual value of having 100 or so people watch you type. As I've done this, I've moved to showing a lot of my demos as tours rather than "feats of strength" - here's what the code looks like, let's talk about it.

I realize I'm not going to impress people with this technique, or get high speaker ratings, or any of that. I'm okay with it. I have a limited amount of time, I choose to focus it on making my viewers successful rather than trying to make me successful.

But, recognize that just watching someone explain code can be boring, too. So I try to pick strategic bits and pieces. An easy way to interact with the code is to intentionally break it, or change output text.

Reset Scripts

Doubling back a bit here, but if you're going to give the same training several times, what do you do? The simplest solution is to have one source of truth, and you copy from that into a presentation directory each time. That totally works. The important bit is not to present from the source directory.

If you want to level-up a bit, you might want to write some scripts. The idea is to have three directories for each demo: Begin, Complete, and Initial. The idea is that your script copies your initial state directories over your presentation directory.

You Don't Have To Write Then All From Scratch

You don't necessarily have to write all of your own demos. More precisely, there's no perceived value to your students / attendees in presenting novel, amazing demos that don't actually accomplish something. Your demos should be optimized for the time and opportunity. Lately I've been building some simple code by hand, then showing a completed example someone else has published. I'll dig in to the code and show them how the exact concepts and code we used in the simple Hello World example work in a completed application.

Ask around - Twitter, social networks, co-workers, etc. Often someone has a great demo already written, waiting for you to show it off. That lets you focus on the presentation, not building a new demo from scratch.

Presentation

Managing expectations

Be really clear with expectations and roadmap throughout the day.

Show the outline at the start of the day and set expectations on what you will and won’t be covering.
Refer back to the outline regularly during the day – it doesn’t hurt to have a “you are here” at the start of each talk. It also cuts down on questions about things that will be covered in a later session.
Wrap up at the end – helps people digest what they’ve learned (as explained earlier).

Things make a lot more sense if you're providing the conceptual framework for attendees to file the content away.

Slides

There are different philosophies on using slides in presentations. For training, my opinion is that they can really help, and it's best to keep them pretty standard.

Here's what I think the slides should do:

Make it easy to follow what you're talking about by showing structure, showing frequent "you are here" signposts, and giving plenty of context.
Gives something for attendees to write down (or take pictures of).
Give the speaker some cues. It's hard to remember where every single demo goes in a full day of training. Some Demo slides that just show the title of the feature or concept can cue you in so you're not wondering what's next or forgetting demos.

The standard things apply - don't read slide after slide, don't make eye charts with tons of bullet points, etc. Use diagrams and pictures where possible. Use the slides to enhance the presentation, not as a crutch.

Rehearsal

It's time consuming, but it's important to take the time for a full rehearsal. If you're co-presenting, take turns presenting your sessions for the other speakers (screen sharing if you're remote). I know this is a big time investment and you won't want to do it - or you'll want to race through it - but this will really pay off.

Two big things to pay attention to:

Timing - You know how it's tricky to nail timing a one hour talk? Multiply that by eight. You need to know which sessions are running long, which ones can be sped up if you're running late, etc.
Demo Transitions - You'll want to make sure you're able to transition smoothly between slides and demos, that the demos actually work when you do them consecutively, etc.

Cheat Sheet

As you're rehearsing, make notes on a one-page cheat sheet. Mine usually include reminders about important bits of code or steps for the demos, anything tricky about the demo reset steps or setup, and important points I miss in practicing. I keep mine with me when I speak, and the fact that I know it's sitting next to me means I rarely really need it. When you do need it, though, it saves your audience from watching you fumble around. And it's handy to glance at during travel, as well.

Tech Check

It's a good idea to get in to the place you'll be presenting early to make sure that your laptop works and check the resolution and font size are visible in the back seats. Attendees shouldn't have to suffer through any of that. If you absolutely can't schedule it, at least find out the tech specifics and make sure you've got whatever video adapters you'll need.

It's All About Preparation

You'll notice that pretty much all of the above covers how to prepare for the event itself. There are a few other small tips for during the event (e.g. have some energy bars or Five Hour Energy handy, ask questions at the beginning to verify attendee experience level), but if you've prepared correctly then most of the actual presentation is already done. Just be the user interface for the content you've prepared. Disappear.

5 Tricks for catching up on the Channel 9 event videos for Build 2014

Tue, 15 Apr 2014 23:01:45 GMT

Okay, you've had a week to digest all the video content from Build 2014? Done yet? Me, neither. Well, how about some tricks to make this easier?

I'd written up a few tips and tricks for catching up on Channel 9 event videos back in 2011, this is an update circa 2014.

Trick 1: Subscribe and watch at high speed in VLC

There are a lot of sessions, and watching even at 10% faster makes a difference. I think you'll be surprised at how, with a little practice, you can keep cranking the speed up and absorb the content at 2x or even faster. Note: Every time I tell people about high speed playback, people assume it's going to make the speakers sound like chipmunks. All of the high speed playback options I'm going to show are pitch corrected, so they don't raise the speakers' voices.

If you don't have VLC installed, I highly recommend it. It's lightweight and has a minimal interface, but is packed with codecs and advanced features when you need them. You can install via Chocolatey (cinst vlc), directly from http://www.videolan.org/, or from http://ninite.com.

Run VLC and pop into Playlist mode. You can do that from the View menu, hit Ctrl+L, or click on the Playlist icon at the bottom to do that.

In the Playlist interface, expand the Internet group and click on + sign to the right of Podcasts.

This brings up a prompt to enter the URL for the feed. Each Channel 9 event has a list of formats available under the "Subscribe to this event" link:

You have a few options (the types are obvious from the last bit of the URL):

You can enter the format of your choice here - in my case I'm going to pick the MP4 HD feed: http://channel9.msdn.com/Events/Build/2014/RSS/mp4high. However, note that the MP3 format is available. We'll get back to that later.

That grabs the feed and builds a playlist for us, listing all the videos.

Note: nothing's been downloaded at this point, it's just showing the list from the RSS feed.

Now I'll use the search section to filter on ASP.NET because I do love it so.

Here's the key thing - when I double click the video to start streaming it, I'll switch to a faster speed. There are two ways to do that.

The easy way is to use the Playback / Speed menu.

Once you get hooked on this, though, you can use the [ and ] hotkeys (speed up and slow down respectively). Now I'm watching this demo at 2x speed. You might start with 1.5x or so and crank it up as you get more used to it.

Trick 2: Use high speed playback in the Channel 9 player

HTML5 video players in all the new browsers support high speed playback. Here's an example showing the Day 1 Keynote on the Channel 9 site; I've right clicked the video to bring up the context menu and I'm about to kick it up to 2x.

That's it! Easy!

Trick 3: Subscribe to the MP3 feed on Windows Phone 8.1

One of my favorite sleeper features in Windows Phone 8.1 is support for high speed playback in the new Podcasts app. For this one, I wanted to add the MP3 URL for just the Build 2014 event: http://channel9.msdn.com/Events/Build/2014/RSS/mp3

But that's a bit long to type on the phone, so I made a special short URL: http://aka.ms/b14mp3

Then in the Podcasts app, I chose add by URL:

That gave me a list of MP3's. In the podcast options, I can select to have it stream or download them. Now, once I started playing one, I clicked on the little 1.5x thing to the right of the video twice, toggling to 2x speed.

Yee haw!!!

Notes:

David Tesar reminded me that the Moliplayer video player app for Windows Phone has variable speed playback.
There are high speed playback options for other phones, too. On Android, the Astro Player app has great support for variable speed playback.

Trick 4: Downloading videos using a script

In the past, I've published some Powershell scripts for bulk downloading Channel 9 videos. Here' s one, updated for Build 2014. But don't run it just yet, because I think I've found a better options, which I'll show you next.

Trick 5: Downloading videos using a smarter script

That's fine, but it's kind of heavy handed. Let's be honest, have you actually watched all of the videos from an event before? It's more likely that you'll want to pick some based on the topic. I found a great site that builds customized feeds based on the session tags: http://dayngo.com/channel9/Events/a99db53e-aa3d-4089-9859-a2fe017ca357/Build_2014

Disclaimer: This is some random site I found on the internet. Works on my machine. It does generate scripts, so you can see what it's doing.

Here I've filtered to show events tagged with ASP.NET, Web API, and Node.js.

Clicking the download button lets me select the formats I want to download.

That generates a custom PowerShell script (WGET is also an option) with just the content I picked:

$overwrite = $false
$webClient = New-Object System.Net.WebClient 
$feeds =  (("Take_Your_Solution_Worldwide_from_the_Start_with_Bing_Translator.mp4","http://video.ch9.ms/sessions/build/2014/2-656_LG.mp4"),("Continuous_Delivery_and_Continuous_Integration_with_Visual_Studio_Online_and_Microsoft_Azure.mp4","http://video.ch9.ms/sessions/build/2014/3-584_LG.mp4"),("What_s_New_for_ASP_NET_and_Web_in_Visual_Studio_2013_Update_2_and_Beyond.mp4","http://video.ch9.ms/sessions/build/2014/3-602_LG.mp4"),("Building_Web_APIs_for_Mobile_Apps_Using_ASP_NET_Web_API_2_1.mp4","http://video.ch9.ms/sessions/build/2014/3-603_LG.mp4"),("Deep_Dive_Improving_Performance_in_Your_ASP_NET_App.mp4","http://video.ch9.ms/sessions/build/2014/3-605_LG.mp4"),("Powerful_Mobile_Apps_with_Mobile_Services_and_ASP_NET_Web_API.mp4","http://video.ch9.ms/sessions/build/2014/3-623_LG.mp4"),("Using_Node_js_and_Python_in_Visual_Studio_and_on_Azure.mp4","http://video.ch9.ms/sessions/build/2014/3-631_LG.mp4"),("Building_a_Single_Page_Application_with_ASP_NET_and_AngularJS.mp4","http://video.ch9.ms/sessions/build/2014/3-644_LG.mp4"))  
$entries = $feeds.Length
$progress = 0 
$pagepercent = 0 
$dir = get-location
foreach ($item in $feeds){
    $name,$link = $item
    $saveFileName = join-path $dir $name
    if ((-not $overwrite) -and (Test-Path -path $saveFileName))     
    {        
        write-progress -activity "$saveFileName already downloaded" -status "$pagepercent% ($progress / $entries) complete" -percentcomplete $pagepercent    
    }    
    else     
    {        
        write-progress -activity "Downloading $saveFileName" -status "$pagepercent% ($progress / $entries) complete" -percentcomplete $pagepercent       
        &{#TRY
            $webClient.DownloadFile($link, $saveFileName)
        }
        trap [Exception]{
            write-host
            write-host ("Unable to download " + $saveFileName)
            continue; 
        }
    }    
    $pagepercent = [Math]::floor((++$progress)/$entries*100) 
}

Hope these tips help. Get to work!

Looking at ASP.NET MVC 5.1 and Web API 2.1 - Part 4 - Web API Help Pages, BSON, and Global Error Handling

Wed, 26 Feb 2014 19:51:00 GMT

This is part 4 of a series covering some of the new features in the ASP.NET MVC 5.1 and Web API 2.1 releases. The last one! If you've read them all, you have earned twelve blog readership points... after you finish this one, of course. Here are the previous posts:

Part 1: Overview and Enums
Part 2: Attribute Routing with Custom Constraints
Part 3: Bootstrap and JavaScript enhancements
Part 4: Web API Help Pages, BSON, and Global Error Handling

The sample project covering the posts in this series is here; other referenced samples are in the ASP.NET sample repository.

As a reminder, Part 1 explained that ASP.NET MVC 5.1 / Web API 2.1 is a NuGet update for the MVC 5 / Web API 2 releases that shipped with Visual Studio 2013. There will be a Visual Studio update that will make them the defaults when you create new projects.

In this post, we'll look at new features in ASP.NET Web API 2.1.

Attribute Routing

We already looked at the updates to Attribute Routing improvements for both ASP.NET Web API and MVC in the second post in this series, I just want to call it out again since this post is overviewing all of the other new features in ASP.NET Web API 2.1 and the Attribute Routing support for custom constraints is one of the top features in the ASP.NET Web API 2.1 release.

As a reminder, custom route constraints make it really easy to create wrap route matching logic in a constraint which can then be placed on ApiControllers or actions like this:

[VersionedRoute("api/Customer", 1)]
public class CustomerVersion1Controller : ApiController
{
    // controller code goes here
}
[VersionedRoute("api/Customer", 2)]
public class CustomerVersion2Controller : ApiController
{
    // controller code goes here
}

In that example, the custom VersionedRoute constraint looks for an api-version header and forwards the request to the correct controller. See the post for more information, including a link to the sample application.

Help Page improvements

Okay, let's dig into some of the cool new features we haven't seen yet. To start with, I'm going to scaffold out a new PersonApiController using the same Person class I've used earlier in this series, shown below:

public class Person
{
    [ScaffoldColumn(false)]
    public int Id { get; set; }
    [UIHint("Enum-radio")]
    public Salutation Salutation { get; set; }
    [Display(Name = "First Name")]
    [MinLength(3, ErrorMessage = "Your {0} must be at least {1} characters long")]
    [MaxLength(100, ErrorMessage = "Your {0} must be no more than {1} characters")]
   public string FirstName { get; set; }
    [Display(Name = "Last Name")]
    [MinLength(3, ErrorMessage = "Your {0} must be at least {1} characters long")]
    [MaxLength(100, ErrorMessage = "Your {0} must be no more than {1} characters")]
    public string LastName { get; set; }
    public int Age { get; set; }
}
//I guess technically these are called honorifics
public enum Salutation : byte
{
    [Display(Name = "Mr.")]   Mr,
    [Display(Name = "Mrs.")]  Mrs,
    [Display(Name = "Ms.")]   Ms,
    [Display(Name = "Dr.")]   Doctor,
    [Display(Name = "Prof.")] Professor,
    Sir, 
    Lady, 
    Lord
}

And we're using the standard Web API scaffolding:

Nothing has really changed for the top level ASP.NET Web API Help Page - you get a generated list of API calls for each API Controller.

What has changed is what you see when you click through on one of the API calls, e.g. the PersonApi GET method. Here's how that looked in ASP.NET Web API 2.1:

It shows sample data in JSON and XML, and you can kind of guess what they are if you've named your model properties well, but there's no information on type, model attributes, validation rules, etc.

Here's how it looks in ASP.NET Web API 2:

The Response Formats section hasn't changed, but now we have a Resource Description area at the top. Let's take a closer look at that:

Here we're clearly displaying both the type and validation rules.

Note that the Salutation type is hyperlinked, since it's using our custom Salutation enum. Clicking through shows the possible values for that enum:

If you've done any work integrating with API's that had minimal or out of date documentation, hopefully the value of the above is really clear. What's great is that this is generated for me at runtime, so it's always up to date with the latest code. If my Web API is in production and I add a new Enum value or change a validation rule, the live documentation on the web site is immediately updated without any work or extra thought on my part as soon as I deploy the code.

Short detour: Filling in Descriptions using C# /// Comments

Now that we've got documentation for our model types, it's clear that we could improve it a bit. The most obvious thing is that there's no provided description. That's easy to add using C# /// comments (aka XML Comments). ASP.NET Web API Help Pages have had support for /// comments documentation for a while, it just hasn't been this obvious.

The ASP.NET Web API Help Pages are implemented in a really clear, open model: it's all implemented in an ASP.NET MVC Area within your existing site. If you're not familiar with ASP.NET MVC Areas, they're a way to allow you to segment your applications into with separate routes, models, views and controllers but still keep them in the same project so it's easier to manage, share resources, etc.

Here's the Help Page Area within the sample project we're working on:

1. In the above screenshot, I've highlighted the \App_Start\HelpPageConfig.cs file because that's where we're going to set up the XML comments. There's a Register method right at the top with the following two lines:

//// Uncomment the following to use the documentation from XML documentation file.
//config.SetDocumentationProvider(new XmlDocumentationProvider(HttpContext.Current.Server.MapPath("~/App_Data/XmlDocument.xml")));

So to use that, we'll uncomment the second line, just as the instructions say.

2. Note that the comments are pointing to an XmlDocument.xml file. We need to check a box in the project settings to generate that XML file as shown below.

That's it!

Once that's done, I'm going to throw the /// comments on the controller methods and model properties and generate XML comments. I used GhostDoc to generate the comments, then cleaned them up and editorialized a bit.

/// <summary>
/// This is an example person class. It artisanally crafted by a
/// bearded, bespeckled craftsman after being lovingly sketched
/// in a leather bound notebook with charcoal pencils.
/// </summary>
public class Person
{
    [ScaffoldColumn(false)]
    public int Id { get; set; }
    /// <summary>
    /// This uses a custom salution enum since there's apparently no ISO standard.
    /// </summary>
    /// <value>
    /// The person's requested salutation.
    /// </value>
    [UIHint("Enum-radio")]
    public Salutation Salutation { get; set; }
    [Display(Name = "First Name")]
    [MinLength(3, ErrorMessage = "Your {0} must be at least {1} characters long")]
    [MaxLength(100, ErrorMessage = "Your {0} must be no more than {1} characters")]
   public string FirstName { get; set; }
    [Display(Name = "Last Name")]
    [MinLength(3, ErrorMessage = "Your {0} must be at least {1} characters long")]
    [MaxLength(100, ErrorMessage = "Your {0} must be no more than {1} characters")]
    public string LastName { get; set; }
    /// <summary>
    /// This is the person's actual or desired age.
    /// </summary>
    /// <value>
    /// The age in years, represented in an integer.
    /// </value>
    public int Age { get; set; }
}

And here's the updated help page with the descriptions:

There are a ton of other features in the HelpPageConfig - you could pull your documentation from a database or CMS, for example. And since it's all implemented in standard ASP.NET MVC, you can modify the views or do whatever else you want. But it's nice to have these new features available out of the box.

BSON

BSON is a binary serialization format that's similar to JSON in that they both store name-value pairs, but it's quite different in how the data is actually stored. BSON serializes data in a binary format, which can offer some performance benefits for encode / decode / traversal. It's been possible to hook up a custom BSON formatter in ASP.NET Web API before; Filip and others have written comprehensive blog posts describing how to do just that. It's even easier now - both for clients and servers - since the BSON formatter is included with ASP.NET Web API.

Important note: BSON isn't designed to be more compact than JSON, in fact it's often bigger (depending on your data structure and content). That's because, unlike JSON, BSON embeds type information in the document. That makes for fast scan and read, but it's holding more data than the equivalent JSON document. That means that it will be faster in some cases, but it may be slower in other cases if your messages are bigger. This shows the value of content negotiation and flexible formatters in ASP.NET Web API - you can easily try out different formatters, both on the client and server side, and use the best one for the job.

I'll look at two examples here.

Testing BSON with a text-heavy model

For the first example, I'll use the Person class we've been using for our previous examples. I'd like to have a lot more people in my database. I grabbed some absolutely silly code I wrote 7 years ago that generates fake surnames (Generate random fake surnames) and added a controller action to slam 500 new people with a first name of Bob but a random last name and age into the database. Then I clicked on it a few times.

Turning on the BSON formatter is just a one line code change:

public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        config.Formatters.Add(new BsonMediaTypeFormatter());
        // ...
    }
}

Now whenever a client sends an Accept header for application/bson, they'll get the data in BSON format. For comparison, I'm making two requests in Fiddler. Here's a request with no Accept header specified, so we get JSON:

The content-length there is 118,353 bytes.

Now I'm setting an Accept header with application/bson:

Notice that this BSON request is 134,395 bytes, or 13% larger. I've marked some of the type identifiers in there, but you can see there are a lot more since they're lined up in columns.

Place your bets: think the faster BSON serializer will be faster, despite the larger payload size? Before we answer that, we'll add in a second scenario that replaces our text-heavy Person class with a quite exciting BoringData class that's mostly numeric and binary data:

public class BoringData
{
    public int Id { get; set; }
    public long DataLong { get; set; }
    public byte[] DataBytes { get; set; }
    public DateTime DataDate { get; set; }
}

And here's the test we'll throw at both of these:

private HttpClient _client = new HttpClient();
static void Main(string[] args)
{
    try
    {
        Console.WriteLine("Hit ENTER to begin...");
        RunAsync().Wait();
    }
    finally
    {
        Console.WriteLine("Hit ENTER to exit...");
        Console.ReadLine();
    }
}
private async static Task RunAsync()
{
    using (HttpClient client = new HttpClient())
    {
        await RunTimedTest<BoringData>(client, new JsonMediaTypeFormatter(), "http://localhost:29108/api/BoringDataApi", "application/json");
        await RunTimedTest<BoringData>(client, new BsonMediaTypeFormatter(), "http://localhost:29108/api/BoringDataApi", "application/bson");
        await RunTimedTest<Person>(client, new JsonMediaTypeFormatter(), "http://localhost:29108/api/PersonApi", "application/json");
        await RunTimedTest<Person>(client, new BsonMediaTypeFormatter(), "http://localhost:29108/api/PersonApi", "application/bson");
    }
}
public static async Task RunTimedTest<T>(HttpClient _client, MediaTypeFormatter formatter, string Uri, string mediaHeader)
{
    int iterations = 500;
    _client.DefaultRequestHeaders.Accept.Clear();
    _client.DefaultRequestHeaders.Accept.Add(new System.Net.Http.Headers.MediaTypeWithQualityHeaderValue(mediaHeader));
    MediaTypeFormatter[] formatters = new MediaTypeFormatter[] { formatter };
    var watch = Stopwatch.StartNew();
    for (int i = 0; i < iterations; i++)
    {
        var result = await _client.GetAsync(Uri);
        var value = await result.Content.ReadAsAsync<T[]>(formatters);
    }
    Console.WriteLine("Format: {0,-20} Type: {1,-15}\t Time (s):{2,10:ss\\.fff}", mediaHeader, typeof(T).Name, watch.Elapsed);
}

The BoringDataApi controller's GET method returns lots of data, as you'd expect:

public class BoringDataApiController : ApiController
{
    static Random rng = new Random(Guid.NewGuid().GetHashCode());
    public IEnumerable<BoringData> GetBoringData()
    {
        return GetLotsOfBoringData(100);
    }
    private IEnumerable<BoringData> GetLotsOfBoringData(int quantity)
    {
        byte[] buf1 = new byte[10000];
        byte[] buf2 = new byte[64];

        for (int i = 1; i < quantity; i++)
        {
            rng.NextBytes(buf1);
            rng.NextBytes(buf2);
            yield return new BoringData
            {
                Id  = i,
                DataBytes = buf1,
                DataDate = DateTime.UtcNow,
                DataLong = BitConverter.ToInt64(buf2,0)
            };
        }
    }
}

So, big picture, the test harness will run 500 end to end tests on both controllers, requesting both Person and BoringData as both JSON and BSON. What we're not comparing is the difference between the Person and BoringData responses, we're just looking for some general trends to see if BSON is faster than JSON for a mostly-textual and mostly-binary model. Yes, Kelly Sommers will beat me up for this, and I'm okay with that. My goal is to get some basic guidelines on when BSON works better than JSON.

The real point here is that you won't know how your API or a specific content type will perform until you test it.

So how'd we do?

In this case (and I ran this test many times with the same general result) BSON was a lot faster for mostly binary/numeric data, and a little slower for mostly textual data. In this pretty random example, BSON was 140% faster for the mostly binary case and and 21% slower for the mostly-textual case. That's because both serialize textual data to UTF-8, but BSON includes some additional metadata.

So, very generally speaking, if your service returns a lot of binary / numeric / non-textual data, you should really look at BSON. If you're looking for a silver bullet, you may have to pony up for some silver.

Easier implementations due to BaseJsonMediaTypeFormatter

Yes, that's the most boring heading you'll ever see. But it's hopefully true. The new BaseJsonMediaTypeFormatter has been designed to make it easier to implement new different serialization formats easier, since the the internal JSON formatters have been redesigned to make it easier to extend. I asked Doug, the dev that did most of the work for this BSON update, about his commit message saying recent changes will make it easier to make other formatters like MessagePack happen and he said:

Yes. BaseJsonMediaTypeFormatter introduces a few Json.Net types and concepts. But it also provides solid and reusable async wrappers around easier-to-implement sync methods.

The main thing I've noticed there is the common BaseJsonMediaTypeFormatter. There's not a whole lot of code in the BsonMediaTypeFormatter, since a lot of it's in the common base and in other support classes.

And while I'm mentioning MessagePack, I think it's another great option that's really worth looking at, since (unlike BSON) MessagePack is designed for small message size. There's a MsgPack formatter available now in the WebApiContrib formatters collection, and Filip Woj. wrote a nice blog post overview here: Boost up your ASP.NET Web API with MessagePack.

Global Error Handling

The last feature we'll look at is Global Error Handling. The name's pretty self-descriptive: it lets you register handlers and loggers which will respond to any unhandled exceptions across your entire Web API application.

Global error handling is especially useful in Web API because of the way the parts are so loosely coupled and composable - you've got all kinds of different handlers and filters, wired together with a very configurable system that encourages dependency injection... There's a lot going on.

Note: You can download the PDF of this poster from the ASP.NET site.

That provides you tons of flexibility when you're building HTTP services, but it can make it hard to find out what's wrong when there's a problem. Exception filters help, but as David Matson notes, they don't handle:

Exceptions thrown from controller constructors
Exceptions thrown from message handlers
Exceptions thrown during routing
Exceptions thrown during response content serialization

I recommend David Matson's Web API Global Error Handling wiki article entry in the ASP.NET repository for more information on design and technical implementation. The short excerpt is that you can register one IExceptionHandler and multiple IExceptionLogger instances in your application, and they'll respond to all Web API exceptions.

There's already a pretty clear sample in the Web API samples which shows a GenericTextExceptionHandler (which returns a generic exception message for unhandled exceptions) and an ElmahExceptionLogger (which implements logging using the popular ELMAH logging system). I've been trying to come up with some other use cases, but I think they captured the main ones here - usually if you have an unhandled exception, you want to log it and make sure you return some sort of useful message to your client.

Both of these interfaces are really simple - they both have a single async method (LogAsync and HandleAsync, respectively) which are passed an ExceptionContext and a CancellationToken.

public interface IExceptionLogger
{
    Task LogAsync(ExceptionLoggerContext context, CancellationToken cancellationToken);
}
public interface IExceptionHandler
{
    Task HandleAsync(ExceptionHandlerContext context, CancellationToken cancellationToken);
}

The ExceptionContext includes the exception as well as a lot of other useful context information:

Exception (Exception)
Request (HttpRequestMessage)
RequestContext ()
ControllerContext (HttpControllerContext)
ActionContext (HttpActionContext)
Response (HttpResponseMessage)
CatchBlock (string)
IsTopLevelCatchBlock (bool)

They're registered in your WebApiConfig like this:

public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        config.MapHttpAttributeRoutes();
        // There can be multiple exception loggers. (By default, no exception loggers are registered.)
        config.Services.Add(typeof(IExceptionLogger), new ElmahExceptionLogger());
        // There must be exactly one exception handler. (There is a default one that may be replaced.)
        // To make this sample easier to run in a browser, replace the default exception handler with one that sends
        // back text/plain content for all errors.
        config.Services.Replace(typeof(IExceptionHandler), new GenericTextExceptionHandler());
    }
}

There are a few areas to possibly add to, but I'm going to pass on actually implementing them so I can get this series wrapped before ASP.NET Web API 2.2 ships. Maybe an exercise for the reader?

The sample GenericTextExceptionHandler just returns generic text, but since it has access to the exception details and the context, I'd perhaps instead return an error reference code with the response so customers of my API could use them for troubleshooting. Since one cause of API errors is an inability to access the backend database, I might instead send an error message to Runscope to give more context for debugging there as well.
Rather than implement several IExceptionLogger instances, I'd probably use ELMAH's extensibility to register additional log listeners - there are listeners available for files and databases like XML, JSON, SQL Server, PostgreSQL, SQLite, MySQL, and lots of NuGet packages covering Glimpse integration, RavenDb, MongoDb, etc. One other idea is to add in an additional logger to an additional service like Exceptionless.

Damien (damienbod) has a nice overview of Web API Exception handling, complete with a lot of references: Exploring Web API Exception Handling

Looking at ASP.NET MVC 5.1 and Web API 2.1 - Part 3 - Bootstrap and JavaScript enhancements

Tue, 28 Jan 2014 23:17:00 GMT

This is part 3 of a 4 part series covering some of the new features in the ASP.NET MVC 5.1 and Web API 2.1 releases.

Part 1: Overview and Enums
Part 2: Attribute Routing with Custom Constraints
Part 3: Bootstrap and JavaScript enhancements
Part 4: Web API Help Pages, BSON, and Global Error Handling

In this post, we'll be focusing on some client-side improvements to ASP.NET MVC 5.1.

As a reminder if you haven't read the first post, these updates are currently delivered via a NuGet update to your existing ASP.NET MVC 5 / Web API 2 applications. They'll be part of the File / New Project templates included in an upcoming Visual Studio update.

EditorFor now supports passing HTML attributes - Great for Bootstrap

The new ASP.NET project templates all include Bootstrap themes. Bootstrap uses custom class names for everything - styling, components, layout, behavior. That made it frustrating that you couldn't pass classes down to the Html.EditorFor HTML helper: you either had to use specific HTML Helpers like Html.TextBoxFor (which do allow you to pass HTML attributes, but don't benefit from some of the other nice features in HTML.EditorFor, like Data Attribute support for display and input validation) or give up on using the Bootstrap classes and style things yourself.

In the 5.1 release, you can now pass HTML attributes as an additional parameter to Html.EditorFor, allowing you to get the best of both. Here's an example of why that's useful.

In the first post in the series, we scaffolded a simple create controller and associated views. The Create view ended up looking like this:

That's okay, but it's not taking advantage of any of the Bootstrap form styling (e.g. focus indication, element sizing, groups, etc.) and it won't do anything special with custom Bootstrap themes. A great start would be just to add the "form-control" class to the form elements. That just involves changing from this:

@Html.EditorFor(model => model.FirstName)

to this:

@Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @class = "form-control" }, })

When I make that update to the textboxes, I get this view:

You'll notice some subtle improvements, like the focus highlight on the FirstName field, nicer textbox size and validation layout for Age, etc. These are just really simple things with a very basic model, but they give a quick idea of the improvement here.

Also nice is that I can pass the attributes on Html.EditorFor when displaying the entire model. Here I've updated the entire form section to just use one EditorFor call, passing in the model:

@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()
    
    <div class="form-horizontal">
        <h4>Person</h4>
        <hr />
        @Html.ValidationSummary(true)
        @Html.EditorFor(model => model, new { htmlAttributes = new { @class = "form-control" }, })
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}

Note that to make sure the Id property didn't display and to use the custom radio enum display template (as explained in the first post in the series), I added two annotations to my model. Here's how the model and associated Enum look:

public class Person
{
    [ScaffoldColumn(false)]
    public int Id { get; set; }
    [UIHint("Enum-radio")]
    public Salutation Salutation { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public int Age { get; set; }
}
//I guess technically these are called honorifics
public enum Salutation : byte
{
    [Display(Name = "Mr.")]   Mr,
    [Display(Name = "Mrs.")]  Mrs,
    [Display(Name = "Ms.")]   Ms,
    [Display(Name = "Dr.")]   Doctor,
    [Display(Name = "Prof.")] Professor,
    Sir, 
    Lady, 
    Lord
}

That gives me the exact same output as shown above (the second, nicer screenshot). What's cool there is that the EditorFor method passed that form-control class to each element in the form, so each input tag got the form-control class. That means that I could apply additional Bootstrap classes, as well as my own custom classes, in that same call:

        @Html.EditorFor(model => model, new { htmlAttributes = new { @class = "form-control input-sm my-custom-class" }, })

You can see the code changes and associated tests for this EditorFor change on this commit on CodePlex.

Client-side validation for MinLength and MaxLength

This is a pretty straightforward one: we had client-side validation for StringLength before, but not for MinLength and MaxLength. Personally, I feel like it's a tossup on which to use - StringLength lets you set both min and max and is more widely supported, but MinLength and MaxLength allow you to specify them separately and give different validation messages for each. Regardless, the good news is that whichever you use, they're both supported on both server and client.

To test that out, we'll add some MinLength and MaxLength attributes to our Person class.

public class Person
{
    [ScaffoldColumn(false)]
    public int Id { get; set; }
    [UIHint("Enum-radio")]
    public Salutation Salutation { get; set; }
    [Display(Name = "First Name")]
    [MinLength(3, ErrorMessage = "Your {0} must be at least {1} characters long")]
    [MaxLength(100, ErrorMessage = "Your {0} must be no more than {1} characters")]
    public string FirstName { get; set; }
    [Display(Name = "Last Name")]
    [MinLength(3, ErrorMessage = "Your {0} must be at least {1} characters long")]
    [MaxLength(100, ErrorMessage = "Your {0} must be no more than {1} characters")]
    public string LastName { get; set; }
    public int Age { get; set; }
}

I get immediate feedback on what the website thinks of a potential stage name I've been considering:

Here's the link to the work item, and here's the code diff for the commit.

Three small but useful fixes to Unobtrusive Ajax

There are a few fixes to Unobtrusive Ajax:

I thought the first fix was pretty interesting: a question came up on StackOverflow, someone posted a suggested one line fix on a CodePlex issue, and it got fixed in this commit.

This issue allows callbacks from Unobtrusive Ajax to have access to the initiating element. That's pretty handy when you've got multiple potential callers, e.g. a list of items which contain Ajax.ActionLink calls. In the past, I've had to write unnecessarily complicated JavaScript to wire things up manually because I couldn't take advantage of the OnBegin, OnComplete, OnFailure and OnSuccess options, e.g.

<script type="text/javascript">
    $(function () {
        // Document.ready -> link up remove event handler
        $(".RemoveLink").click(function () {
            // Get the id from the link
            var recordToDelete = $(this).attr("data-id");
            if (recordToDelete != '') {
                // Perform the ajax post
                $.post("/ShoppingCart/RemoveFromCart", {"id": recordToDelete },
                    function (data) {
                        // Successful requests get here
                        // Update the page elements
                        if (data.ItemCount == 0) {
                            $('#row-' + data.DeleteId).fadeOut('slow');
                        } else {
                            $('#item-count-' + data.DeleteId).text(data.ItemCount);
                        }
                        $('#cart-total').text(data.CartTotal);
                        $('#update-message').text(data.Message);
                        $('#cart-status').text('Cart (' + data.CartCount + ')');
                    });
            }
        });
    });
</script>

Now with this change, I'd have the option of wiring up the Ajax call and success callbacks separately and tersely, since they'd have access to the calling element for the ID.

That's it for this post, in the next (and definitely last) post of this series I'll look at some ASP.NET Web API 2.1 improvements.

Looking at ASP.NET MVC 5.1 and Web API 2.1 - Part 2 - Attribute Routing with Custom Constraints

Fri, 24 Jan 2014 23:03:00 GMT

I'm continuing a series looking at some of the new features in ASP.NET MVC 5.1 and Web API 2.1. Part 1 (Overview and Enums) explained how to update your NuGet packages in an ASP.NET MVC application, so I won't rehash that here.

Part 1: Overview and Enums
Part 2: Attribute Routing with Custom Constraints
Part 3: Bootstrap and JavaScript enhancements
Part 4: Web API Help Pages, BSON, and Global Error Handling

The sample project covering the posts in this series is here; other referenced samples are in the ASP.NET sample repository.

In this post, we'll look at improvements to attribute routing for both ASP.NET MVC and ASP.NET Web API. First, a quick review of what routing constraints are used for.

Intro to Routing Constraints

ASP.NET MVC and Web API have both offered both simple and custom route constraints since they first came out. A simple constraint would be something like this:

routes.MapRoute("blog", "{year}/{month}/{day}",
    new { controller = "blog", action = "index" },
    new { year = @"\d{4}", month = @"\d{2}", day = @"\d{2}" });

In the above case, "/2014/01/01" would match but "/does/this/work" would not since the values don't match the required pattern. If you needed something more complex than a simple pattern match, you'd use a custom constraint by implementing IRouteConstraint and defining the custom logic in the Match method - if it returns true, the route is a match.

public interface IRouteConstraint
{
    bool Match(HttpContextBase httpContext, Route route, string parameterName, RouteValueDictionary values, RouteDirection routeDirection);
}

Route Constraints in Attribute Routing

One of the top new features in ASP.NET MVC 5 and Web API 2 was the addition of Attribute Routing. Rather than defining all your routes in /App_Start/RouteConfig.cs using a series of routes.MapRoute() calls, you can define routes using attributes on your controller actions and controller classes. You can take your pick of whichever works better to you: continue to use traditional routing, use attribute routing instead, or use them both.

Attribute routing previously offered custom inline constraints, like this:

[Route("temp/{scale:values(celsius|fahrenheit)}")]

Here, the scale segment has a custom inline Values constraint which will only match if the the scale value is in the pipe-delimited list, e.g. this will match temp/celsius and /temp/fahrenheit but not /temp/foo. You can read more about the Attribute Routing features that shipped with ASP.NET MVC 5, including inline constraints like the above, on this post by Ken Egozi: Attribute Routing in ASP.NET MVC 5.

While inline constraints allow you to restrict values for a particular segment, they're both a little limited (e.g. they can't operate over the entire URL, and some more complex thing that aren't possible at that scope). To see more about what changed and why, see the issue report and changed code for this commit.

Now with ASP.NET MVC 5.1, we can create a new attribute that implements a custom route constraint. Here's an example.

ASP.NET MVC 5.1 Example: Adding a custom LocaleRoute

Here's a simple custom route attribute that matches based on a list of supported locales.

First, we'll create a custom LocaleRouteConstraint that implements IRouteConstraint:

public class LocaleRouteConstraint : IRouteConstraint
{
	public string Locale { get; private set; }
	public LocaleRouteConstraint(string locale)
	{
		Locale = locale;
	}
	public bool Match(HttpContextBase httpContext, Route route, string parameterName, RouteValueDictionary values, RouteDirection routeDirection)
	{
		object value;
		if (values.TryGetValue("locale", out value) && !string.IsNullOrWhiteSpace(value as string))
		{
			string locale = value as string;
			if (isValid(locale))
			{
				return string.Equals(Locale, locale, StringComparison.OrdinalIgnoreCase);
			}
		}
		return false;
	}
	private bool isValid(string locale)
	{
		string[] validOptions = "EN-US|EN-GB|FR-FR".Split('|') ;
		return validOptions.Contains(locale.ToUpper());
	}
}

IRouteConstraint has one method, Match. That's where you write your custom logic which determines if a set of incoming route values, context, etc., match your custom route. If you return true, routes with this constraint are eligible to respond to the request; if you return false the request will not be mapped to routes with this constraint.

In this case, we've got a simple isValid matcher which takes a locale string (e.g. fr-fr) and validates it against a list of supported locales. In more advanced use, this may be querying against a database backed cache of locales your site supports or using some other more advanced method. If you are working with a more advanced constraint, especially a locale constraint, I recommend Ben Foster's article Improving ASP.NET MVC Routing Configuration.

It's important to see that the real value in this case is running more advanced logic than a simple pattern match - if that's all you're doing, you could use a regex inline route constraint (e.g. {x:regex(^\d{3}-\d{3}-\d{4}$)}).

Now we've got a constraint, but we need to map it to an attribute to use in attribute routing. Note that separating constraints from attributes gives a lot more flexibility - for instance, we could use this constraint on multiple attributes.

Here's a simple one:

public class LocaleRouteAttribute : RouteFactoryAttribute
{
	public LocaleRouteAttribute(string template, string locale)
		: base(template)
	{
		Locale = locale;
	}
	public string Locale
	{
		get;
		private set;
	}
	public override RouteValueDictionary Constraints
	{
		get
		{
			var constraints = new RouteValueDictionary();
			constraints.Add("locale", new LocaleRouteConstraint(Locale));
			return constraints;
		}
	}
	public override RouteValueDictionary Defaults
	{
		get
		{
			var defaults = new RouteValueDictionary();
			defaults.Add("locale", "en-us");
			return defaults;
		}
	}
}

Now we've got a complete route attribute we can place on a controller or action:

using System.Web.Mvc;
namespace StarDotOne.Controllers
{
    [LocaleRoute("hello/{locale}/{action=Index}", "EN-GB")]
    public class ENGBHomeController : Controller
    {
        // GET: /hello/en-gb/
        public ActionResult Index()
        {
            return Content("I am the EN-GB controller.");
        }
    }
}

And here's our FR-FR controller:

using System.Web.Mvc;
namespace StarDotOne.Controllers
{
    [LocaleRoute("hello/{locale}/{action=Index}", "FR-FR")]
    public class FRFRHomeController : Controller
    {
        // GET: /hello/fr-fr/
        public ActionResult Index()
        {
            return Content("Je suis le contrôleur FR-FR.");
        }
    }
}

Before running this, we need to verify that we've got Attribute Routes enabled in our RouteConfig:

public class RouteConfig
{
    public static void RegisterRoutes(RouteCollection routes)
    {
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
        routes.MapMvcAttributeRoutes();
        routes.MapRoute(
            name: "Default",
            url: "{controller}/{action}/{id}",
            defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
        );
    }
}

Now a request to /hello/en-gb/ goes to our ENGBController and a request to /hello/fr-fr/ goes to the FRFRController:

Because we've set the default locale in the LocaleRouteAttribute to en-us, we can browse to it using either /hello/en-us/ or just /hello:

If you've been paying close attention, you may be thinking that we could have accomplished the same thing using an inline route constraint. I think the real benefit over a custom inline constraint is when you're doing more than operating on one segment in the URL: preforming logic on the entire route or context. One great example there would be using a custom attribute based on a user's locale selection (set in a cookie, perhaps) or using a header.

So, to recap:

You could write custom route constraints before in "Traditional" code-based routing, but not in attribute routing
You could write custom inline constraints, but they mapped just to a segment in the URL
Custom route constraints now can operate at a higher level than just a segment on the URL path, e.g. headers or other request context

A very common use case for using headers in routing is versioning by header. We'll look at that with ASP.NET Web API 2.1 next. Keep in mind that, while the general recommendation is to use ASP.NET Web API for your HTTP APIs, many APIs are still running on ASP.NET MVC for a variety of reasons (existing / legacy systems APIs built on ASP.NET MVC, familiarity with MVC, mostly-MVC applications with relatively few APIs that want to stay simple, developer preferences, etc.) and for that reason, versioning ASP.NET MVC HTTP APIs by headers is probably one of the top use cases of custom route attribute constaints for ASP.NET MVC as well.

ASP.NET Web API 2.1 Custom Route Attributes example: Versioning By Header

Note: The example I'm showing here is in the official samples list on CodePlex. There's a lot of great examples there, including some samples showing off some of the more complex features you don't hear about all that often. Since the methodology is almost exactly the same as what we looked at in ASP.NET MVC 5.1 and the sample's available, I'll go through this one a lot faster.

First, the custom constraint:

internal class VersionConstraint : IHttpRouteConstraint
{
    public const string VersionHeaderName = "api-version";
    private const int DefaultVersion = 1;
    public VersionConstraint(int allowedVersion)
    {
        AllowedVersion = allowedVersion;
    }
    public int AllowedVersion
    {
        get;
        private set;
    }
    public bool Match(HttpRequestMessage request, IHttpRoute route, string parameterName, IDictionary<string, object> values, HttpRouteDirection routeDirection)
    {
        if (routeDirection == HttpRouteDirection.UriResolution)
        {
            int version = GetVersionHeader(request) ?? DefaultVersion;
            if (version == AllowedVersion)
            {
                return true;
            }
        }
        return false;
    }
    private int? GetVersionHeader(HttpRequestMessage request)
    {
        string versionAsString;
        IEnumerable<string> headerValues;
        if (request.Headers.TryGetValues(VersionHeaderName, out headerValues) && headerValues.Count() == 1)
        {
            versionAsString = headerValues.First();
        }
        else
        {
            return null;
        }
        int version;
        if (versionAsString != null && Int32.TryParse(versionAsString, out version))
        {
            return version;
        }
        return null;
    }
}

This is similar to the simpler LocaleConstraint we looked at earlier, but parses an integer version number from a header. Now, like before, we create an attribute to put this constraint to work:

    internal class VersionedRoute : RouteFactoryAttribute
    {
        public VersionedRoute(string template, int allowedVersion)
            : base(template)
        {
            AllowedVersion = allowedVersion;
        }
        public int AllowedVersion
        {
            get;
            private set;
        }
        public override IDictionary<string, object> Constraints
        {
            get
            {
                var constraints = new HttpRouteValueDictionary();
                constraints.Add("version", new VersionConstraint(AllowedVersion));
                return constraints;
            }
        }
    }
}

And with that set up, we can just slap the attribute header on a couple different ApiControllers:

[VersionedRoute("api/Customer", 1)]
public class CustomerVersion1Controller : ApiController
{
    // controller code goes here
}
[VersionedRoute("api/Customer", 2)]
public class CustomerVersion2Controller : ApiController
{
    // controller code goes here
}

That's it - now requests to /api/Customer with the api-version header set to 1 (or empty, since it's the default) go to the first controller, and with api-version set to 2 go to the second controller. The sample includes a handy test client console app that does just that:

Okay, let's wrap up there for now. In the next (probably final) post, we'll take a quick high level look at some of the other features in this release.

Recap:

Custom route constraints let you run custom logic to determine if a route matches as well as other things like compute values that are available in the matching controllers
The previous release allowed for custom inline route constraints, but they only operated on a segment
This *.1 release includes support for full custom route constraints

Looking at ASP.NET MVC 5.1 and Web API 2.1 - Part 1 - Overview and Enums

Tue, 21 Jan 2014 22:44:00 GMT

This is the first in a four part series covering ASP.NET MVC 5.1 and Web API 2.1

Part 1: Overview and Enums
Part 2: Attribute Routing with Custom Constraints
Part 3: Bootstrap and JavaScript enhancements
Part 4: Web API Help Pages, BSON, and Global Error Handling

The sample project covering the posts in this series is here; other referenced samples are in the ASP.NET sample repository.

ASP.NET MVC 5.1, Web API 2.1 and Web Pages 3.1 were released on January 20. I call it the star-dot-one release, not sure if that one's going to stick. Here are the top links to find out more:

The announcement blog post: Announcing the Release of ASP.NET MVC 5.1, ASP.NET Web API 2.1 and ASP.NET Web Pages 3.1

Release notes

ASP.NET MVC 5.1 release notes
ASP.NET Web API release notes
ASP.NET Web Pages 3.1 is a bug fix release, here's the list of fixed bugs

Let's run through what's involved in getting them and trying some of the new features.

Nothing to Install, just NuGet package updates

As I mentioned in my last post, ASP.NET has moved from a "big thing" that you install every few years. The ASP.NET project templates are now mostly a collection of composable NuGet packages, which can be updated more frequently and used without needing to install anything that will affect your dev environment, other projects you're working on, your server environment, or other applications on your server.

You don't need to wait for your hosting provider to support ASP.NET MVC 5.1, ASP.NET Web API 2.1 or ASP.NET Web Pages 3.1 - if they supported 5/2/3 they support 5.1/2.1/3.1. Easier said, if your server supports ASP.NET 4.5, you're set.

However, there are some new features for ASP.NET MVC 5.1 views that require you to be running the most recent Visual Studio update to get editing support. You're installing the Visual Studio updates when they come out so that's not a problem, right?

For Visual Studio 2012, you should have ASP.NET and Web Tools 2013.1 for Visual Studio 2012. You'd need this for ASP.NET MVC 5 support in Visual Studio 2012, so no real change there.
For Visual Studio 2013, you should have Visual Studio 2013 Update 1. This update is needed to get nice editor support for the new ASP.NET MVC 5.1 Razor View features (e.g. Bootstrap overloads).

Okay, Let's Have a Look Then

Game plan: I'm going to take an ASP.NET MVC 5 + Web API 2 project, update the NuGet packages, and then throw some of my favorite features in there.

In this case, I'm opting for the "mostly Web API template" since it includes both MVC and Web API, and it includes help pages right out of the box. I could go with "mostly MVC" + Web API, but then I'd need to install the Web API Help Page NuGet package and I might strain a muscle.

Now I'll open the Manage NuGet Packages dialog and check for updates. Yup, there they are.

Since this is a throw-away project I'll throw caution to the wind and click Update All. If this were a real project, I might just update the three new releases so as not to pick an unnecessary fight with JavaScript libraries. But I'm feeling lucky today so Update All it is.

Wow, look at them go! jQuery 2.0.3 even. It's a party. (anti-party disclaimer for those who might be getting carsick: I didn't have to update to jQuery 2.0.3 or any of that other stuff to use the 5.1/2.1 stuff).

Enum Support in ASP.NET MVC Views

Okay, I'll start by creating a Person model class with a Salutation enum:

using System.ComponentModel.DataAnnotations;
namespace StarDotOne.Models
{
    public class Person
    {
        public int Id { get; set; }
        public Salutation Salutation { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public int Age { get; set; }
    }
    //I guess technically these are called honorifics
    public enum Salutation
    {
        [Display(Name = "Mr.")]
        Mr,
        [Display(Name = "Mrs.")]
        Mrs,
        [Display(Name = "Ms.")]
        Ms,
        [Display(Name = "Dr.")]
        Doctor,
        [Display(Name = "Prof.")]
        Professor,
        Sir,
        Lady,
        Lord
    }
}

Note that I'm using the Display attribute on a few that I want to abbreviate.

Next, I delete my HomeController and views and scaffold a new HomeController using the Person class. Caution to the wind being our theme, I'll run it.

Oh no! No dropdown on Salutation!

Just kidding. That's to be expected. To get the dropdown, we need to change the scaffolded view code for the Salutation from the generic Html.EditorFor to use the new Html.EnumDropDownListFor helper.

So in my Create.cshtml, I need to change this line:

@Html.EditorFor(model => model.Salutation)

to this:

@Html.EnumDropDownListFor(model => model.Salutation)

Okay, with that done I'll refresh the page:

And there it is.

"Now, Jon," you say, "That's really nice, but it would have been absolutely perfect if the scaffolder or EditorFor or something had seen the Enum property and just done the right thing."

You're right. I'm told that will all magically work in an update on the way soon. For now, though, it's easy to get that behavior using some simple EditorTemplates and DisplayTemplates. You can find examples of them in this EnumSample on CodePlex. So I grabbed those templates and copied them into the /Views/Shared directory in my project:

And I'll change my Create.cshtml view back how it was originally scaffolded, using Html.EditorFor. That way the view engine will look for a matching EditorTemplate for the object type, find Enum.cshtml, and use that to render all Enum model properties.

Blam!

Okay, one more fun thing in that EnumSample. There's an override in Html.EditorFor that lets you specify the EditorTemplate you'd like to be used. So I'll change that line to this:

@Html.EditorFor(model => model.Salutation, templateName: "Enum-radio")

And now we are truly dropping science like Galileo dropped the orange:

Recap so far:

We updated to the new NuGet packages
We saw that we can now use a new helper to render dropdowns for enums: Html.EnumDropDownListFor
We saw that we can use EditorTemplates (and, trust me, DisplayTemplates as well) to encapsulate that so any call to Html.EditorFor will intelligently display enum properties

Here's the next post in the series: Looking at ASP.NET MVC 5.1 and Web API 2.1 - Part 2 - Attribute Routing with Custom Constraints

ASP.NET - A last look back at 2013, looking ahead to 2014

Sat, 18 Jan 2014 00:07:13 GMT

There's something about getting into a new year that makes us step back and consider the bigger picture. Where is it all headed? Am I making the most out of my life? What web tools and products has Microsoft released lately?

I got to present a few Web Camps in December, in Oslo and Vancouver. I was reminded that there are some people - we'll call them normal developers who have work to do - don't sit there refreshing the Microsoft downloads new releases page all day. I don't understand them, but I appreciate that they exist.

We announce stuff all the time, but it's hard to keep up with what's important, what you need to know, and stuff you should start paying attention to because it's going to be a big deal really soon. So here's my quick summary of the important things that happened in 2013 and what I think it suggests we watch for in 2014.

The Big Picture

One ASP.NET

This has been a thing for brewing for a bit, but really came together in 2013. With Visual Studio 2013, you really can mix and match ASP.NET MVC + Web API + Web Forms + SignalR + "your framework here" and they all get along. This has been a lot of work over several releases: breaking out functionality out into packages, setting up common components like routing and identity so they're universal, moving to common HTML and CSS for the project templates, Visual Studio tooling changes, etc. That all culminated with the Visual Studio 2013 release, where we finally have just one ASP.NET project with a la carte support for Web Forms, MVC, Web API, and more.

What's probably more important is that you can also add functionality after you've created a project, so if you decide later to add MVC libraries to your Web Forms project it's no big deal.

Visual Studio as a great editor for front-end (HTML / CSS / JavaScript) files

Again, this one has been growing over time: Visual Studio 2012 introduced new JavaScript and CSS editors. The JavaScript editor added tons of new features like ECMAScript 5 support, code outlining, brace matching, go to definition, dynamic IntelliSense. The CSS editor added things like much better IntelliSense, color picker, snippets, lots of HTML5 / modern web development support. It also included Page Inspector - a built-in browser view that shows a running view of your site (e.g. live data from the database, JavaScript is evaluated, everything's running end to end) and allows you to click on an an element and find the line of code that produced the HTML. But the HTML editor in Visual Studio 2012 was old, and that prevented adding modern web development features.

In Visual Studio 2013, the HTML editor was completely rewritten to allow for the cool (MEF based) extensibility that the CSS editor in Visual Studio 2012 leveraged so heavily. That allowed for new support for all kinds of new modern features like IntelliSense for AngularJS, built-in CoffeeScript and LESS editor support and more. The HTML editor features in Visual Studio 2013 get even better with the Web Essentials extension, which I'll talk about in a minute.

And we haven't even mentioned Browser Link yet! Browser Link takes the smarts that went into Page Inspector, hooks it up with a real-time Web Socket connection (powered by SignalR) that's hosted inside of Visual Studio, and gives me real-time, two-way interactivity between my server-side code and any running browser. That means I can run my site in Visual Studio, pop open Chrome or Opera or Firefox or IE or some mobile emulator, hover over an element in the browser and see the source of that HTML highlighted in Visual Studio. That is a huge, huge timesaver I've been wanting for a very long time.

The point is that Visual Studio 2013 ships with newly rewritten, advanced editors for your front-end web files. Like me, you may have seen Visual Studio as an editor for back-end code but went to a lightweight notepad style text editor for HTML / CSS / JavaScript / modern web language of the week. But I think it's time to change that way of thinking - Visual Studio gives me the benefits of a lightweight editor (starts up in 2-3 seconds on a modern computer, has a light UI that gets out of my way), but helps me spot misspellings, get the right vendor prefixes, use JavaScript libraries without having to dig through source code and docs more than I want to, etc.

Web Essentials as "Visual Studio web dev labs"

Web Essentials is a side project run by Mads Kristensen, the project manager for the web developer features that ship with Visual Studio. While Visual Studio's new ship schedule means you get a new version yearly and updates several times throughout the year, Web Essentials ships as often as Mads wants to. Which turns out to be pretty often - often every two or three weeks.

Some features in Web Essentials are prototypes which might land in the next version of Visual Studio - an example is the Paste JSON as Classes feature. This allows you to get your hands on them right away, give feedback on how they work, and then see them graduate to full Visual Studio support.

Web Essentials also includes some interesting features which are useful to web developers who are engaged enough to spend a minute to install and extension, but might not be for everyone. Zen Coding might be an example of that - I don't know if it'll ever ship in Visual Studio, but it's a useful feature if you're an HTML focused web developer and into the new, new stuff. Since web development techniques and metalanguages come out so frequently and change so rapidly, it's great to have a lightweight extension that can keep up with them until they're mature enough to maybe ship with Visual Studio.

Release and update speed

When Visual Studio 2012 was launched in September 2012, Soma announced that they were shifting to a faster release cadence which would include both more frequent full releases and regular smaller updates to deliver features throughout the year. An important point there is that these aren't just service packs with bug fixes, they include useful features. We really saw that come together in 2013. The best example of that was the ASP.NET and Web Tools 2012.2 release in February 2013. I list some of the features below, but it was a pretty big batch: new templates for both ASP.NET Web Forms and MVC, Page Inspector and more. As of now, there have been a total of 5 updates for Visual Studio 2012; the latest added some support for ASP.NET MVC 5 (albeit only with an empty MVC 5 template) to Visual Studio 2012.

I think that's a great thing. The technologies, browsers and languages we need to work with as web developers move really quickly, and we need tools that keep up. Two or three years between releases doesn't work for me, and even yearly is pushing it. I expect to see this update cycle continue in 2014 and beyond. For instance, we've already got the release candidates for ASP.NET MVC 5.1, Web API 2.1 and Web Pages 3.1 - expect the final release very soon. [Update: the final version was released on January 20, read my post series on the new features here.]

Note: In case you didn't know - if you've got Visual Studio 2012 Professional, you can upgrade to Visual Studio 2013 Professional for $99 now.

Again, thinking beyond Visual Studio, the rest of the ASP.NET dev landscape is moving very quickly. Windows Azure has releases roughly every three weeks. Web Essentials and SideWaffle have release updates measured in weeks. NuGet packages update constantly.

Do you have to keep up to date with all of the new things? No, of course not. But since web development technologies and requirements move rapidly, it's good to know that you're generally not going to be waiting on Visual Studio or ASP.NET when you do need the features. And of course, there are lots of benefits (in addition to the big flashy new features) to being on the newest version, e.g. scaffolding in ASP.NET MVC now whitelists your parameters to prevent overposting.

Externalization of ASP.NET

ASP.NET used to be pretty monolithic. You'd get one big ASP.NET release and it did everything. You could plug into it - using things like control events, membership provider hooks, modules and handlers, but you were just plugging into the big ASP.NET thing.

That's really changed over the years.

When you look at what's installed in a new ASP.NET project, it's almost all NuGet packages. That's a big part of what made it possible for the One ASP.NET thing to happen: ASP.NET MVC, Web Forms, Web API, and Web Pages all share common NuGet packages. That definitely includes new features, like the new ASP.NET Identity system.

Side note: You can use these packages individually, or even create your own versions (since they're a permissive under open source license). You can grab nightly builds and which include changes as they're committed.

The tooling (Microsoftese, generally meaning "Visual Studio support") for ASP.NET has also been externalized over the past few years. If you poke around in the Visual Studio program directory (e.g. \Common7\IDE\Extensions\Microsoft\Web Tools), you'll see features are being built using the standard VSIX / MEF extensibility points. That's good because it means things can ship and update more quickly, and the hooks they're using are available to you. Heck, the source is even available to you if you pop them open in a tool like ILSpy or Reflector.

Things are also being built using OWIN (Open Web Interfaces for .NET) now. I've written before about why I think OWIN and Katana are important. The result is that core functionality like authentication is now being plugged into ASP.NET as portable middleware rather than shipped in a big monolithic framework that hides somewhere in your GAC.

Oh, and SideWaffle. What on earth is a SideWaffle?!? Well, just like NuGet externalized ASP.NET dependencies and VSIX externalized tooling, SideWaffle externalizes templates. The idea is that, unlike waiting for new ASP.NET project templates in Visual Studio releases or updates, you install the SideWaffle extension and get (or contribute) Visual Studio templates that are updated more rapidly.

Releases

I've already talked about what these release mean in a big picture sense, so I'll just list them out in linked bullet point form.

ASP.NET and Web Tools 2012.2 (Feb 2013, included with Visual Studio Update 2)

Here's my announcement blog post with more details: Announcing the ASP.NET and Web Tools 2012.2 Release!
Some top features:

Visual Studio 2013 (Oct 2013)

ASP.NET Core Features (new ASP.NET Identity system, common templates using Bootstrap, new Scaffolding system)
ASP.NET MVC 5 (One ASP.NET so it works in all ASP.NET projects, attribute routing)
ASP.NET Web API 2 (Attribute routing, OAuth 2, CORS, Portable client, OWIN integration, lots more)
SignalR 2 (OWIN and cross platform / portable support, cross domain support, lots more)
.NET 4.5.1 (ASP.NET impact is mostly performance improvements, e.g. App Suspend)
Brower Link (and Browser Link Extension support)

ASP.NET and Web Tools 2013.1 for Visual Studio 2012

Release Post: Announcing release of ASP.NET and Web Tools 2013.1 for Visual Studio 2012
Features
- Round trip support between Visual Studio 2012 and 2013
- ASP.NET MVC 5 support
- ASP.NET Web API 2 support
- ASP.NET Scaffolding (brings the new scaffolding system in to Visual Studio 2012)
- Bootstrap support

Windows Azure updates

Tons of releases throughout the year, but here are some of what I think are the top features for ASP.NET developers:
- Remote debugging (was in Web Roles, now it's available in Windows Azure Web Sites)
- Create and publish to Windows Azure Web Sites from Visual Studio
- Right-click on VM, RDP
- MDSN benefits / price cuts / run VS in cloud (also VS Online)
- Web Socket support
- Windows Server 2012 R2
- General Availability (Web Sites, Mobile Services, IAAS)

Web Essentials

Side Waffle

NuGet

There were lots throughout the year, but I think the main feature for web developers was that Package Restore is enabled by default in NuGet 2.7

Portable class libraries

This is a big step forward for portable libraries - both community open source libraries and Microsoft provided libraries - to work cross platform

New Stuff That You Really Need To Understand

ASP.NET Identity

We had an old ASP.NET Membership system that worked for a while, but was definitely showing its age. It didn't support claims and social authentication, it didn't work well with custom membership data, it was hard to extend. Then we got Simple Membership in ASP.NET MVC 4, which was simple but hard to extend. A lot of work went into the new Identity system to make sure it both did simple things well and was wasn't hard to extend later.

There's a lot of documentation out there on the new Identity system, and more on the way at http://www.asp.net/identity

Also, I recommend K. Scott Allen's recent posts exploring ASP.NET Identity, such as Customization Options With ASP.NET Identity.

Bootstrap

All of the new web project templates are built using Bootstrap. I overviewed that a little in a previous post, but there's a lot more to it. The top benefits I see are:

It's popular across the web development community, so we're able to take advantage of community support for things like themes, documentation, tutorials, etc.
It's responsive and mobile-first, so it's very easy to build sites that work well at narrow (mobile) screen resolutions, intermediate screen resolutions like tablets, and on widescreen displays
It's got a lot of components and jQuery based plugins that handle common web developer concerns

Other Neat Stuff That You Should Start Paying Attention To

Scaffolding

We've had scaffolding in ASP.NET before, but it was framework specific - there was MVC scaffolding, Web API scaffolding, and nothing else if you were working on another project type. The scaffolding system in Visual Studio 2013 (and now available in 2012, as mentioned above) has been updated so it works in any ASP.NET project, and it's been built to be easily extensible (the extensibility bit will be shipped and documented in a Visual Studio update early this year).

Some good references:

ASP.NET MVC 5.1, Web API 2.1 and Web Pages 3.1

The release candidates have already shipped and the final release will be out very extremely soon. Some of the new features:

ASP.NET MVC 5.1
- Attribute Routing support for constraints
- Bootstrap support for HTML helpers (allowing HTML attributes in Html.EditorFor)
- Support for Enums
ASP.NET Web API 2.1
- Global Error Handling
- Attribute Routing support for constraints
- BSON media type formatter
- Async filters
- Help Page improvements

OWIN and Katana

I mentioned these earlier. If you've been putting this on your "I'll ignore this until it starts getting important" list, it's time. The new Identity system is wired into the ASP.NET project templates using OWIN, and new things will be moving that direction.

Visual Studio Online

I think Visual Studio Online - including the Monaco editor - is getting pretty interesting. It's definitely useful for web developers. See my post here: A look at the new Visual Studio Online "Monaco" code editor

Node Tools for Visual Studio

Node (and NPM) are getting to be pretty big in the web development world, and I think it's important to keep up with where it's going. It hasn't been that hard: Node's pretty lightweight, runs well on Windows for a while now, and is incredibly easy to run in Windows Azure Web Sites. But, it's gotten incredibly easy now that they've built pretty impressive support for Node.js into Visual Studio. I think it's worth taking some time and getting a little familiarity with Node.js if you haven't yet. Don't get me wrong, I'm in no way pushing Node.js over ASP.NET development, I'm just saying that I personally think it's a good idea to keep up with as a professional web developer.

See Scott Hanselman's post (Introducing node.js Tools for Visual Studio) and give it a look.

Keeping Up With The New Stuff

That's a condensed list of what I think's important circa January 2014, and it's a lot. How on earth can we keep up with all of this?

Here are some resources I recommend:

ASP.NET social accounts
- Twitter: @aspnet
- Facebook: http://fb.me/aspnet
- Google+
The ASP.NET Community Spotlight (home page of the ASP.NET site)
The /vnext section on ASP.NET, currently spotlighting Visual Studio 2013: http://asp.net/vnext
Web Camps
- Look for live events in your area
- Download the Web Camps Training Kit for 30mb of demos explaining all the new features
Web Camps TV with Cory Fowler and Jaffe Worley
Windows Azure shows
- Cloud Cover with Nick Harris and Chris Risner
- Windows Azure Friday (with Scott Hanselman) is a great resource for Windows Azure content
Web Dev blog
- This is THE blog for the Web Dev team at Microsoft - lots of great content, release announcements, etc.

All right! Go to it! Let's do this!

Two great Kickstarter projects ending soon: Durandal JavaScript framework and bitCommander File Manager

Wed, 08 Jan 2014 22:01:12 GMT

I like Kickstarter. It's not a store, it's an easy way to help fund creative projects. You back projects you find exciting at different reward levels, and then follow along with the project's progress. I blogged about the AGENT watch last June and was excited to see them hit 10x their goal - I'm really looking forward to getting my AGENT watch when they ship.

Preemptive disclaimer: As I said, it's not a store. You're funding a project with goals and risks and target timelines. The average contribution amounts aren't that high and I fund projects that I want to support, so I'm okay with that. If you're not, Kickstarter's not your thing, and that's fine too.

I wanted to help get the word out about two recent Kickstarter projects I've backed (and been tweeting about): Durandal and bitCommander. Both end soon (bitCommander ends on Jan 9, Durandal ends on Jan 10).

Durandal

Durandal is an open source JavaScript framework that helps you build full-featured single page applications. Ward Bell summed up what's unique about Durandal pretty well:

What’s so great about it? What’s distinctive about it? Rob has his inventory of laudable features (and its impressive). Here are some of the aspects of nextGen Durandal that I love … and that have no equal among alternative frameworks:

Convention over configuration – I hate writing and maintaining “switch board” code to connect FooViewModel to FooView and FooRoute etc. I want to say “Foo” and be done with it … until and unless I have a compelling reason to break convention.

Customizable conventions – Rob makes good choices but I’m free to define my own.

Page life-cycle – Durandal has baked in understanding of the birth and death of “pages” so I don’t have to make up my own hacks to ensure that new pages are initialized on creation and cleaned up on destruction.

Asynchrony throughout – Need to wait for the user to confirm or cancel before moving off the page? That’s easy in Durandal because asynchrony is plumbed through the page life-cycle and everywhere else. Dynamically load optional modules on-demand? Easy.

Diagnostics – With debug mode turned on the console tells me exactly what choices Durandal is making for me as they happen. I can tap into that logging pipeline with my own diagnostics.

Write less, do more – You all know what I mean. We all want to write less code. That’s the motherhood and apple pie that every framework promises. They usually deliver something else. Check out the nextGen Durandal sample video and tell me what other technology is that clear and concise.

We talked to Rob Eisenberg about what he wants to accomplish on the Durandal Kickstarter on Herding Code: Herding Code 182: Durandal Kickstarter with Rob Eisenberg

Download / Listen:

http://herdingcode.com/wp-content/uploads/HerdingCode-0182-Durandal-Kickstarter.mp3

One of the things that really stood out for me was what Rob's doing with cutting edge browser and JavaScript technologies for the Durandal nextGen. He's investing heavily in a module system that works with ES6 modules, AMD and CommonJS. He's building on HTML Templates and Web Components. In addition to light weight, modular code, he's seeing 2-3x performance benefits over AngularJS. And it's all polyfilled so it works in current browsers while waiting for these features to ship. The result is that this is a great investment not only in a great next-generation SPA framework, but in the web in general: by backing Rob, you're getting real-world implementation of these specs early so we can get them right the first time.

The main benefit of backing this Kickstarter is that you free Rob up from consulting work so Durandal gets these amazing features faster. The secondary benefit for backers is that Rob will be producing some great training series - video and source code included.

As of now, there's still a good way to go on getting this funded. Pitch in and tell someone else to do so, too!

bitCommander

bitCommander is a really interesting file manager for Windows. It's already hit its funding goal as I write this. If you beat the end of the Kickstarter campaign, you can get a discount on it, and if not you'll want to pay the full price for it because this thing is looking really cool.

I like the recent changes to the Windows File Explorer in Windows 8 - the ribbon's really nice, and the file copy experience is vastly improved, for instance. But when you're doing things that involve multiple simultaneous views - like assembling a lot of files, for instance - having several instances of File Explorer open gets clunky.

Check out how browsing in bitCommander looks (all images below from the bitCommander website):

You might think it's just Miller columns (recently popularized as the OS X Finder columns view mode, but dates all the way back to 1980). That alone would be pretty nice, but there's a lot more to it. There are tons of other great features, but I think my favorite is the temp list and batch support.

There's a lot of other cool stuff, like tabs, nice thumbnail display (with details), intelligent filename shortening and more. I think what I like most about this is that it adds a lot of features but keep the design simple and focused. See what I mean on the bitCommander website.

Here's mockup of a possible additional feature that Milos is looking at adding: integrated command windows, sync'd to the current browsing directory:

Un-disclaimer: I backed both of these projects and don't get anything for talking about them. I just like them.

Go back bitCommander and Durandal!

A look at the new Visual Studio Online "Monaco" code editor

Thu, 14 Nov 2013 06:00:11 GMT

One of the most interesting announcements at the Visual Studio 2013 Launch today was the Monaco editor in Visual Studio Online.

I've seen little hints of this coming - for example, Scott Hanselman's post in August: A rich new JavaScript code editor spreading to several Microsoft web sites. And if you looked around the command-line Kudu interface on an Azure Web Site (available at https://<SITENAME>.scm.azurewebsites.net) there's been a lightweight file editor available for a little while.

After the announcement today, I dug up enough info to be dangerous and took it for a quick spin. Quick disclaimer: this is me playing around for a bit, it's not an official announcement.

Some top Monaco editor links

Visual Studio 2013 Launch: Announcing Visual Studio Online - Soma's announcement post gives a quick overview. More importantly, it links to a series of videos on Channel 9 which overview the Monaco editor and demonstrate using it in a few different scenarios.

Channel 9 series: Visual Studio Online "Monaco"

First Steps (2 minutes, 26 seconds)
Navigating the environment (4 minutes, 29 seconds)
Editor Tips and Tricks (8 minutes, 45 seconds)
Getting started with ASP.NET (2 minutes, 41 seconds)
Getting started with node.js (5 minutes, 33 seconds)
Getting started with PHP (4 minutes, 10 seconds)
Using LESS in node.js (3 minutes, 15 seconds)
Debugging node.js (2 minutes, 52 seconds)
Getting started with TypeScript (3 minutes, 48 seconds)

I'll embed some of these videos at the end of the post - not here, or you'd get distracted and you'd never read the rest of the post, right?

The big one: Visual Studio Online updates post on the Visual Studio Online features timeline news feed thing. Can I call it a blog? I just don't know. But it's wonderful.

Specifically, the Announcing Visual Studio Online “Monaco” section shows how to turn it on and get started.

Walkthrough: Editing an ASP.NET site in the browser

Full disclosure: I tried bumbling my way through this and made a mess, then went crying to David Ebbo for help. He set me straight.

Step 1: Set up a Windows Azure Web Site with git deployment

First, I'm going to create a new ASP.NET site in Visual Studio 2013 and deploy it to git. Now, I could use Visual Studio Online's git hosting - of course it works well, and works with the Visual Studio Online Monaco editor. But you'd suspect some tricky business, so I'm going to use a GitHub repository.

So, I'm creating a simple ASP.NET MVC 5 application (with no authentication so I don't need to deploy a database) and pushing it to a GitHub repository.

Now I'm dropping in a standard .gitignore and initializing the repo, then pushing to GitHub.

git init
git add .
git commit -m "Initial commit"
git remote add github https://github.com/jongalloway/PlayingWithMonacoEditor.git
git push -u github master

Now I'm going to create a new Windows Azure Web Site using that GitHub repo as the source. This has been available for a long time, but I'm showing the steps in case it's new to you.

Step 2: Set up for editing using Visual Studio Online

Okay, we've got a live repo and the site's deployed. Now we want to edit that source using Visual Studio Online.

Here's the trick I learned from David Ebbo - you want to create another Windows Azure Web Site that's just associated with the source, not the deployment. So I head back into the portal and create a new Web Site just for source editing.

Oops, I created it in Western Europe. Good thing the internets are fast.

Now, in the new site, I head over to the Configure tab and enable "Edit in Visual Studio Online".

Can you feel it? We're almost there. Promise.

Now I head over to the Dashboard tab, and click on the Edit in Visual Studio Online link. Like you, I can hardly contain my excitement! What will happen?

Oh, a login prompt. Hmm.

Fortunately, I know my username and password. If you forget, you can reset your password in the portal, on the Dashboard tab. Okay, with that done, here's what we get:

Hooray! Yeah, science!

Step 3: Appeal to the hipster demographic

Wait, you're not impressed because I used IE, is that it? You wanted me to see if it worked in another browser?

Yeah, maybe this is an opportunity to dust off that Mac Mini to see how it does there. Hold on, it's over here somewhere. Under the... oh, that bill's overdue. Hm. Behind the... oh, there it is. Okay!

So I log back in to the Azure portal on click that same Edit In Visual Studio Online link. Hey, there it is again! I'll show this screenshot bigger this time.

Step 4: Clone the repo

Now I click on the git icon on the left side and enter my git url, then hit clone.

And here it goes...

Okay, that looks really cool, and my code's visible on the left. Before I start editing, I want to make sure I can build it. In the console window, I'm going to type in "msbuild" and cross my fingers.

Well, we couldn't expect it to work on the first shot, could we? I...

Oh, it did work. Well, hey there.

So, back on my Windows box, here's what the site looks like in IE11.

Step 5: Do some editing. That's what started this whole mess, remember?

I'm going to head back over to the Mac and edit some code. To make this interesting, I'm going to edit C#, CSHTML, CSS and JavaScript. What could go wrong?

First I edit the HomeController to add something to the ViewBag.

Next I edit the CSHTML, adding in some HTML and C# changes.

Finally, I make some CSS edits.

I'm kind of rushing through this, but there's code completion and IntelliSense all along the way. For instance, when I start editing a CSS color, I get a dropdown with available colors.

When I select a color, I can see what it will look like in the editor.

Now I build to make sure it's all still good.

Step 6: Deploy

And git push to deploy.

Step 7: Full circle, with a pirouette and a lemon twist

And hopping back to my Windows / IE 11 browser, we can see that it works.

What's the point?

Why did we do this? What did it buy us?

Well, for one thing, we grabbed an ASP.NET repo from GitHub in a browser, on a Mac, made some code changes, and deployed it. If you've got a browser (free) and a Windows Azure account (free), you can edit and deploy an ASP.NET site. You could do it on an Android tablet, on an iPad, in a boat, with a goat.

Even if you're on Windows, note that the Visual Studio Online experience didn't require me to sign up for or pay anything. Visual Studio Online is free for projects with five or fewer users, and didn't make me jump through any hoops to get going. That means you can get started using it. If you want more Visual Studio Online or Windows Azure services, you can get them, but there's no roadblock to creating / editing / deploying / maintaining a site right now.

Oh, and this was ASP.NET MVC 5 - so, all the new stuff works out of the box. Yes, you'd expect that, but it's worth pointing out.

Recap and regrets

Yes, we've arrived. We deployed code to GitHub, pulled it into a Windows Azure Web Site, edited it in a browser, on a Mac (demo bingo, everyone drink), and saw it automatically deployed and running in a browser. Neat.

What I didn't have time to show you was all the cool features in the Monaco editor.

For instance, you can click on the settings gear in the upper right corner and switch to the Visual Studio dark theme, which is so much cooler.

I regret that we didn't have time to look at all of the cool editor features, like the editor commands shown when you hit ctrl+E.

I wish we'd had time to look at the fancy IntelliSense features, including support for jQuery function overloads.

And it would have been neat to cover the cool diff-on-commit view.

But, alas, it was not to be.

For those features, and many more, I recommend you check out the videos I referenced earlier. I'll even embed some of those in the next section, because this post wasn't quite long enough.

Neat Videos You Should Watch

All of the Monaco videos are good, but these are some of my favorite.

First Steps

Editor Tips And Tricks

Getting Started With PHP

Debugging node.js

And last, but not least, Getting started with TypeScript. Why? Because the Monaco editor was written in TypeScript!

Top things web developers should know about the Visual Studio 2013 release

Thu, 17 Oct 2013 21:36:03 GMT

ASP.NET and Web Tools for Visual Studio 2013 Release NotesASP.NET and Web Tools for Visual Studio 2013 Release NotesSummary for lazy readers:

Visual Studio 2013 is now available for download on the Visual Studio site and on MSDN subscriber downloads)
Visual Studio 2013 installs side by side with Visual Studio 2012 and supports round-tripping between Visual Studio versions, so you can try it out without committing to a switch
Visual Studio 2013 ships with the new version of ASP.NET, which includes ASP.NET MVC 5, ASP.NET Web API 2, Razor 3, Entity Framework 6 and SignalR 2.0
The new releases ASP.NET focuses on One ASP.NET, so core features and web tools work the same across the platform (e.g. adding ASP.NET MVC controllers to a Web Forms application)
New core features include new templates based on Bootstrap, a new scaffolding system, and a new identity system
Visual Studio 2013 is an incredible editor for web files, including HTML, CSS, JavaScript, Markdown, LESS, Coffeescript, Handlebars, Angular, Ember, Knockdown, etc.

Quick web dev notes on downloading and installing Visual Studio 2013

I found Visual Studio 2013 to be a pretty fast install. According to Brian Harry's release post, installing over pre-release versions of Visual Studio is supported. I've installed the release version over pre-release versions, and it worked fine.

If you're only going to be doing web development, you can speed up the install if you just select Web Developer tools.

Of course, as a good Microsoft employee, I'll mention that you might also want to install some of those other features, like the Store apps for Windows 8 and the Windows Phone 8.0 SDK, but they do download and install a lot of other stuff (e.g. the Windows Phone SDK sets up Hyper-V and downloads several GB's of VM's). So if you're planning just to do web development for now, you can pick just the Web Developer Tools and install the other stuff later.

If you've got a fast internet connection, I recommend using the web installer instead of downloading the ISO. The ISO includes all the features, whereas the web installer just downloads what you're installing.

Visual Studio 2013 development settings and color theme

When you start up Visual Studio, it'll prompt you to pick some defaults. These are totally up to you -whatever suits your development style - and you can change them later.

As I said, these are completely up to you. I recommend either the Web Development or Web Development (Code Only) settings. The only real difference is that Code Only hides the toolbars, and you can switch between them using Tools / Import and Export Settings / Reset.

Web Development settings

Web Development (code only) settings

Usually I've just gone with Web Development (code only) in the past because I just want to focus on the code, although the Standard toolbar does make it easier to switch default web browsers. More on that later.

Color theme

Sigh. Okay, everyone's got their favorite colors. I alternate between Light and Dark depending on my mood, and I personally like how the low contrast on the window chrome in those themes puts the emphasis on my code rather than the tabs and toolbars. I know some people got pretty worked up over that, though, and wanted the blue theme back. I personally don't like it - it reminds me of ancient versions of Visual Studio that I don't want to think about anymore.

So here's the thing: if you install Visual Studio Ultimate, it defaults to Blue. The other versions default to Light. If you use Blue, I won't criticize you - out loud, that is. You can change themes really easily - either Tools / Options / Environment / General, or the smart way: ctrl+q for quick launch, then type Theme and hit enter.

Signing in

During the first run, you'll be prompted to sign in. You don't have to - you can click the "Not now, maybe later" link at the bottom of that dialog. I recommend signing in, though. It's not hooked in with licensing or tracking the kind of code you write to sell you components. It is doing good things, like syncing your Visual Studio settings between computers. More about that here. So, you don't have to, but I sure do.

Overview of shiny new things in ASP.NET land

There are a lot of good new things in ASP.NET. I'll list some of my favorite here, but you can read more on the ASP.NET site.

One ASP.NET

You've heard us talk about this for a while. The idea is that options are good, but choice can be a burden. When you start a new ASP.NET project, why should you have to make a tough decision - with long-term consequences - about how your application will work? If you want to use ASP.NET Web Forms, but have the option of adding in ASP.NET MVC later, why should that be hard? It's all ASP.NET, right?

Ideally, you'd just decide that you want to use ASP.NET to build sites and services, and you could use the appropriate tools (the green blocks below) as you needed them.

So, here it is.

When you create a new ASP.NET application, you just create an ASP.NET application.

Next, you can pick from some templates to get you started... but these are different. They're not "painful decision" templates, they're just some starting pieces. And, most importantly, you can mix and match. I can pick a "mostly" Web Forms template, but include MVC and Web API folders and core references.

If you've tried to mix and match in the past, you're probably aware that it was possible, but not pleasant. ASP.NET MVC project files contained special project type GUIDs, so you'd only get controller scaffolding support in a Web Forms project if you manually edited the csproj file. Features in one stack didn't work in others. Project templates were painful choices. That's no longer the case. Hooray!

I just did a demo in a presentation last week where I created a new Web Forms + MVC + Web API site, built a model, scaffolded MVC and Web API controllers with EF Code First, add data in the MVC view, viewed it in Web API, then added a GridView to the Web Forms Default.aspx page and bound it to the Model. In about 5 minutes. Sure, it's a simple example, but it's great to be able to share code and features across the whole ASP.NET family.

Authentication

In the past, authentication was built into the templates. So, for instance, there was an ASP.NET MVC 4 Intranet Project template which created a new ASP.NET MVC 4 application that was preconfigured for Windows Authentication. All of that authentication stuff was built into each template, so they varied between the stacks, and you couldn't reuse them. You didn't see a lot of changes to the authentication options, since they required big changes to a bunch of project templates.

Now, the new project dialog includes a common authentication experience. When you hit the Change Authentication button, you get some common options that work the same way regardless of the template or reference settings you've made. These options work on all ASP.NET frameworks, and all hosting environments (IIS, IIS Express, or OWIN for self-host)

The default is Individual User Accounts:

This is the standard "create a local account, using username / password or OAuth" thing; however, it's all built on the new Identity system. More on that in a second.

The one setting that has some configuration to it is Organizational Accounts, which lets you configure authentication using Active Directory, Windows Azure Active Directory, or Office 365.

Identity

There's a new identity system. We've taken the best parts of the previous ASP.NET Membership and Simple Identity systems, rolled in a lot of feedback and made big enhancements to support important developer concerns like unit testing and extensiblity.

I've written long posts about ASP.NET identity, and I'll do it again. Soon. This is not that post. The short version is that I think we've finally got just the right Identity system. Some of my favorite features:

There are simple, sensible defaults that work well - you can File / New / Run / Register / Login, and everything works.
It supports standard username / password as well as external authentication (OAuth, etc.).
It's easy to customize without having to re-implement an entire provider. It's built using pluggable pieces, rather than one large monolithic system.
It's built using interfaces like IUser and IRole that allow for unit testing, dependency injection, etc.
You can easily add user profile data (e.g. URL, twitter handle, birthday). You just add properties to your ApplicationUser model and they'll automatically be persisted.
Complete control over how the identity data is persisted. By default, everything works with Entity Framework Code First, but it's built to support changes from small (modify the schema) to big (use another ORM, store your data in a document database or in the cloud or in XML or in the EXIF data of your desktop background or whatever).
It's configured via OWIN. More on OWIN and Katana later, but the fact that it's built using OWIN means it's portable.

You can find out more in the Authentication and Identity section of the ASP.NET site (and lots more content will be going up there soon).

New Bootstrap based project templates

The new project templates are built using Bootstrap 3. Bootstrap (formerly Twitter Bootstrap) is a front-end framework that brings a lot of nice benefits:

It's responsive, so your projects will automatically scale to device width using CSS media queries. For example, menus are full size on a desktop browser, but on narrower screens you automatically get a mobile-friendly menu.
The built-in Bootstrap styles make your standard page elements (headers, footers, buttons, form inputs, tables etc.) look nice and modern.
Bootstrap is themeable, so you can reskin your whole site by dropping in a new Bootstrap theme. Since Bootstrap is pretty popular across the web development community, this gives you a large and rapidly growing variety of templates (free and paid) to choose from.
Bootstrap also includes a lot of very useful things: components (like progress bars and badges), useful glyphicons, and some jQuery plugins for tooltips, dropdowns, carousels, etc.).

Here's a look at how the responsive part works. When the page is full screen, the menu and header are optimized for a wide screen display:

When I shrink the page down (this is all based on page width, not useragent sniffing) the menu turns into a nice mobile-friendly dropdown:

For a quick example, I grabbed a new free theme off bootswatch.com. For simple themes, you just need to download the boostrap.css file and replace the /content/bootstrap.css file in your project.

Now when I refresh the page, I've got a new theme:

Scaffolding

The big change in scaffolding is that it's one system that works across ASP.NET. You can create a new Empty Web project or Web Forms project and you'll get the Scaffold context menus.

For release, we've got MVC 5 and Web API 2 controllers. We had a preview of Web Forms scaffolding in the preview releases, but they weren't fully baked for RTM. Look for them in a future update, expected pretty soon.

This scaffolding system wasn't just changed to work across the ASP.NET frameworks, it's also built to enable future extensibility. That's not in this release, but should also hopefully be out soon.

Project Readme page

This is a small thing, but I really like it. When you create a new project, you get a Project_Readme.html page that's added to the root of your project and opens in the Visual Studio built-in browser.

I love it.

A long time ago, when you created a new project we just dumped it on you and left you scratching your head about what to do next. Not ideal.

Then we started adding a bunch of Getting Started information to the new project templates. That told you what to do next, but you had to delete all of that stuff out of your website. It doesn't belong there. Not ideal.

This is a simple HTML file that's not integrated into your project code at all. You can delete it if you want. But, it shows a lot of helpful links that are current for the project you just created. In the future, if we add new wacky project types, they can create readme docs with specific information on how to do appropriately wacky things.

Side note: I really like that they used the internal browser in Visual Studio to show this content rather than popping open an HTML page in the default browser. I hate that. It's annoying. If you're doing that, I hope you'll stop. What if some unnamed person has 40 or 90 tabs saved in their browser session? When you pop open your "Thanks for installing my Visual Studio extension!" page, all eleventy billion tabs start up and I wish I'd never installed your thing. Be like these guys and pop stuff Visual Studio specific HTML docs in the Visual Studio browser.

ASP.NET MVC 5

The biggest change with ASP.NET MVC 5 is that it's no longer a separate project type. It integrates well with the rest of ASP.NET.

In addition to that and the other common features we've already looked at (Bootstrap templates, Identity, authentication), here's what's new for ASP.NET MVC.

Attribute routing

ASP.NET MVC now supports attribute routing, thanks to a contribution by Tim McCall, the author of http://attributerouting.net. With attribute routing you can specify your routes by annotating your actions and controllers. This supports some pretty complex, customized routing scenarios, and it allows you to keep your route information right with your controller actions if you'd like.

Here's a controller that includes an action whose method name is Hiding, but I've used AttributeRouting to configure it to /spaghetti/with-nesting/where-is-waldo

public class SampleController : Controller
{

    [Route("spaghetti/with-nesting/where-is-waldo")]
    public string Hiding() 
    {
        return "You found me!";
    }
}

I enable that in my RouteConfig.cs, and I can use that in conjunction with my other MVC routes like this:

public class RouteConfig
{
    public static void RegisterRoutes(RouteCollection routes)
    {
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

        routes.MapMvcAttributeRoutes();

        routes.MapRoute(
            name: "Default",
            url: "{controller}/{action}/{id}",
            defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
        );
    }
}

Filter enhancements

There are two new additions to filters: Authentication Filters and Filter Overrides.

Authentication filters are a new kind of filter in ASP.NET MVC that run prior to authorization filters in the ASP.NET MVC pipeline and allow you to specify authentication logic per-action, per-controller, or globally for all controllers. Authentication filters process credentials in the request and provide a corresponding principal. Authentication filters can also add authentication challenges in response to unauthorized requests.

Override filters let you change which filters apply to a given action method or controller. Override filters specify a set of filter types that should not be run for a given scope (action or controller). This allows you to configure filters that apply globally but then exclude certain global filters from applying to specific actions or controllers.

ASP.NET Web API 2

ASP.NET Web API 2 includes a lot of new features.

Attribute Routing

ASP.NET Web API supports the same attribute routing system that's in ASP.NET MVC 5. You can read more about the Attribute Routing features in Web API in this article.

OAuth 2.0

ASP.NET Web API picks up OAuth 2.0 support, using security middleware running on OWIN (discussed below). This is great for features like authenticated Single Page Applications.

OData Improvements

ASP.NET Web API now has full OData support. That required adding in some of the most powerful operators: $select, $expand, $batch and $value. You can read more about OData operator support in this article by Mike Wasson.

Lots more

There's a huge list of other features, including CORS (cross-origin request sharing), IHttpActionResult, IHttpRequestContext, and more. I think the best overview is in the release notes.

OWIN and Katana

I've written about OWIN and Katana recently. I'm a big fan.

OWIN is the Open Web Interfaces for .NET. It's a spec, like HTML or HTTP, so you can't install OWIN. The benefit of OWIN is that it's a community specification, so anyone who implements it can plug into the ASP.NET stack, either as middleware or as a host.

Katana is the Microsoft implementation of OWIN. It leverages OWIN to wire up things like authentication, handlers, modules, IIS hosting, etc., so ASP.NET can host OWIN components and Katana components can run in someone else's OWIN implementation.

Howard Dierking just wrote a cool article in MSDN magazine describing Katana in depth: Getting Started with the Katana Project. He had an interesting example showing an OWIN based pipeline which leveraged SignalR, ASP.NET Web API and NancyFx components in the same stack.

If this kind of thing makes sense to you, that's great. If it doesn't, don't worry, but keep an eye on it. You're going to see some cool things happen as a result of ASP.NET becoming more and more pluggable.

Visual Studio Web Tools

Okay, this stuff's just crazy. Visual Studio has been adding some nice web dev features over the past few years, but they've really cranked it up for this release.

Visual Studio is by far my favorite code editor for all web files: CSS, HTML, JavaScript, and lots of popular libraries.

Stop thinking of Visual Studio as a big editor that you only use to write back-end code. Stop editing HTML and CSS in Notepad (or Sublime, Notepad++, etc.). Visual Studio starts up in under 2 seconds on a modern computer with an SSD. Misspelling HTML attributes or your CSS classes or jQuery or Angular syntax is stupid. It doesn't make you a better developer, it makes you a silly person who wastes time.

Browser Link

Browser Link is a real-time, two-way connection between Visual Studio and all connected browsers. It's only attached when you're running locally, in debug, but it applies to any and all connected browser, including emulators.

You may have seen demos that showed the browsers refreshing based on changes in the editor, and I'll agree that's pretty cool. But it's really just the start. It's a two-way connection, and it's built for extensiblity. That means you can write extensions that push information from your running application (in IE, Chrome, a mobile emulator, etc.) back to Visual Studio. Mads and team have showed off some demonstrations where they enabled edit mode in the browser which updated the source HTML back on the browser. It's also possible to look at how the rendered HTML performs, check for compatibility issues, watch for unused CSS classes, the sky's the limit.

New HTML editor

The previous HTML editor had a lot of old code that didn't allow for improvements. The team rewrote the HTML editor to take advantage of the new(ish) extensibility features in Visual Studio, which then allowed them to add in all kinds of features - things like CSS Class and ID IntelliSense (so you type style="" and get a list of classes and ID's for your project), smart indent based on how your document is formatted, JavaScript reference auto-sync, etc.

Here's a 3 minute tour from Mads Kristensen.

Integrated Windows Azure Web Site creation and publishing

The Windows Azure portal is good as websites go, but it's another step to have to go to the portal to create a site, then download the publish profile, then import it into my site. It's like ten clicks or something and it just gets really fatiguing and sometimes I need a nap.

They've updated the Server Explorer in Visual Studio 2013 so I can just right-click on the Windows Azure node to create a site. Then when I'm publishing, I can directly import the site publish profile and go. That means I can create a new Windows Azure Web Site, with a free 20 MB SQL Database, and publish it to Windows Azure all without leaving Visual Studio. That's really nice.

More about that on this post: Creating New Windows Azure Web Site from Visual Studio 2013 RC

Lots more Visual Studio web dev features

That's just a sampling - there's a ton of great features for JavaScript editing, CSS editing, publishing, and Page Inspector (which shows real-time rendering of your page inside Visual Studio). Here are some more short videos showing those features.

Lots, lots more

Okay, that's just a summary, and it's still quite a bit. Head on over to http://asp.net/vnext for more information, and download Visual Studio 2013 now to get started!

Jon Galloway

A New Year's Resolution That Actually Worked: 2 Years of Daily Exercise

TLDR;

Top Recommendations

Season Opener

The First 90 Days

90 Days And Beyond

Exercise While Travelling

Getting Stronger

Time Management

Dealing with Injury

Diet and Weight Loss

The Social Network

How to Talk Yourself out of your New Year’s Blogging Resolution… One Day At A Time

Procrastination Is Key

Other People Have Blogged, Are Blogging, Or Will Blog This Anyway

Other, More Informed Experts Should Take This One

Needs More Playtesting

Professionalize This

Those Tweets Tho

I’ll Blog It When It Ships

Magnificent Debut [or] Don’t Call It A Comeback

Off Topic!

Market Timing

Okay, Not Really

Two free video courses: Intro to ASP.NET MVC and Responsive UI with Bootstrap

Introduction to ASP.NET MVC

Building Responsive UI with Bootstrap

We'll Do It Live!

Web Camp in Los Angeles with Scott Hunter - July 9

Scripting .NET project migration to Automatic NuGet Package Restore

Background on NuGet Package Restore and Automatic Package Restore

Migrating Automatic Package Restore

Enough Talk, Show Me The Script

A few admissions / excuses

MVA: Introduction to ASP.NET MVC - Free Live Training - June 23

Free! Live! Learn ASP.NET MVC!

New Book: Pro Windows 8.1 Development with XAML and C#

weblogs.asp.net Now Running On Orchard and Azure Web Sites

A bit of nostalgia

Hosting Details

Performance Statistics

Hosting Cost Summary

What was changed in Orchard to support multi-blog

Migrating 750 weblogs (with more than 75k posts and 250k comments)

New Blog Goodness

New Bootstrap blog theme

Mobile friendly display

More Authoring Options

Widgets!

Spam Control

Social Media Tag support

Custom Script Support

More Goodness!

A 30 Minute Look At ASP.NET vNext

Top Links

Blog Posts

Getting Involved

What Is It?

Source Code

Important Notes Before We Get Started

The Home Repo samples

Music Store

Videos

Upcoming Web Camps - Summer 2014

Upcoming events

Fresh ASP.NET and Visual Studio 2013.2 Content

Lessons Learned Preparing and Presenting Tech Training Events

Different From One Hour Tech Presentation

Planning

Ask Questions Early

Some Anecdotes on Planning

Get Another Presenter

Preparing The Lesson Plan

What Matters: The End Result

Work From An Outline

A Theme

Demos

Begin / End States

Strategic Typing