CSS media queries for landscape vs. portrait orientation

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>

Cloudflare CDN (Content Delivery Network)

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:

  1. create a (free) account,
  2. retrieve your existing DNS values from your current provider,
  3. determine direct vs. CDN “cloud” routing for each subdomain,
  4. change your DNS records to point to the CloudFlare DNS servers

Some additional advantages I’ve seen since implementing:

  • Site remains available in limited capability to users during server outages or upgrades.
  • Simplified network configuration as all requests can be sent outside of the LAN for users local to the servers
  • IPv6 dual-stack support

REFERENCES:

Prevent Firefox browser auto update

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\.default\prefs.js

REFERENCES:

X-Download-Options:noopen to download files

There are a couple of steps required to force a browser to save/download content instead of displaying it in the browser window.


X-Download-Options: noopen
X-Content-Type-Options:nosniff
Content-Disposition: attachment; filename=example.txt
Content-Type: text/plain

NOTE: MSIE also supports a poorly documented proprietary META tag…

<meta name="DownloadOptions" content="noopen|nosave" />

REFERENCES:

X-Content-Type-Options: nosniff

To prevent XSS/CSRF exploits in MSIE8 and newer, it’s often best to close as many attack vectors as possible. An easy one to implement is an HTTP Header to prevent MSIE from “sniffing” the content to change it when incorrect.

Example: we would not want an HTML page intentionally served with ‘text/plain’ to be rendered as HTML.


X-Content-Type-Options: nosniff
Content-Type: text/plain

This could be added programatically to pages in your application, via a servlet or servlet filter or added to the httpd.conf file.

Apache2 example: httpd.conf

<IfModule headers_module>
Header set X-Content-Type-Options nosniff
</IfModule>

REFERENCES:

window.location.reload(true);

While working on legacy apps, you might occasionally find that a developer has written a function to reload the existing page. I’ve found that in many cases, the optional javascript argument is neglected in this case and thus the ‘cached’ copy of the page is presented, often showing stale or invalid data. The solution here is simple, always specify ‘true’ to force the page to be requested from the server.


<script type="text/javascript">
window.location.reload(true);//NOTE: 'true' forces NON-cached copy to be returned
</script>

REFERENCES:

No JavaScript support

There are still a measurable number of internet users that browse without the use of JavaScript, use the NoScript plugin, or have disabled it for security purposes. In those cases, as well as for SEO. It’s often a good idea to manipulate the display to better accomodate these users. One of the most common methods is shown below, as we can toggle a CSS class on the HTML tag easily and use CSS “cascade” to hide or show alternate content.

NOTE: this example currently requires PrototypeJS, but can easily be changed to not do so.


<!DOCTYPE html>
<html class="no-js">
<head>
<script type="text/javascript">
var ar = document.getElementsByTagName('html');
var i = ar.length;// should only be one!
while(i--){
Element.removeClassName(ar[i],'no-js');
}
</script>
<style type="text/css>
html .no-js-show { display:none; }
html.no-js .no-js-show { display:block; }
html.no-js .no-js-hide { display:none; }
</style>
</head>
<body>
JavaScript is:
<p class="no-js-hide">enabled</p>
<p class="no-js-show">JavaScript is disabled</p>
</body>
</html>

nbsp; and other common entities do not validate as HTML5!

The only built-in entities in XML are &, <, >, " and ' XHTML added the others via a DTD that is not a part of HTML5. As such, validators will report them as errors.

Safe replacements are the decimal notation: &#160; or the character itself U+00A0;

Quite a few other common symbols are not available without similar changes.

  • &lt; = &#60;
  • &gt; = &#62;
  • &amp; = &#38;
  • &apos; = &#39;
  • &quot; = &#34;
  • &nbsp;&#160;
  • &copy; = &#169;
  • &reg; = &#174;
  • &trade; = &#8482;

REFERENCES: