Rachel Appel

How to Connect to SQL Azure through SQL Server Management Studio 2008 (SSMS 2008)

Fri, 27 Apr 2012 14:18:31 GMT

Most developers on the Microsoft stack that use SQL Server, and who are migrating their databases to SQL Azure, likely work in SQL Server Management Studio 2008 (SSMS 2008), Visual Studio, or a mixture of both, for DBA and data management tasks. Fortunately, SQL Azure has two options for those who need to administer, create, maintain, and develop using SQL Azure: The SQL Azure Management Portal and SSMS 2008.

Before you start -- If you want to try out the online tools or see take SQL Azure for a spin with SSMS 2008, sign up for a 90 day free trial.

Connect to SQL Azure from SSMS 2008

You can use SQL Server Management Studio (including, and especially, SQL Express) to connect to SQL Azure, but you first need to have some information handy that you can find in the SQL Azure Online Management Portal. Once there, you can view your subscription information including the information you need to connect to a SQL Azure server or database.

Here is the information you need:

The fully qualified server name. See the blocked out, red, parts of above image, as to where you can locate your server info.
Valid credentials that you have already setup via the online SQL Azure Management Portal (of course, the password is not available for viewing, as it should be memorized anyway)

Enter this information into the SQL Server 2008 Connect to Server dialog, and click the Connect button to authenticate. Don't forget you must choose SQL Server Authentication before you may enter credentials.

Upon successful authentication, SQL Server Management Studio opens. This is the exact same SSMS you are familiar with, with the only difference being that you have connected to SQL Azure instead of a SQL Server on your LAN.

From here you can run queries, manage tables, and do all the SQL administrative tasks you need to. Note there is a SQL Azure Database node in the Template Explorer that you can access from the View menu. Of course if you are using SQL Azure you'll want the SQL Azure SDK for Visual Studio 2010.

Connect to SQL Azure from Visual Studio

The same credentials and authentication happen in both tools, SSMS and Visual Studio. This means all that you need to do is open the SQL Server Object explorer and connect exactly as you would any SQL Server in your LAN. Once connected, you can enjoy administering and working with SQL Azure inside of Visual Studio.

Troubleshooting SQL Azure Connectivity

The Firewall check failed error is very common, as you need to enter an IP Address range to connect to SQL Azure from various client programs (i.e., SSMS). Here's the error text:

Firewall check failed. Cannot open server 'SERVERNAME' requested by the login. Client with IP address XXX.XXX.XXX.XXX is not allowed to access the server. To enable access, use the SQL Azure Portal or run sp_set_firewall_rule on the master database to create a firewall rule for this IP address or address range. It may take up to five minutes for this change to take effect.

If you get this error you can reset it from the Windows Azure Mgmt Portal. Just navigate to the server you need access to, then add in the IP Range, as shown in the image below:

Alternatively, you can use SQLCMD in the Windows command prompt which will look something like this:

C:\>SQLCMD –U<user>@<server> -P<password> -S<server>.database.windows.net

exec sp_set_firewall_rule N'Allow Windows Azure','0.0.0.0','0.0.0.0'

SQLCMD Azure commands: http://msdn.microsoft.com/en-us/library/windowsazure/ee621783.aspx

NOTE: Only the server-level principal login (this is the primary/master login that you use to connect to the Windows Azure Portal online, a Windows Live Id), while connected to the master database, can configure firewall settings for your SQL Azure server. Also, check out the SQL Azure troubleshooting for other common errors, troubleshooting, and help.

Get Started Building Data Driven Apps with Windows Azure and SQL Azure

Wed, 25 Apr 2012 19:49:04 GMT

This post is part of a series called “Windows Azure for the ASP.NET Developer”, so if you've been considering migrating your ASP.NET Web Forms or MVC app to Windows Azure or SQL Azure, take some time to review the posts in this series. Here you will find answers to questions like "Why Move My ASP.NET Development To The Cloud?" and "What Are The Differences Between Windows Azure & Windows Server?" that frequently arise.

ASP.NET Business applications are most often forms-over-data that provide basic CRUD operations plus business logic. For those looking to port CRUD apps, you can move your code, the data, or both, over the Windows Azure platform. Naturally, if you are porting your app to Windows Azure, you will need to consider these different approaches in data storage and retrieval.

Approaches to working with data on Windows Azure

The Windows Azure platform offers SQL Azure as an RDBMS, as well as these data storage options:

BLOB (Binary Large OBject) storage: BLOB Storage is the simplest way to store large amounts of unstructured text or binary data such as video, audio and images.
Table storage: Table Storage is used by applications requiring storing large amounts of data storage that need additional structure. While a table stores structured data, it does not provide any way to represent relationships between the data, sometimes called a NoSQL database. You can use SQL Azure for relational database service on Windows Azure.
Queue: Queues are used for reliable, persistent messaging between applications. You can use Queues to transfer messages between applications or services in Windows Azure.
Windows Azure Drive: Windows Azure Drive allows applications to mount a Blob formatted as a single volume NTFS VHD. You can move your VHDs between private and public clouds using Windows Azure Drive.

Of course, you can choose to host your app in the cloud and keep your data on premise, or vice versa. Lastly, hybrid solutions are a great way to both offload some hardware and management costs while migrating to a full cloud solution. The Windows Azure & SQL Azure suite of products has something for everyone.

Since most applications are brownfield development (i.e., in maintenance mode), hybrid solutions are key. Hybrid Azure solutions can have any combination of data and/or software and/or services, in the cloud and/or on premise. Because the architecture is so flexible, you will likely have data in multiple locations that require management and synchronization services. Fortunately, SQL Azure Data Sync provides data synchronization and transfer services in an easy to use UI, so there is little need to spend lots of time on complex SQL statements, though you can use them if you already a set of stored procedures or queries that you regularly run for maintenance.

ASP.NET developers accessing objects in Windows Azure Blob storage have two options for their data management code, a REST API and a Managed Library, samples of both shown below.

REST API GET

 http://azureaccount.blob.core.windows.net/container/restblob?comp=blocklist&snapshot=2012-09-30T20%3a11%3a15.2735974Z
 

Managed Library via C#

 BlobStream stream = blob.OpenRead();
int bufferSize = 16;
int readCount;
byte[] buffer1 = new byte[bufferSize];
stream.Seek(100, System.IO.SeekOrigin.Begin);
readCount = stream.Read(buffer1, 0, bufferSize);
 

For a complete list of BLOB operations in Windows Azure, see "Storing and Accessing Data in Windows Azure".

What to do with your existing data: SQL Azure or SQL Server

For those ASP.NET developers who have existing SQL Server databases, fear not, you have choices. You can use ADO.NET to access SQL Azure, just as you would when developing against SQL Server in any .NET language. If you want broader access to your data with less administration SQL Azure is just as friendly and familiar for ASP.NET developers (and the IT Pros they work with) as SQL Server, as it offers an online management portal that anyone can use. The SQL Azure landing page is a great place to start familiarizing yourself as you get started with SQL Azure.

As you might expect, SQL Azure is an RDBMS much like SQL Server, and it can function entirely as a replacement to SQL Server, although there could be some limitations, depending on your individual scenario. You can expect the wide range of SQL features that are familiar such as sqlcmd for command line access to DDL & DML commands, ASP.NET data binding tools and code, and support for transactions.

The easiest migration path for most databases is to use the SQL Azure Migration Wizard to move your SQL Server databases directly to SQL Azure. The SQL Azure Migration Wizard offers a number of options for migrating data to the cloud, so you can create a full cloud, or hybrid, solution, and with all the available options in Windows Azure Platform, you can drive the migration path exactly as you want.

If you are using ASP.NET MVC you can use Entity Framework to access SQL Azure, SQL Server, and Windows Azure, and your stored procedures will remain the same if you port them to SQL Azure from SQL Server. Those developers working on ASP.NET Web Forms will continue to enjoy accessing data through the familiar SQLDatasource, ObjectDataSource, and other drag and drop controls.

ASP.NET developers also have to migrate ASP.NET Membership databases, and while the process is smooth overall, there can be some gotchas.

Summary

Getting started with Windows Azure & SQL Azure data access is easy for ASP.NET developers. The Windows Azure Platform offers many management and storage options for your data, old or new. If you are migrating your on premise apps to Windows Azure, in whole or part, see Migrating Applications to Windows Azure for more details.

Don't forget to download the Windows Azure SDK!

For the rest of the posts in this series, see “Windows Azure for the ASP.NET Developer” on US DPE Azure Connection.

A device emulator guide for cross platform development on ASP.NET and jQuery Mobile development

Thu, 12 Apr 2012 14:28:54 GMT

You want a Web site that renders mobile friendly content that is viewable, accessible, and interactive for the user. Native device developers have a bit of convenience when it comes to this as they target a specific device OS and browser. It is impossible for Mobile Web developers to test for every device browser he or she needs to target, since there are so many variations and combinations of operating systems + browsers. This is where emulators help. Emulators are software that behave the same way the physical device itself would behave. For example, a WP7 emulator looks and acts just like a real WP7 phone. It loads pages, displays content, and allows you to fill in HTML forms, and interact with HTML pages.

Device testing is a lot like cross browser testing for desktop browsers such as IE, Chrome, FireFox, Safari, etc... (which you still have to do). While you will be unlikely to be able to test for every single type of device and browser on the market, this post will cover some the more popular platforms.

Windows Phone 7 Emulator

The Windows Phone 7 emulator ships as part of the Windows Phone SDK 7.1 and integrates with Visual Studio 2010 automatically for WP7 project templates. When working with Web development projects like ASP.NET MVC or Web Forms, the emulator is run from the Start menu, desktop shortcut, or Visual Studio Tools menu; however, before using it in Visual Studio you must add it as an external tool first.

The WP7 emulator executable name is XdeLauncher.exe and it lives in the C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.1\Tools\XDE Launcher\ folder, so it's easily added to the Visual Studio Tools menu. Choose Tools->External Tools, and when the External Tools dialog appears, add a new command by entering the following information:

Title: Phone Emulator

Command: C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.1\Tools\XDE Launcher\XdeLauncher.exe

Arguments (with double quotes): "Windows Phone 7" "Windows Phone Emulator"

Initial directory: C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.1\Tools\XDE Launcher

Prompt for arguments: Uncheck the checkbox

Your dialog should look similar to the image below:

You can then access the phone emulator from the Tools menu in Visual Studio 2010.

If you prefer, you can run the Windows Phone Emulator solo instead by pressing the Windows key, then typing in Phone Emulator (not case sensitive), to run the program. Of course, you can always use the command line. The WP7 emulator also has some very cool extras like the accelerometer, geolocation/mapping tools, and more. You can even run multiple WP7 emulators simultaneously. For those looking for the master WP7 emulator reference, see everything you need to know about the WP7 emulator.

iOS Emulators

There are many iOS emulators out there, both online, and as desktop versions of software, so you have quite a bit of choice. Here are some iOS simulators that work well:

Electric Plum's ibbdemo iOS simulator runs both iPhone and iPad emulators in the simulator software. The nice thing about desktop software is that you can integrate it with Visual Studio. Online emulators have the advantage of no software installations, and therefore are sysadmin friendly. Below are a few online emulators:

http://www.testiphone.com/

http://iphonetester.com/

KendoUI also has an awesome online multi-device simulator; however, it runs only in Webkit browsers, so you'll need Chrome to use it.

Fun tip: Run online emulators inside of desktop emulator, or on the physical device for 1000 nerd points!

Android & Others

Android | You'll need to do some legwork in the Android space to get setup. The Android emulator is part of the Android SDK, with complete instructions. There is also a nice tutorial about installing, configuring and using the Andoid browser emulator for Windows.

Opera Mini/Multi Device | http://www.opera.com/developer/tools/mobile/

Blackberry/Multi Blackberry OS: | http://us.blackberry.com/developers/resources/simulators.jsp

Of course there's still plenty of devices out in the public, and other emulators on the market if you need them. Check out this comprehensive list of mobile device emulators.

Summary

You can start cross browser development immediately with the emulators shown in this post, and some integrate directly with Visual Studio tools. If you didn't download the Windows Phone SDK 7.1 yet, now is the time!

Note: All emulators listed in this post are free.

What's your favorite emulator (free/paid)? What's your favorite device? What devices do you want to develop for and what devices must you develop for?

NYC Women in Tech Connect Event

Tue, 03 Apr 2012 02:27:17 GMT

Women in Technology NYC Connect (FREE)

May 5th at Microsoft NYC

1290 Ave of the Americas, 6th Floor, NY NY 10104

REGISTER HERE

Featuring presentations on Technology, Personal Growth and Perspectives to propel us into the future.

Why? Because when we connect, we become inspired and we can accomplish anything!!

Who should attend: Any Technical Women in the NYC Metro Area. College students are also strongly encouraged to attend.

Speakers: Email Melissa Demsak (melissa.demsak@gmail.com) or Rachel Appel (Rachel.Appel@microsoft.com) with your topic, abstract, speech length and bio by 4/9/12.

Volunteers: If you have an interest in volunteering to make this event the best it can be, please email Melissa or Rachel.

Agenda:
8:30am: Registration
9am-11:30am: Kick-Off/Presentations
11:30am-1pm: Lunch on your own / Networking
1pm-3pm: Presentations / Closing

Event Site: http://njwomenintech.wordpress.com/

The Road to Windows 8 - NEW YORK CITY!

Mon, 02 Apr 2012 16:54:11 GMT

by Markus Egger

When: April 30, 2012, 1:30 PM - 4:30 PM
Where: Microsoft Corporation, 1290 Avenue of the Americas, Sixth Floor, New York, NY 10104

A free, unbiased look at the current and future development with Windows 8 and .NET.

The industry is in a state of flux. What does that mean for your software projects today and tomorrow? Will your skills be outdated? Will your current investment become obsolete? What should you focus on right now? And what will become important a year or two down the road? Will there be .NET in the future? And what other technologies do you need to learn?

This series of free State of .NET events attempts to answer these questions and more, by taking an unbiased look at current and future development with .NET and other relevant Microsoft technologies. This includes Visual Studio 2010 technologies as well as an in-depth look at what is coming in the next version of Visual Studio (“VS11”) and Windows 8.

Join Markus Egger, Microsoft RD and one of the longest running MVPs, for an afternoon of free information. CODE/EPS is in a unique position to share information based on real world experience in projects that are either our own or one of the many projects we get to see in our role as mentors, trainers and consultants, as well as feedback we receive from CODE Magazine readers. This is NOT marketing hype! We will tell you which information you should invest time and money in, and which ones to avoid.

This event is completely free of charge and is designed for developers as well as IT decision makers. Specific prior knowledge is not required. Attendees of this event will come away with a clear understanding of which technologies to use for various technical challenges.

Topics Include:

Windows 8
- "Metro" Development
- The impact of Windows 8 on today’s development effort
- The future of C# and VB
- The future of HTML and JavaScript
- The future of C++
WPF, Silverlight, and other XAML technologies today and tomorrow
Architecture to serve the needs of modern applications
The need for SOA (Service Oriented Architecture) today and tomorrow
HTML 5, CSS3, and JavaScript
ASP.NET MVC, Razor and jQuery
"Visual Studio Async"
Windows Phone 7 and other mobile devices
and more!
Attendees of this event will come away with a clear understanding of which technologies to use for various technical challenges. Questions? Please e-mail info@eps-software.com or call 832-717-4445 x13.
Note: This event is co-hosted by EPS Software Corp. and Microsoft Corporation. EPS is responsible for all content presented at this event.

REGISTER NOW

What you need to know about the Microsoft MVP Award

Fri, 30 Mar 2012 15:01:39 GMT

Each turn of the Microsoft MVP award cycle raises many questions in the developer and IT Pro communities as to what the award is about, who gets the award, and why we have it. This post aims to answer those and other frequently asked questions.

About The Microsoft MVP Award program

The MVP Website states:

"The MVP Award recognizes exceptional technical community leaders from around the world who voluntarily share their deep, real-world knowledge about Microsoft technologies with others."

Each quarter, selected nominees receive the MVP award for their contributions to Microsoft technical communities in the past year. One can become a Microsoft MVP by way of nomination process, and anyone can nominate someone for an MVP award. Nominations do not guarantee receipt of the award.

The Becoming an MVP page of the MVP Website gives some details as to what happens once someone is nominated for the award.

"To receive the Microsoft MVP Award, MVP nominees undergo a rigorous review process. A panel that includes members of the MVP team and Microsoft product groups evaluates each nominee's technical expertise and voluntary community contributions for the past 12 months. The panel considers the quality, quantity, and level of impact of the MVP nominee's contributions. Active MVPs receive the same level of scrutiny as other new candidates each year."

The panel consists of members of the MVP program with input from product team members and the field. The MVP program admins then invite awardees to participate in the MVP Award Program benefits for a one year award cycle. If the awardee accepts the MVP award, they must adhere to both a code of conduct and an NDA (a non disclosure agreement, which is a legally binding contract).

Here is what the award welcome gift looks like for 2012 (placard on the left, certificate on the right).

There are some frequently confused sentiments about MVPs and the award program:

Obtaining the award one year does not guarantee or influence next year's decision. Much like the Grammy's or Oscars, or other awards, it's an award based on work in a particular area, for the previous year.
There is no prescriptive way or particular set of actions to become an MVP, since a prescriptive guide means it's a certification, not an award.
Open Source Software is not an award category, since awards are hosted by product teams. Contributions to OSS projects can be, but are not necessarily, taken into consideration for the award.
Criticism of Microsoft products does not disqualify people from becoming an MVP, nor does it cause MVPs to "lose their MVP".
The MVP award is not the result of a competition. One person never wins the MVP award in favor of another.
The MVP award is not a membership or club.

Read the full set of FAQs here! If you're not familiar with the varying Microsoft awards, certifications, and other programs, it's easy to confuse them.

Certifications, Insiders, & Regional Directors Programs

Because programs like certifications are often confused with the MVP program, here is a quick rundown of Microsoft programs & certifications:

Certificationss: Microsoft certifications exist for nearly every active product. Certifications are 100% prescriptive, so there will always be an exam, lecture, or other set predetermined activities, that one must complete, while meeting a quality metric (i.e., a minimum score). Since certifications require exams, the certification candidate must pay to take the related exams, whereas there are no costs associated with receiving the MVP award. For more on MS certs, see the Certification Overview page.

Insiders: Microsoft maintains relationships with customers and partners of all types, from an individual contributor to companies and organizations. The ASP Insiders (and other insider programs) are Microsoft sponsored programs whose members participate in by providing feedback to ASP.NET, Visual Studio, or other product teams.

Regional Directors are trusted experts that Microsoft engineers in the field rely on for help with directing the best technical solutions for both the RD's and Microsoft's customers. Read more about RDs at the RD Home Page.

Summary

Congratulations to all of our new and renewed MVPs! Thank you all very much for sharing your expertise, experiences, and knowledge with the technical communities surrounding technology. I know many MVPs who get the award each year and it is because of their passion for Microsoft technologies, and a love of sharing their expertise.

The fine print:

MVPs, RDs, and Insiders, are not employees of Microsoft.

Previous to joining Microsoft, I had received the MVP award for multiple years, and also participated as an ASPInsider, and an MCT. I hold multiple certifications from Microsoft and other tech companies.

The Differences Between Development on Windows Azure and Windows Server

Thu, 22 Mar 2012 15:43:34 GMT

This post is part of a series called “Windows Azure for the ASP.NET Developer” written by Rachel Appel (that's me!), Adam Hoffman, and Peter Laudati (they're my awesome coworkers!). You can see the complete list of posts in the series at the US Cloud Connection site.

ASP.NET developers, particularly those writing enterprise applications, have to think carefully about the more than business requirements. The environment, team, tools, deployment, performance, security, and other factors weigh in when it comes to building robust Web applications. When thinking about using ASP.NET on Azure, you or your team might wonder what challenges an ASP.NET deployment on Azure will entail. Let's take a look at some of the common concerns of ASP.NET developers today and how Azure helps alleviate those concerns, by highlighting a few of the differences between developing on Windows Azure vs. Windows Server.

Azure Architecture and State Management

The big architecture decisions are the first topics of consideration for any type of ASP.NET application, and it is no different in the cloud. Some of those important topics you need to consider are:

Overall application architecture, e.g., n-Tier or SOA, and where the code should live and execute.
Defining which tiers are services and which tiers are customer facing
Where to store primary data, reporting data, or lookup data.
State Management & Performance
Security

If you're already running ASP.NET on IIS and need to map out architectural concerns of moving to Azure, the Azure Application profile guidance [PDF] details migration concerns for ASP.NET developers.

ASP.NET developers are also used to struggling with (or without, to be precise), state over HTTP. Having to deal with the issue of state vs. statelessness imposes requirements on application design, especially when it comes to performance and scalability. Caching in particular, is important, as it allows you to form a strategy around what data is to be static data, and for how long, and with what parameters. While the overall nature of what type of data should be cached doesn't differ (i.e., data that doesn't change often is the best for caching), there are technical differences between caching on-premise and Azure caching. The output cache provider for windows Azure works well for all your pages that need standard page output caching.

If you're already using ASP.NET features such as session state or the output cache, those providers are available in Windows Azure as well, so there is no need to change your code to make it fit on Windows Azure. The session state provider for Windows Azure is particularly useful. The session state provider adds cache data into its own process on Windows Azure, rather than the usual in-process state management. At first this may seem odd to ASP.NET developers but keep in mind that Windows Azure is a different platform that can scale rapidly to handle the load, and the cross-process expense is more than justified. More details are available in this introduction to Windows Azure Caching Services.

Tool and Project Differences

Fortunately for ASP.NET Web Forms and ASP.NET MVC developers, there are no major tooling or project differences that will catch you off guard when you get started with the Windows Azure tools. You will need the Windows Azure SDK for .NET, which includes the Windows Azure Tools for Visual Studio. The SDK & tools integrate seamlessly as part of Visual Studio.

One small difference in tooling is the use of the Windows Azure developer emulator rather than the built-in Cassini ASP.NET development Web server or IIS Express for local machine testing. While you test your ASP.NET application as you normally would using standard debugging tools, the Windows Azure developer emulator shows what's happening in two console windows inside the emulator windows itself: compute and storage. You can watch basic activity logged as you interact with the application locally.

You can learn more about the tools in the next post in this series.

Greenfield ASP.NET Web applications in Windows Azure tend to fall into two categories, the Web Role and the Worker Role, and Visual Studio contains project types to reflect that. Project types targeting Windows Azure are standard ASP.NET MVC or Web Forms applications that have additional references to Microsoft.Windows Azure and related namespaces as well as .config files containing information for an Windows Azure deployment.

Deployment Differences

The application deployment process is unique to the combined concerns of the application and its environment. In corporate settings you might have mounds of red tape in the deployment process, or can only deploy on the third Thursday of the month because of the systems patch schedule. In some shops, devs deploy to internal server(s), others to a hosted environment, and some are already running the cloud.

If you are dealing with a currently existing ASP.NET application, your initial deployment will be the migration to Azure. When you want to port your existing ASP.NET project over to Windows Azure, all that you need is to add a new Azure Deployment project type to your Visual Studio solution. Azure Deployment projects are simple projects that contain installation and configuration commands in XML.

As an ASP.NET developer, deployment is not just the initial deployment, but incremental deployments (patches), and complete site upgrades, as well. Fortunately, Azure Deployment Tools in Visual Studio make deployment a snap, and the Windows Azure PowerShell Cmdlets help you automate everything you need, and work alongside your IT sysadmin with less friction on all deployment projects.

Running your application in production post deployment means you now have a product to support, and with that comes diagnostics and bug fixes.

Diagnostics and Instrumentation

Of course, once deployed, you need to rely on instrumentation and server diagnostics, customarily the realm of the sysadmin. Fortunately for .NET developers and sysadmins alike, Windows Azure has a full range of diagnostics, instrumentation, and health monitoring of applications. For example, error logging and app auditing are usually the responsibility of the developer, while things like the IIS logs are that of the sysadmin. Azure brings the necessary IT tasks that developers also need to do right into your browser.

Additionally, when developing on Azure, you will enjoy a set of Windows Azure PowerShell Cmdlets, which are tools you can use for automating the configuration and management of Windows Azure services.

Though diagnostics in a cloud environment can be different in technical implementation, the necessary data you need to make correct decisions about the app's health remains the same. In the article, Tips for Migrating Your Applications to the Cloud, the authors detail how to setup, monitor, and manage, diagnostics from Azure in Visual Studio. While the Windows Azure tools for Visual Studio provide you with a full debugging experience on our workstation, instrumentation takes on a greater importance in the cloud because you cannot attach a debugger to a production deployment.

Capacity Monitoring, QOS, and Uptime

Traditionally, teams create applications that run on one or more IIS Web servers, or an internal Web farm, depending on the expected load capacity. If the app and team behind it is large enough, you might be fortunate enough to have a sysadmin that monitors all the key indicators of a crash. Or you might be the one who gets the text message during family dinner hour to fix the app when it breaks, and if you're that person, you probably don't enjoy having to RDP into a server and fish around various tools like the Event Viewer and Perfmon. Azure makes all this unnecessary by providing a set of Web based administrative tools that are easy to use, and a complete set of diagnostic APIs for use in code.

Azure ensures almost infallible uptime, and the Windows Azure Storage blog demonstrates this with lots of great info about highly available storage.

Summary

If you're an ASP.NET developer just getting started on the Windows Azure platform, or are in need of information about migrating your existing application to Azure, you'll definitely want to try out the 90 Day Azure Free Trial. You won't be billed a single penny unless you subscribe to full Azure services. Once you have your Azure account and free trial, download the Windows Azure Training Kit (or use it online)

For the rest of the posts in this series, see “Windows Azure for the ASP.NET Developer” on US Cloud Connection.

Are you a startup? Get BizSpark cloud access. Got MSDN? Get up to $3,700 of cloud benefits. Don’t have MSDN? Try the cloud free for 90 days!

A guide to element display and positioning with the CSS Box Model

Thu, 08 Mar 2012 18:00:02 GMT

Web developers tend to shy away from design & style and focus on the business logic, data structures, messaging, and systems development when dealing with web applications. Without a good grasp on positioning, which is often left to the designer, your websites can look very different between competing browsers, and downright ugly in some. Many native development platforms (XAML, Winforms, etc...) and tools implement the positioning of elements on screen as tables or grids. Tables also have been the de facto way to position DOM elements for a decade. However, with the rise of CSS 2/3, sporting new elements and selectors, positioning is more fluid and flexible.

Page layout with the Box Model and display attribute

Browsers render Web page content using the Box Model, meaning that the display, position, margin, padding, and border attributes, combine to render each element as a box. You can inspect the box model for any element in Internet Explorer by using the IE F12 tools. Below shows part of the IE F12 tools displaying the box model for an element.

Setting the display attribute affects the box model by determining whether or not elements render by their default display style or not - block or inline.

Below is a compare and contrast of block and inline elements:

Block: Block elements define the structure and layout of the page.
- Can contain other block or inline elements.
- Render line breaks both before and after the element.
- A block element will take up 100% of the width of its container element.
Inline: Inline elements render inside of block or other inline elements and meant to markup, contain, or style the content, but not define its structure.
- Can contain other inline elements only.
- Do not render any line breaks.
- An inline element will size to match that of the content inside of it.
Fixed: Fixed elements position relative to browser, and out of the normal flow of the page.

Block elements: <div> <h1>…<h6> <p> <ul> <ol> <table> <form>

Inline elements: <span> <a> <strong> <em> <img />

Setting the display attribute resets the natural way the element renders to the value of your choosing. In the example below, the #sample element will render as a block element even if its default behavior is inline.

 #sample {    
    display:block;
}
 

Block and inline elements won't be of much help without the position property to put them in the right place.

Positioning elements in the page

Your choices in positioning with CSS include:

Static: The default, and something you'll probably never use.

Absolute: Absolute positioning is the position of an element in relation to the top:left or 0:0 coordinates of the HTML document.

Relative: Relative positioning is when an element is positioned in relation to its parent or predecessor

Relative + Absolute: This is absolute positioning within a relatively positioned parent.

All elements position from their top and left by default, but you can override this by setting the right or bottom attributes, and the element will position itself from those coordinates instead.

This tutorial sums up positioning nicely.

Padding and Margins

Padding and margins also play an important role in positioning. Padding is the amount of space between the element edge and the content or children elements inside it, and margins are the space between elements. CSS contains padding and margin settings for top, left, bottom, and right, and you can set any combination of them. Setting too much or too little of either will shift the elements, often far out of line, or overlapping other elements. Below is some CSS that sets padding and margins:

 #sample {    
     padding-top:5px;    
     padding-right:0px;    
     padding-bottom:0px;    
     padding-left:5px;    
}
 

You can use this shortcut syntax to specify one or more of the padding/margin parameters.

 #sample {    
     padding:5px 5px 5px 5px;
     margin:5px 5px 5px 5px;
}
 

An easy way to remember the the order of the values in the shortcut syntax is to use the mnemonic hint TRBL, pronounced "trouble" (very fitting for CSS) Top, Right, Bottom, Left.

CSS Units of Measurement

Many elements have what appears to be a myriad of options for sizing and placement of content, (e.g., ems, pcts, or points) and this a point of confusion for developers. You can apply different UOMs to any attribute requiring them. The important UOMs to know:

Percent: Units render the attribute according to a percentage you set. Since percentages deal in relatives, a unit of percent in CSS is always relative to its parent element.

Pixels: Pixels have long been the ruling measurement for on-screen displays in programs on both desktops and the Web. Although pixels have their place, they are not as fluid nor flexible as percent and ems.

em: Pronounced "em". 1em is equal to the current font size. This means that 2 em is twice the current font size, while a 1.5em is one and a half times the current size. The default size in browsers set to render medium sized text (which is most), renders 16pt font, so ems weigh against that.

pt: 1 point equals 1/72 inch. Points usually specify font sizes.

The others:

Although far less frequently seen on the web, these measurements also exist:

cm/mm: Centimeter and millimeter. This is for you sciency types out there, you might want to display something in exact scale.
ex: 1 ex is the x-height of a font, or roughly half the font size. Or you could just use an em and it will be easier.
pc: 1 pica equals 12 points, for those who like to do extra calculations for no reason.
in: Inches. Seriously? Imperial units are so 19th century.

Regardless of the visual model (See Display and positioning), elements position by their top and left coordinates by default; however, you can position elements from any side you'd like.

 #uom-sample {
    position:absolute;
    margin:0px;
    bottom:5px;
    left:5px;
}
 

The above code sample demonstrates positioning an element from the bottom/left rather than the top/left.

Summary

Knowing the quirks of CSS is important, even when there's a designer on the team, since most web developers render code on the server and send it to the browser, where the browser then renders the content, HTML, client side script, and CSS. Below are five things that will make your life in CSS easier.

Looking for a nice, lightweight, CSS editor? Try WebMatrix: full featured CSS intellisense & tooltips without the overhead of full IDEs (It is what I use for CSS).

Add HTML5 Geolocation plus Bing Maps into ASP.NET MVC views

Tue, 24 Jan 2012 21:38:42 GMT

The Bing Maps API is a free, easy to use API, that allows you to incorporate mapping features into your ASP.NET MVC or application by using Web standards such as JavaScript, and the now supported HTML5 Geolocation.

Bing Maps and ASP.NET MVC

A Bing maps API key is required when using the API. The Bing Maps key allows you to access Geolocation data, and to manipulate an in-view Map object with JavaScript via the Bing Maps API. The Bing Maps Developer Portal is where you can get a key by registering with your Windows Live ID.

Once you're set with a key, you'll need these files in your MVC project to develop with Bing Maps:

\Scripts\YourBingMapsScript.js - This file contains your script that works with Bing Maps & Geolocation.

\Content\Site.css - A small bit of CSS is required to style the Map

\Views\BingMaps\Index.cshtml - The MVC view that contains the Bing Map HTML

Since the code is HTML &CSS that conform to Web standards, the bulk of the lives is in the .js file and/or the view. Although using MVC, the model and controller are not necessary for manipulating maps with client side script, but don't throw out the model and controller yet, as you will need them to work with other data.

The Bing Maps Interactive SDK

If you're writing code that uses Bing Maps, the Interactive Bing Maps SDK is a "must visit" Web site. By choosing the options on the left of the page, the Bing Maps Interactive SDK creates usable JavaScript, and a "View HTML " button that exposes the page source.

The Bing Maps API & SDK contain more than an interactive website. Bing Maps development gives you access to many productive development tools such as:

The Bing Maps AJAX Control (multiple versions)
The Bing Maps iOS Control
A Bing Maps Silverlight Control
SOAP and REST services
More...

You can use the Bing Maps Interactive API to create the equivalent code as the samples shown in this post.

Render Bing Maps in MVC views with the Bing Maps AJAX control.

While it's called the Bing Maps AJAX control, it's not a control at all, but a JavaScript library instead. HTML and client side script (JavaScript, jQuery, etc...) are the enabling technologies for Bing Maps on the ASP.NET (or any Web) platform. To reference the Bing Maps AJAX Control, your view needs the <script> reference below.

<script src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0" type="text/javascript"></script>

If you plan to use the Bing Maps AJAX control in multiple views, the <script> reference can go in the _Layout.cshtml file, otherwise you can add it to the required views or a different layout page. Inside a view, a <div> element should contain and display the map, and is also the DOM object that you manipulate in code, so it needs an id attribute.

<div id="map"></div>

Since the browser renders a tiny <div> by default, some CSS is necessary, such as the position, width, and height, in which to create a suitable DOM shape for maps. You can save the CSS in the \Content\Site.css file, or its own file, for reusability across views.

<style>

#map

    position:relative;

    width: 500px;

    height: 500px;

    border:0px

</style>

After the HTML is in place, you can write code to capture the user's positional data to display a Bing map showing the location, nearby restaurants, or other information requested by the user.

Display a Bing Map with a Pushpin.

You first need positional data from the user before displaying the map. Once you have the positional data points, i.e., latitude and longitude, you can add a Bing Map to any MVC view. To learn how to obtain positional data for your Web site or app, see this post on creating location aware Web sites with the HTML5 Geolocation.

The code below retrieves the latitude and longitude coordinates from the position argument of a showMap method, then creates an instance of a Map object the position, credentials, center, map type, and zoom level. The code continues on by centering the Pushpin to represent the user's location in the map.

function showMap(position) {

    var latitude = position.coords.latitude;

    var longitude = position.coords.longitude;

    var map = new Microsoft.Maps.Map($("#map")[0],

        credentials: "Your Bing Maps API Key",

        center: new Microsoft.Maps.Location(latitude, longitude),

        mapTypeId:   Microsoft.Maps.MapTypeId.road,

        zoom:        10

});

    var center = map.getCenter();

    var pin = new Microsoft.Maps.Pushpin(center, { width: 50, height: 50, draggable: false });

    map.entities.push(pin);

The result should look something like this (but with your coordinates):

Should you want to customize the Pushpin icon, just change the Pushpin construction arguments, and pass in the path and name of the graphics file (.png, .jpg., and standard Web formats).

var pin = new Microsoft.Maps.Pushpin(center, {icon: 'CustomPushpin.png', width: 50, height: 50, draggable: true});

Customizing the map further by adding an Infobox, which is a small rectangle with information about a particular location, takes only a few lines of code. Make sure the clear method is run before pushing an Infobox onto a map or the latest Infobox, Pushpin, or other object will overlay the previous.

 map.entities.clear();

 var infoboxOptions = {title:'Bing Maps Rock!', description:'Add an Infobox to a map with very little JavaScript!'};

 var defaultInfobox = new Microsoft.Maps.Infobox(map.getCenter(), infoboxOptions );

 map.entities.push(defaultInfobox);

The above code creates an Infobox on the map similar to the one shown here:

These are just a few simple, but core examples, of what you can do with Bing Maps. For more information on developing for Bing Maps, see below in the Summary & Resources.

Summary & Resources

The Bing Maps AJAX control is a handy library you can use to add geo-interactivity to your Web sites with little code. Additionally, you can incorporate other APIs to make full featured location aware mapping apps.

Use the W3C Geolocation API to create location aware Web sites

The Bings Map control (Bing Maps API)

Bing Maps Articles

Customizing Bing Maps Pushpins

G. Andrew Duthie demonstrates bing maps in action with CommunityMegaphone.com

A New MSDN Magazine Column: The Web Development Report

Sat, 21 Jan 2012 18:14:48 GMT

Announcing my new monthly column at MSDN Magazine...

The Web Development Report

Each month I'll discuss the latest and greatest topics and issues in Web application development using technologies such as HTML5, ASP.NET, jQuery, Mobile Web and more! You can read the inaugural column and article for the January 2012 issue titled Getting Started with Mobile Web Development Using HTML5, jQuery Mobile and ASP.NET MVC 4.

If you'd like to leave feedback, there's plenty of options: This blog, in the article comments, email, or at any of the social networking options available from the homepage: http://rachelappel.com. Let me know what you think and what topics you want to read about in the world of Web.

Use the W3C Geolocation API to create location aware web sites

Tue, 20 Dec 2011 19:43:29 GMT

Location aware services and applications are becoming more important than ever before, as smartphones, tablets, and other fully featured mobile devices become ubiquitous. The W3C Geolocation API gives developers an easy way to integrate client side location aware services within their web pages.

Hello, location aware world!

With the advent of geolocation services and mapping APIs, web sites and applications are popping up daily providing the following types location aware software:

Games and social applications, (e.g., Foursquare, Twitter, Trip It, Facebook, etc...)
Search applications for local services (e.g., restaurants, shops, entertainment, etc...)
Navigation & maps
Package shipping/tracking & transportation services
Personal health & fitness
More...

Notice there's a good mix of both business and consumer applications that benefit from using geolocation. Fortunately, for developers, location aware web sites and apps are easy to create with web standards like HTML5, JavaScript, and CSS. On top of that, APIs like Bing or Google Maps make great companions to these sites - and don't forget 3rd party APIs such as Foursquare or Yelp.

How location aware web sites work

Geolocation apps work by detecting the user's location via positional data that it receives from a geolocation source.

There are three basic steps to the process:

The client browses to a web page that attempts to access the geolocation source.
The app requests permission to send access the geolocation source.
If the user permits, the app or web site can access and use the user's positional data. (If not, an error occurs. See below

Once you have obtained the user's coordinates from the API, you can display maps, give directions,show nearby points of interest

However, keep in mind that the device is the deciding factor regarding the accuracy of the positional data. For example, using a 3G smart phone should yield more accurate results than a desktop machine that connects through an ISP a mile away, using an IP address based method. Devices can use one or more of these methods:

Coordinate triangulation
Global Positioning System (GPS)
Wi-Fi with MAC addresses from RFID, Wi-Fi, and Bluetooth
IP address
GSM or CDMA cell phone IDs
Custom sources: Some phone manufacturers like Nokia

Many smart phones provide a way for users to switch between sources such as 3G or WIFI.

Obtaining the user's positional data using the HTML5 Geolocation API.

For creating web sites either straight-up JavaScript or jQuery will work fine with the geolocation API. It's quite small, with only three methods:

Method	Description
clearWatch	Stops listening for updates to the current geographical location.
getCurrentPosition	Obtains the geographic position, in terms of latitude and longitude coordinates.
watchPosition	Begins listening for updates to the current geographical location of the device running the client. Use this method to listen for location updates.

Before obtaining the user's coordinates, a call to Modernizr performs feature detection for geolocation support. If the browser supports geolocation, the code calls the watchPosition() method, and passes success and error callback methods as arguments. Below is the code sample outlining the call to watchPosition().

$(function () {

    var watchID;

    $("#watch").click(function () {

        if (Modernizr.geolocation) {

            var nav = window.navigator;

            if (nav != null) {

                var geoloc = nav.geolocation;

                watchID = geoloc.watchPosition(successCallback, errorCallback);

        else

        { $("#message").text("You'll need to enter your address manually."); }

});

});

A successful completion of the watchPosition() method triggers the successCallback() method. At this time, the code can access the positional data returned from the Geolocation service in order to display Bing maps, list nearby attractions, or whatever is required. Below shows code that obtains the user's coordinates, then displays the latitude and longitude in a web page <div> element (<div id="message">). Notice that the position argument is populated with data, however not all the properties will contain values (e.g., altitude), depending on the capabilities the device and service.

function successCallback(position) {

    var latitude = position.coords.latitude;

    var longitude = position.coords.longitude;

    $("#message").text("There you are at " + latitude + " " + longitude);

Of course, the code won't always run successfully. There are many things that can get in the way: bad weather, permission denied, timeouts, no cell reception, and gremlins, to name a few.

Dealing with errors and timeouts

The errorCallback() function does what you might expect, it runs when an error occurs. There are three frequently occurring errors to look for when the errorCallback() executes:

PERMISSION_DENIED
POSITION_UNAVAILABLE
TIMEOUT

A switch statement works nicely to determine the error source and take corrective action, as each case checks value in the error.code property against a set of constants that correspond to error numbers.

function handle_errors(error) {

    switch (error.code) {

        case error.PERMISSION_DENIED:

            alert("User did not share geolocation data");

            break;

        case error.POSITION_UNAVAILABLE:

            alert("Could not detect current position");

            break;

        case error.TIMEOUT:

            alert("Time out");

            break;

        default:

            alert("Unknown error");

            break;

Summary

Location aware web sites are becoming more important than ever before, and since the W3C Geolocation API is a standard, it works with any technology ranging from plain HTML to ASP.NET.

To get started creating location aware sites, check out the following resources:

W3C Geolocation Introduction

Geolocation APIs & client side frameworks on Code Project

Stats, data, and answers, as to why there are so few women in technology fields.

Mon, 31 Oct 2011 19:02:49 GMT

Women today represent an abysmal percentage of the population of most STEM fields (Science, Technology, Engineering, and Math), and that number is shrinking, rather than expanding. At the same time, fewer young women are entering the STEM workforce than in previous years.

Why are women leaving STEM fields?

Researchers have been gathering volumes of data as to the why there are fewer women are staying in, or entering STEM fields, and from that data we can see many issues that cover a spectrum from that need to be addressed:

Sexism: overt and subtle (hostile macho cultures)
Harassment, threats, or potential or actual violence toward women
Childcare
Financial Independence
Gender Stereotyping
Work-life balance

Considering the number of challenges, addressing the lack of women in technology is a multifaceted phenomenon with no single solution, with each matter deserving attention. The primary goals of this post will focus on demonstrating...

Incidents of sexism at industry events, and online conversations, and their link to the decline of women in STEM fields.
The effects sexism has on women and the STEM industries as a whole, both now and in the future.
A call to action to drive awareness and take a proactive stance in promoting women friendly STEM workplaces, conferences, schools, and meeting places.

By understanding these influences women in technology, particularly in software development, we can take corrective and proactive stances, in the retention, engagement, and attraction of top female talent.

Incidents of sexism are major contributors to a declining female STEM workforce.

The National Center for Women In Technology describes sexist incidents [.pdf] in various ways including,

"experienced/observed exclusionary cliques, unwanted sexual teasing, being bullied, and homophobic jokes".

Consider that between January and October 2011, women reported 20 sexist incidents to the Geek Feminism Wiki, with some common themes:

Several talks at tech conferences contained pornographic style imagery, or sexual imagery.
Multiple presentations referenced women in a derogatory or demeaning way, (e.g., "women can't program", "women are stupid") or by overt or subtle objectification of women.
Overt harassment, inappropriate touching, and groping are still commonplace at technical conferences.

Roughly one incident every two weeks this year means that this happens more than we'd like to think - and that's only the reports from a single website.

Exclusionary, offensive, incidents at conferences, along with threats, violence, and harassment, against women in technology (and women in general) are simply not isolated occasions. They have profound implications that directly impact the declining numbers of women in technology. The Washington Post outlines some statistics demonstrating this, in a study on interactions between men and women during online chat sessions.

"A 2006 University of Maryland study on chat rooms found that female participants received 25 times as many sexually explicit and malicious messages as males. A 2005 study by the Pew Internet & American Life Project found that the proportion of Internet users who took part in chats and discussion groups plunged from 28 percent in 2000 to 17 percent in 2005, entirely because of the exodus of women." [emphasis mine]

Those numbers have barely improved, five years later. Additionally, the participants in this study belong to a general online audience and not solely the STEM fields, so one must consider the fact that STEM fields are male dominated, resulting in a larger amount of sexist behavior.

Though not the only reason, the numbers show that in software development specifically, sexist and overtly offensive behavior (both online and off) is one of two key factors as to why women are leaving technical fields as reported by ABC News. This article quotes Laura Sherbin, director at the Center for Work-Life Policy, who published a study in the Harvard Business Review titled "Reversing the Brain Drain in Science, Engineering, and Technology". Laura goes on to explain the primary reasons women leave STEM fields...

"The top two reasons why women leave are the hostile macho cultures — the hard hat culture of engineering, the geek culture of technology or the lab culture of science … and extreme work pressures"

Sherbin also highlights just how critical and surprising the numbers are, even to researchers.

"The dropping out was a surprise to us. We knew anecdotally that women were leaving these careers. We didn't expect to see the number 52 percent."

To reiterate: 52% or just over half, of the female STEM workforce leaves because of hostile macho cultures.

Let's do the math:

Assume the average tech conference has 300 attendees.
The average turnout of females at a technical conference is at about 15%, or 45 women in this example.
52%, or 23 of the women at that event will leave the industry^[1].
At a rate approximately of 26 events per year affecting 23 women each time, 598 women will be subjected to a hostile environment each year^[1].

The cost in human terms and individual well-being is immeasurable.

A look at the negative effects and human cost of sexist behavior in STEM fields.

Considering the above numbers, try out this thought exercise, showing the implications of sexist incidents on women in software.

Think of the names 23 women developers that you work alongside, have worked with, or know. Try it without looking at social networks, checking address books, etc...
Think about these women. Are they your coworkers? Presenters you admire? Are they women with whom you enjoy having technical conversations, perhaps at conferences, code camps, or over social networks?
There's essentially a 50/50 chance, or the same chance as the toss of a coin, that those 23 women won't be developers for much longer.

Once they're gone, can you name 23 more women to replace them? It won't be the younger girls entering the field.

The consequences have a stifling effect on younger girls wanting to enter the technology fields before they have a chance to start. Numbers show that a huge impasse in attracting young girls into the STEM fields, is a serious lack of women role models in those fields. Less women staying in the field means fewer role models for young girls, which in turn means fewer STEM girls overall.

It's not just about sexist incidents though, subtle sexism can bleed into the everyday atmosphere of in tech fields and cause the same amount of negative barriers. While the day to day activities of most technical women might not vary much from that of men, as far as actual programming, sitting in meetings, mundane business tasks, etc... What do differ are the interactions between the sexes, as well as both overt and subconscious behavior that manifests as sexist incidents, though primarily non-malicious, and most often subconscious. For example, here are some commonplace scenarios where subtle sexism happens in companies large and small^[2][3]:

Men who repeatedly ask only the women attending meeting to take notes, or get coffee, when the woman is not a secretary or in a similar role.
Colleagues that routinely ignore women during meetings, or a female states an idea that is promptly ignored, then raised again by a man who gets the credit. (in a consistent, frequent, pattern)
Women, rather than men, are routinely stuck into "softer" positions, often to answer phones. Management gives women more remedial tasks that are clearly not aligned with their job description or what they were hired to do.

The sentiments above are detailed in a report by Level Playing Field Institute titled "The Tilted Playing Field: Hidden bias in information technology workspaces" [.pdf]. Reading about recent events and stories of everything from demeaning comments, to outright harassment, stalking, and groping, are still commonplace in the tech industry. I must agree that I've personally been privy to a number of these types of scenarios, but that's not all...

When an incident at a conference happens, I inevitably get a call or email from a female colleague who has just given up, and is now looking at non-technical career alternatives.

If we are to keep our technical industries healthy, and full of diverse creativity, things must change, and soon. So what can you do?

A Call to Action: Drive awareness and take the lead to promote diversity in STEM fields.

Below are just some of the things you can do to drive diversity and promote women in STEM fields:

Drive awareness.

It may seem obvious, but without awareness, it's impossible to know there's a problem.

You can drive awareness by blogging, tweeting, or otherwise telling your story, or commenting on blogs to show your support. The Level Playing field's report shows a real lack of awareness in populations at large. The more blog posts, articles, and events, mean more information people can use to take proactive stances to create technical communities and workspaces that are welcoming to everyone.

Be proactive.

Does your company have a diversity and inclusion policy? Even if you work for a small business or startup, a formal policy of inclusion fosters a welcoming environment for everyone. If you company doesn't have one, get involved and ask your HR department to work on one with you. Don't let your policy be a paper form of lip service, make it part of how you do business.
Does your HR department have a clear open door policy, with a trusted employee to listen to concerns?
Attend women in technology events. Hint: Take your favorite gal developer with you. At the Code Camp NYC 2011 WIT luncheon, a healthy mix of men and women joined in for a productive, round-table discussion.
Ask technical women work on a joint talk with you for a user group or code camp, and invite them to technical events.

Awesome guys like John Zablocki and coworkers like Joe Healy, Peter Laudati, and Brian Prince, are just a few of the many guys I see at WIT related events.

Presenters & conference organizers:

Speakers can use the Windows Phone 7 app content guidelines, or the Android app marketplace rating guide when s/he's not sure what material should be considered offensive.

Organizers can create written guidelines to ensure a harassment-free environment for everyone at your conference, user group, or other meeting.

CodeStock 2010 set a perfect example to follow by embracing a WIT centered theme, including a female keynote speaker (*ahem* that would be me :) ).

Summary

I would love to see every company behave as MS DPE East does, and I hope that you, dear readers of this blog, will step up to foster an environment in your workplaces and homes that support and celebrate women and diversity in STEM fields.

Should an incident occur at an event you're attending, take corrective action as soon as possible. If you're in a conference session and you feel offended or uncomfortable, walk out calmly, and write down exactly what you feel is offensive or inappropriate. Take the evaluation to the conference staff, and ask that they check out the session in question.

[1] The numbers in this sample represent one source of reports, so the actual numbers are much higher. Additionally, the number 23 is rounded from 23.4. Also assuming a single track conference, which is fairly common.

[2] These aren't just manufactured scenarios - they're real life stories from female contemporaries.

[3] As for large companies, my experiences at Microsoft DPE have been great!. I work on an highly functioning team with awesome people who celebrate diversity in technology and are quite supportive of each other.

Silverlight in the Enterprise Training at MS NYC

Thu, 27 Oct 2011 01:44:08 GMT

Where & When?

Microsoft New York

1290 Ave of the Americas, 6th Floor

Date: 11/18/2011 8:00a-5:00p

REGISTER HERE

What's Covered?

Building simple silverlight applications is very easy, we have all seen the simple hello world samples that are out there but what about solving real enterprise problems with them such as scalability, testability, ease of maintenance, and extensibility and interoperability? The Silverlight in the enterprise event will aim to show real meaningful demos in these areas. The sessions will be devoted to the following:

8:00 - 8:30 - welcome with breakfast

8:30 - 9:00 Leveraging state to reduce server load

In this session we will discuss the benefits that client side state brings us from a server load reduction point of view. We will look at how leveraging this can dramatically reduce server load and resource requirements vs a typical ASP.NET application. We will also look at how to fully leverage the client side state silverlight provides

9:00 - 10:00 Silverlight Extensibility with MEF

One of the key focuses of most enterprise applications is long term maintaince and extensibility and both of theses stories can be centered around MEF. We will look at how to go about building modular applications with MEF that can grow over time with your business needs. The core example we will discuss centers around a common host application and several business units that will make use of it.

10:00 - 11:00 Prism in the real world

Prism is a great platform and a very useful one in most enterprise project settings. We will look at what prism is all about and what choices you have when using it. We will show some samples related to prism and discuss how you can use all or parts of prism to get the best fit of functionality for your applications

11:00 - 12:00 Silverlight unit testing

We will not only cover how to use the unit testing tools out there for silverlight but also along the way discuss how to design your code to be testable with Silverlight.

12:00 - 12:30 lunch

12:30 - 3:00 SharePoint, SQL & Silverlight

SharePoint is an ASP.NET and SQL Server platform for portal sites, communities, content, search, insights, and composites. Silverlight 3 is used to enhance the user experience in several product areas out of the box including rich media handling. Developers can build Silverlight applications that work inside SharePoint pages. We will first look at three methods of deploying these apps. The first uses a Document Library to store a typical XAP file which is displayed using a built-in web part. The second uses a custom coded visual web part to add more control. The third approach creates a SharePoint sandbox solution module that includes the Silverlight XAP in the deployment. Silverlight can also use the SharePoint client object model to access site data while an application is running. Several examples of SharePoint data access combined with rich Silverlight display capabilities will be demonstrated.

3:00 - 5:00 Late Afternoon Sessions & Wrap-up

Afternoon session content TBD

Will have raffles and giveaways at the end!

Get the latest Silverlight in the Enterprise news on social networking...

twitter/facebook

The Code Camp NYC Retrospective!

Wed, 12 Oct 2011 00:46:43 GMT

Thanks to all the organizers, volunteers, sponsors, and speakers that made the Fall 2011 New York City Code Camp a raging success!

The Stats:

500 Attendees
40 Speakers
50 Sessions
Tons of drinks, snacks, prizes, and fun!

This year's end of day raffle included 3 Xbox/Kinect Bundles, WP7 devices, and software licenses from the many Code Camp sponsors. Without them, we would have no Code Camp.

The Welcome Session/Keynote:

Steve Bohlen kicked off the Code Camp NYC Fall 2011 in front of a packed house in an auditorium at Pace University NYC.

The sessions:

Those who've attended the Code Camp NYC know that the variety in both sessions and speakers was well balanced. Attendees were treated to presentations such as...

HTML5 & JavaScript
Presentation Skills
Mobile Development
Cloud
Web development
SQL & Databases

Topics ranged from Microsoft centric to any other technology available. Attendees were treated to sessions on ASP.NET, SOLID development, PHP, Cloud, SQL & BI, PowerShell, F#, and not-so-tech talks such as consulting, ISVs, presentation tips and other soft skills.

The Windows Phone 7 track was a hit!:

Dani Diaz, led a Phone/Mobile track, starting the day by starting a Windows Phone 7 app, from start to finish. After sitting in Dani's session, most attendees were immediately able to start writing and monetizing WP7 apps! Attending a Code Camp or PhoneCamp is the best way to fast track your mobile development skills, and earn a few bucks in the process.

Here's Dani rockin' the house with his WP7 talks. It was a packed room!

The Women in Technology Lunch Session

The NY Metro ladies (and a few guys) joined together to eat, drink, and celebrate women in computing, just about a week before Ada Lovelace day. Rachel Reese and I led a roundtable style dicsussion, with topics ranging from work-life balance, to negotiating skills, to everything in between, in a fun, casual, setting.

Though they weren't the only two guys in attendance, Andrew Brust & Jay Harris were a huge hit! Andrew & Jay have always been great supporters of women in technology, and had lots of valuable info for us gals! Thanks, guys!

And finally, introducing....The Code Camp NYC Mobile App!

Greg Shackles developed one awesome mobile app for Windows Phone 7, iPhone, and Android. Greg's app kept everyone informed and up to date. Download it now for the next Code Camp NYC.

Common JavaScript mistakes and pitfalls you can avoid

Tue, 04 Oct 2011 16:51:15 GMT

Having solid JavaScript skills is more important than ever in today's web applications, and will continue to grow in importance as more browsers, IDEs, etc..., boast of HTML5 feature support. New HTML5 elements such as <canvas> , and features like Web Storage, Web Sockets, or Geolocation depend heavily on JavaScript. Despite tons of freely available, open source, or 3rd party libraries such as jQuery, Prototype, or Script.aculo.us, we still need to keep in mind that they're just JavaScript layered on top of JavaScript - a level of abstraction. Knowing the under the hood workings and "gotchas" of JavaScript will certainly give you a boost with writing better code.

Developers that use strongly typed languages tend to treat JavaScript as a restricted rather than an expressive language, as they're used to working with many compiler restrictions. On top of that, JavaScript's reputation as a "toy, browser-only, language" precedes itself; many developers don't bother to look deeply at some of its powerful features, as well as some language quirks that can really cause trouble.

The truth is out there: Dealing with truthy/falsy values

Dealing with comparisons and equality is usually straightforward, but JavaScript has a few caveats. Because of the way JavaScript deals with expressions, it has two sets of equality operators and some complicated rules around one of them (==/!==). The first set...

The "Equals" operator ( = = ) and The "Does-not-equal" Operator ( ! = )

And the second set...

The "Strict Equals" operator ( = = = ) and The "Strict Does-not-equal" Operator ( ! = = )

If you're wondering why JavaScript has two sets of equality(ish) operators, it's because JavaScript works on the premise of truthy and falsy values. The == / != operators will work as you might expect if the operands are of the same type (boolean), but if they are not, the == and != operators try to coerce the values, using a rather large and drawn out ritual to determine the result. Truthy/falsy values are a means for JavaScript to deal with non-Boolean expressions, by pretending as if they are Boolean anyway.

As a rule of thumb, JavaScript evaluates the values in the list below as false, and everything else as true:

false
null
empty string ("")
0
NaN

Since values like null, "", and NaN, aren't boolean values but are still treated as such, that makes them falsy. In short, when you compare expressions that aren't actual boolean values, JavaScript can produce results that are inconsistent with what you might expect. For example, if you compare the value 0 to false, this is what you get:

(0 == false)  // true 
(0 === false) // false (correct)

When expressions accept anything, including NaN, undefined, etc..., there's a lot of room for mistakes, even by experienced developers. Amplify that with the many rules involved to mentally juggle, and it too easy to see how == and != disrupt your thought processes while coding.

The take-away: the strict === and !== operators are the best way to go, but don't shrug off the equals operator just yet, as you'll likely run across them daily in the JavaScript world, making this valuable information for the maintenance coder.

What exactly is an isNaN(NaN); anyway?

NaN, or Not-A-Number, is a construct of JavaScript that's useful only in very specific edge cases. Why then, is this important to know? Being a mischievous little code gremlin, NaN pops up everywhere. It's a property of the Number object, (Number.NaN), and default value of NaN is NaN, yet it's a falsy value. When trying use NaN in an expression, NaN returns a false every time.

Since NaN is no help in determining what is actually non-numeric, you'll need an alternative. Fortunately there is a very reliable isNaN() function you can use. Notice when the isNaN() function evaluates an alphanumeric string, the result is true, and a false for numeric values. To further investigate how isNaN() behaves, enter a few of the following statements in the Console tab of any browser's dev tools and browse the results. (IE F12 dev tools featured below).

isNaN() works as expected with numbers and alphanumerical data.

The conculsion: use isNaN().

Is eval() evil or just misunderstood?

eval()is the little function that wants to do everything for you, including dynamically creating and executing JavaScript. Want to parse JSON? eval(). Want to clump a bunch of stuff together? eval(). Want to make up code to run on the fly? eval(). eval() finds ways to do something, anything, with what you give it, making it easy for developers to do both awesome and horrible things with it.

In an attempt to keep eval() innocent, many suggest limiting eval() usage to the following scenarios:

1) You need to allow script to run dynamically.

This opens up your page to potential security issues, so only use this when it's necessary, as there are a few different ways to execute code dynamically in JavaScript (a quick Bing search shows many different techniques). That leaves...

2) Parsing JSON

You can use eval() for JSON parsing; however, you are still going to run into the same security issues. On top of that, the JSON.parse() method works much better as it's meant just for JSON handling.

In general, stay away from eval() where you can, it has the potential to get evil quickly, and there's usually a decent alternative.

Avoid function faux pas.

Functions live a first class life In JavaScript, so they're not just functions, they're objects too. It all depends very much on how you them. Take, for example, the following simple function to calculate two numbers:

var result = function (a, b) { return a + b;};

In many languages, the result passed back from the function will contain the sum of the values of the arguments, a, and b. In JavaScript; however, there is more to the story. Opening any browser's developer tools and inspecting the code, shows the type as an "Object (Function)" and its value as the function itself.

You don't need to, but you can, define and name functions. If you don't provide a name when creating an inline function, it's an anonymous function.

Having the knowledge that functions are objects allows you to better understand and work with Open Source or 3rd Party libraries, such as jQuery or Script.aculo.us. Consider jQuery's chaining feature, that allows you to "tack on", i.e., chain, other methods to the end of the previous method, in a single statement. Since the function is also an object, you can expect to call methods on it using dot notation, as the following simple jQuery chaining example demonstrates:

$("#inputBox").removeClass("normal").addClass("error");

In addition to function behavior, it's necessary to know how to write good, clean, functions. Since JavaScript throws everything into a global namespace, you'll want to encapsulate your functions into namespaces with classes and members (see below). And watch out for globals...

A variable of global proportions.

The authors of JavaScript intended it to be a language with a very low barrier for entry for the internet pioneers circa 1995. Because of this, they made the decision to allow, and even encourage, globally scoped variables. One or two global variables in a very small program can be useful, even manageable, and was certainly not a big issue at the time since HTML had only a few tags and the DOM a handful of nodes. However, JavaScript has grown into arguably the most popular language in the world, and has powered a spectrum of applications from the smallest to the largest. Anything other than the simplest of sites can contain nasty bugs because of the global space.

When possible, avoid global variables, and here's why:

It's too easy to have variable naming clashes in large applications.
It's too easy to overwrite the wrong variable, or the right variable at the wrong time, when there are many variables accessible from anywhere.
Not needing to declare variables means there are often "floaters" hanging around in globally-scoped memory, but doing nothing.

A good workaround to this language gotcha is to create your own namespace and classes in it, and store any would-be global variables as properties of that object instead. Though they're not real namespaces, they are objects that can behave like namespaces, making it easier for you to organize your code. The code below provides an outline of how you can create and access your own namespace:

var SampleNamespace = new function () { };

SampleNamespace.SampleGlobalObject = new function () {

    // Private function

    var privateFunction = function ()

{ }

    // Public function

    this.publicFunction = function ()

{ }

// Calling the public function

var publicFunctionTest = function () {

    SampleNamespace.SampleGlobalObject.publicFunction();

Global variables aren't the only problematic variables in JavaScript. JavaScript doesn't perform block scope, so variables you define can inadvertently become as error prone as global variables. The only scope smaller than the global scope is function scope. This means that you can access variables where you might expect otherwise, such as outside an if/else or for loop.

Although JavaScript is a dynamic, expressive, language, you need to organize it into namespaces, classes, and other units for a solid maintenance experience.

Summary

Watch out for some of the most common pitfalls that developers encounter, even while using Open Source libraries such as jQuery. There are, of course, many more language quirks and features that can also cause trouble, as with any language. If you want to go deeper into JavaScript, here are two highly recommended books.

You're invited to a Windows PhoneCamp event!

Mon, 19 Sep 2011 17:35:31 GMT

What’s a Windows Phone Camp?

For those who went to our "Windows Phone Garage" series last year, it’s one of those. For those new to the scene, it’s a free, full day event chocked full of everything you need to know to develop a Windows Phone application. Whether you’re a seasoned veteran or just getting started with phone app development this full-day event is for you.

Interested in profit? We’ll also lead discussions on how to monetize your applications and generate profits with your apps.

Don’t miss the new Windows Phone 7.5 (codename "Mango") features as well - with detailed sessions in the afternoon around Fast Application Switching, Multitasking, Live Tiles, Push Notifications, and more.

The day will be capped with an open lab hands-on session and prizes for apps completed. This is the perfect opportunity to begin work on your dream application, or finish that app you’ve already started, with Windows Phone experts there to guide you every step of the way. Bring your own laptop to join in the fun and show off your killer app!

Sessions

Time	Session
9:00 AM	Welcome Campers
9:15 AM	How to make money with your Windows Phone App
10:00 AM	Frameworks for fun and profit > Silverlight and XNA
noon-ish	Canteen > Install Fest
1:00 PM	Hands-on lab
3:00 PM	Cool stuff your app can do
4:00 PM	To the Cloud!
4:45 PM	Be What's Next > Peoples Choice Awards

Events & Registration

9/20/2011	Charlotte, NC	Registration
9/22/2011	Atlanta GA	Registration
9/27/2011	Malvern PA	Registration
9/29/2011	Reston VA	Registration
10/12/2011	Cambridge MA	National Event - Two day - Registration URL pending
10/18/2011	Chevy Chase MD	Registration
10/19/2011	New York City, NY	Registration
10/25/2011	Tampa FL	Registration
10/27/2011	Champlain College, Burlington VT	Registration
11/2/2011	NCSU, Raleigh NC	Registration
11/4/2011	Fort Lauderdale, FL	Registration
11/8/2011	UCF, Orlando FL	Registration
11/10/2011	Univ of Miami, Coral Gables FL	Registration
11/10/2011	SUNY (New Paltz), New York	Registration
11/15/2011	Virginia Tech	Registration
11/17/2011	Howard University, Washington DC	Registration
11/29/2011	Pittsburg, PA	Registration
12/1/2011	Hofstra, Long Island NY	Registration
11/29/2011	Georgia Tech, Atlanta GA	Registration

What you'll need:

Bring a notebook computer and identification. Also check out the APP HUB where you can get developer tools, learn about application features, understand common task for Apps and register and load your APP.

Come to the New York City Code Camp Fall 2011!

Tue, 06 Sep 2011 13:17:11 GMT

The New York City Code Camp is now in October!

This is the NYC developer community's sixth Code Camp!

When?
October 1, 2011.
Check in starts at 7:30 AM.

Where?
Pace University
One Pace Plaza New York, NY 10038.

View Larger Map Driving Directions

What's a Code Camp and why should I go?

A Code Camp is technical event for professional software developers and students. The Code Camp event are hosted by software developers, technologists, and those in related technical fields, who have volunteered their time to organize an event packed with technical sessions in a variety of topics. You'll find industry expert speakers presenting on a range of topics from the practical, everyday advice of dealing with legacy code, to demonstrations of the latest, shiniest, technology.

A Code Camp isn't just about sitting in sessions - there's a lot of professional and social networking, both during and after the events. If you're looking for work, it's a great way to scope out opportunities.

Although Code Camps are usually free, NYC is an expensive place. Even with the help of our awesome sponsors, there's many costs left, so this Code Camp has a $15 fee. But it's more than worth it...

Developers! Here's what you get:

Talk tech with industry experts and MVPs, or chat with Microsoft employees.
There's lots of great sessions and content for all developers on both Microsoft and non Microsoft platforms.
Network and find freelance opportunities or full time jobs.
Sharpen your skills!
Yes, there's food! The attendance fee covers Breakfast, lunch, snacks and beverages.
Lots of SWAG, free software, giveaways, and prizes.

Students! Jump ahead of your classmates in your career!

See real world software development, in action, before you graduate.
Talk to real world developers, and get advice on your projects, careers, interviewing, and more.
Learn how to leverage your academic knowledge in the workplace.
Learn how to monetize apps, and make some extra cash!

Spaces are filling up fast! Register here!

Once you've registered...

We're excited to provide the opportunity for attendees of the code camp to vote for the sessions you'd most like to see! We'll tally up the votes, and your votes will weigh heavily in the final schedule. BUT… you must be registered for the code camp in order for your votes to count!

You must also be registered on the code camp site with the SAME email address in order to vote.

Voting is only opened from midnight, September 6, 2011, through 11:59:59 PM, September 8, 2011!

When you have registered, and are ready to vote, please visit our voting page.

Break away from the debugging cycle of doom in ASP.NET MVC with unit tests

Mon, 15 Aug 2011 16:15:13 GMT

The process of using F5 to start a debugging session is a ubiquitous practice in .NET development with Visual Studio. Despite that, developers are noticing and employing other methods of testing and writing software as these methods can provide better results and a more smooth development experience.

The debugging cycle of doom

The entire process of writing some code, compiling, then pressing F5 to walk through code, can be a tedious way to develop software, especially in larger applications. In general, many consider this type of testing as a smoke test. Smoke tests are fragile, error prone, and nowhere near as comprehensive as they should be, except in cases of automated testing (e.g., record/playback).

Consider the following common development scenario: You need to fix a bug in your code that calculates the total for an order. You would normally start debugging via F5, and try to reproduce the problem, so you can get to the code to fix it. This involves only a few steps; however, they're very time consuming, interwoven, efforts:

Reviewing the steps...

F5
Navigate to the section of application as described by the bug report, using the UI as a user would.
Attempt to reproduce the problem by interacting with the UI. This means filling in forms, submitting data, and using links and other page UI elements, again, just as a user would.
Step through and investigate code with debugging tools.
Return to code editor, locate source with error, and modify code.
Repeat steps 1-5 several times.

Because this is the customary way to debug using Visual Studio, this may not seem time consuming, especially in a small application. However, this process often takes much more time than is needed to write code, fix bugs or resolve issues. It's also rare that developers - even ninja developers - will actually fix the bug on the first shot without causing other bugs, so the process continues over and over again, except now, you're aiming at a moving target. As often as not, it's easy enough to find yourself "going down the rabbit hole", which usually ends up with a rather unpleasant undo checkout command at the end of it all.

^{(Yep, it feels like this, doesn't it? Img src: http://www.seussville.com/)}

Let's not forget, after you fix the bug, you still need to update the requirements documentation. This step is usually brushed off as a low priority, and then causes the requirements to become out of sync with the code base. As you can see, The F5 Way does nothing to help you code understand requirements, produce documentation, or add any extra business value.

Break away from debugging tedium with unit tests.

Now, consider the same development scenario: You need to fix a bug in your code that calculates the total for an order, but this time, going the unit test route.

The steps...

Run tests.
Inspect failed test and fix the bug in the code it tests.
Repeat steps 1-2 if red. If green, your bug is fixed. ^[1]

^{Note/Disclaimer for purists: Depending on whether you're doing TDD or not, the exact process (e.g., test first vs.test later) will be different. This blog post in particular is trying to demonstrate what I believe is more likely to be seen in real world apps based on personal experience - i.e., test later, rather than test first, if they're testing at all! Your mileage may vary.}

Not only are there less steps involved with unit testing, but you're also saving a great deal of time. Unit tests also serve as documentation, not only saving even more time, but also while adding value by using unit tests as living, up to date, requirements documentation.

Additionally, try to ensure your tests are isolated to one unit of code (one primary/entry point method a maybe a few supporting ones) as it’s easier to find the defect since you aren’t looking through n layers of architecture, classes and methods to find where the defect is occurring. This helps you test easier, as well as leads you toward writing cleaner code.

Fixing bugs with unit tests

After a user files a bug report claiming that the the program calculates the total incorrectly, you investigate the code at question, which might not appear out of order at first glance.

public decimal CalculateTotal(decimal subtotal, decimal tax, decimal discount)

    var tempTax = (subtotal - discount) * tax;

    var total = (subtotal - discount) + tempTax;

    return total;

But, how can you know for sure? You can run the application from Visual Studio, using breakpoints and other debugging tools. Since this code doesn't throw an exception, the app appears to be doing what it should. However, an important calculation is incorrect! We can know that the code is correct with unit tests.

A unit test that will verify if the code is indeed, doing what it should be doing. Inside the unit test method that you specify the exact parameter values to test as inputs, and exactly what you expect as a result. Once the test is setup, call the code in question, and then verify the results. The best way to structure the tests by using the fashionable "Arrange, Act, Assert" technique, as described here:

Arrange: Declare variables and instantiate objects or mocks needed for the test.
Act: Execute the code in question, by calling a method or property of the object.
Assert: Use the Assert object to determine if the results are what you expect.

The unit test code below demonstrates testing the calculation for an order using Arrange, Act, Assert.

[TestMethod()]

public void Calculate_The_Total_Of_An_Order()

    //Arrange

    Order order = new Order();

    OrdersBLL target = new OrdersBLL(order);

    Decimal subtotal = 10M;

    Decimal tax = .54M;

    Decimal discount = 1.0M;

    Decimal expected = 9.54M;

    Decimal actual;

    //Act

    actual = target.CalculateTotal(subtotal, tax, discount);

    //Assert

    Assert.AreEqual(expected, actual);

The [TestMethod()] attribute denotes that this particular method is only meant for unit testing. Aside from the [TestMethod()] attribute, the code inside unit tests is the same type of code you would normally write any other day. Code that creates instances of objects, calls methods, and uses assertions and logic.

Unit test classes live in their own code files and projects, separate from other projects in the solution, so they won't get in your way, and you can run them separately from your core projects.

When you run the test(s), you can see right away, which ones passed and which ones failed.

^{Note: This sample demonstrates using MS Test, however any good testing framework will provide a test runner that does the same basic thing - run tests and output pass/fail statuses.}

Since the test failed, you then need to investigate the OrdersBLL.CalculateTotal() method in the OrdersBLL class, since that's the method this unit test is testing.

public decimal CalculateTotal(decimal subtotal, decimal tax, decimal discount)

    var tempTax = (subtotal - discount) * tax;

    var total = (subtotal - discount) + tempTax;

    return total;

The original developer is using the tax argument as a percentage, rather than just adding the pre-calculated tax amount, which is the original intent of this method. Now that you've found the bug, you can modify the code and re-run the tests.

public decimal CalculateTotal(decimal subtotal, decimal tax, decimal discount)

    var total = (subtotal - discount) + tax;

    return total;

Now that the test(s) show green, you can feel safe knowing that you've fixed the issue.

Although you may have to modify and run the tests a few times, there will be no UI interaction, as the testing framework will output the results quickly and clearly. To reiterate, the time saved compared to F5 debugging are huge, as most tests can complete running before Visual Studio can even load a web application. This means you'll already be in the code making the right modification rather than wasting time fishing around in the UI and guessing.

^{(Development feels more like this when unit testing. Img source: cattearoom.com)}

This doesn't mean you'll never use F5 again, since you'll still need to run smoke tests, but with far less hunting, pecking, and changing than with F5 debugging. Plus, most developers just like to poke around in the code, tweak, and refactor as well.

Now that you've seen the benefits of unit testing, here are some popular frameworks you can use to get started.

Summary

MS Test: Built into Visual Studio 2010, MS Test ^[2] is a nice testing framework, especially for those getting started. There's no extra installation required and, of course, it's fully integrated with the IDE, so there's less friction for testing novices.

xUnit: xUnit is a unit testing framework written by ASP.NET team member Brad Wilson ^[3], and Jim Newkirk. xUnit is easy to use, and works with many Visual Studio add-ins and 3rd party libraries. xUnit also has built in MVC test project support, and works with .NET versions 2.0 and later.

nUnit: nUnit, like xUnit, nUnit is a testing framework that is also easy to use, and like xUnit, integrates with Visual Studio add-ins and 3rd party libraries. nUnit is one of the more mature unit testing libraries available for .NET developers.

Want to compare these frameworks? Check out the unit testing features comparison at the xUnit site on CodePlex.

There will always be at least some learning curve and friction to those beginning anything new and unit testing is no different. However, most developers are quick to get the hang of it, and quick to start enjoying writing tests and seeing results quickly. It does take a shift in mindset, but the payoff is more than worth it, as unit testing is one of the best ways to bake quality into your application from the start.

Resources:

James Bender & Jeff McWherter have paired together to write an excellent book, "Test Driven Development with C#", and at 305 pages, it shows that unit testing and TDD are not rocket surgery!

The book is an enjoyable read, with great explanations and well written code.

Footnotes:

^{[1] It is possible that you have written your test(s) incorrectly, but for the purposes of demonstration, this sample assumes the tests are well written.}

^{[2] See the Visual Studio 2010 features to determine if your edition of VS works with MS Test.}

^{[3] Brad is my BFF. :-D}

Detect HTML5 & CSS 3 features in your ASP.NET Web Forms, MVC, or Razor Pages with Modernizr

Mon, 08 Aug 2011 20:10:08 GMT

Over the course of web history, browser detection, rather than feature detection, has been the de facto way to customize the browsing experience. However, this is an antiquated technique which is also very error prone, making the ability to deliver targeted markup & content difficult, at best. As browsers continue to evolve and release new versions, the list of capabilities that you need to worry about can grow exponentially. However, Modernizr aims to change that.

What can Modernizr do for you?

Modernizr is a JavaScript library that you can use to perform feature detection of emerging web technologies, in particular, feature sets found in HTML5 and CSS 3. In addition to its core feature detection library, Modernizr also offers the following features:

A tiny footprint (about 16k if you use everything)
Simple to use API
Asynchronous script loading
Back filling with polyfills & shims (see below)
Ways to test your own features not included in the Modernizr library with tests
Integrates with other libraries, such as yepnope.js and respond.js

Modernizr Overview

Visit Modernizr.com where you can select which tests you want to download and use. Modernizr detects over 40 features including the new popular CSS attributes, HTML5 elements, and other APIs, as illustrated in the image below:

Use this utility to generate minified script(s) to include in your \Scripts folder as the production version.

For development, download and reference Modernizr's uncompressed development file, weighing in at 42k. If you prefer, but only for development purposes, you can point to the Microsoft CDN development version of the .js file. Currently, Modernizr's production scripts do not exist at the popular Google or Microsoft CDNs. Modernizr is gaining popularity and momentum, and it's entirely reasonable to speculate that it will be hosted at one or more of the major CDNs soon, so you may want to check the CDNs regularly for updates.

Once you've decided which script to use, you can start using Modernizr.

Setting up Modernizr

There is very little you need to do to use Modernizr.

Add a <script> tag inside the <head> tag ^[1], and reference the CDN or a downloaded Modernizr script.

The code below demonstrates a standard HTML document head section, including Modernizr in the script references.

<!DOCTYPE html>

<html class="no-js">

<head>

    <meta charset="utf-8" />

    <title>Trying out Modernizr</title>

    <link href="../../Content/Site.css" rel="stylesheet" type="text/css" />

    <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.0.6-development-only.js " type="text/javascript"></script>

</head>

You'll also want to modify the <html> element by inserting a class attribute and setting it to "no-js". Modernizr uses this as a fallback for browsers that do not support JavaScript.

Once you've prepared your project to use the Modernizr library, it's time to dig in and see how it works.

How Modernizr Works

During the Modernizr startup process, the initialization code performs the following tasks:

The script creates a global Modernizr object, which contains a property for each feature that Modernizr exposes, along with a few methods, most notably for adding tests so you can extend Modernizr.
The script sets up integration with yepnope.js, a conditional resource loader that allows you to optimize page performance by loading scripts only when you need them.

A great way to see Modernizr in action is to use it in a simple HTML page, then investigate it in debug mode using debugging tools in a browser. Open the IE F12 Developer Tools and navigate to the Script tab, then select the Modernizr script from the dropdown list. You can then set a breakpoint at the end of the file. This is when Modernizr is ready to return the Modernizr object, so it's fully populated and easy to investigate.

Switching over to the HTML tab in the developer tools will reveal the <html> element at runtime that Modernizr creates to expose supported features.

Here's the complete output from the screenshot highlight above:

Fortunately, you won't see this output in View Source, but you can see it while using the developer tools of just about any browser - it works the same in IE, Firefox, & Chrome. That's because the code in the Modernizr.js file works with the document.documentElement property, which is part of the XML DOM, not the HTML DOM. You can scan the Modernizr script file to reveal various lines of code that use the documentElement property.

Another great way to see how Modernizr works is to investigate the annotated source code online at http://modernizr.github.com/Modernizr/annotatedsource.html.

Now you're ready to start using Modernizr's powerful feature detection library by writing plain JavaScript, jQuery, or any client side JS library of your choice, to go along with any server side framework of your choice, such as Web Forms or MVC.

Modernizr & ASP.NET Development: Web Forms/MVC/Web Pages

Since Modernizr is just a JavaScript library, it works with all three ASP.NET development platforms: ASP.NET Web Forms, ASP.NET MVC, and ASP.NET Web Pages, so let's investigate each...

ASP.NET Web Forms

You can use NuGet to download, install, and upgrade your Modernizr scripts, by choosing References->Add Library Package Reference from Solution Explorer, or choosing the Add Library Package option from the Visual Studio Project menu. This command installs a development version of the Modernizr script that you can use, by downloading the script and adding the appropriate code to your Master Page.

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="WebApplication1.SiteMaster" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" class="no-js">

<head runat="server">

    <title></title>

    <link href="Styles/Site.css"  rel="stylesheet" type="text/css" />

    <script src="../Scripts/modernizr-2.0.6.js" type="text/javascript"></script>

 <script src="../Scripts/jquery-1.5.1.js" type="text/javascript"></script>

 <script src="../Scripts/juqery-ui-1.8.11.js" type="text/javascript"></script>

    <asp:ContentPlaceHolder ID="HeadContent" runat="server">

    </asp:ContentPlaceHolder>

</head>

Pro Tip: Consider changing both the <!DOCTYPE html PUBLIC...> and the <html> elements, included by default in the in Web Forms templates, to the new, lightweight, HTML5 versions.

<!DOCTYPE html>

Add some code to any Web Form that uses the Modernizd Master Page to test any property of your choice, and for this example, we'll test to see if IE 9 supports local Web Storage.

<script type="text/javascript">

    if (Modernizr.localstorage !== null) {

        $("h1").text("This browser supports local storage");

    else {

        $("h1").text("This browser does not support local storage");

</script>

Viewing the results shows that Modernizr does work, and that Web Storage support exists in IE9.

ASP.NET MVC

ASP.NET MVC3 project templates include the Modernizr script references for those who have installed either the MVC 3 Tools Update or the Web Standards Update (note: the WSU requires VS2010 SP1). When you create a new ASP.NET MVC 3 project, Visual Studio adds the Modernizr .js files to the \Scripts folder and adds the necessary <script> tags to the Layout Page (\Views\Shared\_Layout.cshtml).

<!DOCTYPE html>

<html class="no-js">

<head >

<meta charset="utf-8" />

<title>@ViewBag.Title</title>

<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />

<script src="@Url.Content("~/Scripts/modernizr-2.0.6.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/jquery-1.5.1.js")" type="text/javascript"></script>

</head>

Alternatively, you can use NuGet to download and install the Modernizr scripts, much the same way you would do so for Web Forms, and as always, manual installation is an option.

You can then write code to detect features, like the below example demonstrating if the browser supports the Geolocation API.

<script type="text/javascript">

if (Modernizr.geolocation)

$("h1").text("Hello, Modernizd World, I can find you with Geolocation!");

</script>

The code above creates the following results:

ASP.NET Web Pages

You can manually download Modernizr for use in your ASP.NET Web Pages apps. After downloading, add the Modernizr scripts to your project, then add script references and code modifications to the _SiteLayout.cshtml page. When working with Razor pages you can use Html Helpers such as the @Href helper.

<!DOCTYPE html>

<html lang="en" class="no-js">

<head>

    <meta charset="utf-8" />

    <title>My ASP.NET Web Page - @Page.Title</title>

    <link href="@Href("~/Styles/Site.css")" rel="stylesheet" />

    <script src="@Href("~/Scripts/modernizr-2.0.6.js")"></script>

 <script src="@Href("~/Scripts/jquery-1.5.1.js")"></script>

    <link href="@Href("~/favicon.ico")" rel="shortcut icon" type="image/x-icon" />

</head>

After the leading code is setup in the Layout Page, test out a Razor page by adding code that checks for a feature, in this case <canvas>.

<script type="text/javascript">

if (Modernizr.canvas) {

$("h1").text("This Modernizd browser supports the canvas element!");

}

</script>

Run the page from WebMatrix to verify Modernizr is working, and the <canvas> element is supported by IE 9.

Summary & Resources

Modernizr is a quick and easy way to detect modern web technologies with a few lines of script, and Modernizr works well with all three ASP.NET technologies. Browser detection is OUT! Feature detection is IN!

Related Posts:

For more on the IE developer tools, see my list of blog posts tagged as IE Developer Tools.

HTML5 Web Storage (local and session storage)

HTML5ify your ASP.NET MVC Applications

Find & install 3rd party libraries lightning fast with NuGet for Visual Studio 2010

HTML5 and HTML tagged Blog posts

Footnotes:

^{[1] Modernizr.com suggests:}^{"For best performance, you should have them follow after your stylesheet references. The reason we recommend placing Modernizr in the head is two-fold: the HTML5 Shiv (that enables HTML5 elements in IE) must execute before the <body>, and if you’re using any of the CSS classes that Modernizr adds, you’ll want to prevent a FOUC." (flash of unstyled content) -Modernizr.com}

Use HTML5 semantic tags to add new meaning to your MVC views

Mon, 01 Aug 2011 16:06:41 GMT

While HTML5 promises to be THE future of the web, there's no need to wait - you can have some of that future now. As the W3C Working Groups finalize the HTML5 standards, many browsers are already implementing them, so developers can already take advantage of these cutting-edge features. Semantic elements are one of these features that you can use in your code, right now.

The HTML5 semantic element set

Since HTML is a markup language, elements are at its core, and semantic elements in particular allow you to express the content and meaning of the content in a more precise, clear, way than you can with traditional elements. Semantic elements give you the ability to format data like HTML does, but also to describe the meaning of the content, similar in concept to XML. That means you're looking at smaller, cleaner, expressive, markup as a result.

Since semantic elements are part of the HTML5 specification, your page will need the much improved <!DOCTYPE> element, shown here:

<!DOCTYPE html>

This back-to-basics <!DOCTYPE> works everywhere, in every browser, with no ridiculously long syntax to deal with. Once your <!DOCTYPE> is setup, the rest of the page can go semantic as well, as some of the new elements deal with describing structure of the content rather than providing just basic markup. Below is a list of semantic elements for structuring page content:

Element	Purpose
<article>	Use this to encase content, particularly syndicated content such as blog entries. As it's name denotes, the <article>
<aside>	Great for side-bars, quotes, notes, and other content related to the article content that you want to emphasize.
<figcaption>	A caption for a Figure
<figure>	A Figure
<footer>	This element is the footer of an article or of the page/document itself. Pages can contain multiple <footer> tags for varying purposes.
<header>	The <header> tags belong in between <article> article tags to denote the header of an article. They're not to be confused with the <head> tag that signifies the entire document heading.
<hgroup>	Use this element to group heading elements <h1> - <h6>. This will group the elements together for rendering titles and subtitles.
<mark>	Highlights (yellow, in many browsers) some content for emphasis. Use this tag to highlight notes much as you would with a highlighter pen on paper.
<nav>	Use this to designate a navigational section of a page. Great for menus.
<section>	This element designates a generic section of a document. Because this tag is generic, it doesn't describe the content in the best possible way. Use the other semantic tags first and the <section> tag for misc. content.

You can create content that is more meaningful to both humans and machines with the new semantic elements in HTML5.

Today's web with standard non-semantic elements

Traditionally, developers have implemented <div> tags with a class attribute to define the structure and express the meaning of content. The sample code below shows a classic style HTML page with <div> elements for structure.

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>HTML5 Non Semantic Elements Document Structure</title>

</head>

<body>

<div id="page">

    <div id="header">

    <h1>HTML5 Semantic Tags</h1>

    <h2>Demonstrating HTML5 Document Structure</h2>

    </div>

    <div id="content">

        HTML5 is the future of the web!

        <div class="figures">

            <img src="Content\Images\html5.jpg" height="200" width="200" />

             <sub>1. HTML5 Official Logo</sub>

        </div>

        Follow <a href="http://twitter.com/html5">Rachel</a> and

        HTML5 <a href="http://twitter.com/html5">HTML5</a> for the latest updates on HTML5!

        <br />

        Visit the <b>W3c Website</b> for more information on the following specs and standards as they are developed.

        <ul>

            <li>HTML5</li>

            <li>ECMAScript</li>

            <li>SVG</li>

        </ul>

    <div id="content">

    <div id="footer">HTML5 Footer</div>

</div>

</body>

</html>

The above code saturates today's web, growing in popularity since around the time CSS2 (1997). In the era before CSS2, the <table> tag had reigned as the de facto way to organize a web page; however, tables do little more than render boxes in a browser. While <div> elements are more expressive than <table> elements when it comes down to conveying the meaning of the contents, semantic elements have an even better way to express meaning, since that meaning is built right into the tag's name.

Today's web with semantic elements

Now you can create documents that are more clear in their content, structure, and meaning, by using HTML5 semantic elements. Below is a rework of the same code sample as previously mentioned, but using HTML5 semantic tags instead.

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>HTML5 Semantic Elements Document Structure</title>

</head>

<body>

    <article>

        <header>

            <hgroup>

                <h1>HTML5 Semantic Tags</h1>

                <h2>Demonstrating HTML5 Document Structure</h2>

            </hgroup>

            <time datetime="2011-06-01">June 01, 2011</time>

        </header>

        HTML5 is the future of the web!

        <figure>

            <img src="Content\Images\html5.jpg" height="200" width="200" />

            <figcaption>

                Fig 1. HTML5 Official Logo

            </figcaption>

        </figure>

        Follow <a href="http://twitter.com/html5">Rachel</a> and

        HTML5 <a href="http://twitter.com/html5">HTML5</a> for the latest updates on HTML5!

        <br />

        Visit the <mark>W3c Website</mark> for more information on the following specs and standards as they are developed.

        <ul>

            <li>HTML5</li>

            <li>ECMAScript</li>

            <li>SVG</li>

        </ul>

        <footer>Article Footer</footer>

    </article>

 <footer>Document Footer</footer>

</body>

</html>

As you can see, the only real structural non-semantic element is the <div class="page">. Inside this element are many of the semantic elements listed in the table above. These elements describe an online article about HTML5 Semantic tags and document structure, including a complete figure with caption. You'll notice it's very easy to read and understand the meaning that the author has intended.

Additionally, semantic and standard elements can mix in the page easily. This also means that current HTML elements won't be going away, although a few rarely used elements went up for deprecation, such as the <marquee> tag.

HTML5 semantic tags & cross browser support

The most important question for developers is whether or not they can actually use these new features, and if not, when. The good news is that you can use HTML5 semantic tags today because of their wide cross browser support. The browsers that don't support these elements will display them as inline content, since browsers just ignore things they don't understand and move to the next element. That means basic CSS styling can enforce a level of semantic element support, even if only for aesthetic reasons.

The IE Test Center web site boasts:

"We developed 270 new test cases and updated 13 test cases in conjunction with development of IE10 Platform Preview 2. The IE Testing Center now offers a total of 6668 test cases. We are working closely with these two web standards organizations to submit these test cases officially within each working group’s official process." (Important numbers highlighted in bold)

At the test center, you can run any of these 6400+ HTML5, CSS, SVG, or other test cases that exist, and in the future, many more. Inspecting the image below from the IE Test Center illustrates current information on cross browser support for these elements.

During the May 2011 update shown in the above image, Opera had the least amount of support for HTML5 semantic elements. Since then, Opera's added more support and appears that they'll continue development on semantic element support.

HTML5 semantic tags and developer tools support

Many developer tools such as Visual Studio 2010 are providing HTML5 support to varying degrees and with that of course, HTML5 semantic element support as well. To turn on HTML5 validation for all web applications going forward in Visual Studio 2010 SP1, use the Tools->Options menu item, then navigate to the Text Editor's HTML tab.

Note: You must have Service Pack 1 installed to use the HTML5 validation. Previous versions of VS2010 will only validate to HTML 4.0.1 as the default.

Additionally, the new MVC3 project templates in VS2010 SP1 give you the option to use HTML5 semantic markup.

Selecting this checkbox will create the following HTML5 markup in the _Layout.cshtml Layout Page in the \Views\Shared folder:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>@ViewBag.Title</title>

    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />

    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
</script>

</head>

<body>

    <div class="page">

        <header>

            <div id="title">

                <h1>My MVC Application</h1>

            </div>

            <div id="logindisplay">

                @Html.Partial("_LogOnPartial")

            </div>

            <nav>

                <ul id="menu">

                    <li>@Html.ActionLink("Home", "Index", "Home")</li>

                    <li>@Html.ActionLink("About", "About", "Home")</li>

                </ul>

            </nav>

        </header>

        <section id="main">

            @RenderBody()

        </section>

        <footer>

        </footer>

    </div>

</body>

</html>

Although the <div> shows up a few times in the page, most of it is semantic. The <header>, <nav>, <section>, and <footer> elements are added into this basic page layout template, where appropriate, making it easy to express the content's meaning. You can customize the layout and other default view templates to use more semantic elements or other new HTML5 features that Visual Studio 2010 supports.

In addition to the service pack and tools update, you can visit the MSDN Visual Studio Code Gallery online to download the "Visual Studio Web Standards Update" extension for Visual Studio. You can use the new tools to keep up to date with the status of HTML5 and related technologies. The Visual Studio Web Standards Update provides support for HTML5 Intellisense, the Geolocation API, and many other features.

There's more information about the VS Web Standards Update, and other tools to get you moving along quickly with HTML5 development here.

Summary

Visual Studio 2010 SP1 already has some nice support for HTML5 development. As you might imagine, there will be more support and features added to Visual Studio as more of the HTML5 specs become finalized, but in the meantime, there are many NuGet packages and extensions like the VS Web Standards Update that will help you become more productive in HTML5 development now.

Resources:

My previous post on HTML5 support in Visual Studio 2010

IE Developer center: HTML5 Semantic elements

How to use semantic tags