timmy willison

CSS3 is magical like unicorns. I would say the horn of the unicorn is its ability to be replicated by some of the filters in IE. The horn is majestic, but painful when applied to sensitive areas. Filters in IE give us a way to replicate some of the power of css3 without javascript and without images. However, filters come with their own problems. The most common problem is probably the equivalent of overflow: hidden whenever a filter is applied in IE6-7. Another, is mixing a gradient filter with border-radius in IE9.

IE9 is a major improvement compared to its predecessors, but does not yet support css3 gradients. It does, however, support border-radius. A problem arises when you apply a filter to an element with border-radius. The filter overrides the border-radius and you lose your rounded corners. You should probably think of a filter as a commanding predator. It will do stuff, but it will take over and kill puppies.

Another workaround is to use SVG to create a gradient background image. This has the advantage of being supported in IE9 and the css is not too long or difficult. SVG does have more flexibility compared to a static image created in photoshop, but they take time to create. So, for those on the go, we may have a quicker solution that does not require any extra files.

When in doubt, add a wrapper.

You can fix the IE9 problem by simply wrapping your gradient and given that the border-radius instead and applying overflow: hidden. The overflow: hidden is present in IE6-7 due to the filter as stated previously, but will still only be applied in those 3 browsers in the given example. If you have a dropdown or need some equivalent behavior where overflow is needed, the best solution may be to have another div outside of the wrapper, but absolutely positioned on top of it. Border-radius will still not work in IE6-8, but if you care about that, you’ll need to look into javascript fallbacks or using images.

If you look at the HTML, you’ll notice I’ve added an IE conditional comment for the wrapper. I only did it that way to make the fiddle. I recommend using Paul Irish’s IE Conditional Comments, a conditional stylesheet, or css hacks if absolutely necessary.

Tip: position:relative or absolute will cause problems when combining overflow and border-radius, so best stick with static and use something like the wrapper div in the example for positioning relatively or absolutely.

Update: The original solution did not clip correctly in Opera. This post has since been updated. Let me know if you see any more problems!

So my colleague @blahed said I should write a blog post about this problem I had.  I said it would be short post and it would go something like this….”Don’t use Flash”.  But I guess I’ll expound.

Let’s put it this way.  Flash is like your fist.  And IE is like the rusty nail that gives you tetanus and makes you die.  Working with one is bad…working with both causes infections in your intestines.  And it hurts.

Recently, I needed to embed a swf and all I wanted it to do was play when it became visible and stop when it wasn’t visible.  But if you’ve ever had to write an actionscript interface for your swf (for instance play and pause functions you can call from javascript), you may have run into problems with ExternalInterface.addCallback.  There is a wonderful post that explains all of the pitfalls when using this function here.

Basically it says you can’t put the swf inside a form (which wasn’t my problem), you should use something like swfobject to embed your swf (which I was through jquery.media), and, here’s the kicker, THE FLASH FILE MUST BE VISIBLE ON THE PAGE. That’s right.  If you’re functions aren’t working…it may be because the swf isn’t visible.  You might be asking, “Does this go for all browsers?”  Of course not dummie, only IE.  Instead, I made the swf autoplay whenever it is attached to the DOM and I had to just attach and detach it whenever it should play or stop.

Here’s that jQuery (stopOldMovie starts out as the callback from $.media, then I can call it without params once the movie is saved as loopMovie):

var loopMovie;
/** Append the movie */
function playOldMovie () {
    loopMovie.appendTo('#webcam-loop');
}

/** Stops/detaches the movie */
function stopOldMovie ( orig, newDiv ) {
    if ( loopMovie === undefined ) {
        loopMovie = $(newDiv).detach();
    } else {
        loopMovie.fadeOut(400, function() {
            $(this).detach().show(); // fadeOut applied display:none so .show afterwards to remove this rule
        });
    }
}

As you know, I recently went a little berserk with iPhone-style password fields.  I was thoroughly invigorated by the challenge of this seemingly simple idea.  I wanted to write a plugin that would conquer and destroy the inadequate dPassword plugin from decaf (see link in previous posts)…mission accomplished my friends.  *applause and bashing of heads*

Some fixes and differences from their version:

1. Adding/deleting characters in the middle works

2. Cursor position stays the same when you type or delete in the middle of a password.

3. Cursor position stays the same if you put the cursor somewhere besides the end before the timeout changes the last character.

4. When you do a select-all delete, it will not be buggy.

5. I’ve taken out the interval and debug options.  If someone is knowledgeable enough to debug or change the interval, they can go into the code themselves so I don’t have to increase download size for everyone else.

6. You can have default values in the fields if you want.  Just do it as you normally would, put it in the html…<input type=”password” value=”placeholder”/> and password123 takes care of it.  It was better to do it this way than have an option for all elements because you can keep element-specific placeholders.

demo | github

Devchatt is quickly becoming old news, but I wanted to go ahead and post these two presentations because I need a reliable place for refreshers.  Frank by Travis Dunn and Die Neue Javascript by Noah Burney were two of my favorite presentations.  

Side note: My other favorites were about incremental development by James Long (jlongster.com) and an introduction to Haskell by James Sanders, but I won’t be posting about those for a few reasons.  They were both excellent, but Long’s would be long post I don’t have time for and Sanders only got 1/3 or so of his presentation finished (hoping to hear the rest sometime).

Frank

As Travis eloquently put it, Frank is not a framework.  It is simply a tool for rapid static builds, written in Ruby.  It uses Tilt, so it comes with support for Haml & Sass, LESS, Builder, ERB, Liquid, Mustache, and CoffeeScript.  It has a built-in local webserver and an excellent lorem ipsum interface.  You can generate a certain number of words, paragraphs, images, emails, names, and more on the fly to get your static build out quickly.  

I played with frank a little bit and used it for a big online form I’m building.  Normally, even with Coda’s excellent autocomplete, this would take me at least 2.5-3 hours just to write the html for a form this size.  Frank cut that time in half and made it really easy to get together and compile the form into valid HTML and CSS in no time.  Another bonus: clear and concise error message made it easy to debug any problems on the way.  Also, the ducks are fun.

Cons: I don’t like SASS, but it’s optional.  Besides that, there seems to be a problem with the haml compiler generating completely valid transitional xhtml, but that was easy to fix and not Frank’s fault.  All in all, Frank is no ugly duckling.

Get Frank: http://github.com/blahed/frank

Die Neue Javascript

Ah, Noah.  Noah’s a 19-year-old genius who’s been doing javascript since he was 15 and teaches himself Korean while building letterforms in his spare time.  I loved his presentation on ‘the new javascript’.  

He started off with one of the most important javascript conventions: don’t infect the global namespace!  He stressed the importance of the var keyword and explained that when you don’t use it, you’re make your variable part of the global window object.

He then listed some little tricks to clean up javascript.  For instance:

1. Use commas to var a bunch of things at once.  var one, two, three;
2. Objects are basically associative arrays in javascript and can be referred to as such.  alert(‘Hello’); window.alert(‘Hello’); window[‘alert’](‘Hello’);
3. You can define functions with var = function(){};
4. Use javascript’s ternary operator to make conditionals shorter and when you just want to return a value.

- Next, you can add to and modify native objects.  For instance, 

Number.prototype.times = function( fn ){
  for( var n = 0; n < this; n++ )
    fn( n );
};

( 5 ).times( function( x ){
  say(
    x + 1 + ' Hello' + ( x > 0 ? 's' : '' )
  );
});

- Use call and apply for adding arguments to functions you call.  The first being the context.  Normally, this would just be null to have the window as the context.  However, “you can use Native object methods on other objects by using call, and passing the object in as the context.”  

var list = [ 1, 2, 3 ];
Array.prototype.push.call( list, 4, 5, 6 );

Function.apply is similar to call, but takes an array for the function arguments, which can be very handy.

- Inside of every function, lives the ‘arguments’ variable, meaning any arguments passed to the function that were not named in the function declaration.

function echo2(){
  say( arguments[0] + arguments[1] );
}
echo2( 'POW!', 'BOOM!' );

- Javascript Progress Bar.  As we know, Javascript is single-thread, meaning it chugs through the code one line at a time.  In order to implement a progress bar in Javascript, the magic line is in the setTimeout.  Doing a setTimeout(f, 0) will ensure that f, any function, will get executed last as it just pops f to the bottom of the call stack.  Check it out:

var counter = 0,
    total = 0;

loadup( plug, chug, plug, function(){ alert("WEEEEE!"); }, chug, plug );

function loadup(){
  var fns = Array.prototype.slice.call( arguments );
  if( typeof fns[0] === 'function' )
    total = fns.length;
  else
    fns.shift();

  fns.shift().call();
  fns.unshift( 'Not first' );

  if( fns.length > 1 )
    setTimeout( function(){
      loadup.apply( null, fns );
    }, 0 );

  say( ++counter + '/' + total );
}

function plug(){
  for( var n = 0; n < 3000; n++ )
    $('').appendTo('body').remove();
}

function chug(){
  for( var n = 0; n < 5000; n++ )
    for( var o = 0; o < 8000; o++ )
      n % o;
}

- To conclude, he ended with an example from John Resig’s Secrets of the Javascript Ninja where computationally expensive functions can be optimized by storing computed values instead of recalculating every time.  Like so:

// Ripped from John Resig's Secrets of the JavaScript ninja
Function.prototype.memoized = function( key ){
  this._values = this._values || {};
  return this._values[key] !== undefined ?
    this._values[key] :
    this._values[key] = this.apply(this,arguments);
};

Function.prototype.memoize = function(){
  var fn = this;
  return function(){
    return fn.memoized.apply( fn, arguments );
  };
};

var isPrime = function( num ) {
  var prime = num != 1;
  for ( var i = 2; i < num; i++ ) {
    if ( num % i == 0 ) {
      prime = false;
      break;
    }
  }
  return prime;
};
var isPrimeM = isPrime.memoize();

Check out his presentation and play with his code: http://presentation.royowl.com/#slide-0.
See his homepage.

In the terminal: type emacs, enter, esc, X, then type snake or tetris, enter.  Two games you never knew you had!

I can think of no better way to start off the this blog than to talk about devchatt presentations.  First, if you don’t already know, DevChatt is a free developers conference in Chattanooga, TN.  pre-devchatt was today and was a taste of things to come.  We had Chris Mills from Opera come and talk to us about HTML5 and CSS3.  His project list and titles are vast, but he is involved in web education, opera evangelism, and other stuff.  Plus he plays in a metal band, has a cool English accent and the best goatie short of this guy…

To the point, his presentation was fairly basic.  He touched on many of the generally supported features of the two specs.  Much of it you may already know, but I’ll show you some of the cool stuff.

1.  Less code and easy accessibility for common structures.  Notice the lack of divs:

2.  Machine readable timestamps - 

<time datetime="2010-06-27"> 27 June 2010 </time>
<time datetime="2010-06-27"> Chris's 32nd birthday </time>
<time datetime="2010-06-27T020:00Z"> 8PM on my birthday </time>
<time datetime="2010-06-27T020:00+09:00"> 8PM on my birthday—in Tokyo </time>

3.  New Input Types( range, date, url, email ) plus validation

<input type=date>

<input type=email required>

4.  <canvas>, <video>, and <audio>.  I group these together because I suspect everybody has heard about these.  Yes, they rock.  I get down on my knees and thank the Lord Almighty we don’t have to use flash anymore.  That is, if they can ever work out which codec to use.  

       The fun fighting part where people get bloody noses and then nothing happens: Basically, there are two main video codecs being argued over for video playback in HTML5.  Mozilla and Opera want Ogg Theora (an open source codec), Microsoft and Apple want H.264 (patented) having both had a hand in creating it.  Google has come into the ring (as they always do), with a solution proving yet again that they might take over Venus after this world.  They acquired one called On2.  

Now if they open it up for free use to everyone, they might just get their codec in the HTML5 spec.  If not, we’ll keep fighting until Microsoft and Apple give in to open source, every company except Microsoft and Apple pays $60 million to use H.264 in their browsers, or, like I said, Google expands their enterprise to Venus, enslaves the aliens on that planet, finds a way to jump over this argument, and then provides all of us with a universal <video> element built by white apparitions from another planet who hypnotise Microsoft into dropping IE6 for good.  YAYYAYAHAHAAYAY!

      I got carried away….

5.  Related to that last part, IE doesn’t support crap.  IE9 is showing some improvement but Paul Irish ran his test on the most recent beta release and got 50% as a grade for support.  That’s about 3 or 4 times better than IE8, but still….it fails by academic standards.  Segway: we can use excanvas for simulating a canvas element in IE and raphael js with svg for vector graphics, but hopefully these workarounds won’t be needed much longer (at least not before Google gets back from Venus!  We bitches are goin down!)

6.  Let’s move on to CSS3.  
      a. text-shadow: #444 2px 2px 2px;
       -multiple shadows assignable       
      b. box-shadow
      c. opacity: 0-1 (use filter: alpha(opacity=1-100) in IE)
      d. rgba (a for alpha (opacity)) - color: rgba(255, 255, 255, 0.5);
      e. haven’t used, but i hear designers like this: hsl colors. Rather than using rgb, you can use hsl format to specify how much light you want in your color.
      f. border-radius (this is the one im most excited about being in IE9, that one did make it)
      g. multiple background images (yup, not just one)

7.  Transitions(duration-set animation abilities) and transforms (rotating, scaling, moving things around, skewing)- there’s a lot here.  We’ve got 2D animations.  Webkit is experimenting with 3D.  We’ve got a guy building video games on a canvas with CSS animations.  super mario, super mario kart, wolfenstein.

Play super mario in 14kb javascript

8.  Typography - This is very much needed in the world of web development.  siFr is slow and buggy and there’s really no good way on the web to do custom web fonts, especially if they’re dynamic.  This is the solution: @font-face.  

Fonts usually come in ttf, otf, or eot format.  This all works right now in IE.  You just need the right syntax for your download declarations, then whenever you want to use a custom font in your css, it’s the same as before: font-family: ‘My Font’.  Check out Paul Irish’s post on bulletproof, cross-browser syntax for @font-face.

The only disadvantage to @font-face is licensing.  Some fonts are free, others require a license to use.  When you use @font-face, you make your font available to the public for download from wherever you download it.  That doesn’t make the font creators very happy sometimes, so just make sure you have the proper permission before using @font-face.

9.  Attribute Selectors - Hey!  You got a little regex in my css.  yum.  

a[href^="mailto:"] - select all mailto anchors
a[href$=".co.uk"] - select all anchors ending with .co.uk (british links)
a[title*="chris"] - select all anchors that have chris in the title
a[title*="chris"]:before {
content: url('images/heart.jpg');
} - before and content tags. Stick some content before all the anchors that have chris in the title.
tr:nth-child(even) - select all even tr’s

10.  Lastly, isn’t there a way to check if a browser supports a specific HTML5 or CSS3 feature?  YES!  Faruk Artes and Paul Irish created Modernizr.  Check it out at www.modernizr.com.

Thanks to Chris Mills, Medium, and all of the sponsors of DevChatt.  Expect many posts next weekend when all the mischief and craziness happens.  DevChatt is March 26-27.  See devchatt.org for more info.

Chris Mills’ blog on Opera: http://my.opera.com/chrismills/blog/
His slides for his presentation can be downloaded in a pdf here: http://my.opera.com/ODIN/blog/university-talk-resources-march-2010-html5-css3-slides
All the cool stuff Opera is doing for us developers can be found at dev.opera.com.

On a side note, thank you to wyattdanger (Stephen Bush) for the first outside contribution to this blog.  Check out the videos on python.  Much appreciated.