quick tips can all go here

Thursday, June 10th, 2010

CSS calc() in the house

Category: CSS, Tip

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: < View plain text > css /* * Two divs aligned, split up Read the rest…

Posted by Dion Almaer at 10:51 am

3.8 rating from 4 votes

Thursday, May 27th, 2010

Canvas optimization tip: Get image data as infrequently as possible

Category: Canvas, Performance, Tip

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 Read the rest…

Posted by Dion Almaer at 7:01 am

3.6 rating from 7 votes

Friday, May 21st, 2010

CSS Structural Reset

Category: CSS, Tip

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 Read the rest…

Posted by Dion Almaer at 6:55 am

1.5 rating from 2 votes

Tuesday, September 22nd, 2009

Gmail Mobile team talks Latency and Code Loading

Category: Google, Mobile, Tip

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 + Read the rest…

Posted by Dion Almaer at 6:09 am

3.2 rating from 21 votes

Wednesday, September 2nd, 2009

FireCrystal: Observe and roll back interactions

Category: Tip, Utility

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.

Posted by Dion Almaer at 6:52 am

3.3 rating from 16 votes

Wednesday, July 29th, 2009

Text rotation for all

Category: CSS, Tip

Jonathan Snook has posted a nice nugget on text rotation with CSS that takes a nice bit of markup like this: < View 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: < View plain text > css -webkit-transform: rotate(-90deg); Read the rest…

Posted by Dion Almaer at 10:20 am

4.3 rating from 59 votes

Thursday, July 2nd, 2009

More than you ever want to see about encoding

Category: Tip, Utility

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 Read the rest…

Posted by Dion Almaer at 5:03 am

3.4 rating from 18 votes

Friday, April 24th, 2009

CSS Browser Hacks

Category: CSS, Tip

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: < View plain text > css /***** Selector Hacks ******/   /* IE 6 and below */ * Read the rest…

Posted by Dion Almaer at 10:35 am

3.5 rating from 35 votes

Thursday, April 23rd, 2009

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

Category: JavaScript, Tip

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: Read the rest…

Posted by Dion Almaer at 4:29 am

3.5 rating from 45 votes

Friday, April 3rd, 2009

Detecting event support in browsers

Category: JavaScript, Tip

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: < View plain text > javascript var isEventSupported = (function(){     var TAGNAMES = {       ‘select’:’input’,’change’:’input’,   Read the rest…

Posted by Dion Almaer at 7:19 am

4.3 rating from 20 votes

Friday, March 6th, 2009

Calculate your content to markup ratio

Category: Tip, Utility

Stoyan Stefanov has created a fun little bookmarklet that calculates the content to markup ratio of a webpage: When you care about performance, or SEO (or just doing a good job as web dev) an interesting data point is the ratio of page content vs. the markup used to present this content. Or… how much Read the rest…

Posted by Dion Almaer at 2:58 am

4.4 rating from 15 votes

Monday, February 23rd, 2009

Watching Prototype events and a nice little tip

Category: Prototype, Tip

Kangax shows a nice use of Prototype as he writes a tip to let you see your Prototype based events as they run in your application. A nice little view. He also realized that the core piece of the bookmarklet is actually a nice view of the power of Prototype as a library: < View Read the rest…

Posted by Dion Almaer at 6:56 am

3 rating from 25 votes

HTML5 Canvas Cheat Sheet

Category: Canvas, Examples, Tip

Jacob is back, and this time he has a cheat sheet with him. It is nice to see the Canvas API fitting on one sheet here, and I really like the images showing how things look like and work.

Posted by Dion Almaer at 12:56 am
1 Comment

4 rating from 21 votes

Thursday, January 29th, 2009


Category: Tip

< View plain text > javascript IE=’\v’==’v’ That is the current winner in the shortest way to test for IE (including 8). The other notable was: < View plain text > javascript IE=top.execScript?1:0 Huh :) Gareth Heyes (the chap who did the v trick) has posted on this himself and comes up with One Line Read the rest…

Posted by Dion Almaer at 1:02 am

4.4 rating from 57 votes

Tuesday, January 27th, 2009

Browser Detection with XSLT

Category: Tip

This is a fun little hack by Manfred Staudinger. Thanks to select=”system-property(‘xsl:vendor’)”, he has a style sheet that allows you to show items depending on the browser: To include a link or a style element for one of the above choices you use the dr:select attribute and specify one or more tokens as a comma Read the rest…

Posted by Dion Almaer at 5:50 am

4.3 rating from 20 votes

Monday, January 19th, 2009

Web Resources He Uses

Category: Tip

“Ethan” has a really nicely packaged set of web resources that he uses. From JavaScript core libraries, to widgets, to tools, to CSS frameworks, to CSS techniques, to browser compatibility, to typography, to extensions, and much much more. Nicely done.

Posted by Dion Almaer at 5:27 am

3.6 rating from 25 votes