Smart use of jQuery and an API to autofill from ZIP code.

I hate entering things twice.  When I get a form mostly filled out, and something happens to cause me to lose the data, oohh.  I hate that.  

So entering the city and state on every form is bad too.  If you have a correct zip code, you know the city.  Then I found this nifty tutorial to auto fill the city from the zip code. Check it out.  Smooth.

I decided to look into zip codes a little more. 

From Wikipedia. 

ZIP codes are a system of postal codes used by the United States Postal Service (USPS) since 1963. The term ZIP, an acronym for Zone Improvement Plan,[1] is properly written in capital letters and was chosen to suggest that the mailtravels more efficiently, and therefore more quickly, when senders use the code in the postal address. The basic format consists of five decimal numerical digits

Interesting.  I pledge to never make anyone fill out a zip code and a city.  

It’s Friday…

Leave a comment on this post if, in your mind you started singing Friday.  Sorry.  It had to be done. 

So 2 weeks ago I said I would have my website up.  It is! Unfortunately not on my domain joshdance.me.  It is on a random domain that I had registered for a different project.  But I will soon move it here.  

Recently, I have seen certain chunks of code, or patterns pop up in many designers work.  I wanted to know why and happily, today I uncovered the mystery of the Phantom Comments.  

Sometimes in code, programmers want to write something that only the people who look at the code see.  It is not meant to be displayed, or operated on by the computer.  You set these comments off by putting in a comment symbol and then the comment.  In html the comment symbol is this:

<!–"comment goes here"–>

Simple right? But I was confused by a statement that I saw on many webpages.  It went like this. 

<!–if(a string of computer code)–>

The comment had what looked like code in it.  At first I thought that maybe the programmer just wanted the code not to be seen by the computer, but then why would she take the time to write it? I searched google but didn't find much. However, I am happy to report that today, I solved it.  

I was reading this little tutorial and came across a part where the author says, "and then we throw in this html5 shiv", and then he used the confusing code! I thought to myself, "Why it must be called the html5 shiv! So I promptly googled and found this article about the html5 shiv on Wikipedia.  As usual, it is all Microsofts fault.  🙂 Older versions of Internet Explorer doesn't implement CSS very well.  So everyone puts in this little piece of code to fix their website in IE.  Mystery solved! But then I had one more question.  If the code is in the comment, how does IE even see it?  Back to google I went. When I searched for "if statements in html comments", I found this article about CSS conditional comments. Guess what? Code in comments only works in this one instance in IE.  Therefore it is only used to fix rendering problems in IE.

Next week I am going to continue digging into CSS and making it happen.  #LetsDoThis. 

Sometimes you find lots of ways that don’t work.

I spent quite a bit of time making a new page for ye olde website today.  Unfortunately, I don't have much progress to show for it.  

Edison
(This picture just about sums up the day.) 

I had some issues with CSS spacing and margins.  There were gaps where I didn't want them, and things were missing where I did want them.  I didn't learn any new tidbit today but I did learn one essential programming principle.  Press on!

Sometimes you find lots of ways that don’t work.

I spent quite a bit of time making a new page for ye olde website today.  Unfortunately, I don't have much progress to show for it.  

Edison
(This picture just about sums up the day.) 

I had some issues with CSS spacing and margins.  There were gaps where I didn't want them, and things were missing where I did want them.  I didn't learn any new tidbit today but I did learn one essential programming principle.  Press on!

Case of the Phantom Tooltips – SOLVED

I spent just as much time implementing a small feature today, as I took yesterday to build the whole website.  Sheesh. 🙂 

The feature was this: I wanted to have tooltips pop up giving a little more info on the social network site icons.  Not just any yellow standard tool tips. No sir, I wanted custom tooltips. 
No

(None of that standard yellow stuff. Custom or bust.)

I found this article about tooltips with CSS and HTML5. Very nice.  However, when I implemented it, I got my custom tooltip, AND the standard yellow.  Not good.  I then spent a lot of time reading articles and trying different things, working towards perfect tooltips. I learned a lot on the way. 

I learned about the z-index property of CSS.  Basically when items are positioned absolutely, they can overlap.  The z-index controls which come first.  The higher the number the higher they are in the stack.  The items are drawn to the screen in z order from low to high.  So a z-index: 1, would beat a z-index: -1.  

I learned about css positioning.  The key thing I learned was that you can position things using negative pixels. For example left: -7 is what I used to position the object 7 pixels away from the left edge in the negative direction. 
Left_-7

(Here is my very quick visual representation of this phenomenon.)

Yes I had learned these bits of knowledge but my original problem of double tooltips was still lurking.  I kept looking.  I eventually found this article from css-tricks that basically stated "It won't work using a title tag."

I was not to be deterred. I returned to read the original article and…. found the solution. data-tooltip.  HTML5 can have custom data tags.  I made my links a certain class and pulled out the custom data and boom baby.  Custom tooltips. 
Yes

(Beautiful.)

I had avoided this because css doctor says "You shouldn't use data for CSS styling hooks, because if the data is that important, it should be a presented differently."  This is unfortunate because they are right. The tooltip provides a little extra information.  I belongs in the title tag. But this is precisely what causes the double tooltip problem. 

So I have spent an hour working on these tooltips.  I have found a solution, but a nameless faceless standards body says I should not do use the solution.  

So I used it.  A it works wonderfully.  Check it out live here

PS – I think standards are essential and I try to follow them in all the important things.  For example, screen readers would not read my custom tooltips. But they are not essential to navigation which is why I feel this work around is acceptable for now.

Case of the Phantom Tooltips – SOLVED

I spent just as much time implementing a small feature today, as I took yesterday to build the whole website.  Sheesh. 🙂 

The feature was this: I wanted to have tooltips pop up giving a little more info on the social network site icons.  Not just any yellow standard tool tips. No sir, I wanted custom tooltips. 
No

(None of that standard yellow stuff. Custom or bust.)

I found this article about tooltips with CSS and HTML5. Very nice.  However, when I implemented it, I got my custom tooltip, AND the standard yellow.  Not good.  I then spent a lot of time reading articles and trying different things, working towards perfect tooltips. I learned a lot on the way. 

I learned about the z-index property of CSS.  Basically when items are positioned absolutely, they can overlap.  The z-index controls which come first.  The higher the number the higher they are in the stack.  The items are drawn to the screen in z order from low to high.  So a z-index: 1, would beat a z-index: -1.  

I learned about css positioning.  The key thing I learned was that you can position things using negative pixels. For example left: -7 is what I used to position the object 7 pixels away from the left edge in the negative direction. 
Left_-7

(Here is my very quick visual representation of this phenomenon.)

Yes I had learned these bits of knowledge but my original problem of double tooltips was still lurking.  I kept looking.  I eventually found this article from css-tricks that basically stated "It won't work using a title tag."

I was not to be deterred. I returned to read the original article and…. found the solution. data-tooltip.  HTML5 can have custom data tags.  I made my links a certain class and pulled out the custom data and boom baby.  Custom tooltips. 
Yes

(Beautiful.)

I had avoided this because css doctor says "You shouldn't use data for CSS styling hooks, because if the data is that important, it should be a presented differently."  This is unfortunate because they are right. The tooltip provides a little extra information.  I belongs in the title tag. But this is precisely what causes the double tooltip problem. 

So I have spent an hour working on these tooltips.  I have found a solution, but a nameless faceless standards body says I should not do use the solution.  

So I used it.  A it works wonderfully.  Check it out live here

PS – I think standards are essential and I try to follow them in all the important things.  For example, screen readers would not read my custom tooltips. But they are not essential to navigation which is why I feel this work around is acceptable for now.

My website lives!!!! – sort of.

Screen_shot_2012-05-15_at_9

Today I made some serious progress on ye olde website.  I downloaded the Goldilocks Responsive Boilerplate and went to town.  It is super simple so far, but I like the direction it is going.  

I also started getting my hosting set up. It was quite the beast.  Nameservers, A records etc.  I had to remember some of the stuff I learned in ISYS and I had to Google quite a few things. But it is up.  As in live on the interwebz.  Want to see it? 

The domain name is one I had registered a while ago and just threw up on there.  Drag the window size around and see the responsive smoothness. 

I will keep making improvements to it every day till Friday.  

My website lives!!!! – sort of.

Screen_shot_2012-05-15_at_9

Today I made some serious progress on ye olde website.  I downloaded the Goldilocks Responsive Boilerplate and went to town.  It is super simple so far, but I like the direction it is going.  

I also started getting my hosting set up. It was quite the beast.  Nameservers, A records etc.  I had to remember some of the stuff I learned in ISYS and I had to Google quite a few things. But it is up.  As in live on the interwebz.  Want to see it? 

The domain name is one I had registered a while ago and just threw up on there.  Drag the window size around and see the responsive smoothness. 

I will keep making improvements to it every day till Friday.