With the rate of updates and security patches for Java, administration of your Ubuntu machines can become tedious. There’s a better way… allow it to check for and update with your other software. The steps are easy…
sudo add-apt-repository ppa:webupd8team/java
sudo apt-get update
sudo apt-get install oracle-java7-installer
REFERENCES:
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:
Partial (CSS3) support in current browsers:
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:
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:
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…
- Some browsers displays a blank space in place of the text that uses the font.
- … 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>
Most developers (myself included) are often unaware of the performance impact of the Content-Type / charset of a web page. Ideally you should set this as an HTTP Header vs. using META http-equiv. It’s often though that this only helps with the transport and display of data, however, the browser also makes use of it when parsing CSS & JS assets. Tags related to those provide an optional ‘charset‘ attribute should they ever need to vary from your content.
General guidance is to set this at the very top of the <head> before <title> and within the first 1024 bytes, though there are reports that Firefox will look at the first 2048 bytes of the page for this META information.
Not doing so may cause the browser to do a codepage restart to re-parse assets that were interpreted in the potentially incorrect codepage.
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
REFERENCES:
Here’s an odd one…. I’ve found that if you use the common method of using Conditional Comments to separate MSIE specific CSS, you’ve likely added a performance problem without knowing it… that is, in addition to the network connection and time required for the different CSS files.
It turns out that the standard use of this approach blocks the other downloads until the main CSS is loaded.
The solution is both simple and painless to implement…. just add an empty condition above all of the other content. This works for all approaches, such as those where comments surround the <body> or various <link>, <style> or <script> tags.
<!DOCTYPE html>
<!--[if IE]><![endif]-->
<html lang="en">
...
REFERENCES:
As mobile devices become more prevalent in the web development domain, it is often advisable to provide appropriate CSS for each layout.
Here’s a starting point for browsers that support.
<style type="text/css">
@media all and (orientation:portrait) {
/* css adjustments for portrait go here */
}
@media all and (orientation:landscape) {
/* css adjustments for landscape go here */
}
</style>
Best practices for web applications often call for the use of a CDN. Those of you that have worked with YSlow! are likely very accustomed to seeing warnings for this reason. I’ve found that CloudFlare is very easy to setup, and for basic services costs absolutely nothing. In addition to the obvious performance advantages of using a CDN to offload much of your network traffic, it also has the advantage of improved security.
CDN’s work by caching a copy of your static content at several locations around the world, making it closer and faster for your users.
Implementation takes only minutes as it requires that you:
Some additional advantages I’ve seen since implementing:
REFERENCES:
Often you find a neeed to keep an old copy of Firefox around for testing or to use a specific plugin (Example: Selenium). In these cases it can often prove problematic to allow the browser to auto-update. Here are some simple steps to prevent this behavior.
Enter “about:config” into the Firefox URL bar, then change the following values. You can click on them to toggle.
app.update.auto = false
app.update.enabled = false
Alternately, on Windows you can edit the config file at: %APPDATA%\Mozilla\Firefox\Profiles\
REFERENCES:
In the past few years the browser wars have heated up again. Performance and capabilities of some browsers varies greatly. There are several standard tests that are publicly available to benchmark your systems. WebKit (Safari, Chrome & Chromium) and Mozilla (Firefox) based browsers, as well as Opera perform pretty well, MSIE is currently trailing in most cases.
Here are a few common ones…