HTML5: Tips !!!

Long time, since I have blogged. Specifically, this particular post – had all the details and wanted to post more than a year back. I guess, better late than never!
Here are few of the HTML5 tips that might help while using it’s various features:

HTML5 WebSocket Protocol is present only from IIS 8.0

HTML5 Web Socket provides a two-way communication over one TCP connection (socket). IIS 8.0 (ships with Windows 8) is capable of accepting Web Socket communications. In order to use the new protocol, one has to enable it in IIS 8.0, using option “Turn Windows features on or off” present in the control panel. It should look like below:
WebSocketIIS8
A quick detail on how WebSocket works can be looked here in my article: http://www.codeproject.com/Articles/546960/HTML-Quick-Start-Web-Application#websocket
 

One can support new HTML5 elements in older browsers using HTML5 shiv

Older browsers that are still widely used by end users (namely IE6/7/8) do not have support for the new elements in HTML5. One great way to enable HTML5 element support in IE6/7/8 is to have the http://code.google.com/p/html5shiv/
As noted on the linked Google page, “shiv” and “shim” are interchangeable terms in this context.
In case interested, I came across a good sample example and details out here: http://www.sitepoint.com/html5-older-browsers-and-the-shiv/
 

Elements in HTML5 can easily be made draggable

The specifications defines an event-based mechanism – a JavaScript API and additional markup for declaring it. Any type of element can be marked draggable on a page. It’s a known fact that having a native browser support for a particular feature is best as they would be faster and provide a more responsive application.
A quick detail about the feature can be read here: http://www.codeproject.com/Articles/546960/HTML-Quick-Start-Web-Application#dragdrop
 

‘Type’ attribute for script and link are no more required in HTML5

Type attribute is optional and one does not need to provide it for script and link tag in HTML5.
Earlier, one used to give:

<link rel="stylesheet" href="somepath/somestylesheet.css" type="text/css" />
<script type="text/javascript" src="somepath/somescript.js" />

Now, in HTML5, same references can be provided as:

<link rel="stylesheet" href="somepath/somestylesheet.css" />
<script src="somepath/somescript.js" />

This makes things simpler as the file extension and the tag were enough to interpret the type.
 

async attribute has been added to <script> tag in HTML5

HTML5 has added a new attribute for <script> tag, which is async. With this attribute, the external script will be executed asynchronously as soon as it is available. It has no effect on inline scripts.
Inline scripts and scripts without async or defer attributes are fetched and executed immediately, before the browser continues to parse the page.
 

In HMTL5, all unknown element in all browsers are displayed inline by default

The three most commonly used values are none, block, and inline. All elements have an initial or default state for their display value.For all HTML5 elements, by default they have a computed display value of inline.
 

In HTML5, page and worker do not share the same instance

In HTML5, page and worker do not share the same instance – a duplicate is created on each pass. Data passed between the main page and workers are copied. Objects are serialized as they’re handed to the worker, and subsequently, deserialized on the other end. I read that most browsers implement this feature as structured cloning. (The structured clone algorithm is a new algorithm defined by the HTML5 specification for serializing complex JavaScript objects.)
A quick detail about the feature can be read here: http://www.codeproject.com/Articles/546960/HTML-Quick-Start-Web-Application#webworkers
 

In HMTL5 Offline, relative URLs listed in a manifest are resolved relative to the manifest file

Yes, the urls in the manifest are relative to manifest’s own url. It is not to be confused that they are relative to root. Though it might happen that the urls relative to root work good because the manifest file might be located in the application root.
A quick detail about the feature can be read here: http://www.codeproject.com/Articles/546960/HTML-Quick-Start-Web-Application#offlineapp

HTTP 500 – Internal server error

This is another common error that troubles a lot of ASP.NET users.

Problem Statement

Generally, the questions are framed like:

I receive a HTTP 500 – Internal Server Error  exception while trying to browse my hosted web application. Exception message says “This error (HTTP 500 Internal Server Error) means that the website you are visiting had a server problem which prevented the webpage from displaying”. Please help, how to resolve it?

Assessment

Any HTTP request made to web application running on IIS (or any other web server) returns the status of the response. This HTTP status code indicates about the request success or failure. If the request was unsuccessful, it might provide the reason why so.

Out of various status code, 5xx are the codes related to Server error. They indicate that the server failed to complete the request because server encountered an error.

The 500 Internal Server Error is a very general HTTP status code. It means something has gone wrong on the website and web server is unable to specify what exactly, thus failing in fulfilling the request made by the client. This is not related to client and the fault is in the webpage/website requested that resides on server. This status code can be considered as a ‘catch-all’ server error of Web server.

More details around various HTTP status code: The HTTP status code in IIS 7.0, IIS 7.5, and IIS 8.0

Possible Resolutions

Make sure that internally web server maintains some kind of internal error logs that gives more detail of what went wrong and thus help in diagnosing the issue. Generally, it is logged into Windows Event Logs on the server. Thus, first thing while troubleshooting the error is to see Windows Event Logs on the server to find what went wrong.

Other useful thing to troubleshoot it would be to disable friendly HTTP error messages to see if the raw content can provide a direction to look more. Steps:

  • Go to menu Tools/Internet Options in your IE.
  • Click on the Advanced tab & then uncheck “Show friendly HTTP error messages” option & then click Ok.
  • Now, when on accessing the same web page, much more developer meaningful error message will be shown.

Moving on, following are most common:

Option #1:
HRESULT: 0x80070035 – The page cannot be displayed because an internal server error has occurred.
This occurs because the server that is running IIS cannot access the configured root directory of the requested location.

Resolution would be to make sure that the server that is running IIS can access the configured root directory of the requested location.

Option #2:
HRESULT: 0x800700c1 – The page cannot be displayed because an internal server error has occurred.
This occurs because a script mapping is not valid.

Resolution would be to make sure that the script mapping points to the ISAPI.dll file that can process the request.
To do this, follow these steps:

  1. Click Start, click Run, type inetmgr.exe, and then click OK.
  2. In IIS Manager, expand server name, expand Web sites, and then click the Web site that you want to modify.
  3. In Features view, double-click Handler Mappings.
  4. Make sure that the script mapping points to the correct ISAPI.dll file. (e.g: .asp files should map to the %windir%\system32\inetsrv\asp.dll file)

Option #3:
HRESULT: 0x8007007f – There is a problem with the resource you are looking for, so it cannot be displayed.
This occurs because the handler mapping for the requested resource points to a .dll file that cannot process the request.

Resolution would be to edit the handler mapping for the requested resource to point to the .dll file that can process the request.
To do this, follow these steps:

  1. Click Start, click Run, type inetmgr.exe, and then click OK.
  2. In IIS Manager, expand server name, expand Web sites, and then click the Web site that you want to modify.
  3. In Features view, double-click Handler Mappings.
  4. Right-click the script mapping that you want to edit, and then click Edit.
  5. In the Edit Script Map dialog box, type the appropriate executable file in the Executable box, and then click OK.

Option #4:
One of the other possibilities could be an issue in the way web application is hosted. Some security configuration issue or conflict due to multiple config files.

Resolution would be to make sure application is hosted correctly by published the application as website and setting up the virtual directory as needed.
More details around the known issues and their resolution:
Error message when you visit a Web site that is hosted on IIS 7.0: “HTTP Error 500.0 – Internal Server Error”
Troubleshoot an “HTTP 500 – Internal Server Error” error message on IIS 4.0 or on IIS 5.0

Conclusion

This is a server error and can only be solved by website admin who has access to files and the web-server. There can be one of/or multiple reasons to get this error. One has to track down the issue and handle accordingly.

Keep learning!