Jul 21, 2014 - Development    Comments Off

Force iOS to Stop Autofilling User/Password Form Fields

To force iOS to stop autofilling saved form data into your form, simply add name=”reg” (short for registration) to your form tag:

<form method=”post” name=”reg”>

 

Background

I ran into a problem on Naming Force where iOS was using saved Login data to autofill a form other than the sign in form. The Edit User page was being filled in by the Login saved data. The real problem was that the wrong fields were being autofilled. For some reason iOS was putting the saved Email address into the Username field after the page loaded. If a user didn’t notice the yellow background on the field they wouldn’t realize that iOS had changed their data and clicking “Save” would save their email address as their Username. Obviously not what they want (and it happened – about 50 times before someone reported it).

I discovered that iOS tries to interpret forms and decide if they should be autofilled. Changing the name of the INPUT field to “xyz” didn’t stop iOS from autofilling either. I even tried the autocomplete=”off” and autocorrect=”off” atrributes to no avail. It turned out that just having a DIV with text of “Username” right before the INPUT field tipped iOS off and allowed this field to be autofilled. Only changing the text of the label stopped the Username fielf from being filled in, but then Paypal Email became the next target of iOS’s autofill.

Fix (Not a Hack)

I tried many things and did a lot of Googling. Finally I came across this blog post that had the not-well-publicized fix. In the post Sean Rucker explains that adding an HTML attribute of “name” with a value of  “reg” to your FORM tag will disable the autofill. And it works!

<form method=”post” name=”reg”>

I had ready tons and tons of forum and blog posts about people suggesting crazy fixes for this (jQuery tricks, hiding form fields, etc) but this is obvious the “right” fix. Strangely, this is only one of two blog posts Sean Rucker has ever made. The blog post almost feels like planted evidence. Or maybe I’ve been reading too many crime novels.

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”);

Pages:12345678»