credit card form “best practices”

Most of us have written HTML forms which accept credit card details. And most of them have been, well…, bad. I say this because most of us and even the big players out there like Visa and Apple and Microsoft and Google don’t even do this right yet.

Portable Devices

Almost everyone’s credit card forms now work well enough for desktop computers but they work terribly for smartphones and iPads (iOS). The reason is that these portables don’t include a full keyboard—what they usually include is an onscreen keyboard that has to toggle back and forth between characters and numbers. And this is where almost all coders make a mistake because they haven’t tested this on other devices.

Card Number <input type="text" name="cc_number" size="16"> (omit hyphens)
Exp. Month <input type="text" name="cc_month" size="2"> (MM)
etc

This type of interface would look fine on a desktop computer since you don’t have to shift the keyboard to get to numbers. But this isn’t the case for an iPad or an iPhone, for example.

VanillaVisa.com

In this example website you would think that Visa has enough money to pay for some marketing people who would provide an excellent experience for all their users.

Screen Shot 2016-08-30 at 4.35.56 PM

What happens though when you visit this site using an iPad and start to fill it out? Notice that every field here expects numbers throughout and yet it defaults to the iPad’s character-based keyboard.

<input class="noBorder margin10" name="cardNumber" id="card" size="14" maxlength="16" autocomplete="off" type="text">

The problem here is that type="text". What you’re expected to type in is a number in all of these fields. If we—as the HTML coder—can select the right type then the user won’t have to toggle back and forth. As it is, an iPad user of this website must:

  1. toggle their keyboard to numeric
  2. type in the card number
  3. touch the month field
  4. toggle their keyboard to numeric
  5. type in the two-digit month
  6. touch the year field
  7. toggle their keyboard to numeric
  8. type in the two-digit year
  9. touch the security code field
  10. toggle their keyboard to numeric
  11. type in the three-digit security code
  12. touch the Go button

Obviously, nobody at Visa has ever used this on their iPhone or their iPad. Each of the items in red above are unnecessary and cumbersome for the user and makes for an ugly design.

HTML Input Types

Here is a list of supported HTML input types. Those that are new in HTML5 are marked with an asterisk.

  • text
  • password
  • submit
  • reset
  • color*
  • date*
  • datetime*
  • datetime-local*
  • email*
  • month*
  • number*
  • range*
  • search*
  • tel*
  • time*
  • url*
  • week*

Although you can use the type="number" option for a credit card form like this I have successfully used the type="tel" which works out much better.

Tel, For the Win!

Using the type="tel" option for each of the former text fields would completely change up the Vanilla Visa website’s HTML form. Older browsers would gracefully default back to type="text" and it would behave as it does now. Newer browsers, especially those on portables, would display the classic telephone keypad style of ten numbers which you may then input into the form.

Screen Shot 2016-08-30 at 5.02.32 PM

What’s sad is that on Apple’s own website they also haven’t figured this out yet and they’re the ones who created iOS and should know better.

Advertisements

the economics of junk food

In today’s post I ask the rhetorical question, “How many full or even partial chips are actually inside an average bag of Ruffles® Oven-Baked Cheddar & Sour Cream FLAVORED chips?”

ruffles-oven-baked-cheddar-sour-cream

Apparently—if I only count chips that are larger than a quarter—the answer is 12.  Seriously? Granted, there is a tablespoon amount of smithereens at the bottom of the bag but it’s not enough to keep a family of San Diego cockroaches alive.

Fortunately, the nutritional information indicates that a serving size is indeed an entire bag so I’m glad I didn’t have to share my dozen half-chips with, say, another starving programmer who didn’t bring his lunch either.

At $0.90 per bag that’s 7-1/2 cents per chip. Or in financial-nutritional terms that’s 144 calories per dollar.  My can of Sprite® likewise weighs in at 140 calories per dollar.

Compare that to paying $1 for a McDouble at 390 calories per dollar and you’ll realize how I must feel right now. Google tells me that the New York Post once included a column indicating that the McDouble is the “cheapest, most nutritious and bountiful food that has ever existed in human history”.

I think I would suggest instead that bread itself has always held that spot in human history since—roughly calculating here—six cups of flour is about $2.40, the yeast packet is another $0.80 so bread weighs in at about 592 calories per dollar. Wow, I think I’m onto something. This page indicates that flour tops the list and white bread is then second on that list at 3,333 calories per dollar. Obviously, bakeries can bring economies of scale to my own numbers.

A University of Washington survey found that “junk food costs as little as $1.76 per 1,000 calories (568 calories per dollar) whereas fresh veggies and the like cost more than ten times as much (presumably 57 calories per dollar)”.

Too bad vending machines don’t include real food in them. Given options, I think some of us might just do the right thing and select something more… filling. I guess I should bake some bread this evening.

the tyranny of lint

I’ve found what appears to be an awesome bit of WebGL code for my website. I honestly spent only an hour tweaking the demo code so that it looks amazing. It’s got 3D movement, perspective, animation and very realistic-looking physics. The only major problem now is shimming it into my Polymer Elements website, somehow getting all this past Lint‘s watchful eye.

Lint

JavaScript Lint is a tool for checking your code, presumably from poor coding practices. I suppose that’s all well and good for the code I write but what happens when I then want to simply bring in someone else’s and their code has never been seen by Lint before? Well, the results are fairly dramatic for me, the person trying to bring in this code. Since the other coder doesn’t use Lint, the burden falls squarely on my shoulders to now laboriously go through their code just to make Lint happy. And let’s face it, Lint is an annoying little bitch when you get right down to it.

Why Lint?

You might be wondering why I might have added this to my project in the first place. I suppose the honest answer would be: I didn’t. The gulpfile.js in this project builds everything so that only a fraction of the code is then published to the website. I suppose this is “best practices” if you’re a big company like Google and you want to obfuscate your HTML source as much as possible. And Lint is just part of that build process which I inherited by using the Polymer template code.

If you’ve never seen a gulpfile.js and have never used gulp before you might try getting your feet wet by trying a project using Polymer Elements by Google. You can process the build by simply running gulp or something more sophisticated like building and then serving up your website locally with gulp serve, for example.

Held Hostage

I’ve just spent two long sprints of coding work trying to get three files past Lint.

The first is a JavaScript file called Sylvester. It’s a vector/matrix library and it looks like it’s very useful. It’s a dependency of the demo I brought in. This single file has taken two hours alone trying to get it past Lint’s complaints. The file is perhaps 1500 lines long. Honestly, I can’t say that it’s buggy. It’s just that Lint expects you to be an anal-retentive coder. For example, if you have a single variable which is in camelCase style, then ALL variables in the file must be the same style. This is one of the myriad reasons why Lint will fail your build process.

The next file is glUtils.js and  appears to be something to augment the Sylvester library. And I just spent three hours working with Lint trying to get this one to stop complaining.

And the last file is WebGL.js and appears to be the work of the demo author himself. I’ve just spent over four hours editing this one to make Lint happy.

Nine hours hacking away at other people’s code and I’m still not finished yet. Lint is still complaining about a variety of things and I haven’t even actually added the code to my project other than dropping the files into the scripts folder.

What Now?

I’m left with a decision to make.

  1. Do I abandon Lint’s review of these three files by filtering them from the appropriate section of the gulpfile.js job?
  2. Do I research Lint to find out how to tell it to ignore the offending section(s) of code so that it thinks it’s happy?
  3. Do I abandon the demo code idea completely and not bring it into my project?
  4. Do I abandon the Lint step completely from the build process itself?

I don’t know at this point. I do know that I’m tired of doing this, though.

Wishes

What would be nice is if popular editors out there could automatically review JavaScript while you’re typing it. In theory, then this might minimize the work for other people who wish to use your code.

Secondly, what would be nice would be if github had a built-in checker which could indicate a Lint rating, say, for anything in the repository. Or possibly, it might be a flag style of attribute. Regardless, if you were considering bringing in some code you could have an early warning that you might spend literally days having to update it.

fedex

fedex.jpg

In today’s post I illustrate how not to deliver packages. At least five weeks ago I purchased some replacement parts for an iPad II. All in all, we’re talking maybe $2 worth of parts and weighing in at a whopping four ounces including the box to ship them in. The total cost would come to about $25 to ship from the mid-West to San Diego. And yet, I still don’t have those parts.

The Buyer

I have a Post Office box because my apartment’s mail situation is really undesirable. This isn’t that uncommon, at least here in California.

The Seller

The seller is a reputable company called eTech Parts. Their only problem here is that their website’s shopping cart should have detected that I have a P.O. box as the shipping address and therefore FedEx presumably wouldn’t be an option since the latter doesn’t like shipping to them.

The Shipping Company

So the buyer entered his P.O. box as the shipping address. The seller did the same on the FedEx paperwork. What did the shipping company then decide to do?

What They Didn’t Do

What FedEx didn’t do was to contact either the buyer or the seller to ask for a different (physical) address. They also didn’t simply return the package to the seller. And finally, they also didn’t simply deliver the package to the post office as addressed.

What They Did Instead

Then—and this is the really amazingly-stupid part—FedEx decided to look into their own shipping history database, find someone who previously had this same P.O. box number, then re-directed the package to their address! But wait, it gets worse.

They didn’t verify that that person’s name matched mine. And they didn’t seem to mind that my city’s post office and the other address are separated by 900 miles. Considering that post office box leases last for a mere six months, it’s ridiculous that FedEx could consider this as a sound business decision.

Also what they didn’t do was to update the tracking information for the package. If you looked up the progress for the package it still indicated the P.O. box and San Diego! So you get to see that the box arrived in a big Los Angeles facility and then inexplicably the truck started driving northward. And then they had the audacity to unceremoniously drop the package at some unknown person’s doorstep rather than to verify that they had successfully re-routed someone’s property.

The Aftermath

Having called the seller and FedEx’s support people I find that the package is now lost. FedEx now expects me to contact the seller to get them to re-send the package. I have done so, of course, and I’ve told them that they’re not to use FedEx this time.

In fact, I’ve suggested that they should never use FedEx again. It’s one of those “Fool me once, shame on you. Fool me twice, shame on me” type of things.

google is systematically breaking i.e.

In an earlier post I described the war that’s going on among the big players:  Google and Microsoft, for example. Today’s entry relates to Google’s acquisition of Firebase in late 2014 and its recent redirection of that site’s content to an Internet Explorer—incompatible platform within the past few weeks.

If you have websites and/or apps hosted on Firebase then you will find that you are no longer able to use Internet Explorer to administer them. This is similar to the Internet Explorer—incompatible website Google Domains in which their client-side code freezes Microsoft’s browser by design.

Google’s campaign to destroy Internet Explorer now pushes Microsoft’s accumulative 16.72% of the browser market share (Dec 2015, Sitepoint.com) to the point where it’s about to be surpassed by Firefox at 14.29% and into 3rd place behind Chrome’s lead of 53.71%.

Interestingly, it looks like Microsoft’s Forefront Endpoint Protection product at least back in 2011 marked Google’s Chrome browser as a virus.

android os

I got tantalizingly close with Android OS on this attempt, manually creating my own USB install disk with the very good UBootin open-source software. I can see now that the folks from Remix OS had customized both code bases for their own use in an attempt to make things easier but fell short, it would seem.  UBootin appears to allow you to create almost any sort of live/install USB drive and well worth the time spent with it.

I managed to “live boot” (without installing) Android OS from my USB drive only to find that the Google Play Service appears to be crashing on the Dell Vostro 200 upon initialization, a known bug. The software appears to expect that 1) I have cellphone service, 2) I have wi-fi. I have neither and it doesn’t seem to know how to drive forward to the point of using DHCP on my Ethernet adapter to continue.

I’ll check the documentation to find out how I might get further but this is the best attempt so far within the Android OS—compatible collection.

Eureka…?

I’ve finally gotten the live boot to work by sneakily removing the Ethernet connection in order to get past the Google Play Service screen. It has an interesting interface that looks a lot like a cellphone might. So I’ve decided to boot again and actually install this time.

I’ve managed to navigate around the interface a bit during the live boot session. Oddly-enough, you get to a terminal screen with the Ctrl-Alt-F1 screen and back to the GUI with Ctrl-Alt-F7. There’s a very thin setup of UNIX under the covers and some familiar commands if you are savvy to such things.

It appears to be a little heavy-handed with the processor fan control, in my humble opinion. There are many times when the fan is adjusted to full while it’s doing anything. For example, it’s blaring away while presumably formatting the first drive.

The installation process is shy on status. I couldn’t honestly tell you how much of the drive is formatted at the moment, for example. In old Western movies the Indian scout would put his ear to the ground in order to hear distant horses. Here, I put my ear to the side of the chassis in an attempt to hear whether or not the drive is being written to. Color me “worried”.

If At First You Don’t Succeed…

Okay, that didn’t work. So I reboot, reformat but this time without GRUB. It now appears to be going further.

Android OS starts up at least. I does still throw an error that Google Play service is stopped, like before. Like before, I need to temporarily disconnect the Ethernet cable to get past the same bug as seen during the live boot attempt.

Finally booting from the hard drive results in Error: no such partition, entering rescue mode, Grub rescue>. Really?

I think we need to vote Android OS off the island as a viable solution.

And yet…

I just keep imagining that this will work. So now I’m trying again with the previous (perhaps more stable) version of Android OS x86 5.1 rc1. This version plows right through the previous installation bug involving the Ethernet adapter, always a good sign. And the browser actually comes up without crashing, another bonus.

Finally, I’ve managed to find a working version of an Android OS for a PC. I’ll continue my review in depth and follow-up with what I find.

phoenix os

Continuing the testing of replacement operating systems I next attempted to install Phoenix OS of Beijing Chaozhuo Technology Co. Unfortunately that failed during the multiple attempts to get the installer onto the USB drive. I’m not sure what format they’re looking for but it errors out with a message complaining about NTFS partitions. I attempted using the FAT and FAT32 styles but neither made the installer happy.

Again, it looks like we’ll need to pass on another Android-like operating system for PCs.

remix os, part 2

Well, that didn’t work. As you might recall from my last post, I was attempting to install Remix OS onto a Dell Vostro 200 computer for testing purposes. It seemed to show activity on the USB drive so I let it run all night.

I interrupted it this morning since it was still on the pulsing Remix OS logo screen. And then when I attempted to use GPartEd to delete any unwanted disk partitions I found to my great surprise that there were no partitions to be found. The 64-bit version of the Remix OS installation from USB was essentially a total fail.

Next, I attempted to get the 32-bit version loaded onto the USB drive but that didn’t seem to complete, leaving the USB drive empty. Guess we’ll pass on Remix OS for now.

windows 10 “free upgrade” is over

Bummer. We had a year to upgrade from Windows 7/8 to the latest Windows 10 for free and we missed it. It’s not because we’re lazy. Sometimes it’s just because I.T. is under-funded and it literally takes all of our time to do other things. A fraction of those workstations only had 2GB of RAM, for example, and couldn’t be updated. And sometimes you have a collection of Windows XP computers that didn’t quality for the update.

So here you are, August 2016 and you have several aging computers that may or may not be worth the $$ to pay for the Windows 10 license. If you’re anything like me then you review alternatives.

MaaS (metal-as-a-service)

One very cool option that you can do with a pile of old Dell Vostro 200 workstations is to convert them into a private cloud. I recently did just this. Imagine a rack of computers—all without monitors/keyboards/mice—and they all do something you rarely see: they boot over the network via Ethernet to pull down an image you’ve setup. Once you’ve set everything up it’s wonderfully automatic. The name of the collection of services is called Openstack.

What’s even better is that once each node has fully provisioned itself with an image, it goes to sleep, turning itself off. And then the cluster control can wake it up remotely over Ethernet and it goes to work again.

And the best of all is that the entire thing is free from a software standpoint. (Free is good.) Note that for the default installation you’ll need a spare Ethernet hub/switch, one of the computers needs to have two Ethernet adapters and at least five of the computers will need double hard drives. Since I had so many spare computers I just cannibalized where necessary.

If you’re interested in reviewing this as well, check out this link on Ubuntu’s website. Once you’re finished you’ll have a system in which you can spin up virtual computers and allocate them as you wish. You may securely remote into these virtual computers using the putty software client. If you’ve configured it to use public IP addresses you can even publish websites, for example.

The version that I reviewed was a few back from the current release and hopefully everything is much more stable now. I noted then that it wasn’t quite ready for “prime time” but I’d guess that it’s ready to go by now.

Ubuntu Server or Desktop

Even if you don’t go all the way and create a private cloud you can always just install the free Ubuntu operating system as a server or a desktop computer. It seems to be a very usable collection of well-maintained code. Canonical is the company behind this effort.

Remix OS

And today I’m trying something I’ve just discovered called the Remix OS for PC. It’s essentially the Android operating system for smartphones, just setup especially for a standard computer. Jide Technology appears to be the underlying developer.

At the one-hour mark: Things looked good for the first fifteen minutes or so of the installation. Unfortunately, after an hour I would guess that it’s possibly stuck. The Dell Vostro 200 appears to have an acceptable graphics adapter (Intel GMA 3100) and yet I still don’t have a full installation yet. Since the status light on the USB drive does still randomly blink perhaps it’s just taking a very long time. I’ll not interrupt it and see what happens.

At the two-hour mark: I’m still staring at the same pulsing Remix OS logo. The status light seems to indicate that progress is still happening or so I’d hope.

End-of-day: At this point I think I’m going to just let it run all night if it wants and see if it’s finished in the morning.