Tag: html

Covert Flash to HTML5

Now that HTML5 support has grown, and Apple continues to resist Flash on their IOS devices, it may be advantageous to make use of the newer markup standard in your web applications.

There are currently three separate methods to convert your Flash applications:

MSIE Table styling of empty cells

This one had me stumped for some time, when a table contained either a <td></td> or <th></th> without content the cell would not be properly styled, often lacking borders. Traditionally the solution I used was to insure that all table cells had at least a single space within them so that they would be styled properly in MSIE.

There’s a simpler solution, the below CSS changes the default behavior so that the traditional ‘hack’ is no longer required:


table {
border-collapse:collapse;
empty-cells:show;
}

REFERENCES:

Custom 404 Page for Tomcat web applications

This is a relatively common problem in JSP based apps as you need to understand the configuration. It’s further complicated if you use Apache HTTPD in front of the Apache Tomcat server to process requests as you need to know where each request is processed.

For this example, we will use the standard 404 error, but you can also intercept other errors for custom pages.

  1. create 404.jsp:

    <% final SimpleDateFormat simpleDate = new SimpleDateFormat("EE MMM dd yyyy hh:mm:ss aa zzz");
    final String dttm = simpleDate.format(new Date()); %>
    <html>
    <title>404 Not Found</title>
    <ul>
    <li>Time: <%= dttm %></li>
    <li>User-Agent: <%= request.getHeader("User-Agent") %></li>
    <li>Server: <%= request.getServerName() %></li>
    <li>Request: <%= request.getRequestURI() %></li>
    <li>Remote: <%= request.getRemoteAddr() %></li>
    <li>Referer: <%= request.getHeader("Referer") %></li>
    </ul>
    </html>
  2. in WEB-INF/web.xml – add the following (NOTE: location within the file is important but outside the scope of this post)

    <error-page>
    <error-code>404</error-code>
    <location>/404.jsp</location>
    </error-page>
  3. You might want to force the HTTP Header to give something other than a ‘404 status’ code, otherwise MSIE will show an unstyled ‘friendly error message’ if the user has not turned off the default setting. Unfortunately, this also means that search engines might index these pages that should not exist.

REF:

Safari/WebKit background flash on page load

I was recently working on a website that had a black/dark background and while the typical suite of browsers that I test with seemed fine, Safari showed an annoying white flash when the page was loading.

Some research into this lead to a startling discovery as I personally consider this a bug in the Safari browser’s rendering. It’s often referred to as FOUC (Flash of Unstyled Content). There are several methods that I’ve seen, most employ JavaScript or ordering of CSS files to hide the <body> prior to the page completely loading.

The simplest fix, while not elegant, is to an explicit ‘style’ attribute on the <html> tag.

<html style=”background-color:black;”>

Reference:

META Tag ‘MSThemeCompatible’

Okay, so this one’s a little old, and I just found it while looking at some of Microsoft Update’s HTML source, it appears to be relevant for MSIE6 and newer and may be responsible for some interesting styling and behaviour of form components.

A quick search for it turns up lots of discussions about other browers such as Firefox being effected if the value is not defined… as such it’s likely a good idea to define it in your pages to be sure.

An old MSDN entry reads…

When running on Windows XP, Internet Explorer 6 and the content displayed in it sports a look and feel that matches the Windows XP platform. You can opt to have your HTML content not take on the same look as the operating system for elements such as buttons and scroll bars, by adding the following META tag:
<meta http-equiv="MSThemeCompatible" content="no" />

Setting this will disable theme support for the document. Some background on this, Windows XP (MSIE6) allows for the use of themes for the operating system to change the general color scheme of many elements.
As such, many HTML components (such as SELECT dropdowns, BUTTONS and INPUT fields ‘MAY’ also be effected if you don’t explicitly prevent it in your code.

There was some support for this in Mozilla Firefox builds for Windows, as such, while I’d normally recommend using a conditional comment, I’m torn in this case.

Cheers

Data URL’s (aka HTML Inline Images)

Here’s a useful trick for minimizing server HTTP connections, unfortunately it’s not universally supported so you will need to provide alternate methods for non-supporting browsers (such as MSIE).

This works by placing the content of the image into the URL itself, as such there’s no need to open up a new server connection and no extra caching at any tier.

<img src=”data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/ /ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7″ alt=”embedded folder icon” width=”16″ height=”14″ />

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!

HTML FORM’s unexpected effect on layout

I was recently looking back at some websites I’d created years ago and realized just how much of a hastle the HTML FORM tag used to be for page layouts.   This generally resulted in non-valid markup where the FORM tags themselves were improperly nested in TABLE, TR and TD tags.

Other than the obvious accessibility and semantic markup issues, there are two specific items that must be realized about the layout when working with a FORM.

The following examples assume the following source:

Hello<form>Again</form>World

FORM is a block element, forcing content around it to be separated:

Example displays as:
Hello
Again
World

  • FORM generally has a bottom margin to push content down below it.

Example displays as:
Hello
Again

World

  • CSS can fix both of these cases depending upon your specific problem:

<style type=”text/css”>
form { margin-bottom:0; display:inline; }
</style>

Example displays as:
HelloAgainWorld

 Cheers!

Accessible alternative to NOSCRIPT

Over the past few years, JavaScript has evolved from a website ‘add-on’ (primarily for non-critical features like animations) to a requirement for use. Many sites still rely on the tried and true ‘noscript’ tag for this purpose, unfortunately, it’s not always practical or accessible to do so.

A better way would be to use standard markup in the page, but use the scripting to ‘hide’ the content you don’t want users with JavaScript enabled to see.

This can be taken to great lengths, but here’s a very simplified example:
<div id=”noscript”>Please enable JavaScript to use this feature.</div>
<script type=”text/javascript”>
var obj = document.getElementById(‘noscript’);
obj.style.display=’none’;
</script>

REFERENCES:

Cheers!

Writing Popup HTML content with Javascript

Occasionally, there come a time when old tricks become handy on solving new problems. Recently, an application that I support had some serious network latency when attempting to open a popup consisting exclusively of static content. While this small page came from a webserver with appropriate caching headers being sent, it still took upwards of 2 seconds for the page to be displayed by the client browser because of network latency issues. 

True, this was for MSIE, and there are some notorious performance issues with the javascript used for popups, but those are different topics to be discussed later.

Old implementation, loads content of ‘somefile.html’ as a url popup:

<script type=”text/javascript”><!–
function testwindow(){
  var linkWin = window.open(‘/somefile.html’,”,’width=300,height=200,scrollbars=no,toolbar=no’);
}
// –></script>
<a href=”javascript:testwindow();”>TEST</a>

New implementation, creates content of ‘somefile.html’ in javascript instead:

<html>
<head>
<title>Popup Demo</title>
<script type=”text/javascript”>
function testwindow(x) {
  var content;
  var linkWin = window.open(”,”,’width=300,height=200,scrollbars=no,toolbar=no’);
  if (!linkWin.opener) { linkWin.opener = self; }
    content = “<!DOCTYPE html><html><head>”;
    content += “<title>Example</title>”;
    content += ‘</head><body bgcolor=”#ccc”>’;
    content += “<p>Any HTML will work, just make sure to escape \”quotes\”,”;
    content += ‘or use single-quotes instead.</p>’;
    content += “<p>You can even pass parameters… (” + x + “)</p>”;
    content += “</body></html>”;
    linkWin.document.open();
    linkWin.document.write(content);
    linkWin.document.close();
    //return false;
  }
</script>
</head>
<body>
<a href=”javascript:testwindow(‘this is x’);”>TEST</a>
</body>
</html>

NOTE: there is one small performance tradeoff here,  in the ‘new’ case you will always be downloading the content of the popup, even if you never use it.  This can be remediated by adding it to an external static .JS file.
Cheers!