Archive for the 'Tip' Category

CSS calc() in the house

Finally. Don’t make me jump to JavaScript to tweak the CSS when I want a relative calculation for a value.
The effervescent Paul Rouget shows us the CSS calc() goodness that has a bug going for Mozilla.
Some good simple use cases:
PLAIN TEXT
CSS:

/*
* Two divs aligned, split up by a 1em margin
*/
#a {
  width:75%;
  margin-right: 1em;
}
#b {
  [...]

Canvas optimization tip: Get image data as infrequently as possible

We have learned to touch the DOM as little as possible for performance sakes. Batch up changes, and do one call to innerHTML say. Talk over the evil boundary of the DOM as infrequently as possible.
Well, Selim Arsever has found a similar tip for Canvas that caused a ~40% performance improvement on some of his [...]

CSS Structural Reset

Browsers weren’t given guidance in early HTML specs for default styles on elements. Does the body have a margin or a padding? What colors? etc.
The easiest way to deal with multiple browser is so reset the CSS for them all, and built up from there. We then got Eric Meyer’s reset and YUI reset etc.
Vladimir [...]

Gmail Mobile team talks Latency and Code Loading

Bikin Chiu of the Gmail Mobile team picks up the HTML5 series with a piece on reducing startup latency.
It starts off by talking about lazily loading code via the old favorites of adding a <script> to the DOM, or XHR+eval, but then it gets beyond the typical and discusses the nuance of mobile + offline [...]

FireCrystal: Observe and roll back interactions

FireCrystal is a Firefox extension that helps designers and programmers alike figure out how interactive behaviors on the web work. FireCrystal allows users to record and rewind their interactions with web pages while showing the relevant code.

Text rotation for all

Jonathan Snook has posted a nice nugget on text rotation with CSS that takes a nice bit of markup like this:
PLAIN TEXT
HTML:

 

<div class=”example-date”>

  <span class=”day”>31</span>

  <span class=”month”>July</span>

  <span class=”year”>2009</span>

</div>

 

and converts it to:

all via the CSS:
PLAIN TEXT
CSS:

 

-webkit-transform: rotate(-90deg);

-moz-transform: rotate(-90deg);

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

 

Yup, even IE.

More than you ever want to see about encoding

Paul Baukaus linked to jsescape, a little form that shows escaping and unescaping across a number of encodings.

Andrea Giammarchi had his own post on encodings in a different way…. as he talked about
en-code which you can check out in action here on the page that lets you do simple encodings, especially for source code, in [...]

CSS Browser Hacks

Paul Irish tries not to use CSS browser hacks anymore and instead “uses IE’s conditional comments to apply classes to the body tag, but he put up a concise list of browser specific hacks he has used:
PLAIN TEXT
CSS:

 

/***** Selector Hacks ******/

 

/* IE 6 and below */

* html #uno  { color: red }

 

/* IE 7 and [...]

How many ways can you iterate over an array in JavaScript?

Myk is one of the nicest chaps that I have had the pleasure to sit closely to in Mozilla building “S”.
He has a nice little tip on the many syntaxes that you can use to iterate over arrays in various JavaScript implementations and standards. Some folks had some interesting points on the various approaches:

for each [...]

Detecting event support in browsers

Kangax has a really nice article on testing for event support in browsers in which he delves into the quirks and work-arounds needed to get ‘er done, coming up with a nice generic solution:
PLAIN TEXT
JAVASCRIPT:

 

  var isEventSupported = (function(){

    var TAGNAMES = {

      ’select’:'input’,'change’:'input’,

      ’submit’:'form’,'reset’:'form’,

      ‘error’:'img’,'load’:'img’,'abort’:'img’

    }

  [...]