You may have noticed the new digs. You may have noticed I actually posted something. You may have a noticed a terrible mental visual in your head. Yeah, sorry about that last one. I am starting my blog anew. I have ported over the last few posts that were worthwhile and am primed to get going. However, I made some changes I feel are worth sharing.

I am not going to try to scope the content of this blog. That is a mistake I have made several times and it just never works out. This is going to be a blog about whatever I feel like posting about. Tech, personal, photos, videos, quotes, code, whatever. My only rule is the general rule I have about putting things in writing (only do it if you don’t mind being quoted on it).

I have finally moved off Wordpress. I have used Wordpress for many years and have loved it, but it’s time for me to try something new. I like the idea of making my content easily accessible, easily postable and some incidental social aspects to it. So I moved my blog over to Tumblr. However, for blogs about code, code samples and whatnot, I have decided to use GitHub. I like the idea of people looking at the code I have written, being able to download it succinctly, do whatever they want with it and even easily recontribute it to the world. GitHub does all these things very well. However, I want to show code examples in my posts. This is where Gist comes in. I can put files, snippets of files, whatever on their site and just embed them here. Yes, it’s a script tag. I’m hoping it won’t be too big of an issue, because the convenience for me and I believe for anyone that wants to use the code should be worth whatever compromise I have had to make around progressive enhancement. Github even styles the code for me.

Which brings me to my last point. Style, I have none. Well, more specifically, my blog has none but hey… if the shoe fits… I will eventually style this blog but I didn’t want it to get in the way of my content or hold me up. So I have decided to launch the site naked. This will force me to concentrate on markup and content of the site, making sure I have things as appropriate as possible, then layering on the design.

So, here’s to hoping I actually stick with it this time. Oh, and stop picturing me naked.

I would have never guessed I would be blow drying my range out this evening. Apparently the cleaning lady came today and while she does a fantastic job, apparently she got the cooktop too wet. When electronic ignitor switches get too wet, they just start igniting. No gas leak, nothing else wrong under than the ignitors were firing. Turns out a little blow dry session dries them all out and it’s right as rain.

The thing is, I found this out by Googling for it. I even talked to my dad who is my go to person when I need to know how to fix something and he had never heard of it. I just wonder what would have happened had I not had the internet to figure this out. I suppose I would have paid way too much for a technician to come out and be victim to his or her whim.

Long live the internet!

Update: Added the check to make sure the input is empty before showing the overlayed label the first time.

I recently read Trevor Davis‘ post on inline form labels. First off, I have the utmost respect for TD. I read his blog regularly and have learned a lot from his posts. While I respect the work he has done for his plugin, I approach things differently. I am a UX Architect for a government site so I have significant concerns about accessibility, semantics and progressive enhancement.

My approach differs from him in 2 main facets:

1. He is pulling his inline form label value from the title attribute. I am using the actual label. I feel this is more semantic.
2. He is adding and removing a value to the form field. This can cause validation and styling issues. I am going to overlay the label on to the form field therefore not mucking with the value of the field.

That is not to say my technique is not without issue. It relies on good support of the CSS box model.

Simple markup, just your basic form. I’m an unordered list guy for forms, but certainly your favorite method of marking up forms should be fine. Except for tables, cause that’s just wrong.

Again, simple stuff, note the position: relative on the li. That’s sets a bounding box for everything inside of it. Then we are free to use position:absolute for the label (when overlayed). That effectively removes it from layout allowing the inputs to slide left (or up, depending on your form layout).

Notice the use of the overlayed class. I could just style the labels this way by default, but the whole technique here needs javascript. As a general rule of thumb, I use the same technology to add something as I use to manipulate it. Since I will need JavaScript to manipulate the label visibility, I will use JavaScript to put it in position to begin with. I could have styled the label in a default manner (left of the input, above the input, etc) but chose not to for simplicity’s sake.

This code is relatively simple as well but let me point out a few things. Obviously this is assuming jQuery is loaded. Setting a native object for the form elements saves a lot of processing time. Doing the jQuery lookup every time you reference the object is very expensive. Do it once and store it to an object.

Moving on, for each form element set a label variable based on the associated label tag then add the class overlayed to the label. This will position the label inside the form field. Since JavaScript is needed for this technique, we want to initialize the whole thing with JavaScript. You don’t want to end up in a situation where the user has stylesheets capabilities but not Javascript leaving them with an overlayed label and no way to hide it.

Finally we add some event listeners for each form field. The first is a focus which does a lookup on the label associated with the field that has focus and hides it using jQuery’s hide method.

The second event listener added is for blur. If, on blur, the form field value attribute is empty we show the associated label using jQuery’s show method.

That’s about it. I hope you found this technique useful. If nothing else, maybe you found this to be an alternative to Trevor’s inline form label technique. If I get enough interest I will look into creating a jQuery plugin for this. Feel free to wholesale reuse this technique. I hardly coined it, I just blogged it.

We are back and it was a great, albeit long, trip. It was a beautiful wedding and a blissful honeymoon. However, I have tales to tell. Really, just my perspective on things. Though these aren’t in chronological order, I thought I would start with the story that has been told a couple times already so it has some form.

“And here is your bidet” our butler told us as he gave us a tour of our villa. I had heard of a bidet, but I had never actually seen one. See, down in Texas, we uh… just use paper. And admittedly, even in my time traveling, I have never happened across one. I knew what it was for, and honestly, I was curious. I was determined to figure it out.

I took a gander at it, it had a hot water knob on the left, a cold water knob on the right and a knob in the middle. Ok, not unlike a shower. There’s a bulbous looking water spout in the bottom of the bowl. It’s like an upside down shower head. Ok, I see where this is going. Or so I thought.

After dancing around the idea of trying it out for a day or so, the humidity and just perpetual sweating got the best of me. I was gonna give it a shot (no pun intended). So, turn on the hot water, it starts filling up the bowl from the sides similar to how a toilet does when you flush it. Well, I do know what this device is for, and I’m not about to stick my hands down in that bowl. So I add a little cold to try to get a warm water. I turn the middle knob just a bit, to try to get a water fountain effect. Just high enough for me to feel the water without having to dunk my hand in the bowl. Seemed ok.

Then I really started to consider how to use this apparatus. I mean, how do you mount this thing? I see the knobs are in the back, do you face the knobs so you have control? But it’s shaped like a toilet bowl, so I sit like I would on a toilet bowl? But that means I have to reach behind me to control the temperature and water pressure. That doesn’t seem natural. Then I really notice something that threw me off and ended up being my demise.

There is no seat on this thing. It’s like a toilet without a seat. Just a porcelain bowl. I have visions of what the toilet bowl can look like in my house with the seat up and decide, there is no way I’m sitting directly on that. It looks clean enough, sure. But still, no way. Turns out, that was exactly what I should have done.

So, I decide to do the chick thing and squat over it. Unfortunately, I forgot to take gravity into consideration in all this. I got into what I thought was position and turned up the water pressure. That’s where things got messy.

First off, I initially missed. When I say I missed, I mean I was soaking my inner thigh. Just totally missed the important parts all together. Ok, adjust. But wait, why was my calf wet? Crap, I didn’t squat down far enough, the water is running down my leg. And into my shoes. Yes, at my ankles were my underwear, my pants, socks and shoes, now totally soaked. So now I’m reaching behind me, looking for the water pressure knob to turn it off and that is causing me to move and water is spraying everywhere. Both legs, up my shirt, up my nose, even in my hair (turns out I had the water pressure up way higher than it needed to be). By the time I get it turned off, I am completely soaked from head to toe and there is standing water in the toilet room. It’s leaking out under the door and my wife is asking what the hell I am doing in there. Thankfully I had the door locked so she couldn’t come in and see for herself. I went straight to the shower, did not pass go, did not collect $200.

Since then I have looked up how to use it and if I encounter one again, I may actually try it again, maybe.