Some browsers max-out border-width. In the fiddle below, where I set border-bottom-width: 9999px, WebKit browsers render only 1807px, Opera renders 2407px. Like a mad scientist, Firefox renders all ten-thousand-minus-one pixels.

Max border-width fiddle

setTimeout has optional parameters that can be used to pass in arguments into the timed-out function. From the window.setTimeout - MDC Doc Center:

var timeoutID = window.setTimeout(func, delay, [param1, param2, ...]);

Useful for constructors when you want to use a constructor’s method in the setTimeout.

myAnimator.prototype.animate = function() {
  // advance frame
  this.frame++;
  // move element
  this.element.style.left = this.frame + 'px';
  // go to next frame
  if ( this.frame < this.maxFrames ) {
    // inside of setTimeout, this = window
    // pass in this as a parameter for the function
    setTimeout( function( instance ) {
      // instance = this
      instance.animate();
    }, 30, this );
  }
};

setTimeout extra parameters fiddle

Going through last year’s 24ways, I caught this nugget.

Natalie Downe:

Rotations can be specified in degrees, radians (rads) or grads). WebKit also supports turns unfortunately Firefox doesn’t just yet.

turn is a valid CSS3 angle unit. A year later after Ms. Downe’s article, WebKit is still the only platform to support it.

turn angle unit fiddle

Dan Drinkard:

via @ade3: This is really an epic read, worth the time… http://fxn.ws/fFXiFp

…

ALSO! bit.ly now uses custom shorteners when anyone shrinks a url on a domain they manage. How cool is that??

That’s pretty cool.

Upon Dan’s notice, I was jazzed to discover that bit.ly Pro service was open to the public, and free at that! I had been previously using Yourls to serve up d§.cc URLs.

The free bit.ly Pro service does what you’d expect: generates shorten URLs for your own custom domain. But the killer feature Mr. Drinkard is talking about, End-to-End (e2e) Domains, isn’t offered for Pro users.

End-to-End (e2e) Domain configuration is available to bit.ly Enterprise users only.

e2e Domains enable complete end-to-end branding of your long URLs, no matter who shortens them.

Here’s an example: Let’s say you configure “my-long-domain.com” as an e2e domain and your Custom Short Domain is “my-short.com”. Any time any bit.ly user shortens a URL starting with “http://my-long-domain.com/”, the resulting short link will start with “http://my-short.com/”.

$1000 a year for an Enterprise account is not quite in my budget, but seems reasonable for the big players out there. Also a terrific selling point for the bit.ly Enterprise service, ensuring brand continuity for their clients.

For formatting code blocks, white-space: pre-wrap will preserve white spaces and also wrap lines inside the container.

white-space: pre-wrap fiddle

Michael Bucks: @desandro @simurai How do you guys format complicated gradient, box shadow, keyframe, etc. CSS3 attributes? I’m digging myself a hole here.

Been thinking about formalizing a style guide for CSS as CSS3 includes some especially complex syntax. Here’s how I’ve been playing this tune lately.

My preference is towards improving readability and scan-ability, if at the cost of length.

Lots of spaces

Taken from the jQuery Style Guide. Spaces inside parentheses so values can be easily read.

-webkit-transform: rotateX( 45deg ) translate( 100%, 0% );
background-color: hsla( 220, 100%, 50%, 0.7 )

Stagger vendor pre-fixed properties

Values for the same property should line up across declarations. This is a win for debugging as it makes it easier for glance at all the values and ensure that they are the same. Also good if you want to change them fast. With a visual cascade, you can quickly group the properties together see where the next one begins.

I made a couple TextMate snippets for this sort of thing.

-webkit-border-radius: 10px;
   -moz-border-radius: 10px;
        border-radius: 10px;
-webkit-transition: opacity 1s;
   -moz-transition: opacity 1s;
     -o-transition: opacity 1s;
        transition: opacity 1s;

Use white space to line up similar values

Again, makes it easier to debug and read. Typically good for animation keyframes

@-webkit-keyframes spinCube {
    0% { -webkit-transform: rotateX(   0deg ) translateZ( 100px ); }
   50% { -webkit-transform: rotateX(  90deg ) translateZ(  50px ); }
  100% { -webkit-transform: rotateX( 180deg ) translateZ(   0px ); }
}

Line breaks and tabs inside complex values

Usually in multiple backgrounds, gradient backgrounds, and multi-layered text-shadows. This looks a bit ridiculous because we’re so used to simple values. But if anyone else has to dive into a multiple-background with multiple gradients value, they can easily go in and start tweaking it. I might be going a bit overboard with white space for the WebKit color-stops.

background:
  -webkit-gradient( linear, left top, left bottom,
    from(            hsla( 0, 0%, 100%, 0.1 ) ), 
    color-stop( 50%, hsla( 0, 0%, 100%, 0.2 ) ),
    color-stop( 50%, hsla( 0, 0%,   0%, 0.0 ) ),
    to(              hsla( 0, 0%,   0%, 0.2 ) )
  ),
  -webkit-gradient( linear, left top, left bottom,
    from( hsl( 220, 100%, 60% ) ), 
    to(   hsl( 220,  80%, 60% ) )
  )
;
background:
  -moz-linear-gradient( -90deg,
    hsla( 0, 0%, 100%, 0.1 ), 
    hsla( 0, 0%, 100%, 0.2 ) 50%,
    hsla( 0, 0%,   0%, 0.0 ) 50%,
    hsla( 0, 0%,   0%, 0.2 )
  ),
  -moz-linear-gradient( -90deg,
    hsl( 220, 100%, 60% ), 
    hsl( 220,  80%, 60% )
  )
;

TextMate doesn’t have block code syntax highlighting for some reason. Here’s what I added to the Textile language in the Bundle editor, right after the blockquote portion:

{  name = 'markup.raw.textile';
  begin = '(^bc([<>=()]+)?)(\([^)]*\)|{[^}]*})*(\.)';
  end = '^$';
  captures = {
    1 = { name = 'entity.name.tag.raw.textile'; };
    3 = { name = 'entity.name.type.textile'; };
    4 = { name = 'entity.name.tag.raw.textile'; };
  };
  patterns = (
    {  include = '#inline'; },
    {  include = 'text.html.basic'; },
  );
},

CSS gradients do not require starting or ending colors. Without a starting or ending color-stop, the closest color-stop will apply to the end of the gradient.

View test fiddle

I’m working on some comps that have two sets of borders. I’m solving for this by hacking box-shadows to produce multiple borders.

Test fiddle

The trick is to use the spread parameter of the box-shadow property to create bigger shapes than the original element.

The fourth length is a spread distance. Positive values cause the shadow shape to expand in all directions by the specified radius.

Note that like multiple backgrounds, box-shadows are rendered in reverse order. So the last shadow declared in the code will appear behind its predecessors. The first shadow appears at the top.

Interesting in how Firefox and Opera renders border-radius the faux-borders around the original element producing circles, whereas WebKit applies the original border-radius to the faux-borders, producing rounded rectangles.

This deserves more research and tests.

Renders

• 2D transforms
• border-radius, elliptical border-radius
• text-shadow
• gradients

Does not render

• 3D transforms
• Typekit or @font-face
• canvas

TextMate Manual:

Mac OS X comes with an open shell command which can be used to simulate a double click from within Terminal. It can also perform an Open With… operation by use of the -a argument, e.g.: open -a TextMate . will open the current folder in TextMate (as a scratch project).

Found this when I was looking for way to open the current folder in Terminal with GitX.

open -a GitX .