HTML5 support and the latest browsers

I got an email update from Microsoft on their upgrading of Bing Rewards to "Microsoft Rewards", which includes using Microsoft Edge as another way to earn rewards. My first thought was that that wouldn't be too bad for web developers who use multiple browsers, anyway. But, of course, Edge is quite a bit more advanced than the Internet Explorer versions that people are still using.

So I was curious how each browser stacked up, and went to html5test to check on current compatibility.

Browser versions:

  • Chrome Version 51.0.2704.106 (64-bit)
  • Firefox 48.0
  • Safari Version 9.1.2 (10601.7.7)
  • Edge (Okay, I haven't figured out how to find version info on Edge yet)

HTML5Test overall scores (all features in categories are given pretty much equal weight)

  • Chrome: 492/555
  • Firefox: 461/555
  • Edge: 433/555
  • Safar: 370/555

While Firefox looks like number 2 overall, the form elements features in HTML5.

  • Chrome: 64/65, only missing Directory Upload support (no browser listed has it)
  • Edge: 58/65, missing an output element, input type=color.
  • Firefox: 44/65, but missing all the date type inputs, including type=date itself.
  • Safai 39/65<, with similar gaps + datalist element./li>

I also decided to run all four against Acid3:

  • Safari: 100/100, mostly smooth
  • Edge: 100/100, but pregnant pauses and artifacts in the intermediate stages.
  • Firefox: 99/100, completely smooth until it stopped.
  • Chrome: 97 - 99/100. One artifact in the upper left corner, inconsistent results.

Conclusion:

There probably won't be much benefit in using Edge as far as uncovering problems traditionally associated with IE, but it is yet another browser that behaves "differently", yet not nearly as frustrating as old Microsoft browsers.

Bootstrap 3 radio-inline and checkbox-inline elements running together.

I was having issues with Bootstrap 3 radio buttons running together even though the labels had a "radio-inline" attribute.

After examining the layout of the html being generated, I realized that each individual label and radio button was being wrapped in its own containing element (in this case, a "td" element.)

The reason for this is the following CSS:

.radio-inline + .radio-inline, .checkbox-inline + .checkbox-inline {
  margin-top: 0;
  margin-left: 10px;
}

If the .radio-inline elements aren't adjacent to each other, the 'margin-left' value will not trigger.

Unfortunately, it took a little too long to track down the source of the issue, but now I know.

Sites That Have a Problem Working in Google Chrome

I've been hitting issues with site compatibility with Chrome lately, so I decided to start with a list of sites that I've had issues with in the last day, and I'll build on from there.

As of Chrome 39.0.2171.71 (64-bit) on Yosemite:

  • panel.dreamhost.com - Rebilling edit does not allow you to check the checkbox to limit billing on one day or specify an amount. (Only happened when my recurring was expired. Cannot reproduce now.)
  • Fidelity.com - Quicklinks dropdown after login collapses immediately instead of allowing you to select a menu item.
  • playstation.com - Password Reset password fields don't register that you're typing in any information (strength meter doesn't change), and when you submit, you password hasn't actually been changed. Same functionality worked in Firefox.
  • GWT Developer Plugin installed but not recognized.

Twitter Bootstrap Modal Won't Load Content from Another ("Remote") Page

Short answer

You apparently need a skeleton [modal ... modal-body ... /modal] for your data-target, not just an empty modal with the data-target.

A Programmer's False Assumptions - The API is Broken or Old

Initially, I was concerned that my Rails plugin wasn't using a version of Bootstrap that didn't include the remote loading of a page into the modal (via href attribute). That functionality has only existed since 2.0.4.

However, when I checked the script being loaded into the project against the current bootstrap-modal.js on github, the MODAL DATA-API section was the same. Repeated checks of the javascript being loaded into my project confirmed that the code was up-to-date enough.

Maybe a Little Too Helpful

The forums discussing how to load remote content into a Bootstrap Modal suggested that the data-target div could be empty:
Original calling page sample:
The contents of the calling page div never changed.

<a class="btn small" href="/stuff/1/edit" data-toggle="modal" data-target="#editstuff">Settings...</a>
.
.
.
<div id="editstuff" class="modal hide">This should not display</div>

"Remote" page sample

...extra code here...
<div id="editstuff" class="modal hide">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal">×</button>
<h3 id="myModalLabel">Remote header</h3></div>
<div class="modal-body">Actual edit stuff</div>
<div class="modal-footer"><button class="btn" data-dismiss="modal">Cancel</button> <!-- just a sample --> 
<button class="btn" data-dismiss="modal">Close</button> 
<button id="save_btn" class="btn btn-primary">Save changes</button></div>
</div>
...extra code here...

What Was Really Happening

The documentation states that, "If a remote url is provided, content will be loaded via jQuery's load method and injected into the .modal-body."

From there, I put a stub modal-body in my calling page's modal and discovered that modal-header, modal-body, and modal-footer appeared to be getting replaced now!
New calling page:

<div id="editstuff" class="modal hide">
<div class="modal-body"><!-- content will be loaded here --></div>
</div>

Password protecting a website

Password protecting a website using .htaccess - this method pretty much requires shell access, but most web hosts have a web control panel interface to do this work. It should be noted that this isn't the most fool-proof method of protecting your data, and a configuration error can inadvertently open up your directory to the world.

An example for ICDSoft:

The option for this is called "Protect" on the Control Panel.

You can browse to a directory through this interface, and click "Protect It!" next to a specific directory.

From this interface, you can add users for the directory:

Indispensable and portable free stuff

I was listening listening to one of the old Geek Brief podcasts, and was reminded of a website with portable versions of applications that are very useful when supporting computers that aren't your own, or running from several different PCs.

Of particular note are the Development apps available.

Notepad++ is an excellent text editor based on the SciTE editor that comes with Ruby installations. It's not quite my old standby gvim, but then again, it doesn't need much customization to do its thing either.

Also included in the section is XAMPP, which includes Apache, mySQL, PHP and Perl. In addition, the FULL version package includes valuable extras like phpMyAdmin. I haven't experimented with either the lite or full package, but I will be reloading a PC soon, so I'll see then how much more smoothly this package makes setup for me.

SmartFTP is no longer free

Considering my web hosts do not provide shell access, a solid FTP client was invaluable for me in making updates and changing websites, since windows "web-based" ftp client is less useful than their console client for me (web-based does not work consistently with directories above user home).

I thought I had found a solid FTP client in SmartFTP. Kent J. Chen's weblog burst my bubble. However, he did offer up an alternative product, FileZilla. Downloading it now.

.htaccess redirect guide

My favorite tip:

Changed file extension?

This example is perfect if you've decided to switch to .php from .html pages. It will look for any .html page and redirect it to .php (ie http://www.example.com/yourpage.html and redirect it to http://www.example.com/yourpage.php). Now, be careful with this, it does mean any html page. I did this on one of my sites and had totally forgotten I had an iframe with .html content on some pages... I didn't notice for weeks that it was broken :S.
So learn from my mistake 😉 check, double check, then check again.

RedirectMatch 301 (.*).html$ http://www.example.com$1.php