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

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…

  1. Incidents of sexism at industry events, and online conversations, and their link to the decline of women in STEM fields.
  2. The effects sexism has on women and the STEM industries as a whole, both now and in the future.
  3. 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.

  1. 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…
  2. 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?
  3. 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 activ
ities 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.

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

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.

 

image_2

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.

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.

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.

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

SNAGHTML1015b426

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).

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.

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

SNAGHTML101866d1 

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

ASP.NET MVC ActionResults explained

Action results are an important part of the ASP.NET MVC controller system, and definitely worth taking a good look at. Understanding how they work gives you many more choices in MVC and that will certainly help make your code better.

What is an ActionResult?

An ActionResult is a return type of a controller method, also called an action method, and serves as the base class for *Result classes. Action methods return models to views, file streams, redirect to other controllers, or whatever is necessary for the task at hand. The controller takes on this responsibility to connect system components, acting as a traffic cop.

There are many derived ActionResult types you can use to return results that are more specific for a particular view. You can quickly access the derived types of the ActionResult during development by hovering over an ActionResult in an action result’s method signature then expanding the type tool window, to see what *Results the ASP.NET Framework provides.To get a deeper look at what exactly an ActionResult type is and how it works, running the code with a breakpoint set at the end of an action result method will get the information we want. Inspecting the image below of the Watch window shows some of the properties that you can tap into that ActionResults return.

Notice the Model, TempData, ViewBag, and ViewData properties. Drilling into the Watch window even further exposes the Model property’s strongly typed collection of objects.

SNAGHTML4d9b785_thumb3_2

These objects contain everything you need when working in the view. Of course, the Model is the most heavily used object, containing our application’s schema and data. The TempData object holds data between multiple controllers, while ViewBag and ViewData objects holds data between controllers and/or views.

Since the Model property is the actual model the view uses to render the data, its data type should align with the type specified in the @model directive in the target view. As pointed out in the image above, the Model property contains a strongly typed list of Product objects (or whatever you’re returning), matching the view’s model.

Looking in the Watch window shows that the runtime converts the ActionResult to a ViewResult, however you’ll want to be more specific during design time. Swapping ActionResults for more specific/derived classes, for example, a ViewResult, produce the exact same object structure as the ActionResult. With this in mind, using more specific types increases code accuracy, maintainability, and even performance as the compiler has a much better idea of what should happen at compile time, rather than at the last minute at runtime, since no runtime conversion happens.

Action methods, action results & routing

Action methods and the routing system work together in every MVC application. MVC does this by using a set of conventions, defined as routing patterns in the global.asax.cs file. These patterns connect HTTP requests with controllers and action methods. As an HTTP Request enters the routing system, it determines which controller should serve data to which view (if any).

The global.asax.cs defines the default routing pattern, {controller}/{action}/{id}, as described in more detail here:

Picking apart each piece of the route pattern is a great way to digest what the routing system is doing…

  • {controller} Controller maps a part of the URL to the name of the controller class. For example, a class named ProductsController, will map to URLs that start with /Products (after the domain of course). ASP.NET automatically drops the word “Controller” from the URL so is it’s more user friendly, e.g., /Products vs. /ProductsController.
  • {action} Action maps a part of the URL to the individual methods inside controllers. Therefore the ProductsController.Edit(…) and ProductsController.Details(…) methods align with the /Products/Edit and Products/Details URLs, respectively. Action maps without any parameters, since the next route pattern, id, defines them.
  • {id} Id maps to an identifier, such as a product id or a product name. These are controller action method parameters, so the value at the end of the URL is generally the value of the method’s argument. For example, /Products/Edit/2 matches up with the id argument in ProductsController.Edit(int id). The controller methods normally use this id to query for a single record with a matching id to return to the view.

Below is a table detailing the mappings between routes, controllers, action methods and their parameters.

Action Method Route {controller}/{action}/{id} HTTP POST/GET
public ActionResult Index() { } /Products GET
public ActionResult Details(int id) { } /Products/Details/id GET, values in URL
public ActionResult Edit(int id) { } /Products/Edit/id GET, values in URL
[HttpPost]
public ActionResult Edit(int id, FormCollection collection) { }
/Products/Edit/id POST, values in FormCollection
public ActionResult Create() { } /Products/Create GET
[HttpPost]
public ActionResult Create(FormCollection collection) { }
/Products/Create POST, values in FormCollection
public ActionResult Delete(int id) { } /Products/Delete/id GET, values in URL
[HttpPost]
public ActionResult Delete(int d, FormCollection collection) { }
/Products/Delete/id POST, values in FormCollection

You may have noticed that the Edit, Create, and Delete action methods come overloaded as pairs, and an [HttpPost] attribute decorates one method in each pair. Since [HttpGet] is the default, the other method doesn’t need to be marked. Additionally, all methods decorated with the [HttpPost] attribute are meant to accept HTML input fields located between the <form> tags. The collection parameter of type FormCollection[1] contains all the input fields from the <form> of the HTTP Post.

Every method in a controller class returns an ActionResult by default; however, some actions will be more optimized, clear, or accurate in the code, if we are to specify a more specific action results, for instance, a ViewResult, rather than an ActionResult. Action result methods can also designate that its result will return something other than data for a view, e.g., a HttpNotFoundResult or an HttpStatusCodeResult, as shown in the code below:

Returns an HTTP 404 Not found error:

Redirects to a separate view altogether:

There’s many more ActionResult types to explore. Check them out and find something that meets the needs of your controller and/or view.

Summary

ActionResults are a key component to ASP.NET MVC, so understanding them is essential for MVC application development. Whether you need to make AJAX calls, redirect, return a file stream, or just return data to a view, ActionResults are right there in the center of all the……action.

[1] I recommend rather than using FormCollection, you should use a strongly typed parameter or multiple, differently typed parameters that match to data types in the HTML form. Look forward to a blog post soon to demonstrate this.

Building a relational data model in ASP.NET MVC w/EF Code First

Just about every application uses some sort of data model, and .NET developers have been using POCOs (Plain Old CLR Objects) for some time now. You can use either new or existing POCOs in MVC 3 applications and still take advantage of EF (Entity Framework), and in particular, EF’s Code First feature. EF’s Code First feature allows you to base both an application and a database from your data model. EF additionally carries features for database and model first development.

Data Models, ORMs & Entity Framework

As with most business apps of any type, data models are at the heart of an application. When developing ASP.NET MVC applications it’s best to go with an ORM (Object-Relational Mapper) such as EF, as ORMs alleviate many pains in dealing with databases and their objects. Since MVC is extensible and pluggable, you also have the choice of using 3rd party or open source ORMs, for example, the widely used nHibernate.

That’s where things can get complex, and that’s where EF fits in with multiple strategies to help alleviate common pains in modeling. There are many ways you can model data to represent and manipulate it the way you need to, either visually with a designer, or by using code. EF supports these data access options:

  • Database first
    • You can use Visual Studio to connect to a data source and visually generate a data model from an existing database(s).
  • Model first
    • Using model first you can build brand new databases from models you’ve created using the designers in Visual Studio.
  • Code First
    • With code first, you start with your own POCOs, just add a small amount of code, and voilà, instant ORM.

In addition to these features, EF has more advanced features, such as a XML based schema mappings and fluent APIs. EF is flexible enough to cover the spectrum of applications from the smallest of web sites to enterprise applications.

Before coding EF classes, you must add a NuGet package reference to EntityFramework by selecting “Add Library Package Reference” from the Project menu, and before using SQL CE 4.0 you’ll need to add a regular reference to the System.Data.SqlServerCe library.

Building the basic data model

Code First is a feature of EF that maps POCOs containing classes, relationships, data annotations, etc…, to database tables, columns, constraints, and relationships in physical databases. EF CF creates the database by examining the code in the data model, then building the corresponding physical database and its objects. You have the option to merge or drop/recreate any databases generated by EF Code First, and you can additionally seed the database with  data (coming in a later post).

Since the controller returns the model to the view, you can send validation information to the view by using Data Annotations. Data annotations are attributes that you can apply to a model to perform common types of validation at the property level, as shown below in two basic POCO classes.

Now that you have a model, you can add a few lines of code to tell EF to generate the database for you, and even seed it with data if you want to. In order for EF to know what classes in a project it should use as a model to generate the database, you need to tap into two classes from the System.Data.Entity namespace:

  • DBContext class.
    • The DbContext is a lot like a connection, except it manages database connectivity for you automatically (i.e., no need to explicitly call open/close on connections). Additionally, there are many properties methods on the DbContext class to work directly with the model and/or database, such as the SaveChanges method or the ValidateEntity method.
  • DbSet class
    • This object knows how to deal with CRUD operations on the entity class itself (i.e., Category or Product), and works in tandem with the DbContext object to perform those operations.

A data model is not just a set of POCO classes, though. Models need a class to manage the POCOs, perform connection management, or other duties that an ORM would do. These management classes are often called a context or repository[1]. Rather than writing the database and connection management code yourself, you can take advantage of EF and receive features provided automatically by inheriting from the DbContext class in your repository class.

The DbContext also needs to know what POCO collections to work with. You can do this by adding properties of type DbSet<T> for each of your collection types, as the code below demonstrates.

At this point, the two POCO classes and DbContext are all you need to see EF in action, and you can move onto running the application and generating the physical database.

Generating the database from the model

Assuming you have the controllers and views in place to perform CRUD operations on the Categories and Products collections, running the MVC application will create a SQL (Express or CE 4.0) database automatically for you. Of course, there’s no data, just the schema, but the site and database are both up, running, and completely functional. Navigating to the create action on the products controller in a browser renders the create view like the one below (including validation!):

 

image_6

 

Once you save a product, the app takes you back to the listing of products, where you can see the results.

image_8

Although you can see the data on in the browser, you probably can’t find the database in the Solution Explorer. Checking out the customary App_Data folder reveals nothing, and examining the Web.Config file comes up empty. Since EF could find no information about the database, it created a SQL Express[2] database with the a default name and path shown here:

C:\Program Files\Microsoft SQL Server\MSSQL10_50.SQLEXPRESS\MSSQL\DATA\FourthCoffee.Web.Models.FourthCoffeeWebContext.mdf.

If you want to name your database something different, modify the <connectionStrings> section of the Web.Config file to point to the preferred database name and location. This connection string connects to the \App_Data\bakery.sdf database.

By convention, the name of this connection string needs to match the name of your context/repository class, in this case, FourthCoffeeWebContext, so EF can identify the connection string to use. Notice that the connection string points to the data directory (App_Data) and it’s a SQL CE 4.0 database. If you wish to use a different edition of SQL, feel free to change the connection string and provider name to point to other locations.

Once the changes are in place, run the application, enter some data, and return to Visual Studio where you can see the App_Data folder now contains the bakery.sdf database.

image_10

Since the option to drop and recreate the database exists, you can design your data model through code and tests to verify that it works in a repetitive cycle, so relating the classes and regenerating the database is easy.

Relating classes in the data model

The Category and Product classes relate to each other in a one-(zero or)many relationship. You can express this relationship in code by adding a property in the Category class to represent the collection of related products, as shown here:

The Product class needs two lines of code, so you’ll need to add the following properties below to the Product class.

While the data model is complete, the code in controllers and views does not reflect the updates made to the model. The Edit and Create views associated with the Product need to include a dropdown of the categories, with the current product’s category selected, similar to the code below:

Since the view is counting on the controller to pass in a ViewBag.PossibleCategories, you’ll now need to wire up the Create/Edit action methods of the Products controller so the view can use it. Just create a dynamic property on the ViewBag object and set it to the context’s Categories property.

Generating an app from the finished model

The application at run time produces 100% supported CRUD operations, but now with relational operations and validation as well. This is evident in the Product’s Edit or Create view.

image_11

Note: Before running the application, you’ll need to delete the database or you’ll receive an error message.

Summary

MVC with Entity Framework Code First enables you to rapidly build sites with easy to understand data models.

Resources:

Code First w/existing DB

Code First

 

[1] Dear purists: I am not going to be pedantic about the repository pattern in this blog post.

[2] If you don’t have SQL Express installed, you might get an error. If that’s the case modify the web config to use SQL CE 4.0 instead, as it does not need to be installed.

Managing data in web applications with HTML5 Web Storage

Before the advent of Web Storage, developers have had to juggle between cookies, session, query strings, and HTML forms to manage data across stateless HTTP requests – with cookies being the only client-side, data storage mechanism. Working with all these different ways to get data from here to there is often tedious at best, but unavoidable, as most web applications do need to preserve state somewhere. At the same time, you also need to consider users who have turned off features like cookies, either knocking both cookies and session objects out of the question or making them harder to work with than they should be.

Enter…HTML5 Web Storage

HTML5 Web Storage, also known as DOM Storage, is a way to preserve state on either the client or server, making it much easier to work with (or should I say against?) stateless nature of HTTP. Web storage gives you, the developer a great deal of flexibility in how you deal with data. In the earlier days of the web, hardware constraints on both the server and client, coupled with low bandwidth, created an environment in which it was much harder to pass data around. Today however, hardware is cheaper, better, and faster, so most of the constraints have been lifted, but the supporting mechanisms to move data around haven’t changed much (e.g., cookies, session, query strings). That is, until the advent and adoption of Web Storage.

Today’s storage issues revolve around these points:

  • Having a choice between storage on the server or client between HTTP requests
  • The need to deal with larger sets of data, to provide a rich client side experience to users
  • Optimize performance and scalability by not forcing data to travel with the HTTP requests, like cookies, form data or query strings.
  • Cross browser friendliness

Web Storage helps solve these important issues, as you can add data to either server (session) storage or a local (client memory) storage.

Web Storage Browser Compatibility

As far as cross browser compatibility goes, all the major browsers support Web Storage.

image_2

 

Web Storage size limits

Web Storage also allows you to cram much more into storage than the traditional 4k that you get with cookies. So far, the value is 5MB; however, browsers can implement the limits they’d like. According to the W3C, here’s the official word on Web Storage size limits.

“A mostly arbitrary limit of five megabytes per origin is recommended. Implementation feedback is welcome and will be used to update this suggestion in the future.”

IE allows up to 10MB, as stated here in the DOM Storage documentation on MSDN.

“Storage size is calculated as the total length of all key names and values, and a single storage area can contain up to 10 million bytes. The remainingSpace property is used to determine the available storage space.”

Moving from a mere 4k to more than 5MB gives you far more space to work with than ever before. Of course, you still need to write the code to work with Web Storage.

Working with the Web Storage API

The Web Storage API is a really small and easy to use library to stash data wherever and whenever you need. However, Web Storage isn’t just a huge bag of cookies or over-bloated session variables. Because you can store data locally, without transmitting it back to the server, applications such as these are far easier to write and maintain.

  • Wizards, multi-page applications
  • Shopping cart data
  • Local document storage, for online word processing, spreadsheets, or blogs
  • Rich, UI heavy web applications that need to display large amounts of data

Applications like these will also perform much better, as bandwidth needs decrease when the data stays put, and doesn’t travel with the HTTP request, as cookies and form elements do.

There are two ways to deal with data in the Web Storage API:

  • Local storage
    • Long term data persistence
    • The local storage object spans multiple windows and persists beyond the current session
    • Values put into localStorage are shared across all windows from the same origin
    • Data is stored on the client. Behaving similarly to cookies, values persist beyond when the browser’s session ends
  • Session storage
    • Short term data persistence
    • Once the browser’s session ends (window/tab closed), sessionStorage ends
    • Values put into sessionStorage are only visible in the window/tab that created them
    • Data is stored on the server

Both objects are properties of the browser’s window object, and you can access them by using JavaScript/jQuery. Both local and session storage objects are of type

Implementing a simple hit counter will work with similar syntax between local and session storage, however, it will behave much differently in each. Take for example, the following code that sets a page count in local storage and outputs it to an element with an id of pageCount :

The page count will increment each time this page is visited by the same user agent, regardless of whether or not it’s a different tab or  window. Closing and reopening the browser will continue to show data in local storage, as it’s been saved to disk. Session storage, on the other hand, though similar in syntax, will vanish once the user has closed the browser. Below is a sample of the same code, but done with session storage:

<div id=”pageCount”>Page Count</div>

Due to JavaScript’s dynamic nature, you can create properties on either local or session storage on the fly, as is the case with the pagecount variable in the previous samples. This gives you a lot of flexibility when determining how and where to work with data. This flexibility does come at a price…

Web Storage and security

Security is important to all aspects of development, as where malicious users can gain access to sensitive information or cause damage. Any time that you involve and store data, an attacker will try to gain access to it.

Web Storage is more public than cookies, and you’ll need to take special precautions to ensure security if Web Storage isn’t compromised by attackers. The W3C provides these guidelines on Web Storage security, quoted here:

7.1 DNS spoofing attacks

Because of the potential for DNS spoofing attacks, one cannot guarantee that a host claiming to be in a certain domain really is from that domain. To mitigate this, pages can use TLS. Pages using TLS can be sure that only the user, software working on behalf of the user, and other pages using TLS that have certificates identifying them as being from the same domain, can access their storage areas.

7.2 Cross-directory attacks

Different authors sharing one host name, for example users hosting content on geocities.com, all share one local storage object. There is no feature to restrict the access by pathname. Authors on shared hosts are therefore recommended to avoid using these features, as it would be trivial for other authors to read the data and overwrite it.

Even if a path-restriction feature was made available, the usual DOM scripting security model would make it trivial to bypass this protection and access the data from any path.

7.3 Implementation risks

The two primary risks when implementing these persistent storage features are letting hostile sites read information from other domains, and letting hostile sites write information that is then read from other domains.

Letting third-party sites read data that is not supposed to be read from their domain causes information leakage, For example, a user’s shopping wishlist on one domain could be used by another domain for targeted advertising; or a user’s work-in-progress confidential documents stored by a word-processing site could be examined by the site of a competing company.

Letting third-party sites write data to the persistent storage of other domains can result in information spoofing, which is equally dangerous. For example, a hostile site could add items to a user’s wishlist; or a hostile site could set a user’s session identifier to a known ID that the hostile site can then use to track the user’s actions on the victim site.

Thus, strictly following the origin model described in this specification is important for user security.

As you can see, there is some thought needed before running off to use Web Storage. Additionally, this article from Network World describes HTML5 security issues in general and including specifics on Web Storage.

Summary

Web Storage has the support of all major browsers while promising to be a versatile technology that allows you to create more robust, data driven, client side sites with little code. However, Web Storage is very new and you need to use it with caution, especially when concerned with security.

MSDN Intro to DOM Storage http://msdn.microsoft.com/en-us/library/cc197062(VS.85).aspx

What you need to know about the Microsoft MVP Award

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

images_8

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).

 

WP_000202_2

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.

Creating Helpers for ASP.NET Web Pages with WebMatrix

If you are unfamiliar with helpers and haven’t read my blog post on “Getting Started with ASP.NET Web Helpers for WebMatrix”, you should start reading there.  Otherwise, we’ll move on to create helpers for use with the Razor View Engine and WebMatrix.  In a later post I’ll describe how to create helpers using Visual Studio 2010 for use in WebMatrix.

There’s four steps to creating helpers for Razor views.

1. Create the helper file.

The helper file belongs in the \App_Code folder located under your site’s root.  If there is no \App_Code folder in the project, go ahead and create one.  You can name it whatever you’d like, but note that the name of the helper file without the extension will be used in the calling syntax and the extension must be .cshtml. In MVC with VS 2010, helper are stored as .cs or .dll files instead.

cshtml_2

 

2. Add the @helper directive to the top of the helper file.

Here’s what the signature for a helper looks like:

@helper HelperName([DataType arg], [DataType arg]…) { // helper code }

 

You can store multiple helpers in a single .cshtml file, as well as functions which we’ll look at in the next section of this post.  Each helper works syntactically as if it’s a static method when called (more on that below).

3. Add code, markup and text.

Start adding elements that you want to render and don’t forget that Razor code is case sensitive.  In this example, a helper named  RenderDiscountedPrice that accepts a decimal input and renders out a message displaying the featured product’s final price with the discount.

@helper RenderDiscountedPrice(decimal price)

{

    Buy now for only <strong>$@(GetDiscountedPrice(price))</strong> with $1.00 off!

}

Alternatively, if you want to also use functions in a helper for doing calculations, providing logic, etc.…you can.   Here’s a code sample showing the same code but rewritten to include a function:

@helper RenderDiscountedPrice(decimal price)

{

    Buy now for only <strong>$@(GetDiscountedPrice(price))</strong> with $1.00 off!

}

 

@functions {

    public static decimal GetDiscountedPrice(decimal price)

    {   

        return price-1// just a dollar off, we’re cheap

    }

}

All that’s needed for a function library is the @functions declaration with braces to signify the beginning and ending of the code block.  Many functions can be placed here and the function signatures have the exact syntax as if they were in a standard .cs file.  The calling syntax,HelperFileName.helperName([args…]); is a combination of the filename without the extension but with the name of the helper instead. Using default.cshtml located at the root of the web site, locate this block of code…

<div id=”featuredProduct”>

    <img alt=”Featured Product” src=”@HrefAttribute(“~/Images/Products/” + featured.ImageName) />

    <div id=”featuredProductInfo”>

        <div id=”productInfo”>

            <h2>@featured.Name</h2>

            <p class=”price”>$@string.Format(“{0:f}”, featured.Price)</p>

            <p class=”description”>@featured.Description</p>

        </div>

        <div id=”callToAction”>

            <a class=”order-button” href=”@HrefAttribute(“~/order”, featured.Id) title=”Order @featured.Name“>Order Now</a>

        </div>

    </div>

</div>

and replace it with this block of code (the highlighted code is the modifications necessary)…

<div id=”featuredProdcut”>

    <img alt=”Featured Product” src=”@HrefAttribute(“~/Images/Products/” + featured.ImageName) />

    <div id=”featuredProductInfo”>

        <div id=”productInfo”>

            <h2>@featured.Name</h2>

            <p class=”price”>

                @{var price = featured.Price;}

                $@string.Format(“{0:f}”, price) <br/>

                @Pricing.RenderDiscountedPrice(price) // HelperFile.HelperName syntax/behaves like a static

            </p>           

            <p class=”description”>@featured.Description</p>

        </div>

        <div id=”callToAction”>

            <a class=”order-button” href=”@HrefAttribute(“~/order”, featured.Id) title=”Order @featured.Name“>Order Now</a>           

        </div>   

    </div>

</div>

The code’s been changed to declare a variable named price and set it to the featured product price, which is then to be used in the following two lines of code, including the existing line that renders the price.  The variable is available to all parts of the web page below where it’s declared by default. (you can modify a variable’s scope if need be).  Anywhere in the Bakery site that you want to include a message about the discount, you can use the same single line call to produce the same message about the discount.

4. Verify the Results

Run the default.cshtml file and check that the sales message has been rendered.

image_8

When using WebMatrix as the tool for creating helpers, you can release helpers only as .cshtml files into \App_Code folders across projects (at this point in time, and subject to change).  If you need to release .dll files, you can create helpers in Visual Studio 2010 and package them with NuPack if you’re creating something sharable or as a private .dll otherwise.

Why ASP.NET MVC is different than Classic ASP

There’s still a lot of Classic ASP developers out there, maintaining and adding features to existing ASP sites. Many want to migrate or upgrade to ASP.NET, and particularly ASP.NET MVC. During my MVC presentations, the most frequently asked question I get is: “This looks like Classic ASP code, are we just going backwards with MVC stuff?”. If we dig into MVC a bit deeper, we’ll see that the answer is most definitely, NO. Although at first glance, the mixture of HTML and script in the views may appear to be similar to Classic ASP, upon further investigation, there are some very remarkable differences.

Note: When speaking of Classic ASP in this post, I’m referring to the ASP found in .asp pages, not .aspx Web Forms.

MVC Models & Classic ASP Data Access

MVC:

There are many options for dealing with data in MVC models; EF (db or code first),  LINQ to SQL, POCOS, Service Layers or even DataSets and DataReaders. No matter what the choice, all data model code is partitioned away from the views and controllers, and that’s the important factor to consider. MVC convention and application templates guide the developer to add models to a \Models folder or use a library reference (preferably) the data access layer. As a developer you get full control over where and how you create the data access layer and business objects so it doesn’t interfere with UI code.

Classic ASP:

There’s two primary ways of dealing with data in ASP. Developers often place data access code directly in the .asp page and other times in a COM component. Data returned from the data access layer is returned into ADODB.Recordset objects which represent the data as a rectangle, and that data is directly sent to the ASP page.

Because of the tight coupling, code in the data access model is harder to test and maintain.

MVC Views & Classic ASP Pages

MVC:

Views are the reason that prompts developers to look at MVC and think it’s similar to ASP, and that’s because in the view both HTML and code exist side by side. However, peering into views a bit deeper reveals that views contain only enough markup and syntax to render pages from data that is passed to views from a controller. That means the code in MVC isn’t a bunch of large gobs of script interlaced with markup, they’re generally just code nuggets. This also means that the most noticeable difference is the lack of actual code itself (hopefully!), as views should be clean and not cluttered.

Classic ASP:

Pages in ASP often contain server script, client script, markup, and the kitchen sink thrown in for good measure. JavaScript obtrusively pilfers the markup throughout entire pages. All too often, the ASP page contains large amounts of business logic code, and everything gets stuffed into big .asp pages.

Although there are techniques for working with ASP to get some separation of concerns, that concept gets offset since most all of today’s ASP development is in maintenance mode so many aren’t investing in enhancing Classic ASP technology, particularly when there are other alternatives.

MVC Controllers & Classic ASP

MVC:

Rather than mapping URL addresses to individual static pages living on a web server, MVC uses Routing to map the HTTP request to methods, not complete pages, in controllers called action methods. Action methods retrieves an entity in the model to match the model to a corresponding view based on routing information in the URL. These URL patterns, called Routes, are defined and added to an application wide RouteTable object so the routes can identify and execute controllers automatically. This gives tremendous flexibility, as the controller can behave as a traffic cop, directing requests to a specific code location which is natively more testable than a whole page. This also gives us a nice separation of concerns as well.

Classic ASP:

There’s nothing to compare to a controller in ASP as there’s nothing out of the box that supports routing in any similar way to MVC. URLS are directly mapped to a an .asp file and there’s nothing in the ASP platform itself to help out. You could write an ISAPI filter or some sort of module to create your own routing system, but it’s more work and maintenance compared to MVC, as MVC has this functionality built in.

Summary

MVC isn’t just a rehash of Classic ASP and we’re definitely not going backwards in technology with it. MVC gives you a way to write much cleaner, separated,  and robust code. The MVC pattern and ASP.NET MVC project templates in Visual Studio also assist in guiding the developer to do better things with their code, such as unit testing or implementing other practices such as dependency injection (DI), which are hard to near impossible to do in older versions of ASP. The good news: If you’re writing ASP applications now, the move from Classic ASP to MVC doesn’t have to be such a huge learning curve.

A few tips for being a more effective solo developer

There’s tons of developers that are self employed, freelance or consultant; some who take long term contracts on teams and others that have a few key, stable customers that they routinely work for.  If you’re solo in the sense that you’re the primary start-to-finish person for most of your projects, there’s not a lot of resources out there targeted your way. Most training, talks, books, blog posts and other content is geared toward the enterprise developer that works on a team.  Since that’s the case, I wanted to throw out a few things you can do as a solo developer to take some of the pain away from not having the resources that teams generally have (e.g., hardware, CI server, costly software developer tools, etc…) to help boost your productivity.

Use Source Code Control

Many solo developers have managed with their own way of using “copy & paste” source control.  While you might have a routine down when doing so, you can still benefit from even some of the basic features of source control – with actual source control being the first reason.  There’s lots of room for mistake when something’s done manually, particularly when that something is maintaining versions of sets of files.

Source control systems offer basic tracking of files and project assets that you’ll label with a version, and most integrate with familiar tools like Visual Studio (often including express versions).  SCC software also allows you to freely explore code you’d like to write without you having to mentally keep track of changes when changing code, you can work on multiple files and roll back any or all of them to their previous state, without worry.  It’s safe to say that most developers have experienced this pain at least once in their career – that is, chasing an idea with many changes to the code and when the developer’s ready to ditch the changes, s/he can’t recall what’s been changed.

Download  TFS Basic for Visual Studio 2010 for individual source code control, and you can also use other popular SCC programs like Tortoise SVN.

Try out some Agile practices

Although you can’t do 100% Scrum (an Agile subset) as an individual developer you can do some of it.  Obviously it’s silly to do daily standups as an individual, but you can still incorporate many parts of Agile and/or Scrum into your projects.

The Agile manifesto states the principles that Agile values…

“Individuals and interactions over processes and tools
Working software over comprehensive documentation
Customer collaboration over contract negotiation
Responding to change over following a plan

That is, while there is value in the items on
the right, we value the items on the left more.”

These principles are easy to follow as an individual developer or as a team, it works for everyone.

One of the most important things to remember is to keep the feedback loop with your client open, and have frequent discussions with the client about the progress of the app.  Respond to change by allowing the feedback from the customer to drive the next cycle of coding, which should be short (1-2 weeks). As a solo developer, you can create and use backlogs, use burn down charts and hold retrospectives with the customer. Those practices give a nice reality check as to the health of the project.

JD Meier’s blog with living Agile

Unit Testing – It’s for you too.

You may be thinking unit testing is overkill for the type of projects you work on particularly if they’re small projects, or that it’d cost too much to ramp up to speed with a testing framework and tools.  If so, you’re not alone, as those are some common misconceptions that solo developers make (perhaps because they’re not getting out to mingle with their professional peers and aren’t getting up to date info; see below 😉 ).

If you’re looking for a low friction way to get started with unit testing and you’re already using Visual Studio 2010, then try the built in MS Test tools.  After you get a solid feel for creating unit tests; the knowledge is there to compare other tools & testing frameworks such as nUnit or xUnit (xUnit was built by Brad Wilson on the ASP.NET team).

One of the primary goals of ASP.NET MVC is to promote a concept called “convention over configuration”.  This means when writing MVC applications, developers are guided to use test projects when without having to download separate utilities, as well as guided to use other best practices.  By using the conventions, your code will be cleaner and better, especially because you’re now testing.

Get out and mingle with your professional peers

Don’t get out to user groups? Code Camps? It’s a great place to network and learn new things, and keep your skills sharper than they’d be without.  Get on social networking like Twitter, LinkedIn and Facebook.  These are all great ways to keep in touch with other developers, many of whom are also solo devs.  Having an issue?  Post the question on forums such as http://www.asp.net or MSDN Forums (among many others). Send out a tweet on Twitter and watch the replies come in, or post questions on a blog, many of who are on the various product teams here at Microsoft. Getting an answer from the source or a trusted MVP or community members is a great way to expand your knowledge base, stay up to date, and see what’s important out there to other developers.