Category: WebStandards

Enforcing and encouraging online standards such as XHTML, CSS, JavaScript.

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!

JSON – JavaScript Object Notation

Here’s another simple way to optimize code and network traffic. XML… by it’s very definition is wasteful as it exchanges size for readability. JSON is a different approach that maintains readability as well as reduces the size to a minimum. This method can be used in any client-server environment, not just between a browser and server.

JSON (JavaScript Object Notation) is a lightweight data-interchange format that is easy for humans to and machines to read/parse and write/generate. JSON is a text format that is completely language independent but uses conventions that are familiar to most programmers familiar with OO languages.

JSON is built on two structures:

  • A collection of name/value pairs. In various languages, this is realized as an object, record, struct, dictionary, hash table, keyed list, or associative array.
  • An ordered list of values. In most languages, this is realized as an array, vector, list, or sequence.

Key Concepts:

  • An object is an unordered set of name/value pairs. An object begins with { (left brace) and ends with } (right brace). Each name is followed by : (colon) and the name/value pairs are separated by , (comma).
  • An array is an ordered collection of values. An array begins with [ (left bracket) and ends with ] (right bracket). Values are separated by , (comma).
  • A value can be a string in double quotes, or a number, or true or false or null, or an object or an array. These structures can be nested.
  • A string is a collection of zero or more Unicode characters, wrapped in double quotes, using backslash escapes. A character is represented as a single character string. A string is very much like a C or Java string.
  • A number is very much like a C or Java number, except that the octal and hexadecimal formats are not used.

REFERENCES:

Cheers!

Improving network performance with server side HTTP Compression

I spend a lot of my time tweaking the performance of web applications, in addition to optimizing code it’s also necessary to verify that your server settings are also optimized for network performance to reduce bandwidth usage and thus client response times.

NOTE: This is a tradeoff between CPU and network performance, it works by compressing the content on the server just before it is sent over the wire…. when the client receives it, it then also spends some of it’s resources to decompress the content.

The Apache HTTP server provided mod_deflate (for 2.x) or mod_gzip (for 1.3).

Here’s a quick start as well as a few references:

In httpd.conf:

1. Uncomment the module:

LoadModule deflate_module modules/mod_deflate.so

2. Add the following (modify if required):

<IfModule deflate_module>
#AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript
AddOutputFilterByType DEFLATE text/*
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
#AddOutputFilterByType DEFLATE application/x-javascript

<Location />
# Insert filter
SetOutputFilter DEFLATE

# Netscape 4.x has some problems…
BrowserMatch ^Mozilla/4 gzip-only-text/html

# Netscape 4.06-4.08 have some more problems
BrowserMatch ^Mozilla/4\.0[678] no-gzip

# MSIE masquerades as Netscape, but it is fine
# BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

# NOTE: Due to a bug in mod_setenvif up to Apache 2.0.48
# the above regex won’t work. You can use the following
# workaround to get the desired effect:
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html

# Don’t compress images or ZIP/GZ/7Z
SetEnvIfNoCase Request_URI \
\.(?:gif|jpe?g|png|zip|7z|gz)$ no-gzip dont-vary

# Make sure proxies don’t deliver the wrong content
Header append Vary User-Agent env=!dont-vary
</Location>
</IfModule>

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!

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! 

Add HTTP Headers in Apache Response

This can be used to for several reasons:

  1. To add headers to modify the behavior of a specific ‘misbehaving’ browser or client.
  2. To replace headers that you don’t want leaked to the Internet.
  3. To add monitoring information to your server responses.

Changes can be accomplished in the Apache2 ‘httpd.conf’ file.

  1. Verify that the module is not disabled or commented out:

    LoadModule headers_module modules/mod_headers.so

  2. To add some common metrics:

    <IfModule headers_module>
    Header append MyHeader “%D %t”
    </IfModule>

  3. To Hide the HTTP Server header that you send in your responses (often done for security through obscurity):
    <IfModule headers_module>
    Header unset Server
    </IfModule>
  4. You could also replace the Server Header like this:

    <IfModule headers_module>
    Header set Server “ScottServer 1.0”
    </IfModule>

Cheers!
REFERENCES:

Configuring Apache webserver for browser caching of web content…

This is a HUGE topic, I’ve outlined some simple steps below as well as my initial configuration for you to start with…

NOTE: this is for simple ‘static’ content such as images, additional work is required for dynamic (program generated) content, such as that generated in PHP.

1. In ‘httpd.conf’ make sure the following line is uncommented.

LoadModule expires_module modules/mod_expires.so

2.  In ‘httpd.conf’ add the following:

ExpiresActive On
### Expire images 1 day from when they’re accessed
ExpiresByType application/java-archive “access plus 1 day”
ExpiresByType image/gif “access plus 1 day”
ExpiresByType image/png “access plus 1 day”
ExpiresByType image/jpg “access plus 1 day”
ExpiresByType image/jpeg “access plus 1 day”
ExpiresByType image/x-icon “access plus 1 day”
ExpiresByType text/css “access plus 1 day”
ExpiresByType text/javascript “access plus 1 day”
ExpiresByType text/xml “access plus 1 day”
ExpiresByType application/xml “access plus 1 day”
ExpiresByType text/plain “access plus 1 month”
 

3. (Optional) Set default expiry of content in ‘httpd.conf’:

### Expire everything else 1 day from when it’s last modified
ExpiresDefault “modified plus 1 day”

NOTE: These we’re my original settings, you may want to add attitional MIME type and expiry configurations particular to your web content.

REFERENCES:

CSS ‘id’ vs. ‘class’

This is a fairily standard interview question for someone that claims to understand CSS, but you’d be amazed at the number of developers that just don’t get it.

Assuming

<style type=”text/css”>
div#error { color:red; }
div.error { color:red; }
</style>
<div id=”error”>This is error text shown in red.</div>
<div class=”error”>This is also error text</div>

Notice that an ID’s CSS is an HTML element, followed by a “#”, and finally ID’s name – “element#idname”.

Also, be sure to absorb the fact that when an id is used in HTML we must use ‘id=”name”‘ instead of ‘class=”name”‘ to reference it!

A simple way to remember this is to refer back to how you think of page anchors. Those URL’s must also be unique and use the “#”.

Why Did They Choose Those Names??

  • ID = A person’s Identification (ID) is unique to one person.
  • Class = There are many people in a class.

NOTE: You can also use inline styling (with no id or class), or style the HTML elements themselves, but those will be covered in a later posts.

HTTP is deprecated?

I found this several years ago, and ‘most’ of my websites implement this standard.

While “http://” implies IP Port 80, and “https://” implies IP Port 443, the payload of such traffic is no longer limited to HyperText (the “HT” in HTTP). To support future protocols, it is advised that websites not force this upon future implementations of the IP stack.

Unfortunately, there is ONE case that implementation of this process can cause your websites. If you run on non-standard ports (or use HTTPS), you’ll still need the protocol (“http:” or “https:”) on the links used to swap protocols.

Obvious advantage here is that all of your links can be shortened.

More information is available at:

http://www.no-http.org/

Cheers!