Leap Motion Lightning Talk

I gave a quick 5-10 minute lightning talk at the Ann Arbor .Net Group tonight about the Leap Motion. It was a brief introduction to the device and it’s capabilities, as well as a couple of demos.

The slideshow has Leap Controls built into it, so you can perform a KeyTap gesture to go to the next slide, or a ScreenTap for the previous slide, as well as swiping in any direction there is a slide.

Google also recently announced they had integrated the Leap Motion controller into Google Earth, and so I gave a demo of Google Earth, although I had quite a bit of trouble controlling it in front of the audience. It requires quite a bit of focus to use successfully.
Continue reading →

Facebook Feed Dialog vs. Share Link Dialog

Facebook has 2 relatively simple ways to let you add share links to your website that you can style to match your website. I don’t count the Like Button, which although easy to setup, doesn’t allow any customization of the button itself.

After the Like Button was introduced, the Share Link was originally deprecated by Facebook in an attempt to encourage people to use the Like Button or the Feed Dialog. But, imagine my surprise earlier today, despite often telling people the Share Link using sharer.php was deprecated, to find a full documentation page explaining how to use it. My best guess is that too many people continued to use it, so Facebook fixed some of the early inconsistent behavior and put up some official documentation for it.

The Feed Dialog was introduced around the same time as the Like Button, and remains a good way to control the specifics of a share post. It is highly customizable and doesn’t rely on Open Graph tags on a page for it’s information.
Continue reading →

Internet Explorer 9 & 10 CSS bug with overflow-y?

I ran into an interesting problem, maybe a bug, in Internet Explorer 10 (and IE9) today. Basically, if I had the following styles applied to the HTML tag, and then collapsed sections of the page with JavaScript, the height of the page would not collapse along with the content, ending up with significant white space left at the bottom of the document after collapsing large page sections. Removing either of the styles fixed the problem, but the combination didn’t work properly.

html { 
    height: 100%;
    overflow-y: scroll;
}

I tried various combinations of styles to fix it, but in the end I had to remove the overflow-y style with JavaScript before expanding or collapsing content, and then reapplying it after the animation is complete. As the problem didn’t affect standard’s compliant non-IE browsers, I added a class during animation and only applied the style to remove the overflow-y property to IE9 and IE10.
Continue reading →

Removing (Google) CDN version of jQuery from Html5 Boilerplate?

I recently added a pull request to Html5 Boilerplate to remove the use of the Google CDN for loading jQuery. Little did I know that it would stir up some great debate about whether using a CDN, specifically the Google CDN, was the best practice or if concatenating and minifying your code into a single file is better.

The pull request was based on 2 things, 1 was a conversation Karen Ford (my co-worker) and I had with Alex Sexton at the jQueryTO conference in Toronto. The second was a very data-driven blog post Alex referenced by Steve Webster posted in late 2011 about Caching and the Google AJAX Libraries. In that post, Steve points out that there is generally very little performance benefit from loading jQuery from the CDN due to the amount of fragmentation that exists in what versions of jQuery are being used in the wild.

Continue reading →

Kalypto – jQuery plugin for customizing checkbox and radio button form elements

I’m happy to announce the first public version of Kalypto (former working name, replaceRCInputs) through GitHub:

Demo page here: http://localpcguy.github.com/Kalypto/

Code here: https://github.com/localpcguy/Kalypto

Description: Kalypto is a basic plugin to use a simple sprite and CSS in place of a checkbox or radio button. Styles for the checked/non-checked state should be defined in a stylesheet, and the plugin changes the class and maintains the state of the checkbox or radio button.