JavaScript “use strict”

ECMAScript 5 added Strict Mode to JavaScript. Many of you may have first seen mention of this if you’ve used JSLint. It helps to remember that JavaScript still behaves much like an interpreted vs. compiled language as each browser/parser makes assumptions to execute code faster in different manners.

There are four primary features/goals of strict mode:

  • Throws errors for some common coding issues, that are sometimes obscure but previously didn’t throw an error.
  • Prevents or throws errors for potentially “unsafe” actions (such as gaining access to the global object).
  • Disables functions that are confusing or poorly thought out
  • Potentially code in strict mode could run faster by eliminating mistakes that would make it difficult for JavaScript engines to perform optimizations

Initial support added in FireFox 4 and MSIE10:

WARNING: if you chose to do this at a ‘file’ level, be sure to never concatenate several files together that are not ALL strict.

JS File Example:
"use strict";
function testFunction(){
var testvar = 1;
return testvar;
}

// This causes a syntax error.
testvar = 2;

JS Function Example:
function testFunction(){
"use strict";
// This causes a syntax error.
testvar = 1;
return testvar;
}
testvar = 2;

REFERENCES:

MSIE Conditional Comments

This approach is useful in building standards based websites and allows you to prevent it from being “polluted” by various hacks used to support MSIE. MSIE5 and newer support the use of Conditional Comments and thus allow the developer to include additional files or markup for specific versions of the browser. Other browsers will see the content as an HTML comment and thus ignore it.


<!--[if IE]><style type="text/css">@import "/css/IE=Fixes.css";</style><![endif]-->
<!--[if lt IE 5.5000]><style type="text/css">@import "/css/IE50Fixes.css";</style><![endif]-->
<!--[if IE 5.5000]><style type="text/css">@import "/css/IE55Fixes.css";</style><![endif]-->
<!--[if IE 6]><style type="text/css">@import "/css/IE60Fixes.css";</style><![endif]-->
<!--[if IE 7]><style type="text/css">@import "/css/IE70Fixes.css";</style><![endif]-->
<!--[if IE 8]><style type="text/css">@import "/css/IE80Fixes.css";</style><![endif]-->
<!--[if IE 9]><style type="text/css">@import "/css/IE90Fixes.css";</style><![endif]-->
<!--[if lt IE 7]><script type="text/javascript" src="/wiki/skins/common/IEFixes.js"></script><![endif]-->

REFERENCES:

Browser capabilities comparison testing

Browsers tend to evolve quickly, but they often do not offer the same capabilities cross-platform. As a result of this, there are many standard tests available to the developers of browser software to test for compliance with modern web standards.

Before making use of a specific capability in your web application, it’s often best to determine which browsers can support it.

Yahoo! Exceptional Performance (for Web Applications)

I spend a LOT of time trying to optimize web applications to run and appear as fast as possible, one of the most valuable tools I have in my “bag of tricks” is the YSlow! plugin for Firefox.

It integrates in the browser and gives a near real-time scoring of the pages you visit and suggestions on how to improve them. While some of the suggestions are not practical (for example: use of a CDN) the bulk of them can be applied to your application code or server with a little bit of work.

The rules and scoring mechanisms are well documented at the following website:

The YSlow! plugin is available here:
http://developer.yahoo.com/yslow/

Happy… Faster Surfing!

Enerjy plugin for Eclipse IDE

I’ve previously written on the benefits of static analysis of java code with the use of PMD and FindBugs.  I was recently turned on to a new tool that performs similar testing of code within the Eclipse IDE.

When I first found this tool it was free, since that time it’s come out of beta and is now a little costly, but it may still be worth it due to the functionality it provides.

The premise of this tool is a little different than other ones, while it covers much of the same need, it also performs many tests that I would previously use CheckStyle to do.  This only provides them at runtime and in a common manner within the IDE.

REFERENCES:

Cheers! 

Browser Rendering Engines

This is knowledge that is generally “tribal” by nature, reserved to only the nerdiest web developers, recently I was asked to name these and failed. Here’s the bounty of my research.

Gecko is generally considered to be the second most-popular layout engine on the Web, after Trident (used by Internet Explorer for Windows since version 4), and followed by WebCore (used by Safari) and Presto (used by Opera).

Gecko is the open source, free software web browser layout engine used in all Mozilla-branded software and its derivatives, including later Netscape browser releases. Written in C++ and licensed under MPL/GPL/LGPL triple license, Gecko is designed to support open Internet standards. Originally created by Netscape Communications Corporation, its development is now overseen by the Mozilla Foundation.

Trident (also known as MSHTML) is the name of the layout engine for the Microsoft Windows version of Internet Explorer. It was first introduced with the release of Internet Explorer version 4 in October 1997, has been steadily upgraded and remains in use today. For version 7 of Internet Explorer, Microsoft made significant changes to the Trident layout engine to improve compliance with web standards and add support for new technologies. Despite these changes, Trident remains significantly less compliant than competing layout engines Gecko, Presto and WebCore.

Presto is the name of the current (Opera 9 series) layout engine for the Opera web browser developed by Opera Software. It was first released (following several public betas and technical previews) on January 28, 2003 in Opera 7.0 for Windows. Presto replaced the Elektra engine used in versions 4–6 of Opera. Presto differs from Elektra in that it is dynamic: the page or parts of it can be re-rendered in response to DOM and script events. The Presto layout engine is only available as a part of Opera browser or related products. The source or binary (DLL) forms of the engine are not publicly available. Subsequent releases have seen a number of bugs fixed and optimizations to improve the speed of the ECMAScript (“JavaScript“) engine.

Tasman is the name of the layout engine introduced with version 5 of Internet Explorer for Mac. Tasman was an attempt to improve support for web standards, as defined by the World Wide Web Consortium. At the time of its release, Tasman was seen as the layout engine with the best support for web standards such as HTML and CSS. Unfortunately, MSIE for Mac is no longer supported, but newer versions of Tasman are incorporated in some other current Microsoft products.

Cheers!

Whoami

I’m skotfred, aka ‘Giant Geek’, developer of (predominantly web-based) applications. Primary development done with JSP/Java, PHP, XHTML/CSS/JavaScript. Previous applications in VisualBASIC, C/C++, Perl, COBOL/CICS, BASIC (various), Assember (PC & MVS), and Pascal.

Standards ARE everything, particularly when building for multiple platforms… look for more ramblings soon!