Development

Development

“Google Browser Size is a visualization of browser window sizes for people who visit Google. For example, the “90%” contour means that 90% of people visiting Google have their browser window open to at least this size or larger.

This is useful for ensuring that important parts of a page’s user interface are visible by a wide audience. On the example page that you see when you first visit this site, there is a “donate now” button which falls within the 80% contour, meaning that 20% of users cannot see this button when they first visit the page. 20% is a significant number; knowing this fact would encourage the designer to move the button much higher in the page so it can be seen without scrolling.”

This is a great reference tool for general WWW screen resolution data and information. It’s such a handy tool to quickly grasp what the world’s browser (desktop) resolution is. Of course, you should always consider your own visitors’ resolution, but this provides a good benchmark.

Go check it out at: http://browsersize.googlelabs.com/

How to use
To view your own Web site with this same visualization overlaid on it, simply type its URL into the “Enter URL here” textbox at the top of the window and click Go.

Notes:

  • You can change the opacity of the overlay by clicking the gray boxes next to the word “Opacity” at the top of the window.
  • As you move the mouse around the window, you will see a transparent rectangle following the mouse pointer. This feature allows you to interact normally with the page you’re examining even though it has a graphical overlay atop it.
  • The sizes represented in this contour are client area sizes, not browser window sizes. This means they represent the size of the browser without the title bar, toolbars, status bars, etc., and thus give a true representation of how much content can be seen by a particular segment of the Web-using population.
  • Browser Size works best on web pages with a fixed layout aligned to the left. If the content reflows as the width is adjusted or it is centered, then the results can be misleading. In this case, you can obtain more accurate results by reducing the browser width to a percentage column, e.g. 90% and seeing what content falls below the 90% horizontal line.
  • If you have comments or suggestions, please feel free to contact them at browser-size-external-feedback@google.com.

I’m currently working on a PHP project focused on PDF report generation. To develop locally, I’m using MAMP Pro 1.9 and TCPDF 4.9.018. Upon installation of TCPDF, I encountered the following errors:

MAMP 403
TCPDF ERROR: Could not include font definition file: helvetica

To overcome these issues:

  1. Check your log files; they will most likely provide additional details about the error your encountering. In my case, the log stated: “Directory index forbidden by rule”. Ensure that proper permissions are applied to the “tcpdf” folder.
  2. Configure the “tcpdf” > “config” > tcpdf_config.php file properly. There are two settings that you need to modify based on your local environment:

define ('K_PATH_MAIN', $k_path_main);
define ('K_PATH_URL', $k_path_url);

Set K_PATH_MAIN to your local “tcpdf” installation directory. Don’t forget the trailing “/”. If you omit the trailing “/” it will cause multiple issues regarding path references when you try to access tcpdf. For example: “/var/www/tcpdf/”.

Set K_PATH_URL to your URL path to tcpdf installation folder. For example: “http://localhost/tcpdf/”.

Tags: , , ,

Recently, I ran across an IE6 issue relating to jQuery and select options. The error message from IE6 was “Could not set the selected property. Unspecified error.“, which appears to be related to a timing issue with the DOM.

Here’s the original code, which worked for IE7 and IE8:

function loadSelectItems(selOptions, ctrl, id) {
(ctrl).html(selOptions);
$(ctrl).val(id);
}

And here’s the solution, with no special browser hacks:

function loadSelectItems(selOptions, ctrl, id) {
$(ctrl).html(selOptions);
try {
$(ctrl).val(id);
}
catch(ex) {
setTimeout("$('" + ctrl + "').val('" + id + "')",1);
}
}

The setTimeout function provides enough delay, making the DOM available.

Tags: ,

The jQuery team recently released version 1.4 of their widely popular JavaScript library. This release includes significant performance improvements.

Many of the most popular and commonly used jQuery methods have seen a significant rewrite in jQuery 1.4. When analyzing the code base we found that we were able to make some significant performance gains by comparing jQuery against itself: Seeing how many internal function calls were being made and to work to reduce the complexity of the code base.

jQuery 1.4 addressed 207 bugs vs. 97 bugs in the 1.3 release. It also supports the following browsers 100%: Safari 3.2, Safari 4, Firefox 2, Firefox 3, Firefox 3.5, IE 6, IE 7, IE 8, Opera 10.10, and Chrome.

Ensure that you read through the list of potentially-breaking changes to be aware of what might cause problems in your applications.

jQuery 1.4 Full Release Notes

Tags: ,

Jeremy Keith and Brad Colbow explain the difference between the two markup languages in simple terms.

XHTML 2

Contrary to some beliefs, XHTML 2 does not have anything to do with XHTML 1.0 or XHTML 1.1. XHTML 1.0 is simply a reformulation of HTML 4 with XML syntax.

  • lowercase tags and attribute names
  • quoted attribute values
  • mandatory closing tags for p and li elements
  • a slash (terminator) at the end of standalone elements such as img, br and meta

XHTML 1.1 is the same reforumulation but requires that documents be served with an XML mime-type.

Read the rest of this entry »

Tags: ,