JavaScript gallons-per-100 miles bookmarklet

Since I’m car shopping, here’s a quick JavaScript bookmarklet you can use to convert miles per gallon (MPG) into something that makes a little more sense: gallons per 100 miles.

javascript:var gallonsPerMile = function(mpg) { return Math.floor((1/mpg)*1000)/10 }; alert("That's about " + gallonsPerMile(prompt("Enter MPG")) + " gallons per 100 miles.");

Just make a new bookmark with this as the location, and it will ask you for the MPG, and do the conversion, showing you the outcome.

Inspired by Why We Should Measure by Gallons per Mile, Not Miles per Gallon – Popular Mechanics.

Posted on December 27, 2011 at 7:37 pm by Joisey Mike · Permalink · Leave a comment
In: Geek, The Internets · Tagged with: , , ,

New Chrome user script – put the tweets on the left

I just wrote this userscript for Google Chrome to put the tweets on the left side of the new Twitter homepage, where they rightfully belong.

This is only set for the Twitter “home” view, since every other age on Twitter does it anyway.

Download, unzip, and drag and drop into Google Chrome. Enjoy.

twitter – switchColumns.user.js

Posted on December 13, 2011 at 9:04 pm by Joisey Mike · Permalink · Leave a comment
In: Technology, The Internets

Sorry Dundalk, I had to.

Kanye West comments on the Dundalk flooding

Kanye West comments on the Dundalk flooding

Posted on September 18, 2009 at 9:55 pm by Joisey Mike · Permalink · Leave a comment
In: Random

IE6 min-height CSS hack without JavaScript

Internet Explorer 6. I don’t hate it. Yes I do.

Here’s the story of an interesting min-height hack I came upon working with an outside design firm today. Technically it’s an exploit, since it’s exploiting a bug in IE6′s box model, but since we all know what people think when they see “IE6″ and “exploit” in the same sentence, lets just leave ‘er be at “hack.”

When you define the height on a block element, let’s say a DIV, it’s pretty simple:

div { height: 500px }

However, if that div’s content (assuming normal document flow) will run longer than 500px in height, and you haven’t told the DIV what to do with the overflow, the height you’ve defined will act as a minimum height… like the min-height you can’t use since this is IE6.

So there you go. Use min-height in your master CSS document, and use height in your IE6 specific CSS document. Its really that simple.

Tricky, idin’t it :)

Posted on May 29, 2009 at 6:05 pm by Joisey Mike · Permalink · Leave a comment
In: Design · Tagged with: , , ,

Easy multi-line tooltips with Javascript

Tooltips are helpful in a semantic web world where the use of the “alt” attribute is restricted to those times an image won’t show because you’re  a jerk who fat fingered the image URL.

Lets get right to it since I’m busy as hell today.

The tooltip is a shorthanded way of referring to the title attribute of a link or image (most commonly) though it can be used on other HTML elements. Since we’re all SEO experts around here, we know the only way to fly is to make a link like this:

<a href="link-url.html" title="Descriptive and relevant keyword phrase">revevant text for destination</a>

But what of the cold, huddled masses who shout from the mountain tops “But Cynic, I want a two-line tooltip!” Well, sure. We can do that with Javascript.

  1. Parse out and replace text in static tooltip.
  2. Write the tooltip with a function

Parse out and replace text in static tooltip

Lets toss a bit of text in our title attribute to tell us where we want our line break. I’m going to pretend I’m on a forum and make a quicktag-looking [br]:

<a href="link-url.html" title="Descriptive and[br]relevant keyword phrase">hi mom</a>

Now we need to create that linefeed. Lets make a function, and pop it into the head tag (or linked .js file).

function makeMyLinefeedReal(imageElement) {
  var titleAttribute;
  titleAttribute = imageElement.title;
  titleAttribute = titleAttribute.replace(/\[br\]/, String.fromCharCode(10));
  imageElement.title = titleAttribute;
}

And finally call it from the element.

<a href="link-url.html" title="Descriptive and[br]relevant keyword phrase" onmouseover="makeMyLinefeedReal(this)>hi mom</a>

Done and done. If you want to get really fancypantsed, you can call this from the BODY’s onload, or document.ready if you’re awesomesauce enough to use jQuery.

Write the tooltip with a function

Keep in mind a web crawler isn’t goin go to see something created with javascript, so sure this next method sparingly–we’re going to write the whole title attribute with Javascript. You get to feel good about having neater HTML, and you can toss “non-intrusive clientside DOM scripting” on your resume.

I’m currently using this for tooltips on a page of pie charts right now for a full-time-jobby-job project which won’t be indexed, and even if it was available to the public, I’m not worried about SEO for the statictical breakdowns on the pie charts; just of the page containing the statistics. (Btw–coming soon: Kickass tutorial on making webtastic pie charts using Adobe Photoshop and Illustrator)

So here’s our tag, with a normal attribute.

<img src="link-url.png" id="favoritePies" height="100" width="100" alt="Pie chart of my favorite pies" />

Our function can now take advantage of an escaped new line, \n, instead of having to mess with String.fromCharCode(10).

function makeMyLinefeed(imageElement) {
  imageElement.title = "This is my title\nAnd this is line 2!";
}

And…

<img src="link-url.png" id="favoritePies" height="100" width="100" alt="Pie chart of my favorite pies" onmouseover="makeMyLinefeed(this)"/>

Easy, right? I’ll let you get trickier than a straigh line of text on your own. One more version for you: here’s the non-intrusive javascript version. Start with your tag:

<img src="link-url.png" id="favoritePies" height="100" width="100" alt="Pie chart of my favorite pies" />

And this next line does all the fun stuff without any onmouseover attribute:

document.getElementById("favoritePies").mouseover = function () { this.title = "This is my title\nAnd this is line 2!"; }

So there we go, you have a few different ways to toss a line break into a title attribute. Have fun!

Posted on May 6, 2009 at 4:01 pm by Joisey Mike · Permalink · 2 Comments
In: Design · Tagged with: , , ,

HTML Tip: Should I use a div or a span?

This comes up a lot in the web development world, especially with higher level coders who are in the Java or .NET world. After just having this coversation with a coworker, I came up with a metaphor to explain the relationship between block and inline elements. A few basics first.

A div is a generic block element with no inherent attributes. By default, it’s as wide as its parent element, and breaks the line. A few common block elements are DIV, P (P is special, we’ll get to that), and BLOCKQUOTE.

A span is a generic inline element with no inherent attributes. By default, it’s as wide as its content, and doesn’t break the line. Some inline elements you’d be used to seeing are the STRONG, EM, SPAN, and STRIKE tags.

To write valid XHTML, you need an understanding of what elements can be properly nested… which is pretty simple. Block elements can be nested in block elements, inline elements can be nested in block or inline elements. Easy peazy. Well, almost.

The exception to this is the P tag, which is a block element, but breaks the rules by only being allowed to contain inline elements. The nesting order DIV DIV P EM STRONG is fine, but DIV P DIV EM STRONG can’t validate because you’re nesting a block element inside the P tag.

Here’s an easy way to remember it. Imagine block elements as pieces of blank paper, and imagine inline elements as ink. You can stack as many pieces of paper as you want on top of each other, and you can contain anything written in pen on the paper. You can use the pen on a few pieces of paper and lay them out on a larger piece of paper, you can underline pen with pen, you can bold text by writing with more pen over the pen. You can’t put paper into the ink… that relationship only goes one way. 

Imagine the P tag is a lined piece of paper. All of the same ink rules apply, but if you try to put more paper into it, you won’t be able to see the lines usefully, so that’s a no-no.

So there you have it. To put it simpler, If you need a container, use a div. If you need to effect these three words, use a span.

Posted on March 17, 2009 at 6:18 pm by Joisey Mike · Permalink · One Comment
In: Design, The Internets · Tagged with: , , ,

Shamwow Vince is scientology’s bad boy

Having just given the gift of Shamow to my fiancee and seeing them in action I find this strangely appropriate to reference. It turns out that Mr. Slap Chop is more than the best pitchman to grace my TV, he was also booted out of the Church of Scientology. This guy’s awesome!

Vince says CoS officials stole clips from unedited film footage, added their own sass and passed it around the community as the first act in an elaborate smear campaign against him. They then coerced statements from other members of the church, threatening to “fair game” anyone who refused, declaring them them to be SPs (Suppressive Person, an apostate and enemy of the CoS) for not cooperating.

Statements and evidence were “collected” and the CoS charged Vince with 23 crimes against Scientology, and he was forced to stand trial in Scientology Court. Which is kind of like Night Court, but without the hilarious bailiff, sexual innuendo, and the ability to walk away without fearing for your life… oh yeah, and at least one of the judges is still in junior high. Vince was found guilty on all charges without being able to mount a defense, mostly because he was never told what the charges were.

Read the full article at Skepchick.org.

Posted on February 6, 2009 at 5:54 pm by Joisey Mike · Permalink · Leave a comment
In: Skepticism

Read PDFs on your iPhone in Safari

I’m in the middle of a programmer’s paradigm shift that, frankly, most of the Windows development world took 7 years ago. I’m switching from Classic ASP to ASP.NET.

This of course has me searching for books on learning ASP.NET, a programming language is like a foreign film to me. I can figure out what’s going on, and know who the main character is, and more or less what they’re trying to accomplish. But I can’t tell if he’s whispering sweet nothings to his lover, or asking his sister to bring over some 10W-30 for a quick oil change. In a nutshell, I get it, but not really.

Luckily, I found an eBook on Amazon for sale which describes in just under 40 pages what the big deal is about ASP.NET, how it’s different, and why I should care.

However, herein lies the dilemma: I don’t like slowly working my way through a PDF on my laptop in bed, and I sure am not bringing it into the bathroom with me. So, I turn to my favorite eBook reader as the best solution at hand … my iPhone.

I’ve read books on my iPhone before, but a PDF… this is new territory. So I googled my way to a few solutions to see how the people who write about things get on reading other things when they’re PDFs, on an iPhone.

Jailbreak/SSH/install PDFViewer app
Too much work. I’m looking for an easy solution and the inherent problem with jailbreaking your phone is that every time you upgrade the firmware, you have to reinstall ALL of your apps. Lame. And I don’t want to have to use SSH to zip files to my phone. I want to just have the damn thing be available, and not lose EVERYTHING just because a firmware update came out. Which leads us to our next solution…

E-mail myself the PDF in an attachment
This seems like it would be easy-cheesy-1-2-threesy, but now my PDF’s only available in portrait mode. Great if you want to swipe left-to-right, up-and-down, and work your index finger harder then that day in 6th grade when you thought nobody was looking and you just wanted to breather a little easier. NEXT.

Google Documents
I can’t believe I didn’t come up with this one right out of the gate. Upload your file to Google documents, and view it in glorious landscape mode in Safari. Done and done. It’s free, and you can even e-mail Google Docs the PDF/DOC/RTF/XLS/whatever if someone sends it to you. Oh, exuberance. Oh, exquisite WIN.

I’m off to read my ASP to ASP.NET pdf now, instead of just writing about how I’m going to read it. Hopefully, this will keep my nerdy appetite sated until my Beginning ASP.NET 3.5 with C# book arrives on Friday.

Posted on January 29, 2009 at 3:55 am by Joisey Mike · Permalink · Leave a comment
In: Technology, The Internets · Tagged with: , , , ,

The 7P’s and the giant photo FAIL

The fellas at the This Week in Photography blog posted an excellent entry about the 7 P’s, which I feel so strongly about, I’m going to bold-type: Proper Prior Preparation Prevents Piss Poor Performance.

When you go out to get a photograph, there are two ways you can set out. Prepared and unprepared. When I was in Basic Combat Training (Basic for short) I heard all about the “7Ps.” At the time, I thought it was just my instructors being, well – you know….difficult.

Full entry at TWIPPhoto.com.

This was illustrated in a most exquisite photography FAIL of mine at my fiancee’s MBA graduation.

Accomplished Checklist:

Things that should have been added:

So yeah, lack of proper prior preparation resulted in piss poor performance. I missed the shot which would have looked great framed next to her diploma. For me, heartbreaking; for her (luckily) a funny story of what a camera geek I am.

And to think, before all of this I was kicking myself for not bringing my Canon 70-200 f2.8L because I thought I’d need the extra reach of the crap Quantaray 70-300. Everyone’s said it a million times, the best gear in the world doesn’t matter when you miss the shot.

Lesson = learned!

Posted on January 28, 2009 at 3:54 pm by Joisey Mike · Permalink · Leave a comment
In: Photography · Tagged with: ,

The momentum of dieting

[Cross-posted to the Shangri-La Diet forum]

I’m another half-pound down today! Hopefully by Tuesday (end of week 2) I’ll turn that into a full one, or one and a half. 

I’m starting to think that my initial weigh-in might have been high from eating a big dinner the night before, being really really hydrated, the planets lining up and screwing with the gravity on my 2nd floor, or any other reason. Well, whatever. It make my total  weight loss higher, and I think that’s important.

The bathroom scale, my arch nemesis.

The bathroom scale, my arch nemesis.

When I lost a bunch of weight before (Atkins + exercise), I learned that there’s an event horizon where you cross that certain line on the scale–or the right pair of pants fits, or the stairs in the parking garage don’t make your pulse go up–that something almost magic happens. You get to the point that on your super low motivation days, keeping your weight loss total you’re so proud of is your only motivation.

We all have those days from time to time, some more than others, some almost never, when you’re depressed, you’re thinking “oh what’s the point… I have to fight so hard just to weigh this much. I shouldn’t HAVE to work this hard to look the way I want. I’m so mad at my body for not processing food the way Tom in accounting’s does. I just want some pizza and ice cream because that will at least make me happy.”

On those days, the only thing that keeps you out of the freezer case at Safeway is thinking to yourself, “but I lost 35 lbs. on the last 5 months… if I quit, I ruin all of that, and I’ll be so mad that I don’t have what I have now. I’ll move my next scheduled cheating day 2 weeks closer, but I can’t quit.”

At least that how it worked for me. I’ve bounced around the scale a lot in the last few years, bouncing my way up to 295, losing 10 here, gaining it back there, and so on because “It’s only 10 lbs in 3 weeks. I’ll do lines of mashed potato and gorge on mozzarella sticks, and to hell with it, it’s only 3 WEEKS. I can re-do that any time.”

Momentum does the rest after your cross that event horizon. It’s like pushing a broken down car down the street and out of harm’s way. Pain on the butt getting it moving! But once it’s moving, you can keep it going by pushing lightly on it. People don’t usually quit halfway to a big goal, they quit when the progress doesn’t come fast enough, when they can’t handle that initial push that gets the ball rolling. I don’t care if you’re dieting or quitting smoking; that opportunity cost of quitting has to build up to allow you to relax and get cozy with your diet.

So I don’t really have to fight my ass off to lose 85 lbs. I just need to fight my ass off about 15-20 lbs, or maybe 2 months. Then I’ll cross MY event horizon, the momentum will kick in, and then I just have to lightly push to make those pounds go away; it’s less of a bare-knuckled-boxing-against-godzilla, and more of a flicking-a-bug-off-my-arm.

Oh, and Tom in accounting? He’s thin because he has such severe IBS that you can hear him crying from outside the bathroom. Glad I’m not him.

Posted on January 16, 2009 at 4:52 pm by Joisey Mike · Permalink · Leave a comment
In: 4th Wall · Tagged with: , ,