Craveytrain

Generating a job match

Mike Cravey — Fri, 08 May 2026 00:00:00 +0000

They say that necessity is the mother of invention and that has never rung more true to me than recently. I was laid off earlier this year and that has forced me to do things like update my CV (resume). When faced with this task, that I was not looking forward to, I thought this would be a good time to really dig into agentic tools to see how they could help me. While it was useful, it did not manifest the way I initially expected.

My first instinct was to go whole hog (so to speak). So, I had an agent look at my resume (that hadn’t been updated in 9 years), all of my self-evaluations from my most recent employment to discern some highlights and achievements. This generated a laundry list of content for the CV. Great, achievement unlocked. I then used the AI to categorize the achievements by some basic disciplines: design, engineering, and management. Now I had metadata-rich content to assemble my CV with.

I assumed, perhaps naively, that companies would be looking for a CV that closely matched the job description. Similar language, keywords, responsibilities. So I did what any reasonable engineer would do, I constructed an overly complicated Rube Goldberg machine to achieve that goal.

The machine

First, I created an agent skill to analyze the job description, extract keywords, and weight matches to the disciplines categories I had created. So, a role may be weighted .4 design and .8 engineering. From there, the agent could assemble a CV from my available achievements, preferring ones that matched the higher weighted disciplines. Then, the agent would take a pass on the language of the CV, adjusting terms to better match the job description (e.g., swap UX Engineer with Frontend Engineer), in hopes of hitting some threshold of keyword matching. This resulted in an, often, lengthy CV, full of terminology that very closely matched the job description.

Now, I’m an old, and some things have stuck with me. One of those is that a CV should be succinct and scannable. Ideally, a single page. In practice, this felt a bit too constraining, but I did want to apply some amount of curation to the content so that it could at least fit nicely on 2 pages. So I created another skill that an agent would use to trim content. Through several iterations, I tried numerous approaches, giving direction on how to present older roles where the achievements were not as relevant or timely. I also tried to give it ratios of how many achievements per experience entry relative to how recent the experience was, so it created an effective inverted triangle: the more recent experiences had more achievements, the older experiences had fewer. I also gave it rules around pagination and what could be broken up, ideally, do not span an experience across a page break, preferring to keep it consolidated on a single page. Sometimes it would leave too much space at the end of a page, effectively cutting content unnecessarily. At the end of the day, I still had to hand trim the content. This was my first smell, and I missed it.

🤦

I ran this tool against every job description I could find that was vaguely related to my experience. I applied for hundreds of jobs. And, for a long time I got no responses. I mean nothing. No takers, no interest, no rejections, not even phishing attempts. And I knew I was a good match for many of these roles. I had been doing this a long time. This caused me to do a deeper dive on the content that was being submitted, rather than the cursory look I was giving it thus far. Suffice to say, I was appalled and embarrassed. The content I was submitting was devoid of personality. It read like what it was: AI slop. All the catchphrases, all the em-dashes, all signals that it was machine generated. I had trusted the system too much and given it too much leeway. Worst of all, it didn’t sound like me.

I like to think of myself as an effective communicator, with a distinct personality, and a good sense of humor. None of that was coming through. I had to change my approach because the content was bad and the results (or lack thereof) spoke for themselves.

Finding my voice

When I sat down and looked at what was being produced, I realized, I had effectively 3 types of roles I was applying for:

frontend engineer
engineering manager
technical product manager

And each of these roles had a different lens through which the CV needed to be viewed. A given highlight could be worded to accentuate a relevant aspect towards the target role. I decided I needed to take back the voice of my CV and spent an evening rewriting it into 3 variants. I based them on what had been generated by AI to match those archetypes, but the descriptions, the highlights, everything was rewritten in my voice, following a few guidelines on structure and content:

Why was this important and relevant to the reader?
Why was this notable?
What impact did this have to the team/project/business?

And where was the humor? People who know me know I can’t be serious for 5 minutes straight. Why isn’t that reflected in my CV? I added some highlights that are more my style:

Survived 20x traffic growth by rearchitecting the frontend. The frontend survived too.
Coaches basketball, which is basically stakeholder management with more fast breaks
25+ years building for the web, since tables were for layout

After writing the 3 archetypal variants, I attempted to use the page trimming agent skill to make sure it stayed to 2 pages, but continually struggled with formatting. Finally, I realized, the answer was to curate the whole CV. I would custom build the content to fit perfectly in the space. The task of the agent was then to research the role and determine which of my 3 CVs would be the best fit. This was a task it was much better suited to.

Proof is in the pudding

After adjusting my CVs and submitting them, the results were immediately apparent. I started getting a lot more responses back. A lot more “hey, we’d like to talk to you about this opportunity”. My system was significantly scaled down from its initial build out, but was dramatically more effective.

Was all that time, effort, and tokens wasted? No, as it turns out, I had other uses for the machinery around applying for jobs that would parlay into something more interesting.

Now, Apr 23, 2026

Mike Cravey — Thu, 23 Apr 2026 00:00:00 +0000

Building

I go back and forth between working with a SDLC framework like GSD and using something lighter weight like the Agent Skills.

Learning

I'm currently taking a Udemy course on product management, Become a Product Manager | Learn the Skills & Get the Job.

Reading

I'm currently reading Record of a Spaceborn Few. I'm a sucker for a sci-fi and this is the 3rd in the Wayfarers series by Becky Chambers.

On another note, my Kobo Libra 2 died, so I'm back to a Kindle Paperwhite v1 I have root-kitted and put koreader on so I can read my own Epubs on it. Yep, I'm cool.

Watching

Wrapped up

Ted Lasso - has really emerged as one of my all time favorite shows.
The Night Agent (Season 3) - well done show if you enjoy action and drama in the setting of a cloak and dagger government agency
Shrinking (Season 3) - an emotional show for me, but man, it hits so good

Currently

Your Friends & Neighbors (Season 2) - I joke with my wife that this may have to be me in a few months. She does not find that near as funny as I do. Also, pretty sure I would end up throwing my back out in a caper, just like he does.
Cross (Season 2) - I love Aldis Hodge in pretty much anything and this is a great crime mystery show.
Running Point (Season 2) - Another sports comedy (I may have a type) but one that takes on stereotypes in a funny manner.

Using

I'm always tinkering with new apps. Some of the ones that have caught my attention this week:

Sofa - this is how I keep up with what shows, books, and apps I'm currently partaking in.
Graftty - This is a brand new app that I just met the developer of and it's scratching an itch for me: persistent terminal sessions by git worktree with a nice, simple UI and better notification handling of tabs/sessions. Forgotten about AI session that I find hours later is the bane of my productivity these days. It's beta but it's pretty cool.

Playing

I don't play many games, I find myself reaching for Solitaire Stories frequently to decompress a bit. The decks are beautiful, the storylines are often funny, if not cheesy, and it just an app that feels great to play.

Working

I've been scouring the web, looking for that next opportunity and had some near hits, but haven't quite found it, yet. If you think you may want someone of my skill set, let's talk.

Now, Feb 9, 2026

Mike Cravey — Mon, 09 Feb 2026 00:00:00 +0000

Work

UX Engineering

I'm looking for my next opportunity—something that bridges design and engineering, where I can contribute across the full spectrum of making things on the web.

If you're building something thoughtful and need that perspective, let's talk.

Building

This Site, Always

Currently updating this site to have this brand-spanking new now page. Also shipping a new design here shortly.

Side project app

Aside from updating this website, I'm finally taking the time to build an app I've had on my mind for a long time. I'm not quite ready to talk about it yet, but I will as soon as I get something shipped.

Learning

Continuing to drink from the fire hose that is AI. Sometimes I barely have time to try out a framework or tool before learning about a new one. It can cause a bit of whiplash.

Reading

While I'm a little late to the party, I'm currently reading The Eye of the World, the first book in the Wheel of Time series. I've already watched the show, but I'm really enjoying the book.

Life

Coming off coaching JH basketball season, I've been focusing on getting to the gym regularly and continuing my weight loss journey.

Webmentions Support

Mike Cravey — Thu, 16 Feb 2023 00:00:00 +0000

All this talk about web standards and owning your own data inspired me to support webmentions on this blog. I'm not treading any new ground here, so I won't bother you with another post describing the process. Instead, I'd like to treat this more like a link farm, referencing those I learned from and where I chose to coincide with or deviate from. Maybe someone will find this useful when evaluating their own options.

First off, I want to say, this would not have been even in my purview if not for the encouragement of IndieWeb standard bearer Tantek Çelik. He originally put me on this idea of owning your own content years ago, when I would notice his Twitter posts had links back to his site, where a full copy of his message was stored. I was always impressed by this, even if I wasn't initially motivated by it. It wouldn't be until years later, spurred by the push of returning to web standards movement gaining so much momentum on Mastodon, that I decided to start making steps towards owning my own data.

Recently I polished off the old blog (which hadn't seen a new post in years), and most recently have added support for webmentions. I was finally inspired into action by a post by Nicolas Hoizey. And like any good web citizen, he cited his inspirations, a primer on webmentions in Eleventy by Max Böck and a really thorough walk through of setting up webmentions in Eleventy by Sia Karamalegos. Also, none of this would be possible without the awesome services of Bridgy to crawl my accounts on other sites, looking for mentions and posting them to webmention.io, an endpoint to receive and return webmentions upon request.

Generally, my setup lines up with Nicolas' post. I like the idea of committing the webmentions as data in my repo, because it is content used to generate the site. If something were to happen to the source for those webmentions, I would not want to lose them, so I'm keeping them. Here's the basic process:

Github action cron job queries webmentions.io every 15 minutes or so.
If webmentions are found, dedupe and write them to the webmentions.json file as a file-based document store.
Create a PR with the data file changes with a handy label to let me know I can merge it in.
I manually approve the PR, which merges in the webmentions, closes the branch, and deletes it. (I hope to look at ways to automate this)
This triggers a hook on Netlify to rebuild and redeploy the site.

And while conceptually I made the same trade-offs as Nicolas, I followed all the code samples from Sia's post. She wrote the most thorough and understandable post on the subject I've seen to date, replete with code samples in the article and sample code in gists. I really appreciated her approach and the way she explained things made it pretty straight forward to add them to my site.

While I didn't use Max's post as reference as much as the other 2 on this subject, his additional post on webmentions analytics is fascinating and inspiring work. I look forward to taking a swing at it myself in the future.

Finally, for the style of likes and reposts, I was inspired by, tried to change, but ultimately took wholesale, Zach Leatherman's implementation of a facepile. I really like the look of it and I tried to make it work with what I felt was more semantic markup of avatars in a list. However, I ended up using his code pretty liberally after I wasn't able to make my preferred syntax work. I don't have any replies, yet, so I'm unsure of how that will look, but when I get some, I'm sure I will be quickly adjusting the style of them.

Hope you found this useful and I highly recommend all the links I shared in this post.

Verified Mastodon Link

Mike Cravey — Thu, 22 Dec 2022 00:00:00 +0000

Like many others, I've been called by the siren song of Mastodon and have created an account (@craveytrain@hachyderm.io) in the fediverse to check it out. One of the things that interests me is the ability to self-verify the links I reference, as a way to say I am who I say I am (as much as anyone can do on the internet).

The recommended way to achieve that verification status on a link from Mastodon is to link back to your Mastodon account from the linked page. They even (helpfully) give an example on the link page:

<a rel="me" href="https://hachyderm.io/@craveytrain">Mastodon</a>

The problem I have with this is I don't want a link to my Mastodon account on my home page. That's not my ideal IA (let's just assume I actually have an IA for now). A lot of people seem to solve this with adding a link on their home page but hiding it visually. I don't love this cause, it's hacky, and stinks of bot tricks, not to mention users who access your site with a device that would read that link aloud (think text only browsers or screen readers).

So, I did a little digging on Mastodon's Profile Link Verification page and discovered a little line:

the resolved page contains at least one a or link tag with a rel="me"

Of course, a link tag! So, instead of putting an a href on my home page and hiding it, I can put a link tag in my header and all is well. So, here is what I put in my header to get me the nice little green checkmark:

<link rel="me" href="https://hachyderm.io/@craveytrain" />

Version 8

Mike Cravey — Mon, 09 Sep 2019 00:00:00 +0000

After a long hiatus, I have finally gotten around to rebuilding on the site. The colophon has been updated but I figured I'd spend a bit of time explaining the why.

Svelte

The biggest change is moving to Svelte. I've been hearing a lot about it and wanted to give it a shot. I've been moving more and more towards CSS Modules (or Styled Components, depending on the stack) and Svelte is like an all in version of that. JS, CSS, and HTML are all packaged up in a single module.

Sapper

While I'm branching out to a new stack, I am still a big fan of statically generated sites so I'm using Sapper, thanks to some tips from Level Up Tutorials, to generate the site.

Uses

As a big fan of Syntax.fm I created a Uses page for me to detail the tools I'm currently using. Here's hoping I continue to refine it.

Design changes

I've made some small design changes as, hopefully, a precursor to more updates. I'm hoping to treat this site less a a blog and more as a personal space on the web that I tinker with more.

Here's hoping...

Going live with es2015

Mike Cravey — Wed, 27 Jan 2016 22:30:35 +0000

Last night, I gave a talk at JS Monthly London on Going live with ES2015. It was my first talk since moving to London in August. It was nice to dust the cobwebs off my public speaking, but I'm glad it wasn't recorded.

While I covered a few of the parts of ES2015 we use, and how we setup the build process, the meat of the talk was about how we went about choosing the technologies and getting it into production. Given that my role these days is more about process and mentoring, I thought I would elaborate on that portion of my talk for whoever might find it helpful. This is from the perspective of a manager. I hope you find it useful in convincing yours.

Nearsightedness

When trying to introduce new technologies to your stack, resist the temptation to "solve all the problems". It's easy to get bogged down in the details of how something will integrate into your system, how it will consume your data, etc. This is the path to the dark side. You can solve all those problems in due time, but first, make sure the idea holds water. You will learn things from solving each problem that you can apply to the next one.

This also allows you to mitigate your risk of failure. Throwing away a few hours of work is, usually, much more palatable than a few days, or even weeks. Start small and build up, with checkpoints along the way. This is being responsible with your, and your company's time.

Problem

It starts with a problem. We had race conditions. We had regressions in what we thought were "untouched" code. We had code that was just concatted together, registering itself globally, in a random order and auto-invoking. This let to all sorts of unintended consequences. This was not a position we could maintain.

Solution

We stepped back from our problem and thought about what goals we would have for our code. In short order, we came up with a short list.

Modularized

We wanted code that was small, simple, and did a single purpose. We wanted a dependency graph so we could know what could be impacted by code changes.

Invokable

We wanted to be more intentional and explicit about our code. When more DOM gets loaded into the tree, we wanted to be able to run our code against that new DOM exclusively, not just "reload" the module.

Extensible

We also wanted to override our, hopefully, sensible defaults.

Testable

Possibly the most important one of the list, we wanted to have confidence that when we shipped our code, we knew what it was doing, and, more importantly, what it was not doing.

Loosely coupled

One thing that becomes a real pain in testing JavaScript is testing code that interacts with the DOM. To isolate it, we created a pub/sub interface that all modules use to talk to each other. That way DOM-sensitive code can attach to DOM fixtures, listen for events, mutate the DOM and have the other side of the module exposed to the pub/sub for testing. Likewise, code on the other side that did service level things, maybe talk to the server, maybe do model work, could also have a clear separation point to attach testing to.

Team buy-in

I feel very strongly that technology decisions should be made as a team, by the people who are going to use it every day. That doesn't mean I'm a silent bystander (those that know me are well acquainted my utter lack of ability to be silent), but my voice, even as the manager, doesn't weigh more than anyone else's. In fact, in many ways, it weighs less.

We talked about pros and cons of several ways to achieve our goals. We even added a couple on the spot:

Expected future-proofness

Wouldn't it be great if we didn't have to transpile into something else to make the code work in the browser? One can dream.

Intuitiveness

Code should strive towards obviousness, easy to grok. We want to include more developers, not create a walled garden.

Excitement

If we are going to use this code every day, it should be something that we are excited to use. If it's boring and no one finds it interesting, why the hell are we using it?

Proof of concept

So we made a decision, how do we know if it was a good one? We had to start putting it through it's paces. We created a POC that would prove if the idea could work. It had to solve those goals and nothing more. This is a hard thing to do. Again, resist the urge to figure out how it will work in your build system. Just focus on making the basic idea work first. Knowing how it will integrate in your system ultimately just isn't valuable at this juncture and what you learn in the process will help inform how to solve that problem later.

How i interview

Mike Cravey — Sun, 16 Dec 2012 00:00:00 +0000

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 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. 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 from who else but Rebecca Murphey. 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.

Moving to octopress

Mike Cravey — Mon, 07 May 2012 00:00:00 +0000

I'm following the trend and moving over to Octopress. 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 and my 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.

JS is your friend

Mike Cravey — Tue, 23 Aug 2011 00:00:00 +0000

A week ago (8-16-11) at Austin JavaScript I gave a presentation about the basics of JavaScript and jQuery. In case anyone is interested I have made the slides available.

DB gone

Mike Cravey — Fri, 17 Jun 2011 00:00:00 +0000

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.

CORS

Mike Cravey — Fri, 17 Jun 2011 00:00:00 +0000

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 forward 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. 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 on this project so it made it even simpler to do. I used the new $.preFilter to make it even easier.

$.ajaxPrefilter('json', function (options, orig, jqXHR) {
	if (options.crossDomain && !$.support.cors) return 'jsonp'
})

$.ajax({
	url: 'http://nodeserver:3000',
	dataType: 'json',
	success: callback,
	xhrFields: {
		withCredentials: true,
	},
})

function callback(d) {
	console.log(d)
}

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:

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.

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.

OAuth

Mike Cravey — Tue, 24 May 2011 00:00:00 +0000

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 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:

Generate a request token,
Using said request token, ask the user to grant the requesting app permission to access the user's account and
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 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. I'm still using express for my basic framework with jade for templates.

If you have any comments, questions or concerns, hey, you can voice them now, so feel free.

Dotfiles

Mike Cravey — Wed, 27 Apr 2011 00:00:00 +0000

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, 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 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 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. 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.

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 and they put their stuff there. I also roll my own nodejs 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. 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. Thanks and I hope y'all enjoy it.

Relaunching with nodejs

Mike Cravey — Tue, 19 Apr 2011 00:00:00 +0000

So, over the weekend, I relaunched my blog on Node.js. I tried Tumblr, Blogger, Wordpress (hosted and self), Django, Rails and was just about to rebuild it in Sinatra when a friend 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 for the framework, Jade for the templating, Markdown for the content and CouchDB 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. 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 and my app on github for all to see. Check it out. I'm interested in your feedback.

Learning rails

Mike Cravey — Thu, 30 Dec 2010 00:00:00 +0000

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.

New design

Mike Cravey — Mon, 13 Dec 2010 00:00:00 +0000

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).

Getting the gist

Mike Cravey — Fri, 10 Dec 2010 00:00:00 +0000

I really like Gist, 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:

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>Gist Fetch</title>
	</head>
	<body>
		<h1>Separate Files</h1>
		<h2>Contact_form.html</h2>
		<a
			class="gistPlaceholder"
			href="https://gist.github.com/476405#file_contact_form.html"
			>contact_form.html</a
		>

		<h2>overlay.js</h2>
		<a
			class="gistPlaceholder"
			href="https://gist.github.com/476405#file_overlay.js"
			>overlay.js</a
		>

		<h2>style.css</h2>
		<a
			class="gistPlaceholder"
			href="https://gist.github.com/476405#file_style.css"
			>style.css</a
		>

		<h1>Combo File</h1>
		<a class="gistPlaceholder" href="https://gist.github.com/476405"
			>Accessible Inline Form Labels</a
		>

		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
		<script src="jquery-gistFetch.js"></script>
		<script>
			$(document).ready(function () {
				$('.gistPlaceholder').gistFetch()
			})
		</script>
	</body>
</html>

;(function ($) {
	// Fetch Gist and drop it into page
	$.fn.gistFetch = function (options) {
		var opts = $.extend({}, $.fn.gistFetch.defaults, options)

		// Duck punch document.write
		document.oldWrite = document.write
		document.write = $.fn.gistFetch.docOverwrite

		return this.each(function () {
			var $this = $(this)

			// Support for the Metadata Plugin.
			var o = $.meta ? $.extend({}, opts, $this.data()) : opts,
				aURL = this.href.split(/[\/#]/),
				gistId = aURL[3],
				fileName = aURL[4] ? aURL[4].substring(5) : '',
				gistURL = o.gistURL + gistId + '.js',
				snipId = gistId + fileName

			gistURL += fileName ? '?file=' + fileName : ''

			// Store a pointer to the gist place holder
			$(document).data(snipId, $this)

			$.getScript(gistURL)
		})
	}

	$.fn.gistFetch.docOverwrite = function (/* String */ markup) {
		$gist = $(markup)
		// If the code in the document.write starts with a link and is from gist.github.com
		if (
			markup.substring(1, 5).toLowerCase() === 'link' &&
			$gist.attr('href').match('gist.github.com')
		) {
			if (!$(document).data('gisted')) {
				$('head').append(markup)
				$(document).data('gisted', true)
			}
			// If the code in document.write has a class of 'gist' assume it's a gist
		} else if ($gist.hasClass('gist')) {
			var gistId = $gist.attr('id').substring('5'),
				fileName = $gist.find('.gist-meta a:eq(1)').text(),
				snipId = gistId + fileName,
				$link = $(document).data(snipId)

			// If the pointer for the gistId and fileName exists (meaning file specfic gist)
			if (typeof $link !== 'undefined') {
				$link.replaceWith($gist)
				$(document).removeData(snipId)
				// Else assumes gist link of whole gist with no fileName specified
			} else {
				$(document).data(gistId).replaceWith($gist)
				$(document).removeData(gistId)
			}
			// Else just run plain old document.write
		} else {
			document.oldWrite.apply(document, arguments)
		}
	}

	// default options
	$.fn.gistFetch.defaults = {
		gistURL: 'https://gist.github.com/',
	}
})(jQuery)

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.

Character countdown

Mike Cravey — Mon, 06 Dec 2010 00:00:00 +0000

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 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. $.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 and there is even an example page.

Prototype methods

Mike Cravey — Fri, 03 Dec 2010 00:00:00 +0000

When I mentioned the 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.

Glgui toolbox

Mike Cravey — Thu, 02 Dec 2010 00:00:00 +0000

As you may or may not know, I work for Gerson Lehrman Group 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, Zubin Tiku and Chris Bosco (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 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, let us know of any issues you find with it or just give us feedback if you think it's useful (or not).

Back to wordpress

Mike Cravey — Tue, 30 Nov 2010 00:00:00 +0000

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.

Austin metro init

Mike Cravey — Mon, 22 Nov 2010 00:00:00 +0000

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. 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 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 for anyone that wants to check it out.

If you want to use the site.

Resilient modals

Mike Cravey — Tue, 16 Nov 2010 00:00:00 +0000

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.

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>modals</title>
		<link rel="stylesheet" href="style.css" media="screen" />
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
		<script src="modal.js"></script>
		<noscript>
			<style>
				.modal {
					display: block;
					position: relative;
					top: auto;
					left: auto;
					margin-left: 0;
					width: auto;
				}
			</style>
		</noscript>
	</head>
	<body>
		<p>
			This is text that <a href="#modal" class="trigger">will link</a> to the
			modal.
		</p>

		<div id="modal" class="modal">
			<p>This is the modal, baby.</p>
			<a href="#" class="close">Back to top</a>
		</div>
	</body>
</html>

body {
	margin: 0;
}

.modal {
	display: none;
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -100px;
	width: 200px;
	background: #fff;
}

#backdrop {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8);
}

$(document).ready(function () {
	$('.trigger').click(function (e) {
		e.preventDefault()
		var id = $(this).attr('href').substring(1),
			$modal = $('#' + id),
			$backdrop = $('#backdrop').length
				? $('#backdrop').show()
				: $('<div>', { id: 'backdrop' }).prependTo('body')

		$modal
			.show()
			.find('.close')
			.text('close')
			.click(function (e) {
				e.preventDefault()
				$('#backdrop').hide()
				$(this).closest('.modal').hide()
			})
	})
})

And before you rail on me, this is proof of concept code. This is in no way considered production ready.

Git SVN setup

Mike Cravey — Thu, 11 Nov 2010 00:00:00 +0000

So I've been using Git-SVN for about a month at work now thanks largely to a gist put together by the magnanimous Lachlan Hardy. 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.

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.

Craveytrain progress content

Mike Cravey — Tue, 27 Jul 2010 00:00:00 +0000

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

Mike Cravey — Mon, 26 Jul 2010 00:00:00 +0000

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:

input {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
}

July austin JS meetup

Mike Cravey — Wed, 21 Jul 2010 00:00:00 +0000

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...

Naked

Mike Cravey — Thu, 15 Jul 2010 00:00:00 +0000

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 my site naked.

Styling the stove

Mike Cravey — Fri, 22 Jan 2010 00:00:00 +0000

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!

Accessible inline form labels

Mike Cravey — Wed, 17 Jun 2009 00:00:00 +0000

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:

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.

<form id="contact">
	<ul>
		<li>
			<label for="name">Name</label>
			<input type="text" id="name" name="name" value="" />
		</li>
		<li>
			<label for="email">Email</label>
			<input type="text" id="email" name="email" value="" />
		</li>
		<li>
			<label for="verbiage">Message…</label>
			<textarea id="verbiage" name="verbiage" rows="5" cols="25"></textarea>
		</li>
	</ul>
</form>

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.

form li {
	line-height: 1.5;
	margin-bottom: 1.5em;
	position: relative;
}

form label.overlayed {
	position: absolute;
	top: 0.15em;
	left: 0.5em;
	white-space: nowrap;
	color: #999;
}

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).

var oTxtFields = $('input,textarea')
$.each(oTxtFields, function () {
	var label = $('label[for=' + $(this).attr('id') + ']')
	label.addClass('overlayed')
	if (!$(this).val() == '') {
		label.hide()
	}
	$(this)
		.focus(function (e) {
			$('label[for=' + $(e.target).attr('id') + ']').hide()
		})
		.blur(function (e) {
			if ($(e.target).val() == '') {
				$('label[for=' + $(e.target).attr('id') + ']').show()
			}
		})
})

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.

Bidet

Mike Cravey — Wed, 06 Dec 2006 00:00:00 +0000

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.