Dec 5, 2013 - Development, Interface Design    Comments Off

Modernizr: removing touchscreen hover events on tap

Apple iOS devices think they are pretty smart. If a web developer creates an onmouseover event Safari for iOS fires the onmouseover event on the first tap and then fires the click event on the second tap. Other tablets and phones might do the same but I don’t own any. This can be great for onmouseover navigation menus but causes unexpected results on other controls.

For example, on one of my sites I recently converted a combobox list of names of colors to a set of color swatches (squares) that the user can click to choose one or more colors. Each color shown actually represents one or more colors (gray = gray, silver, blue) and an onmouseover event shows the user the list of colors meant to be represented by the swatch. On my iPad when I try to tap a color to select it instead I am shown my qTip tooltip list of color names for this swatch. I don’t feel that this is very intuitive and I’d rather iPad users just not see the tooltip at all. Detecting each and every device that works this way would be tedious and I’d most likely fail at doing this.

qTip on mouseover

This is where Modernizr comes in. Modernizer is a JavaScript library built to help developers detect what features a browser supports. Most of the features being detected are of CSS3 and HTML5. Modernizer does detect whether the browser being used has the “touch” event. This is what we need. After adding the Modernizr library to our site we simply check for Modernizr.touch and if it’s true we don’t add our qTip to the controls. Now when users tap a swatch it correctly selects the color instead of showing the onmouseover tooltip pop-up.

Nov 30, 2013 - Development    Comments Off

jQuery Ajax History URL Plug-in

I’m working on a change to Fido Finder that will turn the search results filtering into an Ajax query instead of posting a full page. No big deal. But, since the interface allows a user to narrow/alter existing search results I want to give them a way to use their Back button to go back to the previous search result.

If you do not already know, this is done by adding  a hashtag (#) and a querystring to your existing URL. Browsers allow us to modify this part of the address so adding a hashtag and modifying what is after it became a way to hack history into Ajax websites.

I looked around for a simple jQuery plug-in to add the hashtag and handle state and after trying 2-3 I finally ran into one that was easy to set up and adhered to Google’s guide for making Ajax pages crawlable. The plug-in is called URIAnchor.

In my implementation all I needed to add to add color and size to the URL is this code:

$.uriAnchor.setAnchor({
     colors:colors,
     size:size
});

You can also then read the hashtag querystring values upon page load (back button) and execute the Ajax using the data from the URL.

var map = $.uriAnchor.makeAnchorMap();

if($.isEmptyObject(map))
{
     ready = true;
     return;
}

var size = map.size;
var colors = map.colors;
Nov 30, 2013 - Development    Comments Off

jQuery Countdown Timer

I spent way too many hours trying to find a customizable jQuery countdown timer. Almost all of the timers I found could only be one size and couldn’t be scaled down. They are all designed to be some sort of website launch countdown, which makes no sense. I finally found this timer and although it needed some major tweaking in the CSS I was able to scale it down with only 5-10 minutes of CSS trial and error.

Nov 30, 2013 - Development    Comments Off

PHP API Framework

I just finished writing my first webservice API. I did some research into some frameworks to help with the creation. After trying a few I ended up going with the Slim framework and am pretty happy with it. There’s a ton of features that I’m not using but it got me set-up without having to think through creating an API from the ground up.

Nov 23, 2013 - Development    Comments Off

PHP PDO Intermittent “Can’t connect to MySQL server”

Ran into this problem when converting a site to use PHP PDO, and have no idea why this works. If your connection string includes the local server’s IP address, server name, or the website domain name all of these can cause intermittent connection errors. For some reason changing it to simply “localhost” fixes the problem.

Oct 31, 2013 - Misc    Comments Off

My NBA Rank Predictions for 2013-2014

nba-logo

West

  1. Spurs
  2. Clippers
  3. Warriors
  4. Rockets
  5. Thunder
  6. Trail Blazers
  7. Grizzlies
  8. Pelicans
  9. Lakers
  10. Timberwolves
  11. Nuggets
  12. Mavericks
  13. Kings
  14. Jazz
  15. Suns

East

  1. Heat
  2. Pacers
  3. Nets
  4. Knicks
  5. Pistons
  6. Bulls
  7. Wizards
  8. Raptors
  9. Bucks
  10. Cavaliers
  11. Hawks
  12. Magic
  13. Bobcats
  14. Celtics
  15. 76ers
Sep 26, 2013 - Development, Interface Design    Comments Off

HTML Charts Without Flash (using HTML5)

Previously I had used Open Flash Charts to create line charts on some of my sites. I was interested in finding a solution that didn’t require Flash to draw  charts. None of my iOS users can see the charts. With the browser acceptance/integration of HTML5 I figured there had to be a new solution out there. There was, and it’s incredible!

HighCharts is a JavaScript library that utilizes jQuery and HTML5 to draw animated interactive charts, and it’s really good at it. The charts are very nice looking and extremely configurable. I was shocked at how good it is. If you need charts that work on iOS (iPhones, iPads, etc) HighCharts is what you’re looking for.

Sep 26, 2013 - Development    Comments Off

PHP Conditional Forced HTML Cache

I had a need on Fido Finder to cache a PHP page only when it loads without any querystring parameters. The Lost Dogs page, in it’s default mode, loads the first page of ALL of the active lost dog listings. This takes 2-3 seconds due to the SQL query load time. This first page rarely changes and it would be fine for it to be cached on the browser for a user’s session. This would significantly decrease load time of any subsequent visits to the page. After doing some research this is what I ended up with. The below statements are part of an ELSE statement and run when no search criteria has been entered.

header(“Last-Modified: ” . gmdate(“D, d M Y H:i:s”,strtotime(“-10 minutes”)) . ” GMT”);
header(“Expires: ” . gmdate(“D, d M Y H:i:s”,strtotime(“+10 minutes”)) . ” GMT”);
header(“Cache-Control: public”);
header(“Pragma: cache”);

Apr 17, 2013 - Development    Comments Off

PHP Email Bounce Script

A lot of people have asked for this. This is the email bounce script I use. You will have to pipe all emails to this file.

<?
//opens the stream
$fd = fopen("php://stdin", "r");

$content = "";

//read the lines
while (!feof($fd))
{
    $content .= fread($fd, 1024);
}
fclose($fd);

$lines = explode("\n", $content);

$email = "";

//SPAM report from feedback loop
for($i=0;$i<count($lines);$i++)
{
    if(preg_match("/^Original-Rcpt-To:(.*)/", $lines[$i], $matches))
    {
        $email = trim($matches[1]);
        $mode = "spam";
        $type = 2;
        continue;
    }
}

//bounced back message from receiving server
if($email == "")
{
    for($i=0;$i<count($lines);$i++)
    {
        if(preg_match("/^Delivered-To:(.*)/", $lines[$i], $matches))
        {
            $mode = "bounce";
            $type = 1;
            $email = substr(trim($matches[1]),2);
            continue;
        }
    }
}

//failed message, MTA emailed a failed message
if($email == "")
{
    for($i=0;$i<count($lines);$i++)
    {
        if(preg_match("/^Remote host said:(.*)/", $lines[$i], $matches))
        {
            for($j=0;$j<count($lines);$j++)
            {
                if(preg_match("/^Return-Path:(.*)/", $lines[$j], $matches))
                {
                    if(strstr($matches[1], "=") !== false)
                    {
                        $mode = "bounce";
                        $type = 1;
                        $email = trim($matches[1]);
                        continue 2;
                    }
                }
            }
            continue;
        }
     }
}

//return-path format is user=website.com@mydomain.com
//convert this into the actually email, user@website.com
if($mode == "bounce")
{
    $email = substr($email,0,strpos($email,"@"));
    $email = str_replace("=", "@", $email);
}

if($email != "")
{
    if(strchr($email, "@") !== false)
    {
        $domain = substr($email,strpos($email,"@")+1);
        $sql = "SELECT id
                FROM donotemail
                WHERE LOWER(email) = LOWER('".fix($email)."')";
        $result = query($sql);
        if($result)
        {
            if(numrows($result) == 0)
            {
                $sql = "INSERT INTO donotemail
                        (email, type, thedate)
                        VALUES('".fix($email)."', '$type', CURDATE())";
                query($sql);
            }
        }
    }
}
?>
Mar 12, 2013 - Development    Comments Off

PHP date_diff days negative zero issue

I ran into an odd problem today that I couldn’t find a solution to when searching Google. I ended up figuring it out and thought I should document it here for future searches.

PHP has a date_diff function from v5.3+. I was using this function to calculate the difference in DAYS between two dates. I found that the results I received did not match what I expected. PHP says the difference between Yesterday and Today is -1 (negative one) days. The difference between Today and Today is -0 (negative zero) days. The difference between Tomorrow and Today is 0 (zero) days. And the difference between Today and the Day After Tomorrow is 1 (one) day, etc. Say whaaaaat?

Duplicate this:

$day1 = new DateTime();
$day2 = new DateTime("yesterday");
$interval = $day1->diff($day2);
$interval = date_diff($day1, $day2);
$days = $interval->format('%r%a');
//%r = show negative sign or nothing
//%a = number of total days

echo "$days <br/>";

$day2 = new DateTime("today");
$interval = $day1->diff($day2);
$interval = date_diff($day1, $day2);
$days = $interval->format('%r%a');

echo "$days <br/>";

$day2 = new DateTime("tomorrow");
$interval = $day1->diff($day2);
$interval = date_diff($day1, $day2);
$days = $interval->format('%r%a');
echo "$days <br/>";

In order to get a difference value that I expected I had to write a statement to convert these values. I also ran into some odd comparison issues and had to resort to using === to compare the days. Even though I compared string to string I kept getting false positives. I threw together a quick conversion if/then/else that created the right type of “days” value for what I was expecting:

if($days === "-0")
{
//today
$days = 0;
}
elseif($days === "0")
{
//tomorrow
$days = 1;
}
elseif($days > 0)
{
$days = $days + 1;
}

PHP handled the other days in the past as expected, for whatever reason. The day before yesterday is -2 without any modifications.

Pages:12345678»