pinterest

Alex Jones

I lead teams at the intersection of strategy and design. Autodidact. Polymath. Barbecue acolyte. I start fires (the good kind).

Web Development

PHP Progress Bar

An interesting idea was posted to eVolt’s TheList in the form of a tip: using PHP’s flushing buffer to create a progress bar for large PHP applications. Juha Suni, the author of the tip, provided the following code, noting, that “you can use the flush()-function to push more data to the browser while the script is running. This data being elements for small pieces of the progress bar, you can rather easily have a universal solution for all heavy scripts”. The code below is as posted, the only changes are a couple of formatting tweaks for display on this site. I haven’t implemented it as of yet, so I can’t vouch for it’s functionality.


ob_end_flush(); // This should be called at start

// Load all data and process it ready for looping

// Do some preliminary calculations, such as:
$totalloops = 38;
$percent_per_loop = 100 / $totalloops;
$prev_percent = 0;

// print html/css for the part above the progress bar
// as well as possible background of the actual progress bar
// in such a way that the images for the progress bar (coming next)
// align themselves nicely
// (This example fits 100 images next to each other, each
// representing 1 percent of progress.

// Start looping:
for($i=1;$i< =$totalloops;$i++) {

    // do stuff
    // echo progress if at least an advance of 1 percent
    // occured since last loop
    $percent_now = round($i * $percent_per_loop);
    if($percent_now != $percent_last) {
        $difference = $percent_now - $percent_last;
        for($j=1;$j<=$difference;$j++) {
            echo '';
            }
       $percent_last = $percent_now;
       flush(); // Push the new data to the browser;
        }
}

// In the end print necessary code to the end of the html.

Juha notes, “on some occasions, the webserver, proxy or the client browser can buffer data no matter what you do, so this will not work 100% for everyone at every situation”. Still, this is a great idea, and one sorely needed for some major PHP apps.

Update: Juha has posted a nice demo of the script (no longer live), which “loops the sleep(1)-command for 14 times”. He also added a counter that displays the percentage that has been completed. Juha mentioned that he hopes to find the time to clean it up and implement the counter as a package for use in other scripts and projects. That would be great to see!

Update 2: Juha has posted a zipped up collection (see update 3 below) of the PHP source files and associated images.

Update 3: It appears that Juha’s site is down. I don’t have a demo to point to, but it appears someone else posted the script, which you can find here.

Uncollapsing Margins

Eric Meyer has published another great resource for the Web development community: Uncollapsing Margins discusses “how margin collapsing can lead to weird behaviors, why these behaviors arise, and ways to work around it when you want a different result. If you’ve ever tried to figure out why a heading’s top margin seems to disappear when it’s the first thing in a div, this article will be of interest.”

Margin collapsing is one of the most confusing aspects of CSS as it isn’t mentioned very often, and until this article, I hadn’t seen a comprehensive explanation of why it happens, and how to “un-collapse” them. Yes, some people posted work in various forums and lists, but Eric has taken the time to tie everything together.

For anyone unfamiliar with Eric, he is the author of many great CSS books, including:

CSS Methodology

I’ve been trading e-mails with a colleague for the last few days and he asked if there are any CSS methodologies available. While I have practices that I consistently follow, I do not know of any that are wide-spread or commonly accepted as the best way to set up and maintain style sheets. So, I sent an e-mail to the CSS-D list to gather the feedback of other designers and developers. Below is the e-mail I sent sans-introduction which you just read.

So, does anyone know of a good methodology already in existence? If not, anyone interested in assisting me as I begin to document and revise one?

In case there aren’t any, here are a some of the practices I follow. Please feel free to let me know of poor decisions in my methods, and suggest new ones!

Style Sheet Organization

  • Classes, IDs and elements are listed in alphabetical order unless otherwise noted. The properties of each class, element and ID are in alphabetical order as well. So the “acronym” tag comes before the “body” tag which comes before the “price” ID in the stylesheet. I find this makes it much easier for me and other developers to locate specific items within the stylesheet quickly.
  • The link pseudo-classes are grouped together, but do not follow the alphabetical organization within that grouping as some browsers will use the last pseudo-class listed, even if the more accurate one is listed earlier. Rather annoying.
  • When possible, elements should be grouped if they have a common attribute, or set of attributes. An example would be to assign the same font to the “body”, “p”, “input” and “td”:

    body, input, p, td {
    font: small Georgia, Garamond, "Times New Roman", serif;
    }
  • When possible descendant styles should be used to cut down on the code in the style sheets. Below is an example of applying a specific style to an input element within a form with an element that has been assigned the “Purchase” class. Example:

    .Purchase form input {
    border: 1px solid #654819;
    height: 18px;
    }

Style Naming Convention

  • Classes and IDs use mixed case to make them easier to read. In the HTML 4.01 spec, classes and IDs are case sensitive; though some browsers do not recognize the fact. Elements are left in lower case. I know this one may end up being controversial as naming conventions often tend to be
  • Do not start an ID or class with a digit or use underscores as they may not work in all browsers.
  • Classes and IDS should never be an adjective or infer placement as a future redesign may not place the item in the same spot, or use the same background color. So, instead of using an ID of “TopBox”, use an ID specific to its contents, perhaps “GlobalNav”.