Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Comparing changes

Choose two branches to see what's changed or to start a new pull request. If you need to, you can also compare across forks.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also compare across forks.
base fork: craveytrain/ssg
base: bf2e325eae
...
head fork: craveytrain/ssg
compare: c74c153a25
Checking mergeability… Don't worry, you can still create the pull request.
  • 2 commits
  • 26 files changed
  • 0 commit comments
  • 1 contributor
View
18 content/posts/behave.md
@@ -0,0 +1,18 @@
+---
+title: Making Inputs Behave (Like a Block Level Element)
+date: 2010-07-26 14:24:16
+tags:
+ - css
+ - css3
+ - forms
+ - html
+---
+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](http://www.css3.info/preview/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:
+
+{% gist 491078 %}
View
26 content/posts/bidet.md
@@ -0,0 +1,26 @@
+---
+title: "Adventures in Honeymooning: Bidet"
+date: 2006-12-06 20:24:15
+tags:
+ - anecdotal
+ - bidet
+ - humor
+ - honeymoon
+---
+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](http://en.wikipedia.org/wiki/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.
View
13 content/posts/content.md
@@ -0,0 +1,13 @@
+---
+title: "Craveytrain Progress: Content"
+date: 2010-07-27 23:14:13
+tags:
+ - psa
+---
+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.
View
33 content/posts/cors.md
@@ -0,0 +1,33 @@
+---
+title: Cross domain XHR
+date: 2011-06-17 03:36:44
+tags:
+ - javascript
+ - xhr
+ - cors
+ - jquery
+---
+
+Recently I had to learn a little bit about CORS (cross origin resource sharing). I had sites on different domains I had to get data in between. I like to try to be foward thinking, so when I learned about a better option than JSONP, I jumped all over it. Nicholas Zakas explains is very well on his [article about CORS](http://www.nczonline.net/blog/2010/05/25/cross-domain-ajax-with-cross-origin-resource-sharing/). Like all the other new, fun technologies, it's not supported by all older browsers. So I had to find a way to be forward thinking but have a fallback. What I ended up with is a CORS xhr that falls back to JSONP if CORS is not natively supported.
+
+We are using [jQuery](http://jquery.com) on this project so it made it even simpler to do. I used the new [$.preFilter](http://api.jquery.com/jQuery.ajaxPrefilter/) to make it even easier.
+
+{% gist 1028553 client.js %}
+
+The prefilter is just taking the dataType attribute, doing a check to see if the request is crossDomain (an internal jQuery property) and if the browser support CORS. If it is cross domain but the browser does not support CORS, it changes the dataType to JSONP. It's really that simple. jQuery does everything else behind the scenes. It takes care of the request, and if XHR, calls the success callback with the response payload of the request. If it's JSONP request, it calls the success callback with the same data as the XHR response passed in as a parameter.
+
+ I also threw together a sample server:
+
+{% gist 1028553 server.js %}
+
+The server just does a detection for the callback request param (the default request param name used if it's a JSONP request), and if so, it sends the response back as JSONP, using the value of the callback param as the function name and making sure to set the `Content-Type` to `applicastion/javascript`. If the request is XHR, it gives a `Content-Type` of `application/json` and sets a header of `Access-Control-Allow-Origin` to (preferably) the host making the request. For this example I am using a wildcard. You may not want to do that in a production environment.
+
+If you read the explanation article above, you will notice it says that by default, auth items are not sent over on cross domain XHR requests. Missed that little note? Yeah, I did too the first time. That's why I'm writing this, to help it sink in. So, in the event you need to send over cookies or something along those lines, you just need to add `withCredentials: true` to the native XHR object. jqXHR makes that available via the `xhrFields` object.
+
+{% gist 1028553 client-withCredentials.js %}
+
+The server just requires 1 more header in the response.
+
+ Access-Control-Allow-Credentials: true
+
+And that's it. I hope this was beneficial to ya. If you have any questions, feel free to lemme know.
View
15 content/posts/countdown.md
@@ -0,0 +1,15 @@
+---
+title: Character Countdown
+date: 2010-12-06 11:01:15
+tags:
+ - glgui
+ - javascript
+ - jquery
+---
+I had some spare time today, a really nasty plugin I had written for jQuery a while back to do character count downs and a desire to play with the widget factory. Let's get it on!
+
+First things first, I have give thanks to [Adam J. Sontag](http://ajpiano.com/) for showing me the way with the widget factory. I had tried it before but was missing something (namely, the scope of this in event handlers was eluding me). Then I saw an example in [Adam's slides](http://ajpiano.com/charlie/). `$.proxy!` So that's what that does. He caused my eureka moment, and for that I am grateful (just missed Thanksgivings by a few days, sorry Adam).
+
+Basically on a litany of events it counts the characters in a form field and compares it to the specified max (either a config property or maxlength value). It can do the threshold coloring like twitter does. Actually, it was modeled a lot after twitter.
+
+You can check it out at the [GLGUI Toolbox](http://github.com/glgui/toolbox) and there is even an example page.
View
32 content/posts/design.md
@@ -0,0 +1,32 @@
+---
+title: New Design
+date: 2010-12-13 22:58:16
+tags:
+ - design
+ - font stack
+ - media queries
+ - psa
+---
+Yes, it's that time of the year. Time for me to do another half assed design. This one looks particularly half baked, I know. But this one has rhyme and reason where the others were just laziness. This is still a transitional design, but instead of going naked, I'm going for a few simple design principles and then will fill in the rest as I go.
+
+## Legibility
+
+The main goal of the new design is legibility. Large font sizes, large leading, serif fonts, liquid but liberal measure. Content first, right there on the left. Headline at the top. Content is given the primary position, with nav and branding (or the eventual spot where branding hopes to be) is secondary, out of the way. Granted, it's fixed, so it stays with the user but it's definitely secondary.
+
+## Font Stack
+
+Serifs are back in. Headlines are in the beautiful slab serif Rockwell. Body text is in the venerable Georgia. Subheadlines and nav went old school with Berthold Akzidenz Grotesk for a little change of pace. This is probably the first font stack I've ever put together I'm truly proud of. I know, it needs a little work in the leading and some of the kerning is erratic depending on browser and OS, but I think in essence, it's solid.
+
+## Liquid Layout
+
+I am trying out the golden ratio and a liquid layout. I'm no designer but I like to think I understand the basics. There is something oddly pleasing about the proportions. It just feels right.
+
+I struggled with measure. Optimal legibility says it's something like 66 characters wide. I already stated I was going for optimal legibility. But something wasn't sitting well with me. If someone viewed the site in a wide screen monitor there is just so much wasted space. So, I decided to hell with measure. The width is just a raw percentage. If you want to look at this blog in a full width widescreen window, first off, thanks for reading, and secondly, you should have the right to take advantage of all that space. Maybe when I get some content I'll think about capping the measure and doing a more columned approach, but for now, power to the reader!
+
+I'm also accounting for the minimum thresholds. I'm using media queries to handle tablet and mobile device layouts. Eventually I'll get around to doing a proper mobile site, but until this media queries will have to work.
+
+## The site is missing …
+
+And don't I know it. The site is missing a lot. I took it way, way down. It's more basic than the out of the box template. It doesn't have the archives, it doesn't have search, it doesn't have much of anything other than the blog post content. I'm still playing with all those other things but I thought I would go ahead and launch the new template anyways.
+
+So, I hope you enjoy and I'll be posting updates as I update something worthy of a post (which is honestly a pretty low bar).
View
83 content/posts/dotfiles.md
@@ -0,0 +1,83 @@
+---
+title: My little bash prompt
+date: 2011-04-27 03:42:20
+tags:
+ - bash
+ - prompt
+ - os x
+---
+I've been helping some of the guys at work get acclimated to macs and with that, helping them customize their bash prompt. With much thanks due to [mschout](https://github.com/mschout), I have finally got mine setup more or less how I like it (until I change it again).
+
+I want to give a quick rundown of what I am using and why. The code is in my [local-config](https://github.com/craveytrain/local-config) repo on github (with basic install instructions), so I won't go line for line through the configs, just an overview of why I do the voodoo that I do.
+
+## bash_profile
+
+No one wants to dupe their code, and your bash prompt is no different. I use [iTerm2](http://www.iterm2.com/) as my terminal which does some nifty things, not the least of which is give the ability to open up a new tab at the same path as the previous tab's path. However, when doing this, it will only run the .bashrc file, not the .bash_prompt. The reasons why are beyond the scope of this post but are at least highlighted at [server fault](http://serverfault.com/questions/8882/what-is-the-difference-between-a-login-and-an-interactive-bash-shell). Point being: write your code once, and just call it up.
+
+## bash_completion
+
+There are a couple files associated with this feature and a lot more scripts I am not using. This is a pretty sweet little script for allowing tab completion of git commands as well as branch information in your prompt (if you are in a git branch). I took the stock one and adjusted it to color the branch name based on whether it was clean or not. There are other bash_completion scripts, I just haven't gotten around to trying them out yet.
+
+## gitconfig
+
+I didn't originally have this one in there, but a lot of people started asking me how I had my git setup. So, here's what I have and why:
+
+### color
+Turn 'em on, all of 'em
+
+### aliases
+I like co for checkout, br for branch, st for status and lg for this funky, pretty little log format I found on [stack overflow](http://stackoverflow.com/questions/267761/what-does-your-gitconfig-contain).
+
+### mergetool
+Yeah, I'm lazy, I am using opendiff (aka file merge)
+
+### editor
+Textmate, though I am considering to going back to just using vim or whatever was default
+
+### autocrlf
+input.
+
+This one sparks some conversation. It's my belief that we should be using lf in the repo, cause that's how Linus intended it. The real issue here is I work with windows developers and occasionally work in windows myself. This will change anything I commit into lf but won't mess with the checkout. So, in theory, I could cause myself a lot of hell on commits of files I changing but it has yet to bite me so far. I know it's just a waiting game.
+
+## bash_mac
+
+Here is some stuff that only works if you are on a mac, which I am:
+
+### growl notification
+Just run (or script) `growl text` and you'll see a growl notification with text.
+
+### rm
+Basically instead of delete it now moves to the trash. I'm used to the trash and I want it available on the command line. There is plenty of hard drive space, if it gets full, I'll dump it, but I want the ability to have that buffer.
+
+### browser aliases
+I just setup browser aliases so I could start the main browsers I use from the command line and give it a URL or the more likely scenario, a local file.
+
+## bashrc
+
+Here's where the magic happens. All the other files we have been talking about culiminate in here. The top is some basic filler: source the skel bashrc (if it exists) & create some path adding and deleting functions.
+
+### Paths
+
+We add in paths for the bin directory local to the user for things like the bash_completion scripts. In theory there will be more, but the idea is it's a local bin dir for the user. Also, we add in /usr/local/bin and sbin. I personally subscribe to a lot of the POSIX ideas about where to put things and I like the idea of putting local execution files installed by the user in those directories. I use [homebrew](http://mxcl.github.com/homebrew/) and they put their stuff there. I also roll my own [nodejs](http://nodejs.org/) and that goes there.
+
+### lang
+I honestly don't know why this is there. I think it just sounded like something I might need.
+
+### VIM vs VI
+VIM is better (hence the name).
+
+### Prompt
+
+Some really interesting stuff goes on here, and frankly, some if it I'm still just copying and pasting. Basically, I'm telling it to show dirty state, show stashed files, show untracked files and then sending it some colors to shade the branch info from the bash_completion script. I'm setting my basic prompt to:
+
+ user@host:/full/path (git branch)
+ $
+
+Notice the prompt wraps to the second line cause that path can get lengthy.
+
+### RVM
+I love me some [RVM](https://rvm.beginrescueend.com/). I really enjoy working in Ruby and RVM has saved me so much hassle while working on projects and not messing with the local installed ruby versions. Cannot recommend it enough.
+
+
+## Summary
+That's about it. If you have any questions or find any issues, please reach out to me at the [local-config issue tracker](https://github.com/craveytrain/local-config/issues). Thanks and I hope y'all enjoy it.
View
8 content/posts/friend.md
@@ -0,0 +1,8 @@
+---
+title: "Austin JS: JavaScript is your friend"
+date: 2011-08-23 03:45:59
+tags:
+ - javascript
+ - austinjs
+---
+A week ago (8-16-11) at [Austin JavaScript](http://austinjavascript.com/) I gave a presentation about the basics of JavaScript and jQuery. In case anyone is interested I have made [the slides](/slides/js-basics) available.
View
21 content/posts/gist.md
@@ -0,0 +1,21 @@
+---
+title: Getting the gist
+date: 2010-12-10 17:11:15
+tags:
+ - gist
+ - git
+ - github
+ - javascript
+ - jquery
+---
+I really like [Gist](https://gist.github.com/), a lot. They are full on git repos and as such have version control, remote updating, all of the things you would expect out of a github repo including most of the social aspects. They also have the best syntax highlighting I have seen. Yes, there are other libs that do it in various languages, but I really like theirs and I like having my code in 1 place.
+
+I've made several gists since I have become a member and expect that I will be making more now that I have gotten this down. The main complaint I have with gists is that to embed them in your blog you have to include a script tag that does a document.write. Aside from my misgivings about document.write, this poses a performance and user experience issue. Consider on a blog post with multiple snippets of code, the page stops loading until the scripts are downloaded and executed. Nevermind anything they may clobber during the process. And finally, I end up with a stylesheet in the DOM for each included gist that are all the exact same. So, I did:
+
+{% gist 735512 %}
+
+Ironically enough, I made a gist about it. As usual, it's using jQuery (cause that's my fav little DOM manip/XHR lib) and it's just a simple little plugin that looks for links to gists, parses out the gist id and file name (if provided), fetches the gist, and duck punches document.write to replace said link with the code and drop the css file into the head (only once). This is all after DOM ready, so the page will load up just fine, only applying these things after the fact.
+
+So, I know what you are thinking "Whoa, whoa, whoa! Duck punching document.write?!" Honestly, I wish I could have avoided it. I tried various techniques to leave document.write alone but I just couldn't find another way to make it work. Eventually I decided this was the easiest way to do it. I really despise document.write, so I only feel partially guilty about this. That and this plugin was developed for my site. If I don't want you using document.write on my website, well, that's my prerogative. If you use this plugin, know that.
+
+Feel free to update or give feedback.
View
8 content/posts/gone.md
@@ -0,0 +1,8 @@
+---
+title: Whoops
+date: 2011-06-17 04:53:46
+tags:
+ - psa
+ - couchdb
+---
+So, I upgraded the db version on this blog and in doing so, I forgot to backup the comments. I apologize to both of you that lost your comments. Lesson learned, back up the db before I upgrade it.
View
28 content/posts/init.md
@@ -0,0 +1,28 @@
+---
+title: Austin Metro Init
+date: 2010-11-22 18:15:15
+tags:
+ - javascript
+ - metro
+ - rail
+ - austin
+---
+Since Austin has opened up their rail "system" I have really embraced mass transit. I happen to be in the sweet spot of living 3 miles from the park and ride and working 3 blocks from the downtown station. However, I noticed that for Austin being such a tech savvy town, the mass transit mobile app situation is awful. Sure, Google Maps work great if you want to get from one place to another and don't know how to get there, but for people who know the routes and just want to see when the next train is running, you have to go to [Cap Metro's site](http://capmetro.org/). Their site leaves a little to be desired, especially when viewed on a mobile device. So, I decided to do something about it.
+
+This is by no means a finished product but this gave me the opportunity to play with a few technologies and techniques I hadn't prior. Based on some of the features I am using I made some pretty advanced assumptions on clients. I may very well refactor this to generate more code server side to support more clients and be more accessible, but honestly, at this point, this was fun to do mostly client side.
+
+## Geo Location
+
+Geolocation is something I have been wanting to play with as a native function of the browser, not relying on mobile device features. It was reasonable cut and dry but it's important to consider that due to being on a mobile device, you may have intermittent connectivity. So you have to feature detect and still do the actual getting of the location inside of a try/catch.
+
+## Pub/Sub
+
+I've been reading about pub/sub a lot and have been wanting to try it. I slightly refactored [Pete Higgin's jQuery pub/sub](http://github.com/phiggins42/bloody-jquery-plugins) to work without a library.
+
+## Library-less JavaScript
+
+I am not currently using a library. Just basic DOM scripting. I'm not handling the IE exceptions right now, and it's glorious. I may or may decide to support IE.
+
+I've put it on [GitHub](http://github.com/) for anyone that wants to [check it out](http://github.com/craveytrain/AustinMetro).
+
+If you want to [use the site](http://metro.craveytrain.com/).
View
25 content/posts/interview.md
@@ -0,0 +1,25 @@
+---
+title: How I Interview
+date: 2012-12-16 15:36:00
+tags:
+ - interview
+---
+As engineers, when we are asked to interview someone our primary directive is to assess someone's technical abilities. In fact, not just a passing assessment, but an assessment with a high degree of confidence. We need to know with as much certainty as possible this person is capable of doing the job. This is a team member, someone who will be relied upon and if they can't pull their own weight it will be felt by everyone else on the team.
+
+There are many different ways people can interview and I feel like I've been through them all. I was once asked to write up a sample DNS record on a white board when interviewing for a design/front end position because I had server admin with dns and others listed as experience on my resume. Pro tip: cull your resume to be relevant to the position you are applying for. Showing breadth of experience is great but make sure it's focused to the gig.
+
+I have seen people do the white board thing, ask all sorts of academic questions, look at portfolios live in the interview, pair program and even give written tests. I think people sometimes get caught up in the position of power that comes with being an interviewer and use that to pass judgement on others. That's where I lose my patience with this whole thing. The goal here is to find someone you want to work with and wants to work with you. I submit to you there are at least a few better ways which I currently use.
+
+## The Conversation
+
+I was inspired by the way [frog](http://www.frogdesign.com/) interviewed me (despite not offering me the job). It was conversational, comforting even. We talked about various things I had done, occassionally drilling down into details of why or how I did something. They got me talking about my experience and got a gauge of my technical acumen without ever grilling me. This has influenced my interview process heavily. My current personal technique is based heavily on that.
+
+## Pair Programming
+
+The other interview that helped form my ideology was at [GLG](http://gersonlehrmangroup.com/). One of the engineers came in with a laptop, sat it down and told me had setup an endpoint to POST a form to and mocked up a loose form. He wanted to sit with me while I coded up an XHR submit, take the response and show it on the page. He had a few text editors and an IDE. I asked a few questions about intents and constraints and then started. Right off the bat, I couldn't remember the XHR method signature. "That's ok, we have internet", he said. I pulled up the reference and we're off. Along the way he asked me a few questions about my methodology and I explained at various places the shortcuts I was taking for the purposes of an interview that I wouldn't do in a production environment (and what I would do in said environment). We knocked it out in about 10 minutes and spent the rest of the time talking about the company, various challenges of the gig, etc.
+
+## Test Driven Interviewing
+
+I'm constantly working on my process and am really liking [this new project](https://github.com/rmurphey/js-assessment) from who else but [Rebecca Murphey](http://rmurphey.com). I like it so much I'm going through it myself and doing pull requests for things. It's a fantastic little project and I intend to start working it into my rotation.
+
+After all this prattling, my message is simple, you can gauge people's skill level without having to exert your power over someone or asking them to memorize inane details or pass some sort of academic exercise that just isn't relevant in the real world. Eyes on the prize, finding a new great team member.
View
43 content/posts/labels.md
@@ -0,0 +1,43 @@
+---
+title: Accessible Inline Form Labels
+date: 2009-06-17 21:28:15
+tags:
+ - accessibility
+ - css
+ - forms
+ - html
+ - javascript
+ - labels
+---
+__Update:__ Added the check to make sure the input is empty before showing the overlayed label the first time.
+
+I recently read [Trevor Davis](http://trevordavis.net/)‘ post on [inline form labels](http://trevordavis.net/blog/tutorial/jquery-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:
+
+* He is pulling his inline form label value from the title attribute. I am using the actual label. I feel this is more semantic.
+* 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.
+
+{% gist 476405 contact_form.html %}
+
+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.
+
+{% gist 476405 style.css %}
+
+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.
+
+{% gist 476405 overlay.js %}
+
+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.
View
17 content/posts/meetup.md
@@ -0,0 +1,17 @@
+---
+title: July Austin JS Meetup
+date: 2010-07-21 00:23:16
+tags:
+ - austin
+ - javascript
+ - meetup
+ - node
+ - scripty2
+---
+Tonight I made it to my second [Austin JavaScript Meetup](http://www.austinjavascript.com/) 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](http://subprint.com/) 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](http://andrewdupont.net/) gave a detailed demo about [scripty2](http://scripty2.com/), the successor to [script.aculo.us](http://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...
View
19 content/posts/methods.md
@@ -0,0 +1,19 @@
+---
+title: Prototype Methods
+date: 2010-12-03 08:24:16
+tags:
+ - glgui
+ - javascript
+ - prototype
+---
+When I mentioned the [GLGUI Toolbox](http://github.com/glgui/toolbox) repo I failed to mention some of the content already in it. I'm gonna give a quick rundown of the two prototype methods I contributed.
+
+## Date.toGenString
+
+This is a prototype method from the Date object that just puts the Date out to a string formatted like '10/10/2010 21:15:07'. That's it, nothing special, just was a specific format I needed a lot on a project we are working on so I thought I would share.
+
+## String.pluralize
+
+Ok, I'm actually rather proud of this one, which is sad, because it's pretty trivial, but it just works and works well. That is not always the case with my code upon first release. Essentially you call it off a singular version of a string and pass it the integer you are referencing and it will perform some basic plural rules on it.
+
+However, coding the English language can be tricky, so in observation of that, you can optionally pass it the plural form of the word and that will override the rules in the method.
View
19 content/posts/modals.md
@@ -0,0 +1,19 @@
+---
+title: Resilient Modals
+date: 2010-11-16 09:11:16
+tags:
+ - accessibility
+ - modal
+ - tutorial
+---
+Modals: Love them, hate them they are a current fad (and have been for a while). Modals are usually implemented via javascript for older browser support (though there are some cool things being done with CSS3 on the matter). I've seen it done lots of ways, but here's a simple way to make modals "work" on a browser without javascript.
+
+__Make the trigger link link to the hashtag of the id of the modal.__
+
+Sounds too simple, I know. And in truth, that is slightly oversimplified, but given the assumption that the contents of the modal are not dynamic but are known at initial download of the page, this is the most resilient way to make a modal.
+
+Since I know that's a little light on the implementation details, lemme throw together a quick code example. For the purpose of this example, we are using jQuery, but apply what ever JS method makes you happy.
+
+{% gist 701146 %}
+
+And before you rail on me, this is proof of concept code. This is in no way considered production ready.
View
15 content/posts/naked.md
@@ -0,0 +1,15 @@
+---
+title: Craveytrain Naked
+date: 2010-07-15 21:17:16
+tags:
+ - psa
+---
+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](http://wordpress.org/). 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](http://www.tumblr.com/). However, for blogs about code, code samples and whatnot, I have decided to use [GitHub](http://github.com/). 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](http://gist.github.com/) 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.
View
24 content/posts/node.md
@@ -0,0 +1,24 @@
+---
+title: Relaunching With Node
+date: 2011-04-19 04:03:00
+tags:
+ - psa
+ - nodejs
+ - markdown
+ - express
+ - jade
+ - couchdb
+---
+So, over the weekend, I relaunched my blog on [Node.js](http://nodejs.org/). I tried Tumblr, Blogger, Wordpress (hosted and self), Django, Rails and was just about to rebuild it in Sinatra when a [friend](http://blog.rubikzube.com/) suggested I just build it in Node. Of course! Why didn't I think of that?
+
+As for what drove me to roll my own blog when there are plenty of solutions that do it just fine, it was 1 part being anal about URLs (which Tumblr and Wordpress just wouldn't give me the level of control I wanted), 1 part wanting to serve up different types of content (ala Tumblr) and 1 part "why the hell not"?
+
+As for the stack, I'm using [Express](http://expressjs.com/) for the framework, [Jade](http://jade-lang.com/) for the templating, [Markdown](http://daringfireball.net/projects/markdown/) for the content and [CouchDB](http://couchdb.apache.org/) for the document store. I'm using git to deploy to prod with the help of a little post-receive hook. I'm replicating my db locally to my prod box. This provides me with local copies of my site and my data.
+
+I have a lot of things I want to do. I have gists I want to find a way to proxy the content for, I want to allow comments and am thinking of using Twitter for my OAuth provider. I want to host links as well as posts, with a nod to [Jeremy Keith](http://adactio.com/). Microformats. I love microformats and have none on the site. This will be remedied shortly.
+
+I have a lot of things I need to fix. My content propagation isn't as clean as I would like. My design, well, let's just say it needs some love. Unfortunately, I don't know if I am the person who can give it that love. I tried to spend a good amount of time focusing on the readability and the font stack.
+
+For anyone that happens to subscribe to my feed or link to my old posts, I apologize for the constant switching of URLs. One of the big reasons I went to this solution was to solidify my URL scheme. So I hope to be done with that. I will see about putting on some perm redirects for the old URLs.
+
+Love it, hate or mildly ambivalent towards it, here it is. I have put both my [content](https://github.com/craveytrain/Craveytrain-Content) and my [app](https://github.com/craveytrain/Craveytrain-App) on github for all to see. Check it out. I'm interested in your feedback.
View
29 content/posts/oauth.md
@@ -0,0 +1,29 @@
+---
+title: Using OAuth for Comments
+date: 2011-05-24 04:43:45
+tags:
+ - oauth
+ - nodejs
+ - twitter
+ - markdown
+---
+I had been trying to decide what to do with comments. I like to give the ability to people to make comments but I just did not want to deal with keeping track of people's username, passwords, etc. Furthermore, I absolutely abhor CAPTCHA or anything of the sort. I got to thinking about using something like OpenID. The main problem I have with that is adoption. I don't want to make it hard for people to comment, but I don't want to deal with user info. Then I read [Chris Shiflett write about using Twitter for comments](http://shiflett.org/blog/2011/mar/using-twitter-for-comments) and I knew that was the key for me.
+
+There are several popular oauth networks out there but Twitter seems to make the most sense for my audience (both of you) and my subject matter (primarily technical blatherings). So, I set out to learn oauth and use Twitter. Had I known how long it would take me, I might have gone another route. But I'm here with lots of lessons learned and a much stronger understanding of the oauth paradigm. And that is the real reason I rolled my own blog: to give myself the reason to go learn new things.
+
+## The Process
+Basically, the oauth process breaks down into 3 major steps:
+
+1. Generate a request token,
+2. Using said request token, ask the user to grant the requesting app permission to access the user's account and
+3. Once permission is given, exchange the request token with an access token.
+
+Then it's just the matter of caching that access token (I chose a cookie which I bring into session on the first page load) and requesting the user's pertinent information. Currently, I am grabbing their Twitter screen name, id, url (which I piece together based on the standard twitter user page and their screen name) and their image. I use this information to attribute the comments on the blog.
+
+As for comment contents, I knew I didn't want to bother with whitelisting tags or anything like that, so I just did the simple thing and went with Markdown. I have really come to love Markdown as a simple tool for authoring content. That's what I write my blog posts in. To help the users write in markdown I linked up the syntax reference.
+
+What I'm particularly proud of is the realtime comment previewer. It shows the author's comment, right in line with the other comments and I think does a good job showing them exactly how their comment will look. Right now this is written as a call back to the server because I haven't found a good client side lib to parse markdown on the fly. [Showdown](https://github.com/coreyti/showdown) seemed to crap out on < & >. I will look into it some more in the future. But let's be honest, it's not like I have enough commenters right now to really put a strain on my server. Famous last words? I can only hope.
+
+Obviously I didn't code everything from scratch, cause, that's just loco, ese. For the basic oauth work, I used the [excellent oauth wrapper for node.js](https://github.com/ciaranj/node-oauth). I'm still using [express](http://expressjs.com/) for my basic framework with [jade](http://jade-lang.com/) for templates.
+
+If you have any comments, questions or concerns, hey, you can voice them now, so feel free.
View
22 content/posts/octopress.md
@@ -0,0 +1,22 @@
+---
+title: Moving to Octopress
+date: 2012-05-07 18:37:00
+tags:
+ - psa
+ - octopress
+---
+I'm [following](http://alexsexton.com/) [the](http://rmurphey.com/) [trend](http://mattgemmell.com/) and moving over to [Octopress](http://octopress.org). While I do love my custom node blog, the amount of work it took to get a new post up and the stack it required for a simple blog was just overkill. It was a fun experiment and I will continue to play with node in all sorts of varieties, I just am not interested in rolling my own blog in it for now. Enter Octopress.
+
+Octopress is billed as a hacker's blog tool. It met my rather modest criteria:
+
+- sensible, semantic urls (that could maintain my existing ones),
+- completely customizable templates and
+- fun to work in.
+
+On top of that were some things I hadn't really given creedence to. Things such as prerendering the blog. When ya think about a blog in it's most basic form, it makes total sense. It just took me a while to get on board. It's got good syntax highlighting built in. It uses SASS (another thing I didn't know I wanted until I used it).
+
+The thing is, now I have extended/altered Octopress so much there is no easy merging back when they make more changes. I have my own theme, I have ripped out all of the asides, I have adjusted the Rakefile to add minification of scripts, hashing of static file names so I could have very long expires headers on them and thrown out the entire concept of custom includes and styles. The whole thing is custom at this point. I may have painted myself back into the same hole but even so, it has been fun getting here. I'm looking forward to doing a few things with regards to search auto-suggest, better theming and maybe some social integration (activity on github repos comes to mind).
+
+If you are interested in seeing what I have done (and hopefully will be doing) to the codebase, please check out my [octopress fork](https://github.com/craveytrain/octopress) and my [octopress theme](https://github.com/craveytrain/octopress-theme).
+
+Oh, and I turned comments off. Still deciding if I want to turn them back on or use something with regards to twitter or github discussions on the markdown pages that generate the posts for that or just do away with them all together. We shall see.
View
13 content/posts/rails.md
@@ -0,0 +1,13 @@
+---
+title: Learning Rails
+date: 2010-12-30 14:49:16
+tags:
+ - psa
+---
+So, I've been doing this Rails tutorial off and on for the last month or so, time permitting. People ask me "Why are you learning Rails?". I tell them it's an easy way for me to get introduced to Ruby. I'm not a proper developer by training. I don't think in the same terms most developers do. I can't just sit down, learn a new syntax and then wield the awesome powers of the new language. I have to relate it to something I know. I know web apps. So Rails teaches me some of the Ruby basics while letting me relate everything back to something I feel comfortable with. Yes, I know there are differing opinions on Rails and there is a bunch of stuff it adds to Ruby that isn't really Ruby itself, but that's ok. It's just a starting point.
+
+I usually then get asked "Why Ruby?". Good question. Cause Java pisses me off, the community around C#/.Net is frustrating to me and Objective C is not widely used enough. Ignoring a lot of other cool technologies out there (such as Erlang) that I have on my list to learn as I get a good foundation, the big one people ask me about is Python. I have a love/hate relationship with Python. I won't get into the nitty gritty details, cause honestly, I don't have the chops. Let's just say there are many things about Python I really like and a few I don't. Ruby is intriguing to me. It's shiny and has huge community support.
+
+So, back to Rails. My end goal is to rewrite my blog in something like Rails (or Django if I end up going back to Python). Wordpress is great, and could be extended to do everything I need. However, there is a lot there. A lot I don't need. Plus, honestly, I am drawn to the MVC structure and while PHP can work that way, Wordpress does not, not without extensive hacking. I want little things like having infinite control over my URLs, being able to cache all sorts of data locally and expose out APIs for other services to consume (and consume their services). Basically, Wordpress is too canned and I want something to tinker with.
+
+So, my plan is to get a critical mass on building a blog in Rails and then go from there. I'll keep both of you posted.
View
64 content/posts/setup.md
@@ -0,0 +1,64 @@
+---
+title: Git SVN Setup
+date: 2010-11-11 10:09:15
+tags:
+ - git-svn
+ - tutorial
+ - git
+---
+So I've been using Git-SVN for about a month at work now thanks largely to a [gist](https://gist.github.com/594472) put together by the magnanimous [Lachlan Hardy](http://lachstock.com.au/). Honestly, if you are getting started and have a standard SVN layout, that has all you are gonna need. Naturally, where I work doesn't exactly have a standard layout so I had to adjust the instructions a little bit. I wanted to help explain to others how to handle these other variants I have encountered.
+
+## Getting Git Going
+
+Windows users, don't despair, there is hope. However, I encourage you to embrace the command line. TortoiseGit does many features but it leaves you working in a SVN mindset and you don't necessarily know all the functions that are running behind the scenes. Personally, I sometimes use TortoiseSVN for commits and diffs but that's about it.
+
+First things first, install [msysgit](http://code.google.com/p/msysgit/).
+
+## Git Repo Setup
+
+First off, let me explain, what you are doing here is creating a clone of the svn repo on your box, in Git. You will be completely autonomous from the SVN repo sending and getting data (or committing and updating using the SVN nomenclature) with a couple commands.
+
+### Init
+
+First things first, create the directory you want your Git repo in and go into that directory. Now open up the the Git Bash in that directory (yes, you can use command prompt, but why on earth would you?) and let's evaluate this command:
+
+
+ git svn init http://svnserver.yourdomain.tld/path/to/specific/project --prefix=appName/ --trunk=Trunk --tags=Tags --branches=Branches
+
+You can probably gather that we are telling Git where the specific SVN structured directories are. The keen among you may notice that --stdlayout or -s would do this for us. Honestly, I have found that flag to be flaky so I like to spell it out. YMMV. Also, others may mention we can run clone, I don't advise this for one major reason, clone does and init and the next command we are going to run (fetch) together. If you have a large repo (which we do) this will take ages. You want to make sure you have your configs setup right before you set that off.
+
+### Config Adjustment
+
+Now, you will notice there is a .git folder in this location. Go into that folder and open the config file in the text editor of your choice. It may look something like this:
+
+
+ [svn-remote "svn"]
+ url = http://svnserver.yourdomain.tld
+ fetch = path/to/specific/project/Trunk:refs/remotes/appName/trunk
+ branches = path/to/specific/project/Branches/*:refs/remotes/appName/*
+ tags = path/to/specific/project/Tags/*:refs/remotes/appName/tags/*
+
+Now, that's great if you use the standard layout. If you have some variables, you may have to adjust this. For example, we use a directories under Branches for types of branches (Hotfix, Feature, etc). Git won't recursively look for branches in that directory so we have to adjust the config. The line we are looking for is below:
+
+
+ branches = path/to/specific/project/Branches/*:refs/remotes/appName/*
+
+So, for our config, I made a slight adjustment:
+
+ branches = path/to/specific/project/Branches/*/*:refs/remotes/appName/*
+
+Notice the extra slash and asterisk before the colon. That is basically telling Git to check in all subdirectories of the Branch directory for branches for actual branches but go ahead and bubble them up to the namespace on the right. On to the pain.
+
+### Fetch
+
+Now, fetches should be pretty simple. It grabs every checkin in your repo in the directory you specified earlier and commits them into your local Git repo. Now, these are local commits, so they are fast, but if you are like us and have over 140,000 versions in your SVN repo, well, it takes a bit. Takes at bit as in, set it to go for the afternoon or before you leave for the day. The command is simply:
+
+ git svn fetch
+
+You can only fetch from a certain record and later if you like. This works great if you don't change the branch you are working out of. You just have to find a version number that has a file change in the directory you are grabbing. So, if you don't care about anything any earlier than version 120,000, you could go grab the most recent version that is commited to the folder you are getting after that and fetch from there. If the first commit to that directory after 120,000 is 120,653 your fetch command would look like this.
+
+ git svn fetch -r120653
+
+Alas, if you are like us and delete and recreate the branch you are looking for, this does not work very well. Also, the first time you forget to fetch based on that record number, it will go all the way back severely throwing off your workflow. I found it's just easier to get it out of the way to begin with. You have been warned.
+
+That gets you to a working Git repo cloned off your svn repo. That Gist linked up top has a great workflow that I more or less mimic to do my work. And that's basically how I do it.
View
11 content/posts/stove.md
@@ -0,0 +1,11 @@
+---
+title: Styling the stove
+date: 2010-01-22 21:00:17
+tags:
+ - anecdotal
+---
+I would have never guessed I would be blow drying my range out this evening. 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 other 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!
View
13 content/posts/toolbox.md
@@ -0,0 +1,13 @@
+---
+title: GLGUI Toolbox
+date: 2010-12-02 21:41:16
+tags:
+ - github
+ - glgui
+ - psa
+---
+As you may or may not know, I work for [Gerson Lehrman Group](http://www.glgroup.com/) as a UI Engineer. While this is more of my professional site, I don't talk a lot about my work. Truth is, I really dig it here. I work with some fantastic fellow UI Engineers: [Garann Means](http://www.garann.com/), [Zubin Tiku](http://blog.rubikzube.com/) and [Chris Bosco](http://cbsides.com/blog) (and some others but I don't know their blog URLs, hint, hint).
+
+As you can imagine, we are all big advocates of open source and have been looking for a way to give back to the community at large. So, we started a [GLGUI Toolbox](http://github.com/glgui/toolbox) repo on Github. So far, it's pretty remedial stuff on it but we hope to start putting out some of our more interesting work in the near future.
+
+Check it out occasionally, [watch it](http://github.com/glgui/toolbox/toggle_watch), let us know of any [issues](http://github.com/glgui/toolbox/issues) you find with it or just give us [feedback](http://github.com/inbox/new/glgui) if you think it's useful (or not).
View
7 content/posts/wordpress.md
@@ -0,0 +1,7 @@
+---
+title: Back to Wordpress
+date: 2010-11-30 09:43:15
+tags:
+ - psa
+---
+So, a quick note letting you know (in case you couldn't tell) I moved the blog back to Wordpress. I tried out Tumblr because it is very convenient and simple. I wanted something with less upkeep. But the lack of flexibility really started to bother me. It's a great blogging system, but as it turns out, I wanted more features. So, I'm back to WordPress. That is all.
View
3  models/page.js
@@ -16,7 +16,8 @@ module.exports = {
return extend({}, baseModel, data, {
content: content,
- body: body
+ body: body,
+ pageSlug: data.pageTaxonomy[data.pageTaxonomy.length - 1]
});
}
};

No commit comments for this range

Something went wrong with that request. Please try again.