Chronicling the adventures of a mild mannered developer creating a responsive web application for mobile, tablet, and desktop in open web HTML5, CSS3 and Javascript.

Print

Order Matters

Developers take the request for granted. We throw stuff up, and pull it down, not really worrying about more. But the order of a request is governed by the order of the fields in your form, top to bottom. Forms allow you to have multiple elements with the same name.

So: a form like:

<form>
<input name="ordermatters" value="one">
<input name="ordermatters" value="two">
</form>

Creates a GET request like ?ordermatters=one&ordermatters=two. The second OVERWRITES the first. Just as if you defined them in code. So,

<? echo $_GET['ordermatters']; //equals two

 

PHP developers probably know well the ability to group variables in the request by using square brackets. So:

<form>
<input name="ordermatters[]" value="one">
<input name="ordermatters[]" value="two">
</form>

Creates a GET request like ?ordermatters[]=one&ordermatters[]=two. This is great for multiple select or checkbox elements.

<? echo $_GET['ordermatters']; //equals array(ordermatters) ?>

 

The case I hit today, was more interesting. I have a captcha, that contains two elements, captcha[id] and captcha[value]. I needed to add another element named just "captcha" to do some ajax validation. S:

<form>
 <input name="ordermatters[id]" value="one">
<input name="ordermatters[value]" value="two">
<input name="ordermatters" value="three">
</form>

 

ONLY three came through! We created a new variable, blanking the other two. By placing the last input BEFORE the others, it worked as I wanted. Pay attention to ordering your request, something firebug's inspector doesn't show unless you look at the physical GET request.

Add a comment
Print

Developing for Internet Explorer in HTML5

Developing for IE has always been an extremely difficult challenge. Lately I have really come to appreciate IE9, since the developer tools embedded allow you to switch between the versions easily. All the years of IESwitchers and VM's, arcane NT debuggers which never worked, gone. I have one VirtualBox image with Windows 7 and IE9 which I can fire up easily on my mac to do some testing.

I have been pleasantly surprised by how HTML5 works on IE as well. All IE versions kick into standards mode and don't get into odd font sizing issues. I do use the famous HTML5 Google Shiv in all my pages with IE conditional comments. Don't use the plethora of CSS hacks out there for IE. Do use something like Dojo which automatically puts special classes on the html element with browser specific information. So, in say IE7 the html element will automatically contain an dj_ie7 class which you can leverage in your sheet. Try to use these as little as possible! But with one tiny line:

.dj_ie7 table { width: 95%; }

You can achieve the effect without polluting your code going forward. Modern designs rely heavily on rounded corners and gradients, and with IE8 and under you don't get them. Make peace with it. The users of these products will diminish, and they are used to that look anyway. Going through ANY gyrations as we have in the past (images) to pull these effects off are obsolete. I use less mixins to do all the rounded effects for all prefixes easily. I highly recommend preboot.less for a good starting point for mixins. It is a real engineering effort to understand all the different ways browsers do these effects. Stay up to date and use just the parts you need.

Right now IE7 usage is at about 2%. That means more people see your app in Opera. I just took an IE7 pass on our app, and made a few small adjustments (mainly on things like overflow-x:hidden) which buff it up a bit. Spend your time progressively learning about CSS3 effects and positioning. I have been very happy with how well Dojo 1.7 async loader works with IE and performance seems great.

 

Add a comment
Print

Hold the Placeholders

Some of our early mobile designs utilized the new html5 placeholder attribute instead of using old fashioned <label> tags. On the photoshop design, it looked sweet, and I was anxious to see how it worked on mobile. I was happy to see that it works perfectly with no script and can be styled at will. On to the next issue.. but!

There is one rule for placeholders that I could not have foreseen without trying it. In our application a user can go back and edit the data in the form if they made a mistake. Try looking at a pre-filled form that has no labels and you will see what I mean. Placeholders are only good for when you will never have to revisit the form again, a one submit and go. Looking at input fields prefilled and no labels (since the place holder is gone) it is impossible to determine which field is which. 

Add a comment
Print

HTML5 to the Rescue - wbr tag

When designing an application to scale dynamically to different widths, you hit things you never had to worry about before. For example, there are times where you want fine control over where text breaks because it could be illegible on phone resolution. We have always had the ability to apply white-space:nowrap but here we want more, we want to specify where a line could break. Enter the <wbr> tag, now in html5.

http://www.w3schools.com/html5/tag_wbr.asp

The beauty of html5 is that you can take advantage of the new features where you need them (modern browsers) while allowing old browsers to simply ignore them. Because we don't need to be concerned with IE7 on mobile (we hope ;-) ) this is a perfect application of this tag.

I used this to format a date header on our appointment card layout. The desired result when it had the room was:

Tuesday, April 26th, 2012

on mobile it needed to be:

Tuesday,
April 26th, 2012

By adding a <wbr> after Tuesday, and a white-space:nowrap around the date, we get exactly the behavior we want, with no illegible permutations. Killer!!

 

Add a comment