I’ve got a couple sites running on Jekyll / GitHub Pages, and I’ve been running into issues with Maruku automatically converting HTML tags without content into self closing tags. So if I have an example where I’m using empty divs like

<div id="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Maruku will generate

<div id="container">
  <div class="item" />
  <div class="item" />
  <div class="item" />
</div>

This is especially problematic for embedding iframe content like jsFiddle embeds, or Video.

<iframe style="width: 100%; height: 300px"
  src="http://jsfiddle.net/desandro/v7x55/embedded/"></iframe>

As the tag never gets closed, it throws off the entire DOM. Self-closing divs seriously break Firefox.

My solution has been inserting an extra space in between opening and closing tag.

<div id="container">
  <div class="item"> </div>
  <div class="item"> </div>
  <div class="item"> </div>
</div>

<iframe style="width: 100%; height: 300px"
  src="http://jsfiddle.net/desandro/v7x55/embedded/"> </iframe>

Maruku preserves the whitespace and the tags remain separate.

Speaking of Helvetica, the current typography solution on the Boilerplate is to use just sans-serif for the base font-family. See Issue 42 on their reasoning. Windows gets its best sans-serif, Arial. Mac gets its champ, Helvetica. Or so you would think. On the Mac, it’s a bit of a mix.

• Chrome uses Helvetica Neue
• Firefox uses Helvetica
• Safari uses Helvetica
• Opera 11.0 and earlier uses Lucida Grande
• Opera 11.10 and later uses Helvetica (edited 19 Apr 2011 thx Divya )

See sans-serif fiddle

The differences aren’t too drastic, but they’re enough that you should be aware of them. Usually I run into issues when some text is wrapping differently between browsers, and throwing off an elements height. I’m surprised by the difference between WebKit cousins Chrome and Safari. Helvetica Neue line-height is taller, and has tighter kerning.

Personally, my go-to sans-serif font stack is:

font-family: 'Helvetica Neue', Arial, sans-serif;

Kevin at minimali.st details why to use it in Better Helvetica Font Stack. I can’t definitively say it’s a better solution that vanilla sans-serif, but at least I know what to expect.

The Helvetica that ships with Mac OS X Snow Leopard comes with Light and Light Oblique styles. You can take a look by checking out /System/Library/Fonts/Helvetica.dfont

Discovered in the This pull request was closed message on GitHub. I knew about Helvetica Neue’s lighter styles, but this is the first I saw Helvetica Light in action.

Here’s a basic utility function I’ve been using to calculate positions in a transforming object with multiple transforms. I know the start and end positions of each transform – this returns a value in-between given a percentage.

// returns interpolated value between
// A and B, where A = 0%, and B = 100%
var lerp = function( a, b, percent ) {
  return a + percent * ( b - a );
};

lerp( -10, 180, 0.5 ) // returns 85

Lerp is short for linear interpolation.

Nothing too impressive, but I’m saving this ‘cause I forget it every time I need it.

You can stack multiple values on a CSS transition declaration, much like you would with text-shadow or multiple backgrounds.

transition: left 1s, opacity 1s;

See double transition value fiddle

Testing Isotope on IE7 locally.

I thought I’d be a smartypants ninja and use a protocol-relative URL for the HTML5 shiv as Google will serve both http and https, like so:

<!--[if lt IE 9]>
  <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Turns out that IE7 did not load the shiv. Probably because the local URL for the site is C:\, which may be interpreted as file:///. Whatever the case, using the standard http:// got it working.

First off, you should have Full Keyboard Access enabled for All Controls in System Preferences > Keyboard > Keyboard Shortcuts. Now then…

As a former Windows user, this dialog boxed perplexed me. I see two buttons that appear to be focused. Mind you, no mouse hover state is affecting these buttons. Restart appears to be focused, and Shut Down looks special. If I hit Enter, I would expect that Restart would be hit, but instead Shut Down is triggered.

My problem was that I was using Enter instead of Space. Hitting Enter triggers the default (special) button. Hitting Space triggers the focused button.

Now when faced with this dialog from the Twitter app, I can appropriately trigger the button I want without hitting Tab.

You can also use space to toggle checkboxes on forms. Hitting enter will submit the form.

Working on Isotope, I have a scenario where I need to remove a jQuery object from another jQuery object. Item elements are cached within the plugin’s instance. If the user needs to remove those elements from the DOM, they need to also remove them from the cache.

The solution is to use the .not method.

// removes $b from $a
$a = $a.not( $b )

You need to assign the result of the statement back to the original jQuery object. Using just $a.not( $b ) will not affect $a.

See also How to remove an element from jQuery object? - Stack Overflow

Remove items from jQuery object fiddle