10 Common Web Developer Mistakes

There
seem 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 the 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 offered much fewer options for markup than we have today. However, old habits die hard, and many people 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  entities.

Impact:Writing the last decade's HTML can result
in over-complicated markup that will behave inconsistently across multiple
browsers. And it’s not necessary in more recent modern browsers like Microsoft Edge and even past versions of Internet Explorer
(11, 10, 9).

How to avoid:Stop using the<table>element for layout of content, and
limit usage for it to displaying tabular data. Get acquainted with the current
markup options available, suchas those seen at whatwg.org. Use HTML to describe what the content is, not how it will be displayed.
To display your content correctly, use CSS.

2. "It Works in My Browser…"

Mistake:A developer may be fond of a
particular browser or really despise one, and may 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 and version during development. However, having a
regular interval of checking how your site will appear in multiple browsers is
a good approach. Nowadays, free tools to help are readily available, regardless
of your preferred platform: free VMs, orsite scanners. Sites such as Browsershotsor BrowserStack show snapshots of how a given page would
render over multiple browsers/versions/platforms. Tools such as Visual Studio 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 meyerweb.com.

If your
site is using any CSS features created specifically 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:

• Microsoft Edge Dev Blog: A break from the past, part 2: Saying goodbye
  to ActiveX, VBScript, attachEvent…
• QuirksMode.org: CSS vendor prefixes considered harmful
• Bruce Lawson: On Internet Explorer supporting -webkit-
  vendor prefixes

While the
above references explain a movement away from vendor prefixes and why, this site 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 OWASP: Top 10 2013-A1-Injections).

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 being specific, take advantage of data validation
techniques available in today's HTML as seen inthis article. 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 that 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 the<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 taking 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. Images area major offender in page bloat. 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.
   You can scan your site here for suggestions on which images to
   compress.


2. Minimize the file size of
   your images with tools such as Shrink O'Maticor
   RIOT.


3. Preload images. This will not
   improve the cost on initial download, but can make other pages on the site
   that use the images load much faster. For tips on this, see this article.

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 and Minify
JS.

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 ShouldWork

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 the 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, but alsothe 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 addresses JavaScript coding for Windows
Apps, the majority of the topics apply to web development too, and it is full
of good tips! Another way to help create solid code that can hold up well to
future changes in code is 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.

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

Impact:As new versions of browsers update,
management of code files becomes bulky and difficult to manage. And as mentioned
in #1, it’s increasingly unnecessary.

How to avoid:Implement feature detection in code versus browser/version detection. Feature
detection techniques dramatically reduce the amount of code, and are much easier to read and manage. Consider using a library such as Modernizr which not only helps with feature detection,
but also automatically helps provide fallback support for older browsers that are not up
to speed with HTML5 orCSS3.

7. Designing Unresponsively

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

Impact:When viewing the site on 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 (seeWikipediaor A List Apart article) in your sites. Here are some practical tutorials on the subject, including responsive images. A very popular library ready to serve in
this area is Bootstrap.

8. Making Meaningless Pages

Mistake:Producing public-facing pages with
content that might be very useful, but doesn't provide 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 optimization)
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 About Tech. To enable a better accessibility
experience, be determined to provide analt="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 About Tech. You can also test a public web page atCynthia
Says to see if it is
compliant with Section508.

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 (Wikipedia) or go further with a single-page application “SPA” (Wikipedia) approach. Popular JavaScript libraries/frameworks are available to make
adoption of these methods much easier, such asJQuery,KnockoutJS, andAngularJS.

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 website 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 or Visual Studio? Regardless of which 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 and hours of time later. For example, note how an
extension to Visual Studio can increase productivity for web developers, as seen
in this post.

Don't
miss out on tools available on the web to help! For example, check out the
tools at dev.modern.ieto 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 that can automate things such as the minifying of files (see mistake
#4). Another example is Bower 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, 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!

More Hands-On With JavaScript

This article is
part of the web development series from Microsoft tech evangelists on practical
JavaScript learning, open source projects, and interoperability best practices
including Microsoft Edge browser and the
new EdgeHTML
rendering engine.

We encourage you
to test across browsers and devices including Microsoft Edge—the default
browser for Windows 10—with free tools on dev.modern.IE:

• Scan your site for out-of-date
  libraries, layout issues, and accessibility.


• Use virtual machines for Mac, Linux,
  and Windows.


• Remotely test for Microsoft Edge on
  your own device.


• Coding Lab on GitHub: Cross-browser
  testing and best practices.

In-depth tech
learning on Microsoft Edge and the Web Platform from our engineers and
evangelists:

• Microsoft Edge Web Summit 2015 (what to expect with the new
  browser, new supported web platform standards, and guest speakers from the
  JavaScript community)


• Woah, I Can Test Edge & IE on a
  Mac & Linux! (from Rey Bango)


• Advancing JavaScript Without Breaking
  the Web (from
  Christian Heilmann)


• The Edge Rendering Engine that Makes
  the Web Just Work (from JacobRossi)


• Unleash 3D Rendering With WebGL (from David Catuhe, including the Vorlon.JS and BabylonJS projects)


• Hosted Web Apps and Web Platform
  Innovations
  (from Kevin Hill and Kiril Seksenov, including the ManifoldJS project)

More free
cross-platform tools and resources for the Web Platform:

• Visual Studio Code for Linux, MacOS,
  and Windows


• Code with Node.jsand free trial on Azure