Giant Geek Blog

Migrating between various javascript frameworks can often prove difficult, especially when developers become comfortable with the specific features of one library. Here is a feature that I’ve seen used in PrototypeJS that does not exist in jQuery, but can easily be added with a new function.

PrototypeJS provides an identify(el);function … Element.identify(el);. This is powerful in the sense that it returns the ‘id’ of an element, or automatically generates and assigns one when it is empty.

For jQuery the following can be added to emulate the functionality.

jQuery.fn.identify = function(prefix) {
var i = 0;
return this.each(function() {
if($(this).attr('id')) return;
do {
i++;
var id = prefix + '_' + i;
} while(document.getElementById(id) != null);
$(this).attr('id', id);
});
};

(function($) {// Compliant with jquery.noConflict()
$('span').identify('test');
})(jQuery);


Logging is often an overlooked performance drain on systems requiring high throughput. Here’s a simple change to the default Tomcat logging configuration to implement. It works on all operating systems.

In the file:
$TOMCAT_HOME/conf/logging.properties

Change:
.handlers = 1catalina.org.apache.juli.FileHandler, java.util.logging.ConsoleHandler

to
.handlers = 1catalina.org.apache.juli.FileHandler

REFERENCES:

Yahoo! initially introduced a CSS class that can be used to notify robots/spiders that a specific section or fragment of content should not be included for search purposes.

class=”robots-noindex”

REFERENCES:

There are a few steps that I generally take to setup a new Tomcat server instance, this enables the following:

• The manager console
• HTTP compression
• UTF-8 encoding

Steps:

1. tomcat-users.xml – add to bottom:
   
<role rolename="manager-gui"/>
<user username="tomcat" password="s3cr3t" roles="manager-gui"/>


2. server.xml – add compression and URIEncoding, change port if desired:
   
<Connector port="8080" protocol="HTTP/1.1"
connectionTimeout="20000"
redirectPort="8443" compression="on" URIEncoding="UTF-8" />


3. server.xml – relocate webapps by adding ../ to appBase
   
<Host name="localhost" appBase="../webapps"
unpackWARs="true" autoDeploy="true">


4. Restart your server, on Ubuntu use:

   sudo service tomcat7 restart

The use of CSS cursors within your browser based application or website is a great way to add feedback to the user to increase usability. This is increasingly important for AJAX applications that may be “busy” even when the user is not directly taking action within their browser.

These are all easily appended to classes in your CSS files:

• default
• auto
• inherit
• pointer
• crosshair
• text
• help
• move
• progress
• wait
• e-resize
• ne-resize
• n-resize
• nw-resize
• w-resize
• sw-resize
• s-resize
• se-resize

Partial (CSS3) support in current browsers:

• none
• all-scroll
• context-menu
• cell
• vertical-text
• alias
• copy
• no-drop
• not-allowed
• col-resize
• row-resize
• ew-resize
• ns-resize
• nesw-resize
• nwse-resize

NOTE: for very old browser, you can also set several attributes to allow for the supported one to be used.

.example {
cursor:hand;/* IE5-IE5.5 only support (dropped in IE9) */
cursor:pointer; /* IE6 and later */
}


REFERENCES:

I was scanning my server log files the other day and found that this old “bot” is still making the rounds. It help’s to shut the door on this with some configuration. It’s specifically looking for PHP vulnerabilities and is easily identified by the expletive in it’s User-Agent HTTP request headers.

REFERENCES:

This HTTP Header is a feature added by MSIE8 to force it to restrict some XSS vectors that can be disabled by the user. Generally you can add it into your webserver configuration.

X-XSS-Protection: 1; mode=block

REFERENCES:

Crossdomain access can be enabled in JavaScript with a mechanism similar to that in Flash. Instead of hosting a crossdomain.xml file though, crossdomain access is enabled per file, through an additional HTTP response header:

Access-Control-Allow-Origin: *

CORS is a more modern equivalent to JSONP for cross-domain XmlHttpRequests(AJAX) with options to limit domains, subdomains and ports.

Initial browser support:

• Firefox 3.5
• Chrome 4
• Safari 3.2
• MSIE 8

REFERENCES:

Adobe FlashPlayer 7 added several security features. I first became aware of this one as I saw a large number of HTTP 404 errors for a file named ‘crossdomain.xml’ in my webserver logs.

If you use flash on your website, I’d suggest adding an appropriate copy of this file to limit your exposure to some potential security issues.

Restricted domains

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
<allow-access-from domain="*.example.com" />
<allow-access-from domain="example.com" />
</cross-domain-policy>


Open to all domains (not recommended, but fully backward compatible)

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
<site-control permitted-cross-domain-policies="master-only"/>
<allow-access-from domain="*"/>
<allow-http-request-headers-from domain="*" headers="*"/>
</cross-domain-policy>


REFERENCES:

The use of non-traditional web fonts was once a very challenging task due to various browser specific implementations. Thankfully Google WebFonts have made this easy enough for most developers to add in a cross-browser manner in a matter of minutes.

WARNING, there are a few considerations to make here…

1. Some browsers displays a blank space in place of the text that uses the font.
2. … and then re-render text in the web font once it has loaded

Method 1: (most compatible, but cross-browser loading behavior varies)

<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,700' rel='stylesheet' type='text/css' />
<style type="text/css">
h1,p { font-family: 'Ubuntu', sans-serif; }
</style>


Method 2: (requires javascript, but is consistent cross-browser)

<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Ubuntu Mono','Ubuntu' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
</script>
<style type="text/css">
h1 { font-family: 'Ubuntu Mono','Courier New',monospace; }
p { font-family: 'Ubuntu','sans-serif'; }
</style>