craveytrain

The front end guy is often considered the guy who “makes things pretty”. While this description is based on a kernel of truth, it’s more of a stereotype. It’s about as accurate as describing the server-dev as the guy who just “serves data”.

Craveytrain Progress: Content

So, as it makes sense, I’m gonna blog about the progression of my site. First things first, I am working on the content. First, I’m trying to write it. Nothing groundbreaking, but worthwhile, hopefully. The content is structured in HTML5 (hopefully semantically). Basic navigational elements? Check. Pithy Bio? Check. My profiles on other sites? Check. So what’s missing?

Contact form for one. I got tired of fighting the spam battle, so now I just link to my profiles on other sites with social features. If you want to reach out to me and don’t already have my contact info, hit me up on one of those networks. They do the hard work for me, so use them for what they are good for.

Portfolio. I’m not looking for work. There’s not much to show in my portfolio that’s particularly groundbreaking. So, it’s gone, for now. Maybe it will be back when it’s worth looking at. Until then, no need taking up space with it.

Still considering adding my twitter feed. Not sure if that brings much value to this site though. Especially since I tweet some of my new blog posts. Just not convinced of the value add.

Making Inputs Behave (Like a Block Level Element)

Anyone who has styled forms understands the frustration that is the input/textarea (or whatever your weapon of choice for masochism). They can be frustrating to make behave consistently. I found a technique I used today that I thought I would share. I seriously doubt I’m the first to use it but none-the-less maybe someone hasn’t seen this before.

I had always assumed inputs (from here on out, when input is used, assume all inputable form elements) act weirdly. They aren’t inline, they aren’t block, they are just… weird. While most of us have become accustomed to dealing with this, this can be particularly troublesome making them do things like behave like a block level element but have padding.

In a proper block level element, if you want it to take up the full available width and have padding, it does that by default. Maybe you have to set width: auto. But even when you set an input to block level element, it won’t behave like one.

CSS3 introduced a nice little property called box-sizing. Essentially with a value of border-box this can make an element behave like Quirks mode in IE. Initially my response to this was “WTF?! Why?!”. But this allows you to turn it on for 1 element. 1 element that normally won’t adhere to the box model for block level elements. So, without further ado, full width inputs with padding:

July Austin JS Meetup

Tonight I made it to my second Austin JavaScript Meetup and I left thinking “Dammit! Why have I been missing these?!” Well, I know why but the point is, I’m there now and plan on making the rest of them.

Tonight Joe McCann gave a talk (with attempted demo) of node.js. Things went wrong as coding live is often prone to do and we were left with more of an explanation than a demo. Still, Joe’s an excellent speaker, engages the audience well and does a good job of keeping the banter going while working through the issues. I’ve learned the JS group has no lack of banter.

Andrew Dupont gave a detailed demo about scripty2, the successor to script.aculo.us with specific highlighting of the trials and tribulations of CSS Transitions.  The picture he painted was grim and discouraging for blazing out on your own and doing the CSS Animations yourself. Of course, that’s where scripty2 comes to save the day. It normalizes the behavior across all reasonable browsers. It’s still in alpha but has some promising merits. I’ll be interested to see where this ends up going.

All in all, this was a fruitful meeting and I may break down and present something next month. To be certain, I don’t have the polish of these presenters so it’s something I will have to give some thought to. We’ll see…