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).
Aug
16
2013

Start Developing for Windows (8.1) Store Apps using HTML5

jumpstartstudioWhen Windows 8 was first introduced, a huge opportunity opened up for web developers.  How so?  Anyone with HTML, CSS, and JavaScript skills could now apply such skills to developing apps, not just sites.  This is due to Microsoft supporting the development of WinRT apps with either C++, .NET, and/or JavaScript.  How different is it from writing a web site vs. an app?  If you are a web developer and you want to find out, be sure to look at the DevRadio episodes on developing for Windows 8 in half the time (4 minute videos) or the comprehensive “jump start” training series on HTML5 for Windows 8.  Moving onward, it will be assumed you already have a degree of experience with developing apps for Windows 8 using HTML5, and you are interested in what’s new or changed.

With Windows 8.1, consumers will enjoy a richer, more interactive experience. Correspondingly, the  APIs have been updated, providing developers either new or easier ways of doing things. A listing of the API deltas can be found at the Windows Dev Center for Windows Store apps.  Our focus right now is not to do a tedious overview of everything new.  Rather, we will look at what you need to do to get ramped up with some highlighted features as quick as possible.

Developer Requirements

To get started, you will need to install Windows 8.1 (preview is available for download) and Visual Studio 2013 (preview is available for download).  You should also highly consider registering at the App Builder site for relevant resources.

Visual Studio 2013 Updates

Creating a new project with Visual Studio 2013 is much like it was with Visual Studio 2012.  Consider the following screen capture of the “New Project” dialogue box:

vs13_new_project

First point of interest is a new template type named “Hub App” which allows for a hierarchical system of navigation. The template uses a new Hub control, and you can learn more about it if you download the Hub control sample. Regardless of which template type used though, let’s examine some core changes. 

WinJS 2.0

The source page of HTML files now target Windows 8.1, as indicated by the references to WinJS 2.0 as seen here:

<!-- WinJS references -->
<link href="//Microsoft.WinJS.2.0.Preview/css/ui-light.css" 
     rel="stylesheet" /> <script src="//Microsoft.WinJS.2.0.Preview/js/base.js"></script> <script src="//Microsoft.WinJS.2.0.Preview/js/ui.js"></script>

You will also see this visually in the solution explorer view.  When expanded, it is easy to see the resources being requested as seen here:

vs13_ref

Note that when you open a project created for Windows 8, Visual Studio 2013 will prompt you to determine if the project should now target Windows 8.1

Editor Enhancements

A pleasant enhancement to the JavaScript editor is the automatic completion of code blocks when typing the left side of the block.  For example, when typing a left brace { , the editor will pair it with a right brace } and auto-format along the way.  Other pairings include parenthesis, brackets, and quotation marks (single or double).

The editor will also highlight identifiers when selected.  For example, if a variable is declared with the name isAwesome, notice how the editor will highlight where else it is used:

vs13_id

Tiles

One more quick change to be aware of is found in the package.appxmanifest file.  When opening in Visual Studio 2013, you will find the Application UI tab where you can configure the images used for your apps tiles.  However, notice the new options as seen here:

vs13_logos

These new options introduce both a larger and smaller tile.  You should support these new tile sizes so that users of Windows 8.1 can easily organize their Start screen.  The example below shows the 70x70 in upper left, 150x150 in upper middle, 310x150 in the lower left, and the 310x310 on the right:

What Next?

So much could be next.  To some degree that will depend on the type of app you are developing.  The information covered so far is to enable a quick start to the development process.  By setting up the required environment and understanding a few of the changes in Visual Studio 2013, you can start coding as usual.  Look for deeper looks at specific features in the near future!

    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).
Mar
22
2012

Sneak Peek at CSS3 Course

Here is a sneak peek of my latest course at Pluralsight regarding CSS3:

[click here for a listing of all my courses at Pluralsight]

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Feb
8
2012
css // css3 // code // html5

CSS3 Target Trick

In my previous post regarding a CSS Hover Trick, I was challenged in the twitter universe to do something similar with images, but with the click event.  Could this be done without JavaScript?  But of course.  What makes this possible is use of two CSS3 selectors:not, :target. This will not work in older browsers, so check out how to do feature detection in this post on detecting CSS3 selectors.

The code found below will make images appear based on what anchor tag was clicked without using  any JavaScript!  Here are screen captures to demonstrate the desired behaviors:

csstarget00
No anchor tags have been clicked

 

csstarget01
First anchor tag clicked

 

csstarget02
Second anchor tag clicked

 

csstarget03
Third anchor tag clicked
Shameless self promotion

 

Here is the code to make it all work!  To reproduce in your own environment, simply replace the images with your own!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>CSS Target</title>
    <style>
        #csstarget ul { 
            margin:             0;
            padding:            0; 
        }        
        #csstarget li {
            list-style-type:    none;
            display:            inline;
            margin-right:       2em;  
        }
        img {
            width:              8em;
            height:             8em;
        }
        #images {
            padding:            3em;
        }
        
        /* hide unselected targets */
        #images img:not(:target) {
            display:            none;
        }
        /* display selected target */
        :target {
            display:            inherit;
        }
    </style>
</head>
<body>
    <article id="csstarget">
        <h1>CSS Target Trick</h1>
        <p>Click on any word to reveal an image...</p>
        <ul>
            <li><a href="#img01">CSS3</a></li>
            <li><a href="#img02">HTML5</a></li>
            <li><a href="#img03">Palermo4</a></li>
        </ul>
        <div id="images">  
            <img id="img01" src="images/css3logo.png" />
            <img id="img02" src="images/html5.png" />
            <img id="img03" src="images/palermo4_bw.png" />
        </div>

    </article>
</body>
</html>
    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Feb
8
2012
css // code // html5

CSS Hover Trick

In no way am I claiming this to be original.  But I can’t say I have seen this trick done anywhere else.  With the CSS :hover selector, you can create a nice “status message” appear in one location while hovering over particular items in a list (or menu).  Below are the screen captures of what the trick accomplishes, followed by the entire source code to make it possible.  Enjoy!

csshover00 
No mouse hover

 

csshover01
Mouse hover over first item

 

csshover02
Mouse hover over second item

 

csshover03
Mouse hover over third item

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>CSS Hover</title>
    <style>
        #csshover ul { 
            position:           relative;
            margin:             0;
            padding:            0; 
        }        
        #csshover li {
            list-style-type:    none;
            display:            inline-block;
            margin-right:       3em;  
            cursor:             pointer;   
        }
        #csshover li p {
            position:           absolute;
            top:                2em;   
            display:            none;
            left:               0em;
        }
        #csshover li:hover p {
            display:            inherit;
        }
    </style>
</head>
<body>
    <article id="csshover">
        <h1>CSS Hover Trick</h1>
        <p>Hover over each of the words below.  Look for status message below!</p>
        <ul>
            <li><div>CSS  </div><p>It's all about the style!</p></li>
            <li><div>Hover</div><p>When you wander above...</p></li>
            <li><div>Trick</div><p>Look Ma, no JavaScript!</p></li>
        </ul>
    </article>
</body>
</html>
    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Feb
6
2012
css // css3 // code // javascript

CSS3 Colors–HSLA to RGBA

In my previous post on CSS3 Colors – RGBA vs. HSLA, I provided a script to easily convert RGB to HSL using inputs/outputs friendly to CSS3.  In this post, I provide the reverse script – converting from HSL to RGB.  The trailing “A” means Alpha (scale of opacity), and requires no conversion.

// elsewhere in script use this way:
// var result = Palermozr.hslToRgb(0,0,100);
// result.R // Red
// result.G // Green
// result.B // Blue
var Palermozr = (function () {
    function hslToRgb(h, s, l) {
        h /= 360; s /= 100; l /= 100;
        var r, g, b;
        if (s == 0) {
            r = g = b = l;
        } else {
            var l2 = l < 0.5 ? l * (1 + s) : (l + s) - (s * l);
            var l1 = (2 * l) - l2;
            r = hueToRgb(l1, l2, (h + (1 / 3)));
            g = hueToRgb(l1, l2, h);
            b = hueToRgb(l1, l2, (h - (1 / 3)));
        }
        r = Math.round(255 * r);
        g = Math.round(255 * g);
        b = Math.round(255 * b);
        return { R: r, G: g, B: b };
    }
    // helper function used above
    function hueToRgb(l1, l2, h) {
        if (h < 0) h += 1;
        if (h > 1) h -= 1;
        if (h < 1 / 6) return (l1 + (l2 - l1) * 6 * h);
        if (h < 1 / 2) return l2;
        if (h < 2 / 3) return (l1 + (l2 - l1) * ((2 / 3) - h) * 6);
        return l1;
    }

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

Resources

Archives