The common things we could put a finger on were 1) it would seem to happen with a raw/initial page load (e.g., in a brand new incognito window), 2) it would not hang up anymore after that first page load, and 3) it seemed to happen only if we loaded neatoshop.com which was then redirected to www.neatoshop.com.

It took a ton of code profiling and countless attempts to reproduce the problem (because it didn’t happen for me on every new incognito page load), but I finally traced the delay down to session_start(). This didn’t really make sense to me because we’ve used php5-memcache (obviously with Memcached) for handling sessions with redundancy across our 7 web servers, and nothing regarding sessions nor Memcached changed on our end any time recently. So what could the problem be?

It started to seem like a pointless shot in the dark to keep googling for clues, but something that stuck out in my mind were reports of session files getting locked if there were two simultaneous requests from the same user. This didn’t seem to apply since we’re dealing with Memcached sessions and not file-based sessions, but then I noticed the new memcache.lock_timeout option in php5-memcache v3.0.4 which has a default value of 15 seconds.

Hmm… 15 seconds with a lock on two simultaneous requests seems like it could result in a 30 second delay… ya think? There’s one way to find out.

I tried changing the memcache.lock_timeout value to 2 seconds then trying to repro the problem. Once it seemed like I got the hang-up to occur, I held my breath and the page hung for 4 seconds before loading. Then I changed the value to 1 second and tried again, and as I’d hoped, the loading time was 2 seconds!

Finally, I’ve reduced the value to 0 seconds and there seems to no longer be any delay. I’m not certain of any side effects or unintended consequences of setting the value to zero, but whatever they are, they are insignificant as compared to every customer on an e-commerce site occasionally being subjected to a 30-second delay. I just thought I should share this tale of woe, as I couldn’t really find any good info on it, and I’m assuming there must be others facing the same issue.

Update!

After reducing the value to zero, I started getting reports of slow load times again, which indicates a value of zero is not valid because it causes the default of 15 seconds to be used. So we’re stuck using a 1-second lock_timeout, which is the only acceptable solution, but a 2-second delay is much better than 30 seconds!

1. User loads the home page. Angular fetches the template and inserts it into the ng-view.
2. User scrolls down the page a bit, say 600px.
3. User clicks a link to another page. Angular fetches the requested page’s template and inserts it into the ng-view, but the browser stays scrolled 600px, so the user doesn’t actually see the content they loaded.
4. User clicks the browser’s back button and sees again the content they were at before clicking the link.

The quick, dirty, incomplete “solution” to this might be to simply detect when the route is changing and auto-scroll to the top of the window in all cases. However, if we did that, upon clicking back in step 4 above, the browser would scroll back to the top of the page instead of landing the user back where they came from. So what we need is a real solution that will auto-scroll to the top of the page when a *new* page is loaded, but allow the browser to restore the scroll position for any page that was navigated away from.

My first thought was to just store the most recently viewed page and detect a new page load, compare the new page to the most recent page, and if it’s different, scroll to the top. This doesn’t work, however, when the user clicks back more than one page.

My second thought was to just store the history of pages viewed and only scroll to top if the newly loaded page is not in that history. This, however, doesn’t take into consideration that a user may go back in the browser then go forward again, and if they go forward to a page they just came from, we don’t want that scrolling away on them.

No, what we need is to store the history of all pages loaded both backward and forward. Below is the solution I implemented which stores the current page, a stack for all backward pages, and another stack for all forward pages. When the location changes, the new URL is compared to the top of the backward stack and the forward stack. If it’s either one, the matching element is popped and we leave the scroll position where it is. If it’s neither, the user must be linking forward into a new path, so the forward stack is emptied.

Overall the solution works pretty nicely. The only less-than-usual thing to be aware of is that if you click a link that takes you backward or forward one page (i.e., instead of clicking the back button back to the homepage you click a “home” link), it will look to the code like you used your back button and leave the scroll position unchanged, but I actually like that behavior. It makes the whole SPA thing feel much more solid.

[GitHUB »]

<script>
// first thing's first; initialize the app
var app = angular.module('yourAppName', ['ngRoute']);// '

// use $rootScope since this is for application-wide behavior
app.run(function _bwdFwdDetect($rootScope, $location) {
  $rootScope.path = $location.path();// stores only the current page being viewed
  $rootScope.pathBwd = [];// stores up to the last page viewed before the current one
  $rootScope.pathFwd = [];// stores starting with the page viewed before coming back to the current one

  // detect that the location is about to change
  $rootScope.$on('$locationChangeStart', function(event) {
    var newPath = $location.path();// take note of the new path (using path instead of url is good)

    // grab the last backward page for comparison
    var bwd = !$rootScope.pathBwd.length ? null :
      $rootScope.pathBwd[$rootScope.pathBwd.length - 1];

    // grab the last forward page for comparison
    var fwd = !$rootScope.pathFwd.length ? null :
      $rootScope.pathFwd[$rootScope.pathFwd.length - 1];

    // if the new page is the last backward page, assume the user went "back"
    if (bwd == newPath) {
      // it's no longer the last backward page, so remove it
      $rootScope.pathBwd.pop();

      // and push into the forward stack the page we're just leaving to go backward from
      $rootScope.pathFwd.push($rootScope.path);
    }
    // the new page is the last page we came backward from, assume the user went "forward"
    else if (fwd == newPath) {
      // it's no longer the last forward page, so remove it
      $rootScope.pathFwd.pop();

      // and push into the backward stack the page we're going forward away from
      $rootScope.pathBwd.push($rootScope.path);
    }
    // we didn't go back or forward; assume it's a new forward trail being started
    else if ($rootScope.path != newPath) {
      // remember the page we're leaving as our last backward page
      $rootScope.pathBwd.push($rootScope.path);

      // empty out our forward stack since we're now starting a wholly new forward path
      $rootScope.pathFwd = [];

      // this is what it's all about; scroll to the top of the freshly-loaded page
      $('html,body').animate({ scrollTop: 0 }, 'slow');
    }

    // now that we're done with our comparisons, we can remember our new current page
    $rootScope.path = newPath;
  });
});
</script>

Of course this whole “new page detection” thing I’m doing doesn’t only have to be used to scroll to the top of the page. There could be any number of things you might want to do depending on whether the route is changing backward or forward or down a new path.

At the moment I’ve been delving head-first into some modern frameworks like AngularJS and Bootstrap, so I plan to document things I learn along the way that I think will help other developers also new to these technologies who might come up against some of the same issues or who might just find interesting the things I’m discovering.

Without further ado, this is my first of such posts, which is a little more advanced than just starting to learn everything from scratch, but I do plan to back-track and cover more in future posts the basics of using AngularJS.

If you’re developing a Single Page Application (SPA) with Angular, you may find that loading an HTML fragment with a form input that should be auto-focused might not work. Assuming you’ve already set up ngRoute to dynamically control the routing of your application, the simplest way I came up with to set focus on an input after ensuring the HTML template is fully loaded is to define a callback for $routeChangeSuccess which is invoked after the route has finished changing. The best place to respond to that event is in a run block, since it’s an application-wide action we’re taking. The trick is that the DOM may still not be ready for you to set focus at that point, but setting focus inside a $timeout will ensure the $digest loop has ended.

The other, more obvious decision was to ensure the input I want to auto-focus has the “autofocus” attribute so it can be targeted using a simple jQuery selector. Below is a bit of sample code demonstrating what I just described with comments, so hopefully it’s all pretty obvious to you (and it should be if you’re using Angular yourself).

[GitHUB »]

<script>
// first thing's first; initialize the app
var app = angular.module('yourAppName', ['ngRoute']);// '

//... do other things like set up your routing (not covered here)

// set up a Run Block
app.run(function _forceAutofocus($rootScope, $timeout) {

  // tell Angular to call this function when a route change completes
  $rootScope.$on('$routeChangeSuccess', function() {
    // we can't set focus at this point; the DOM isn't ready for us

    // instead, we define a callback to be called after the $digest loop
    $timeout(function(){
      // once this is executed, our input should be focusable, so find (with jQuery)
      // whatever is on the page with the autofocus attribute and focus it; fin.
      $('[autofocus]').focus();
    });
  });

});
</script>

For starters, clicking a BUTTON does not cause its form to be submitted. This means that a user will never be able to submit the form by clicking it. Furthermore, if you are using JavaScript including jQuery to trigger a callback upon form submit, that callback will never be fired.

<form method="post" action="">
  <!-- ... your form fields go here ... -->

  <button name="proceed" value="save">Update Record</button>
  <button name="proceed" value="undo">Cancel</button>
</form>

The easiest fix, which might be your best option, would be to simply replace those BUTTON elements with INPUT elements:

  <input type="submit" name="proceed" value="Update Record"/>
  <input type="submit" name="proceed" value="Cancel"/>

Again, this is a simple fix, and if it satisfies your requirements, you should definitely stick with it. The problems with this, however, are:

1. You may be dealing with legacy or third-party code and you don’t want to go fumbling through thousands of lines of someone else’s code to change their HTML. (This could also break other parts of the system that make assumptions about the fields being of type BUTTON or having a specific value attribute.)
2. The other issue is that you cannot specify an arbitrary value for the fields because the value attribute also doubles as the user-friendly display value.

So, to tackle both of our issues, we’ll need to bind a click handler to every BUTTON on a page contained within a FORM element. We can do this with jQuery by using the following code:

$(document).ready(function(){
  // use live() to handle dynamically added buttons (pre jQuery v1.7)
  $("form button").live('click',function(){
    var f = $(this).get(0).form;

    if (typeof(f) !== 'undefined') {
      if (this.type && this.type != 'submit')
        return;

      if (this.name) {
        this.trueName = this.name;
        this.name = '';
      }

      $("input[type='hidden'][name='"+this.trueName+"']", f).remove();

      if (typeof(this.attributes.value) !== 'undefined')
        $(f)
          .append('');

      $(f).trigger('submit');
      return false;
    }
  });
});
/*
Note: As of jQuery v1.7, live() has been deprecated. You can replace
that line above with the following if you're using the latest jQuery:
  $("form").on("click", "button", function(){
*/

Note that we don’t want this code to be executed in other browsers than IE7 and older, so you should put it into a file, let’s call it ie7.js, and use Microsoft’s conditional comments in your HTML file to import it only if the user is using a version of Internet Explorer before version 8:

<!--[if lt IE 8]>
<script type="text/javascript" src="ie7.js"></script>
<![endif]-->

Now, if you’re interested, let’s consider how that code works. It will cause any click of a BUTTON element contained within a FORM element to trigger the callback we defined. The callback does two important things:

1. It appends a hidden INPUT element to the FORM using the name of the clicked BUTTON and its real value attribute (rather than the display label).
2. It triggers the submit event on the FORM element, so any callbacks you’ve bound on form submission will get executed.

Side note: Fetching the actual “value” attribute can seem a tricky thing to figure out. If you’re just trying to use $button.attr(‘value’) you’ll always get the button label. Instead, we use the “attributes” value of the element.

That should be all you need to get your BUTTON elements working properly in IE7.

As an added bonus, you may want to add a handler to submit your form when the user presses enter while focused on an entry field. To do so, you can use this to trigger the click event on the first non-disabled button in the form:

$(document).ready(function(){
  $("form").on("keypress", "input,select", function(e){
    if (e.keyCode == 13)
      $("button:not(disabled):first", this.form).trigger('click');
  });
});

The php5-uuid functions could definitely use some documentation to clarify how they should be used, but here’s what I’ve gleaned by examining the OSSP source code (found here: http://ossp-uuid.sourcearchive.com/documentation/1.5.1-1ubuntu1/php_2uuid_8c-source.html).

The uuid_make() function takes two arguments when generating v1 or v4, but four arguments are required when generating v3 or v5. The first two arguments have been thoroughly demonstrated and are straightforward, so I’ll skip to the as-yet non-described arguments.

The fourth argument to uuid_make() is: $url
– this is the value that is to be hashed (MD5 for v3, SHA-1 for v5); it may be any string or even null

Here’s a simple class illustrating the proper usage (note that if php5-uuid is not installed on your system, each function call will just return false):

class UUID {
  /**
   * Generates version 1: MAC address
   */
  public static function v1() {
    if (!function_exists('uuid_create'))
      return false;

    $context = $uuid = null;
    uuid_create($context);
    uuid_make($context, UUID_MAKE_V1);
    uuid_export($context, UUID_FMT_STR, $uuid);
    return trim($uuid);
  }

  /**
   * Generates version 3 UUID: MD5 hash of URL
   */
  public static function v3($i_url) {
    if (!function_exists('uuid_create'))
      return false;

    if (!strlen($i_url))
      $i_url = self::v1();

    $context = $namespace = $uuid = null;
    uuid_create($context);
    uuid_create($namespace);

    uuid_make($context, UUID_MAKE_V3, $namespace, $i_url);
    uuid_export($context, UUID_FMT_STR, $uuid);
    return trim($uuid);
  }

  /**
   * Generates version 4 UUID: random
   */
  public static function v4() {
    if (!function_exists('uuid_create'))
      return false;

    $context = $uuid = null;
    uuid_create($context);

    uuid_make($context, UUID_MAKE_V4);
    uuid_export($context, UUID_FMT_STR, $uuid);
    return trim($uuid);
  }

  /**
   * Generates version 5 UUID: SHA-1 hash of URL
   */
  public static function v5($i_url) {
    if (!function_exists('uuid_create'))
      return false;

    if (!strlen($i_url))
      $i_url = self::v1();

    $context = $namespace = $uuid = null;
    uuid_create($context);
    uuid_create($namespace);

    uuid_make($context, UUID_MAKE_V5, $namespace, $i_url);
    uuid_export($context, UUID_FMT_STR, $uuid);
    return trim($uuid);
  }
}

And here’s a demonstration:

for ($i = 1; $i <= 3; ++$i) {
  echo 'microtime = ' . microtime(true) . '
';
  echo "V1 UUID: " . UUID::v1() . '
';
  echo "V3 UUID of URL='abc': " . UUID::v3('abc') . '
';
  echo "V4 UUID: " . UUID::v4() . '
';
  echo "V5 UUID of URL=null: " . UUID::v5(null) . '
';
  echo '
';
}

And the output:

microtime = 1306620716.0457
V1 UUID: 7fddae8e-8977-11e0-bc11-003048c3b1f2
V3 UUID of URL='abc': 522ec739-ca63-3ec5-b082-08ce08ad65e2
V4 UUID: b3851ec7-4871-4527-92b5-ef5616bae1e6
V5 UUID of URL=null: e129f27c-5103-5c5c-844b-cdf0a15e160d
-------------------
microtime = 1306620716.0465
V1 UUID: 7fddb83e-8977-11e0-9e6e-003048c3b1f2
V3 UUID of URL='abc': 522ec739-ca63-3ec5-b082-08ce08ad65e2
V4 UUID: 7e78fe0d-59b8-4637-af7f-e88d221a7d1e
V5 UUID of URL=null: e129f27c-5103-5c5c-844b-cdf0a15e160d
-------------------
microtime = 1306620716.0467
V1 UUID: 7fddbfb4-8977-11e0-a2bc-003048c3b1f2
V3 UUID of URL='abc': 522ec739-ca63-3ec5-b082-08ce08ad65e2
V4 UUID: 12a940c7-0f3f-46a1-bb5f-bdd602e10654
V5 UUID of URL=null: e129f27c-5103-5c5c-844b-cdf0a15e160d

As you can see, the calls to v3() always return the same UUID because the same URL parameter, “abc”, is always supplied. The same goes for the v5() function which is always supplied a null URL.

The v4() UUIDs are always entirely different because they are (pseudo)random. And the v1() calls are very similar but just slightly different because it’s based on the computer’s MAC address and the current time.

The purpose of the plugin is to beautify post titles, post contents, and comments of your WordPress blog. In post contents and comments, the text is made sentence case. In post titles, it is made title case, so all words are capitalized except for a user-defined list of exceptions, such as: of, an, the, etc. It is really targeted at persons with a refined sense of text aesthetics and people who just want their content to look nicer.

Another aesthetic improvement it offers is converting quotation marks, apostrophes, and commas into their “curly” equivalents. You can enable or disable any one, so if you only want double quotes made curly, it is supported.

There are a couple of string user customizations allowed regarding full strings. First, you can define a list of terms for which the case must be preserved. One of the issues with beautifying a body of text is that it may turn lowercase or uppercase terms that are supposed to be capitalized or lowercase, respectively. Some examples are: iPhone, Los Angeles, PHP. The second type of customization is to replace any string with another. If you, for example, wanted to expand any occurrence of “Dr.” to “Doctor” or from “vs” to “versus” that would be possible. (These are pretty mundane examples, but I’m sure you can imagine lots of possibilities for this feature.)

Anyway, I hope you check it out and find it useful. If so, let me know with a comment below. Thanks!

function human_filesize($bytes, $decimals = 2) {
  $sz = 'BKMGTP';
  $factor = floor((strlen($bytes) - 1) / 3);
  return sprintf("%.{$decimals}f", $bytes / pow(1024, $factor)) . @$sz[$factor];
}

Alas, no such function existed, so I wrote one myself, but in the process of looking at the manual, I noticed a lot of different, very lengthy implementations of functions to make sentences uppercase. For example, this snippet was posted by mattalexxpub:

function sentence_case($string) {
    $sentences = preg_split('/([.?!]+)/', $string, -1, PREG_SPLIT_NO_EMPTY|PREG_SPLIT_DELIM_CAPTURE);
    $new_string = '';
    foreach ($sentences as $key => $sentence) {
        $new_string .= ($key & 1) == 0?
            ucfirst(strtolower(trim($sentence))) :
            $sentence.' ';
    }
    return trim($new_string);
}

print sentence_case('HMM. WOW! WHAT?');

// Outputs: "Hmm. Wow! What?"

And this snippet was posted by adefoor:

function sentence_cap($impexp, $sentence_split) {
    $textbad=explode($impexp, $sentence_split);
    $newtext = array();
    foreach ($textbad as $sentence) {
        $sentencegood=ucfirst(strtolower($sentence));
        $newtext[] = $sentencegood;
    }
    $textgood = implode($impexp, $newtext);
    return $textgood;
}

$text = "this is a sentence. this is another sentence! this is the fourth sentence? no, this is the fourth sentence.";
$text = sentence_cap(". ",$text);
$text = sentence_cap("! ",$text);
$text = sentence_cap("? ",$text);

echo $text; // This is a sentence. This is another sentence! This is the fourth sentence? No, this is the fourth sentence.

The long examples continue. I don’t know if there are any better examples in the manual because there was too much to read through, but here’s my solution, which does the sentence uppercasing completely and in a single line of code:

function ucsentence($i_str, $i_lowercase = false) {
  $i_lowercase && ($i_str = strtolower($i_str));
  return preg_replace('/(^|[\.!?]"?\s+)([a-z])/e', '"$1" . ucfirst("$2")', $i_str);
}

You can pass any string as an argument and it will properly uppercase the first letter of each sentence, including if punctuation is contained within quotes. If you specify a non-empty second argument, the function will first make the entire input string lowercase. This is useful when the string is all uppercase, but the default is to not touch the rest of the string.

1. the beginning of the string followed by a lowercase alphabetic
2. a period (.), exclamation (!), or question mark (?) optionally followed by a quotation mark (“), followed by a lowercase alphabetic

If either of those cases is matched, preg_replace will execute the code in its second argument, which prepends the leading character(s), if any, to the uppercase version of alphabetic.

Et voila. Your string is sentence-cased. There are, of course, some caveats. For instance, there are many cases where your string could contain proper nouns, initials, or abbreviations and those such cases might not be handled as you’d like. Here are a couple examples with undesired output:

$str = 'A FOX NAMED MURPHY BROWN JUMPED OVER THE LAZY DOGS.';
echo ucsentence($str, true);// make it lowercase first because it's all upper
// desired output: A fox named Murphy Brown jumped over the lazy dogs.
// actual output: A fox named murphy brown jumped over the lazy dogs.

$str = 'the bottle contained five oz. of water.';
echo ucsentence($str);
// desired output: The bottle contained five oz. of water.
// actual output: The bottle contained five oz. Of water.

There’s unfortunately nothing much we can do about things like that except building an extensive list of special circumstances where we wouldn’t want a period to be considered the end of a sentence. I think we’ll survive with it as-is.

For example, if you had a field prompting a user to enter their username, the placeholder text might be “Enter your username here.” With the introduction and support of the “placeholder” attribute, all that would be required is the use of an input tag like <input type=”text” placeholder=”Enter your username here.”/> and the browser will automatically display your text whenever there is no entry in the field and it does not have the keyboard focus.

The only problem is that older web browsers (and even those that are not-so-old, such as IE8) lack support for placeholders, so a standalone solution is required. After contemplating a couple of different fallback implementations, I decided that for my requirements, an extremely simple implementation would be best.

Other people have designed jQuery plugins mainly in one of two ways: 1) use the input’s own value to display the placeholder text when there is no user entry, and 2) float the placeholder text in front of the input.

Option 1 seems like the most obvious solution, but after brief contemplation, it is obviously a very sloppy one considering that overriding the input value means you’d have to design special handling to carry the true user entry. It also mucks things up that the input might be of type “password” which means you can’t just set the placeholder text as its value, since it will just show up obscured. Furthermore, if the input has a “maxlength” attribute that is shorter than the length of your placeholder text, you’d have to work around that as well. And as far as styling goes, if you wanted your placeholder text to appear differently than the input text, you’d need to also keep track of the styles of both. Clearly, a complete solution this isn’t.

Option 2 seems to be the much better implementation. Unfortunately, most all such solutions I’ve been able to find out there seem to be poorly designed, overlooking several key requirements for half-decent functionality. For example, they ignore the fact that the browser window might be resized (in which case the placeholder needs to move with the input) or the input might become hidden (in which case the placeholder should also be hidden).

And finally, here is the solution I came up with. You should be able to just drop it into your own page as-is, or minify it first if you’d like. (It’s a bit bloated here for readability and documentation.)

<script type="text/javascript">
$(document).ready(function(){// wait until the DOM is ready
  $(function(){// encapsulate our variables into their own scope
    // test if HTML5 placeholder is supported; if so, quit
    var el = document.createElement('input');
    if ('placeholder' in el)
      return;

    // traverse all inputs with a placeholder attribute
    $("input[placeholder],textarea[placeholder]").each(function(){
      var $ip = $(this),// the input itself (in a jQuery object)
          tx = $ip.attr('placeholder');// placeholder text

      // create a label and a span within it
      var $lb = $(''),
          $sp = $(''+tx+'').appendTo($lb);

      // the label surrounds the input
      $lb.insertBefore($ip).append($ip);

      // try getting the input's size
      var w = $ip.width(),
          h = $ip.height();

      // if it fails, it's likely because the input is not visible
      if (!w || !h) {
        // clone the input and make it have size/shape without showing it
        var $clone = $ip.clone().appendTo('body').css({
          position : 'absolute',
          visibility : 'hidden',
          display : 'block'
        });

        // fetch the correct size (hopefully)
        w = $clone.width();
        h = $clone.height();

        $clone.remove();
      }

      // copy the position, size, and font into the
      // placeholder text's span
      $sp.css({
        position : 'absolute',
        display : 'block',
        width : w+'px',
        height : h+'px',
        lineHeight : $ip.css('line-height'),
        paddingLeft : $ip.css('padding-left'),
        paddingTop : $ip.css('padding-top'),
        marginLeft : $ip.css('margin-left'),
        marginTop : $ip.css('margin-top'),
        fontSize : $ip.css('font-size'),
        fontWeight : $ip.css('font-weight'),
        overflow : 'hidden',
        cursor : 'text'
      });

      // in MSIE 7 the text is vertically misaligned
      if ($.browser.msie && parseInt($.browser.version) <= 7)
        $sp.css({marginTop:parseInt($sp.css('margin-top'))+2+'px'});

      // if the input is hidden or shown, so should the placeholder be
      $ip.bind('hide', function(){ $sp.hide(); });
      // when showing, ensure the text is the right size
      $ip.bind('show', function(){
        $sp.show().css({
          width:$ip.width()+'px',
          height:$ip.height()+'px'
        });
      });

      // if the input is starting out hidden or there is a default value in
      // the input already, hide the placeholder
      if (!$ip.is(':visible') || $ip.val().length)
        $sp.hide();

      // when input gets focus, hide the placeholder and
      // when we leave the input, if it has no user entry
      // show the placeholder
      $ip.focus(function(){ $sp.hide(); });
      $ip.blur(function(){ if ($(this).val() == '') $sp.show(); });

      // if the placeholder is focused, send focus to the input
      $sp.focus(function(){ $ip.focus(); });
    });

    // override jQuery.hide() to trigger the 'hide' event
    var hide = $.fn.hide;
    $.fn.hide = function() {
      $(this).trigger('hide');
      return hide.apply(this, arguments);
    };

    // override jQuery.show() to trigger the 'show' event
    var show = $.fn.show;
    $.fn.show = function() {
      $(this).trigger('show');
      return show.apply(this, arguments);
    };
  });
});
</script>

.placeholder { color: #bbb; margin-top: 5px !important; }
/* you should use it alongside, and identically to, your style rules for HTML5
placeholder text, which as of this writing can be done in Mozilla and Webkit
browsers as follows: */
::-webkit-input-placeholder { color: #bbb; margin-top: 5px !important; }
/* single-colon for older Mozilla */
:-moz-placeholder { color: #bbb; margin-top: 5px !important; }
/* double-colon for newer Mozilla */
::-moz-placeholder { color: #bbb; margin-top: 5px !important; }

1) I could obviously make it into a plugin, but for my purposes, I’m just using it as-is.

2) I opted to override hide() and show() in jQuery. This might not be preferable and could possibly conflict with any other overrides of those same functions that might be present in your scripts. If this is an issue, you can just remove them.

3) The issue with some inputs is they may start out hidden when the page is loaded. If so, the width/height will not be known. To help mitigate this issue, we clone the input and make it take shape so we can determine its size. This helps, but it can still be inaccurate when the size of the input depends on CSS specific to its hierarchy (because we’re appending the clone to “body”, not to the input’s parent, who might also be non-visible due to some ancestor).

For example, if the CSS for your input is something like:

#some-panel { display: none; }
#some-panel .some-box input { width: 500px; }

Then we’ll clone the input, append the clone to “body”, and apply its width to the placeholder text. But since the CSS width depends on the input being a descendant of #some-panel and then .some-box, the width of our clone will very certainly not be the 500px we’re after.

The complete solution is: when showing the container of the input, always explicitly call something like $("#some-panel .some-box input[placeholder]").show() to trigger our input’s show() event, which triggers its placeholder’s show() event, which in turn adjusts the text to match the input’s size. It’s not elegant, but it works.

As always, if you encounter any issues or have any questions. Please comment below.

For an overly simple example, let’s say you have a User class that carries its user info privately, but you also have a Logger class for writing error and info message to a log. If you tried the following, you’d hit errors telling you that the User properties “id” and “nick” are private:

class User {
  private $id;
  private $nick;
  // ...
}

class Logger {
  // ...
  public static function write($str) {
    $user = User::get_current_user();
    fwrite(self::$handle, "User: {$user->nick} ({$user->id}): {$str}\n");
  }
}

In C++ you could add a simple line to class User like:

friend class Logger;

This would permit the Logger class to access any of its private or protected properties and methods. Despite there being numerous people who demand that you should redesign your code instead of using class friendship, there are many cases where friendship is not only useful but necessary. This is all good and fine except for the fact that the PHP language does not have support for friend classes, nor do its developers have any intention of adding it (the last I heard from the PHP team is they long ago decided against such functionality).

This led me to develop a workaround, which wouldn’t have been possible in the past, but with the flexibility of PHP5.3 and late-static binding, it is now possible. So, without further ado, here’s my implementation of class Friendship.

class Friendship {
  private static function friend_error($i_type, $i_name, $i_sep = '->') {
    $bt = debug_backtrace();
    $caller = $bt[1];

    $msg = array();
    !empty($caller['file']) && $msg[] = $caller['file'];
    !empty($caller['line']) && $msg[] = "(Line {$caller['line']})";
    $msg[] = "attempted to access inaccessible {$i_type}:";
    $msg[] = get_called_class() . "{$i_sep}{$i_name}";
    $msg = implode(' ', $msg);

    trigger_error($msg, E_USER_ERROR);
  }

  private static function backtrace_test($i_callee = null) {
    $db = debug_backtrace();
    $i = 2;
    do {
      $bt = @$db[$i++];

      if (empty($bt['file']))
        $bt = null;
      else if (preg_match('#^(' . __NAMESPACE__ . ')?\\\\?(call_user_func|call_user_func_array)$#i', @$bt['function']))
        $bt = null;
      else if (@$bt['file'] == __FILE__ || __CLASS__ == @$bt['class'])
        $bt = null;
      else if ($i_callee) {
        if (0 == strcasecmp(get_called_class(), @$bt['class']) &&
            0 == strcasecmp($i_callee, @$bt['function']))
        {
          $bt = @$db[$i];
          break;
        }
      }
    } while ($i < count($db) && empty($bt));

    $class = @$bt['class'];
    $func = @$bt['function'];

    if (is_subclass_of(get_called_class(), $class))
      return true;

    $prep = function($s) {
		$ns = function($i_name) {
		  if (!is_scalar($i_name))
			return $i_name;
		  return strpos($i_name, '\\') !== false ? $i_name : (__NAMESPACE__ . '\\' . $i_name);
		};
		return strtolower($ns($s));
	};

    $friends = array_map($prep, static::get_friend_classes());

    if (strpos($class, '\\') === false)
      $class = '\\' . $class;
    return in_array(strtolower($class), $friends);
  }

  protected static function get_friend_classes() {
    return array();
  }
  
  public function __call($i_name, $i_args) {
    if (!method_exists($this, $i_name)) {
      $bt = debug_backtrace();
      $bt = $bt[1];
      trigger_error($bt['file'] . ' (Line ' . $bt['line'] . ') ' .
        'call to non-existent method ' . get_called_class() . '->' .
        $i_name . '()', E_USER_WARNING);
      return null;
    }

    !$this->backtrace_test($i_name) && self::friend_error('method', $i_name . '()');

    $rm = new \ReflectionMethod($this, $i_name);
    $accessible = $rm->isPrivate() || $rm->isProtected();
    $rm->setAccessible(true);
    $ret = $rm->invokeArgs($this, $i_args);
    $rm->setAccessible($accessible);
    return $ret;
  }

  public static function __callStatic($i_name, $i_args) {
    if (!method_exists(get_called_class(), $i_name)) {
      $bt = debug_backtrace();
      $bt = $bt[1];
      trigger_error($bt['file'] . ' (Line ' . $bt['line'] . ') ' .
        'call to non-existent static method ' . get_called_class() . '::' .
        $i_name . '()', E_USER_WARNING);
      return null;
    }

    !self::backtrace_test($i_name) && self::friend_error('static method', $i_name . '()', '::');

    $rm = new \ReflectionMethod(get_called_class(), $i_name);
    $accessible = $rm->isPrivate() || $rm->isProtected();
    $rm->setAccessible(true);
    $ret = $rm->invokeArgs(null, $i_args);
    $rm->setAccessible($accessible);
    return $ret;
  }

  public function __get($i_var) {
    if (!property_exists($this, $i_var)) {
      $bt = debug_backtrace();
      $bt = $bt[1];
      trigger_error($bt['file'] . ' (Line ' . $bt['line'] . ') ' .
        'attempted to access to non-existent property ' . get_called_class() . '->' .
        $i_var, E_USER_NOTICE);
      return null;
    }

    !self::backtrace_test() && self::friend_error('property', '$' . $i_var);
    return $this->$i_var;
  }

  public function __set($i_var, $i_value) {
    if (property_exists($this, $i_var))
      !self::backtrace_test() && self::friend_error('property', '$' . $i_var);

    $rp = new \ReflectionProperty($this, $i_var);
    $accessible = $rp->isPrivate() || $rp->isProtected();
    $rp->setAccessible(true);
    $rp->setValue($this, $i_value);
    $rp->setAccessible($accessible);
    return $i_value;
  }

  public function __isset($i_var) {
    if (!property_exists($this, $i_var))
      return false;

    !self::backtrace_test() && self::friend_error('property', '$' . $i_var);

    $rp = new \ReflectionProperty($this, $i_var);
    $accessible = $rp->isPrivate() || $rp->isProtected();
    $rp->setAccessible(true);
    $value = $rp->getValue($this);
    $rp->setAccessible($accessible);
    return $value !== null;
  }

  public function __unset($i_var) {
    if (property_exists($this, $i_var))
      !self::backtrace_test() && self::friend_error('property', '$' . $i_var);

    // we are not able to truly unset private properties, so we'll just make them null
    $rp = new \ReflectionProperty($this, $i_var);
    $accessible = $rp->isPrivate() || $rp->isProtected();
    $rp->setAccessible(true);
    $rp->setValue($this, null);
    unset($this->$i_var);
    $rp->setAccessible($accessible);
  }

  //
  // the functions below are for a future version of PHP
  //
  /*
  public static function __getStatic($i_var) {
  }

  public static function __setStatic($i_var, $i_value) {
  }

  public static function __issetStatic($i_var) {
  }

  public static function __unsetStatic($i_var) {
  }
  */
}

Here’s an example of how you can use class Friendship:

class Restricted extends Friendship {
  private $priv_var;
  protected $prot_var;
  public $pub_var;

  protected static function get_friend_classes() {
    return array('Buddy');
  }

  private static function private_static_func() {
    echo __CLASS__ . '::' . __FUNCTION__ . '()<br>';
  }

  private function private_func() {
    echo __CLASS__ . '::' . __FUNCTION__ . '()<br>';
    echo 'I am a ';
    print_r($this);
  }
}

class Buddy {
  public static function touch_privates() {
    Restricted::private_static_func();

    $r = new Restricted();
    $r->priv_var = 'I changed this private property';
    $r->prot_var = 'Now a protected one';
    $r->pub_var = 'Public... not so special';

    $r->private_func();

    unset($r->priv_var);
    unset($r->prot_var);
    unset($r->pub_var);

    $r->private_func();

    echo "After unset()'ing, the public property is gone, but private and protected still exist as nulls.<br>";
  }
}

class Stranger {
  public static function deny_privates() {
    // none of these statements will work
    Restricted::private_static_func();

    $r = new Restricted();
    $r->priv_var = 'I cannot change this private property';
    $r->prot_var = 'Nor a protected one';
    $r->private_func();
  }
}

Buddy::touch_privates();
echo '<hr/>';
Stranger::deny_privates();

The output of the above example is:

MyNS\Restricted::private_static_func()
MyNS\Restricted::private_func()

2011-04-23 17:32:28 -0700 - *E_USER_ERROR*
/var/www/index.php (Line 52) attempted to access inaccessible static method: MyNS\Restricted::private_static_func()
/var/www/friendship.php (Line 17)

Some limitations are:

• setting/getting static properties is not possible due to PHP’s lack of __getStatic(), __setStatic(), __issetStatic(), and __unsetStatic() magic methods
• private properties cannot be unset(), so they’re just made null

I haven’t fully tested this in a great variety of examples, but at the very least, it does work as desired in all obvious, simple cases. I’m not pleased that I had to resort to using a lot of Reflection functionality, but I did just want some way to make any kind of friendship possible in PHP and I believe I’ve accomplished that. If you notice any issues or have any suggestions for improvement, please do let me know. Thanks for reading!

Specifically, I’m referring to the fact that namespace resolution happens at compile time, which means that if you attempt to reference a namespaced class or method as a string, it won’t be recognized unless that string explicitly includes the namespace name. The most apparent case is when calling class_exists(). For example, let’s say you define class Settings in namespace OssumCMS:

namespace OssumCMS;

class Settings {
  const MEMCACHED_ADDR = 'none';
  public static function do_something() {
  }
}

In your code, you might want to do some things like:

// ...
if (class_exists('Settings'))
  if (@constant('Settings::MEMCACHED_ADDR') != 'none')
    call_user_func(array('Settings', 'do_something'));

But that would never work because class Settings is defined within namespace OssumCMS. PHP resolves namespaces at compile time, so when class_exists(), constant(), and call_user_func() are called at run time, they won’t ever find class Settings because it’s checking only the global namespace. The obvious fix is to include the namespace name before every occurrence of the class name:

// ...
if (class_exists('OssumCMS\Settings'))
  if (@constant('OssumCMS\Settings::MEMCACHED_ADDR') != 'none')
    call_user_func(array('OssumCMS\Settings', 'do_something'));

Now PHP will know to check for the class within the namespace in which it’s actually defined. Small victory, especially when you’re dealing with thousands of lines of pre-existing code. You definitely don’t want to find every occurrence of every class and prefix it with the namespace. Another small step in the right direction would be to use a function to automatically prefix a string with the current namespace if needed by using a function:

namespace OssumCMS;

function ns($i_name) {
  if (!is_scalar($i_name))
    return $i_name;
  return strpos($i_name, '\\') !== false ? $i_name : (__NAMESPACE__ . '\\' . $i_name);
}

This would allow you to simply wrap all your class name strings in that function call, for example:

if (class_exists(ns($class_name)))
  do_something();

namespace OssumCMS;

function ns($i_name) {
  if (!is_scalar($i_name))
    return $i_name;
  return strpos($i_name, '\\') !== false ? $i_name : (__NAMESPACE__ . '\\' . $i_name);
}

function un_ns($i_name) {
  if (!is_scalar($i_name))
    return $i_name;
  return preg_replace('#^' . preg_quote(__NAMESPACE__, '#') . '\\#i', '', $i_name);
}

function constant($i_name)        { return @\constant(ns($i_name)); }
function class_exists($i_name)    { return \class_exists(ns($i_name)); }

function call_user_func_array($i_func, $i_args) {
  is_array($i_func)
    ? (!is_object($i_func[0]) && ($i_func[0] = ns($i_func[0])))
    : (!is_object($i_func) && !function_exists($i_func) && ($i_func = ns($i_func)));
  return \call_user_func_array($i_func, $i_args);
}

function call_user_func($i_func) {
  return call_user_func_array($i_func, array_shift($args = func_get_args()));
}

Given these overrides, our example block of code would be evaluated as follows

// ...
if (OssumCMS\class_exists(OssumCMS\ns('Settings')))
  if (OssumCMS\constant(OssumCMS\ns('Settings::MEMCACHED_ADDR')) != 'none')
    OssumCMS\call_user_func(array(OssumCMS\ns('Settings'), 'do_something'));

There are surely other functions that need overriding, but these are the most obvious suspects. This was a useful little hack for me and I hope you find it useful as well.

Specifically what I needed to do is:

1. split multiple pages into each individual page
2. create a thumbnail image to preview each page
3. extract all readable text from each page for searching

Splitting PDF Pages

For this job, I decided to use PDFTK (PDF Tool Kit). The syntax is a little muddy, but easy enough to figure out. For example, given input file blah.pdf:
pdftk A=blah.pdf cat A1 output blah-pg1.pdf

This snippet assigns handle “A” to the input file, then issues the “cat” command for page 1 of file A (i.e., “A1″), then instructs to output that to a new file, blah-pg1.pdf.

This is fine for a single page, but if you want to split every page out of the input file, you will have to execute that command repeatedly, once for each page. There are various ways to determine the number of pages automatically, and one way is to use another PDFTK command:
pdftk blah.pdf dump_data

This will dump various info about the specified file, including the number of pages, so this can be captured into a string and parsed.

PDF Page to Thumbnail

Now that each PDF page has been created, this is one of the more obvious, straightforward jobs. With ImageMagick installed, you can issue a command like the following to create a 200px tall JPEG for a single PDF page:
convert -resize x200 blah-pg1.pdf blah-pg1.jpg

Extracting Text – Text-Based

If the PDF file was created with digital text (e.g., printed from a text editing application), then the full source text can be extracted easily. One of the packages you will find very useful is Poppler-Utils, which among a few other utilities includes an app called pdftotext.
pdftotext blah-pg1.pdf blah-pg1.txt

This dumps any available text from the PDF file into a text file. If there is no text available, the text file will be almost empty. In this case you’d need to…

Extracting Text – Image-Based / Scanned OCR

If the text content is unavailable, it’s usually because the PDF was created by a scanner or other image generating source. In this case, OCR (optical character recognition) will need to be used to visually scan the image and attempt to recognize each character. There are a few options available, but most of them do a pretty terrible job at recognizing a lot of content. The best option which is under heavy development, in part by Google, is Tesseract OCR.

Tesseract does a really great job at recognizing most all characters in an image. The only trick is converting the source file into a format accepted by Tesseract because it is very specific about the file format it will accept. (It only likes TIFF files with file extension .tif and maximum bpp of 8). For that conversion, we go back to ImageMagick.
convert -background white -flatten +matte -colorspace Gray -depth 8 -density 600x600 -resample 300x300 blah-pg1.pdf blah-pg1.tif

This command will convert the source PDF page into a grayscale TIFF image with 8 bpp and 300 dpi. Now that we have that, we can invoke Tesseract as follows:
tesseract blah-pg1.tif blah-pg1

This will create file blah-pg1.txt containing all the characters it recognized (alphanumeric and otherwise). Thus far, I haven’t been able to figure out Tesseract’s configuration options, but there are things I’d like to modify, such as only accepting alphanumeric and punctuation characters.

Summary

All the applications I’ve discussed above are available across most all Linux distributions, including as packages in Ubuntu (installable via apt-get). There is a lot more that can be done with these tools (such as extraction of embedded images from PDFs and other things), but given just the uses I described above, you should be able to create very powerful software to upload, manage, and index PDF files.

As is usually the case, I couldn’t find what I needed so I decided to create it myself, and so the Fancy Opts plugin was born. It allows you to simply create flexible and completely unique radio button and checkbox inputs.

I compiled the info, download, and demo info here: Fancy Opts jQuery Plugin. It’s really simple to use, degrades gracefully, and acts very much like a traditional input.

If you have any comments, suggestions, or problems with the plugin, please feel free to let me know!

A quick google lead me to believe that no such plugin for jQuery currently exists. I did find a few table-centric plugins that (maybe) include the kind of functionality that I wanted, but nothing looked to provide just what I had in mind. So, I started working on the plugin myself.

I call the plugin TH Float, but it could also aptly be named Sticky Table TH or Fixed THEAD / TFOOT. What it does is make the <thead> or <tfoot> of a table remain floating in view at the top or bottom, respectively, of the scrollable container until the table is completely out of view.

I’ve thrown together a simple info page and demo: TH Float jQuery Plugin. It’s really simple to use and from my tests works identically and flawlessly in (most?) all browsers (though, interestingly, I did discover an obscure bug in IE8 while creating the demo page).

If you have any comments, suggestions, or problems with the plugin, please feel free to let me know!

I’m not 100% certain of every variable required to cause the bug, but it definitely works in this example:
IE8 crash

The general structure of the page is:

<body>
<div id="outer" style="display:inline-block;overflow:auto;height:100px;">
  ... any multi-line content that forces the div to have a scrollbar ...
</div>
</body>
<script>
$("#outer").scroll(function(){
  $("<div></div>").appendTo("body");
});
</script>

In that example <body> has only the one direct child element and if you scroll it causing the appendTo() function to be called, IE8 crashes. (I’ve only tested this on Windows 7 machines. IE7 does not crash.)

This is the same example, but it works. The only difference is that a second <div> child was included within <body> but with that one change, the bug vanishes. Note that I’ve also tested this with multiple scrolling divs in body and the bug persists. It seems there must be at least one block element in <body> to prevent the bug.

Fortunately, it’s not often that one would create a page with just scrollable divs in the body.