Jul
22
2015

10 Common Mistakes Web Developers Make

web developer making a mistakeThere seems to be endless choices regarding how to accomplish the same task - to develop a website that works in today's modern web. Web developers have to choose a web hosting platform and underlying data storage, which tools to write HTML, CSS, and JavaScript in, how design will be implemented, and what potential JavaScript libraries/frameworks to include. Once choices are narrowed down, the online world is filled with articles, forums, and samples that provide tips for making a better web experience. Yet no matter which path is taken, all developers are susceptible to mistakes. Although some mistakes will be related to a specific approach, there are challenges shared among all web developers. So through research, experience, and recent observations, I thought I would share a list I compiled of ten common mistakes I see web developers make - and how to avoid them.

The following list is in no particular order.

1)  Writing old school HTML

Mistake: The early days of the internet had much less options for markup than we do today. However, old habits die hard, and many still write their HTML as if we were still in the 20th century. Examples here are using <table> elements for layout , <span> or <div> elements when other semantic-specific tags would be more appropriate, or using tags that are not supported in current HTML standard such as <center> or <font>, or spacing items on a page with a large number of &nbsp; entities.

Impact: Writing last decade's HTML can result in over complicated markup that will behave inconsistently across multiple browsers.

How to avoid: Stop using <table> element for layout of content, and limit usage for it to displaying tabular data. Get acquainted with the current markup options available such as seen at https://html.spec.whatwg.org/multipage/semantics.html#semantics. Use HTML to describe what the content is, not how it will be displayed. To display your content correctly, use CSS (http://www.w3.org/Style/CSS/).

2 )  "It works in my browser…"

Mistake: A developer may be fond of a particular browser or really despise one, and might primarily test web pages with that bias in view. It is also possible that code samples found online may be written without factoring how it would render in other browsers. Also, some browsers have different default values for styles.

Impact: Writing a browser-centric site will likely result in very poor quality when displayed in other browsers.

How to avoid: It would not be practical to test web pages in every browser & version during development. However, having a regular interval of checking how your site will appear in multiple browsers is a good approach. Sites such as http://browsershots.org/ show snapshots of how a given page would render over multiple browsers/versions/platforms. Tools such as Visual Studio (https://www.visualstudio.com/en-us/visual-studio-homepage-vs.aspx) can also invoke multiple browsers to display a single page you are working on. When designing with CSS, consider "resetting" all the defaults as shown at http://meyerweb.com/eric/tools/css/reset/.

If your site is using any CSS features created specific for a browser, be cautious as to how you will approach vendor prefixes such as -webkit-, -moz-, or -ms-.  For guidance on industry trends in this regard, it would be worth your time to examine the following references:
http://blogs.windows.com/msedgedev/2015/05/06/a-break-from-the-past-part-2-saying-goodbye-to-activex-vbscript-attachevent/
http://www.quirksmode.org/blog/archives/2010/03/css_vendor_pref.html
http://www.brucelawson.co.uk/2014/on-internet-explorer-supporting-webkit-vendor-prefixes/

While the above references explain a movement away from vendor prefixes and why, this site http://davidwalsh.name/goodbye-vendor-prefixes provides practical suggestions on how to work through this today.

3)  Bad form

Mistake: Prompting a user to provide any information (especially when entered into a text field) and assuming the data will be received as intended.

Impact: Many things can (and likely will) go wrong when user entry is trusted. Pages may fail if required data is not provided, or data received is not compatible with an underlying data scheme. Even more serious is the intentional violation of the site's database, perhaps through Injection attacks (see https://www.owasp.org/index.php/Top_10_2013-A1-Injection).

How to avoid: The first bit of advice here is to make sure it is clear to the user what type of data you are looking for. These days, asking for an address could result in either a business, home, or even email address! In addition to be specific, take advantage of data validation techniques available in today's HTML as seen at this article http://devproconnections.com/html5/html5-form-input-enhancements-form-validation-css3-and-javascript. No matter how data is validated on the browser side, be sure it is always validated on the server-side as well. Never allow a concatenated T-SQL statement to use data from user entry without confirmation the each field is the type of data it should be.

4)  Bloated responses

Mistake: The page is filled with many high quality graphics and/or pictures, scaled down with use of <img> element height and width attributes. Files linked from the page such as CSS and JavaScript are large. The source HTML markup may also be unnecessarily complex and extensive.

Impact: The time to have a page completely render becomes long enough for some users to give up or even impatiently re-request the whole page again. In some cases, errors will occur if page processing is waiting too long.

How to avoid: Don't adopt the mindset that access to the internet is getting faster and faster - thus allowing for bloated scenarios. Instead, consider everything going back and forth from the browser to your site as a cost. A major offender in page bloat is images.  To minimize the cost of images that slow down page loads, try these three tips:

  1. Ask yourself: "Are all my graphics absolutely necessary?" If not, remove unneeded images.
  2. Minimize the file size of your images with tools such as Shrink O'Matic http://toki-woki.net/p/Shrink-O-Matic/ or RIOT http://luci.criosweb.ro/riot/.
  3. Preload images. This will not improve the cost on initial download, but can make other pages on site that use the images load much faster. For tips on this, see http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/.

Another way to reduce cost is to minify linked CSS and JavaScript files. There are plenty of tools out there to assist in this endeavor such as Minify CSS http://www.minifycss.com/ and Minify JS http://www.minifyjs.com/.

Before we leave this topic, strive to be current with HTML (see mistake #1) and use good judgment when using <style> or <script> tags in HTML.

5)  Creating code that *should* work

Mistake: Whether it is JavaScript or code running on the server, a developer has tested and confirmed that it works, thereby concluding it should still work once deployed. The code executes without error trapping, because it worked when it was tested by developer.

Impact: Sites without proper error checking may reveal the errors to the end users in an ugly way. Not only can the user experience be dramatically impacted, the type of error message content could provide clues to a hacker as to how to infiltrate a site.

How to avoid: To err is human, so bring that philosophy to coding. With JavaScript, be sure to implement good techniques to prevent errors as well as catch them. Although this article http://www.palermo4.com/post/JavaScript-for-Windows-Store-Apps-Error-Handling.aspx addresses JavaScript coding for Windows Apps, the majority of the topics apply to web development too, and it is full of good tips! Another aid to help create solid code that can hold up well to future changes in code is unit testing (see http://en.wikipedia.org/wiki/Unit_testing).

Failures in server-side code should be caught without the user seeing any of the nerdy details. Reveal only what is necessary, and be sure to set up friendly error pages for things like HTTP 404s (see http://en.wikipedia.org/wiki/HTTP_404).

6)  Writing forking code

Mistake: With the noble notion of supporting all browsers and versions, a developer creates code to respond to each possible scenario. The code becomes a heap of if statements, forking in all sorts of direction.

Impact: As new versions of browsers update, management of code files become bulky and difficult to manage.

How to avoid: Implement feature detection in code versus browser/version detection. Feature detection techniques not only dramatically reduce the amount of code, it is much easier to read and manage. Consider using a library such as Modernizr (http://modernizr.com/) which not only helps with feature detection, it also automatically helps provide fallback support for older browsers not up to speed with HTML5 or CSS3.

7)  Designing unresponsively

Mistake: Site development assumes viewing in the same size monitor as the developer/designer.

Impact: When viewing the site in mobile devices or very large screens, the user experience suffers with either not being able to see important aspects of the page or even preventing navigation to other pages.

How to avoid: Think responsively. Use responsive design (see http://en.wikipedia.org/wiki/Responsive_web_design) in your sites. A very popular library ready to serve in this area is Bootstrap (http://getbootstrap.com/).

8)  Making meaningless pages

Mistake: Producing public facing pages with content that might be very useful, but not providing any hints to search engines. Accessibility features are not implemented.

Impact: Pages are not as discoverable through search engines and therefore may receive little or no visits. The page content may be very cryptic to users with impaired vision.

How to avoid: Use SEO (search engine optimizations) and support accessibility in HTML. Regarding SEO, be sure to add <meta> tags to provide meaning to a page with keywords and description. A good write up on that is found at http://webdesign.about.com/od/seo/a/keywords-html.htm. To enable a better accessibility experience, be determined to provide an alt="your image description" attribute in each of your <img> or <area> tags. Of course, there is more to do and further suggestions can be investigated at http://webdesign.about.com/od/accessibility/a/aa110397.htm. You can also test a public web page at http://www.cynthiasays.comCythiaSays.com to see if it is compliant with Section 508 (http://www.section508.gov/).

9)  Producing sites that are too refreshing

Mistake: Creating a site that requires full refreshes of a page for each interaction.

Impact: Similar to bloated pages (see mistake #4), performance of page loading time is affected. The user experience lacks fluidity, and each interaction could cause a brief (or long) resetting of the page.

How to avoid: One quick way to avoid this is by determining if posting back to the server is truly required. For example, client-side script can be used to provide immediate results when there is no dependency for server-side resources. You can also embrace AJAX techniques (see http://en.wikipedia.org/wiki/Ajax_%28programming%29techniques) or go further with a single-page application “SPA” (see http://en.wikipedia.org/wiki/Single-page_application) approach. Popular JavaScript libraries/frameworks are available to make adoption of these methods much easier, such as http://jquery.com/, http://knockoutjs.com/, and https://angularjs.org/.

10)  Working too much

Mistake: A developer spends a long time creating web content. Time might be spent doing repetitive tasks, or simply typing a lot.

Impact: Time for initial web site launch or subsequent updates is too lengthy. Value of the developer diminishes when it appears other developers are doing comparable work in less time and with less effort. Manual labor is prone to mistakes, and troubleshooting mistakes takes even more time.

How to avoid: Explore your options. Consider using new tools or new process techniques for every stage of development. For example, how does your current code editor compare to Sublime Text (http://www.sublimetext.com/) or Visual Studio (https://www.visualstudio.com/en-us/visual-studio-homepage-vs.aspx)? Regardless of what code editor you are using, have you recently dived into its features? Perhaps a small investment of your time perusing the documentation could unveil a new way to do something that could save hours & hours of time later. For example, note how an extension to Visual Studio can increase productivity for web developers as seen in this post http://www.palermo4.com/post/WebCamp-Essentials.aspx.

Don't miss out on tools available on the web to help! For example, check out the tools at http://dev.modern.ie/tools/ to simplify testing (across multiple platforms and devices) and troubleshooting.

You can also help reduce time and mistakes by automating processes. An example of this is using a tool like Grunt (http://gruntjs.com/) that can automate things such as the minifying of files (see mistake #4). Another example is Bower (http://bower.io/) which can help manage libraries/frameworks (see mistake #9).

How about the web server itself? With the help of services such as Microsoft Azure Web Apps (http://azure.microsoft.com/en-us/services/app-service/web/), you can quickly create a site for virtually any development scenario that can easily scale with your business!

Summary

By identifying common mistakes, web developers can eliminate much frustration that others have already endured. Not only is it important to acknowledge, but when we understand the impact of a mistake and take measures to avoid it, we can create a development process catered to our preferences – and do so with confidence!

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Jul
17
2015

Windows 10 Background Execution and Multitasking

The Universal Windows Platform introduces new mechanisms to allow applications to run while not in the foreground. As well as Background Tasks and Triggers, UWP adds the ability for applications to extended their execution time in the background. Learn how to use these new features and how new resource policies affect how and when your application runs in the background.
    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Jul
8
2015

Reveal Hidden Content Using Hash in URL

Suppose you have a web page that provides details on a given product.  The page has preloaded a number of products in HTML, but they are hidden from viewing via jQuery hide method.  If a user clicks a product link on the page, then the jQuery show method explicitly reveals it.  Now the user visits the page from another with a hash in URL like http://yoursite.com/products#shoes and the desired result is to automatically reveal the details for that product?  That was a question posed recently at StackOverflow, and this is how I answered it:

The key line of code above is line 11 of jqueryHash snippet. If the URL ended with #shoes, the details for that product would be automatically revealed. Note the code snippet does not do any validation of the hash (for brevity).

There were a number of answers given at the StackOverflow post, each with merit.  You can test my answer at my codepen testing grounds.

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Apr
2
2015

WebCamp MVC Events

imageI have been inspired to write some blog posts that feature highlights from a series of WebCamps I delivered along the west coast.  In this post, I am going to share a discovery I made when observing traditional ASP.NET (Web Form) developers attempt the switch to ASP.NET MVC.

The first question that might come to mind is: Why leave Web Forms?  The real answer is – you don’t have to.  However, here are a few reasons why many may choose to do so in the near future:

  • Web Forms are phat! …yet fat.  The page source is typically bloated with view state info.
  • Web Forms don’t encourage separation of concerns as does MVC.
  • Web Forms request/response model invokes many events and is process intensive.
  • Web Forms do not exist in ASP.NET 5.

The latter reason was the primary motivator for WebCamp attendees to consider moving to MVC because it exists prominently in ASP.NET 5 (by the way, Web Pages do too!)

You can learn a lot about what is on an attendee’s mind by a question he/she asked.  The following question is a classic example – and served as inspiration for this blog post and title:

“How do I respond to the click event of a button?”

The concept of interacting with elements on a page via event handlers is an easy concept to learn.  Unlearning it (for some) is a struggle.  MVC doesn’t use events like Web Forms do.  Instead of simply stating it doesn’t do that, I wanted to show how it was accomplished in MVC.  I used a very simple scenario -  one submit button on a page that displays a message when clicked.  Here is a snippet from the view:

<h2>Button Click Event in MVC</h2>
@using (Html.BeginForm())
{
    <input type="submit" name="submit" value="Submit" />    
}
<div>@ViewBag.Message</div>


And here is the code in the controller:


namespace
Palermo4Mvc.Controllers { public class DemoController : Controller { // GET: Demo public ActionResult Index() { return View(); } [HttpPost] public ActionResult Index(string submit) { ViewBag.Message = "Muhahaha!"; return View(); } } }
 

I went through the process of explaining how requests hit controllers first, then views were rendered.  Now that a simple task was accomplished, there was the inevitable questions that follow such as ‘What if I have two buttons?  How do I retrieve submitted values in the controller?  Do I still have access to querystring data? …’

What became clearer to me each time I presented a WebCamp is the need to bridge a gap starting with a simple process they already knew well.  Once the concept came into view (no pun) the attendees would organically accelerate their own learning path  Many new MVC developers have arisen from these events, and I was honored to be a part of that process!

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Mar
30
2015

WebCamp Essentials

imageSince the beginning of this year, I have had the privilege to tour across the west coast speaking at WebCamps featuring content and demos using Visual Studio 2013.  A common theme across all of these camps was the positive reaction to some particular demos targeting the productive features enhancing web development.  Specifically, these demos were showcasing the goodness found in the Web Essentials extension for Visual Studio.  Although I have been a fan for years, it was surprising to me how many long-time ASP.NET developers were not using it or even aware of it.  Thus I am inspired to spread the word about this free add-in which is available for multiple versions of Visual Studio.  It was truly an essential part of the WebCamp experience, thus why I named this post “WebCamp Essentials”.

In the spirit of the WebCamps, I would like to reveal the features that seemed to render the highest level of praise or interest – and in no particular order.  Although all the features are listed categorically on the Web Essentials home page, I wanted to iterate the camp favorites by listing them under problems they address.

“What file is this static content in?”

When testing your site in a browser, you may want to know where (source file) a visual element is coming from.  Since sites can be complex with nested content, it may not be easily discernable what file a static element resides in.  With the browser link feature, you can toggle a mode in the browser that will enable visual selection of an element which will reveal in Visual Studio the source file in which it resides.  Not only can you find content, you can change it right in the browser and see how it updates your file in Visual Studio automagically!   This is made possible by script injected into the page when launching from Visual Studio – and it works across all the modern browsers.

“I prefer less typing!”

With minimal typing, you can create HTML content quickly with Zen Coding.  A simple example:

<!-- type this and then tab -->
div#demo.groovy>lorem4

<!-- becomes -->
<div id="demo" class="groovy">Amet, consectetur adipiscing elit.</div>

 

“Collapsible regions please!”

A popular feature in the C# world, this extension makes it possible to do the same in HTML, JavaScript, or CSS.  Content inside the region can be collapsed visibly to help organize. 

HTML

<!--#region name-->

<!--#endregion—>

JavaScript

//#region name

//#endregion


CSS

/*#region name */

/*#endregion */


As mentioned, these are just a few of the many features provided with Web Essentials.  If you are a web developer using Visual Studio – it is simply essential for you to employ it!

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Mar
20
2015

Accelerate into Power Map

What Power Map can do

 

How to get Power Map

Power Map is an add-in for Microsoft Excel 2013 or with Office 365 subscription.

 

Best starting point for Power Map

Explore data...

Sample data

[Download nmaz.xls sample data]

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Mar
16
2015

Mouse Cursor Disappears When Switching Screens with Synergy

SynergyI discovered the solution to an issue with my mouse cursor disappearing when using Synergy (software that allows multiple computers to share the same keyboard and mouse)  If you are having a similar issue, I hope my fix below removes the problem.

I am running Windows 8.1 on both PCs involved.  I noticed that my display settings were slightly different than one another in the Display setting found in Control Panel.  Here is a screen capture of what that looks like:

control panel display

In my case, the slider for modifying text size was “smaller” (as seen above) on one PC, but moved up a notch on the other.  When I made both PCs use the same (in my case, “smaller”) the cursor appeared on both screens when switching back and forth. 

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Feb
27
2015

Context Aware Access to Command Prompt or PowerShell in Windows

I have been ramping up on ASP.NET 5 which has had me in PowerShell or the command prompt quite a bit (this is to support upcoming x-plat features).  In many cases, I have needed to run commands in the context of a folder.  Here is an easy way to do this in Windows Explorer…  

From the Windows File menu

Suppose I am in a folder and I want to immediately go to the command prompt or PowerShell and already be in the context of that directory?  I simply go to the File menu option in Windows Explorer ([Alt] F keyboard shortcut) and select either the command prompt or PowerShell as seen below:

File menu in windows explorer
Letters appear when [Alt] key is used

If I choose the command prompt, it will put me in the same directory as the current open window as seen here:

path in windows and command prompt

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Feb
19
2015

Creating an ASP.NET 5 Starter Application

This blog post is part of a series covering ASP.NET 5  To follow along, this post requires installing Visual Studio 2015 CTP.

This post will cover:

  • Creating the project
  • Examining the project
  • Comparing to "Empty project"

The goal of these topics is not only to show “how-to”, but to answer the “what is that…” and “why is that” as well.  It is written as if you are following along in Visual Studio 2015 (tutorial style), yet with enough supplemental detail to simply read (article style). Although not an exhaustive dive into each area, it should provide enough context to quickly get started with ASP.NET 5.

Creating the project

To create a new ASP.NET 5 application, it is necessary to think in terms of projects, not web sites.  The Web Site… option as seen below is still supported in Visual Studio 2015 to support legacy site development.  The specific “ASP.NET vNext” features require the Project… option. With this in mind, in Visual Studio 2015 select from the top menu bar: File --> New --> Project...

visual studio 2015 new project

After selecting Project…, a new project dialogue box appears.  On the left side of the box, select the Web option under the language of preference (Visual C# used below).  From there, select ASP.NET Web Application and choose the solution/project name and file location.  This post will use ASPNET5 as the solution name, and StarterSite as the project name.

asp.net web application project
ASP.NET 5 Class Library and Console Application project templates will be covered in an upcoming blog post

Another dialogue box will appear to fine tune the type of web project desired. In this post, we will look at the ASP.NET 5 Starter Web template.

image

 

Examining the project

The following is the default structure for the ASP.NET 5 Starter Web project:

image

A closer look at the wwwroot folder reveals helpful static (non-compiling) content:

image

The bin folder contains the AspNet.Loader.dll file, which is needed in deployment to IIS.

The css folder contains the site.css file, with minimal style declarations.

The lib folder contains multiple references for support of Bootstrap and jQuery, and contains the _references.js file, which is used to support IntelliSense in Visual Studio.

Back at the project level items, folders such as Controllers, Models, and Views contain what is needed to support MVC.

The Migrations folder contains code to support Entity Framework database migrations.

For an understanding of gruntfile.js and bower.json, take a look at this post by Mike Wasson.

 

Comparing to “Empty project”

In a previous post discussing how to create an ASP.NET 5 site with the “empty” template, there was significantly less folders and files.  This does however help us to appreciate what is truly required for ASP.NET 5 to run.  The folder and files below represent the true minimum:

wwwroot Folder of static files served to client. No code or ‘razor’ goes here
project.json File for managing project settings
Startup.cs File for startup and configuration code

The wwwroot folder in the “empty project” only contains the bin with the AspNet.Loader.dll file – much less than what was shown earlier in this post.

The content of the project.json file and the Startup.cs file also differ from the ‘empty’ with more code to support features commonly used.  The point here is that much has been added to the ‘starter’ template to provide a basis for common tasks associated with web site development.

Summary

In conclusion, there is a solid basis for quick web development when using the ASP.NET 5 Starter Web project template.

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).

Resources

Archives

Team Blogs

Download OPML file OPML