Activate your free membership today | Log-in

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 code, in short order.

Posted by Dion Almaer at 5:03 am
7 Comments

+++--
3.8 rating from 10 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:

PLAIN TEXT
CSS:
  1.  
  2. /***** Selector Hacks ******/
  3.  
  4. /* IE 6 and below */
  5. * html #uno  { color: red }
  6.  
  7. /* IE 7 and below */
  8. *:first-child+html #dos { color: red }
  9.  
  10. /* IE 7 and modern browsers */
  11. html>body #tres { color: red }
  12.  
  13. /* Modern browsers (not IE 7) */
  14. html>/**/body #cuatro { color: red }
  15.  
  16. /* Opera 9.27 and below */
  17. html:first-child #cinco { color: red }
  18.  
  19. /* Safari */
  20. html[xmlns*=""] body:last-child #seis { color: red }
  21.  
  22. /*safari 3+, chrome 1+, opera9+, ff 3.5+ */
  23. body:nth-of-type(1) #siete { color: red }
  24.  
  25. /* safari 3+, chrome 1+, opera9+, ff 3.5+ */
  26. body:first-of-type #ocho {  color: red }
  27.  
  28. /* saf3, chrome1+ */
  29. @media screen and (-webkit-min-device-pixel-ratio:0) {
  30.  #diez  { background: #FFDECE; border: 2px solid #ff0000  }
  31. }
  32.  
  33. /***** Attribute Hacks ******/
  34.  
  35. /* ie6 and below */
  36. #once { _color:blue }
  37.  
  38. /* ie7 and below */
  39. #doce { *color: blue } /* or #color:blue */
  40.  
  41. /* 'Modern Browsers' includes IE8, whether you agree or not.. :) */
  42.  

He has included a test page and you can view the different browsers via browsershots.

Finally, he links to another concise list... of JavaScript sniffs.

Posted by Dion Almaer at 10:35 am
14 Comments

+++--
3.3 rating from 32 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:

for each in:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. for each (var item in [1, 2, 3]) alert(item);
  3.  

The MDC docs for "for each" say not to iterate arrays that way, too, so I never use it on them. The usual (would need to guard with hasOwnProperty() issue).

JavaScript 1.6 added the Array.forEach method:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. [1, 2, 3].forEach(function(item) { alert(item) });
  3.  

JavaScript 1.7 added array comprehensions for array initialization:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. var squares = [item * item for each (item in [1, 2, 3])];
  3.  

I just realized I can (ab)use comprehensions to iterate arrays with Perl-like syntax by throwing away the result:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. [alert(item) for each (item in [1, 2, 3])];
  3.  

I can iterate object properties the same way:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. var obj = { foo: 1, bar: 2, baz: 3 };
  3. [alert(name + "=" + obj[name]) for (name in obj)];
  4.  

Edward Lee points out how to use Iterators:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. [alert(key + "=" + val) for ([key, val] in Iterator({a:1,b:2,c:3}))]
  3.  

Posted by Dion Almaer at 4:29 am
18 Comments

+++--
3.2 rating from 33 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:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2.   var isEventSupported = (function(){
  3.     var TAGNAMES = {
  4.       'select':'input','change':'input',
  5.       'submit':'form','reset':'form',
  6.       'error':'img','load':'img','abort':'img'
  7.     }
  8.     function isEventSupported(eventName) {
  9.       var el = document.createElement(TAGNAMES[eventName] || 'div');
  10.       eventName = 'on' + eventName;
  11.       var isSupported = (eventName in el);
  12.       if (!isSupported) {
  13.         el.setAttribute(eventName, 'return;');
  14.         isSupported = typeof el[eventName] == 'function';
  15.       }
  16.       el = null;
  17.       return isSupported;
  18.     }
  19.     return isEventSupported;
  20.   })();
  21.  

Along with this, he put up a simple test case that you can point at.

Posted by Dion Almaer at 7:19 am
18 Comments

++++-
4.4 rating from 18 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 crap we put in HTML in order to present what the users want to see - the content.

So I played tonight with a bookmarklet to provide this piece of stats.

The bookmarklet code is served from here. The code is also on github.

And some fun results:

Here are some random results of running the bookmarklet on different sites.

http://www.cnn.com:
Total size: 92004 bytes
Content size: 11475 bytes
Content-to-markup ratio: 0.12
Fair ratio * : 0.16

http://www.sitepoint.com

Total size: 65989 bytes
Content size: 16199 bytes
Content-to-markup ratio: 0.25
Fair ratio * : 0.60

Article on http://en.wikipedia.org:
Total size: 21648 bytes
Content size: 3315 bytes
Content-to-markup ratio: 0.15
Fair ratio * : 0.35

http://www.phpied.com
Total size: 31899 bytes
Content size: 7933 bytes
Content-to-markup ratio: 0.25
Fair ratio * : 0.48

http://www.google.com SERP
Total size: 29963 bytes
Content size: 3351 bytes
Content-to-markup ratio: 0.11
Fair ratio * : 0.14

Posted by Dion Almaer at 2:58 am
3 Comments

++++-
4.4 rating from 14 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:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. $H(Event.cache).inject(0, function(m, p) {
  3.   m += $H(p.value).values().flatten().size();
  4.   return m;
  5. });
  6.  

Posted by Dion Almaer at 6:56 am
2 Comments

+++--
3 rating from 24 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.2 rating from 19 votes

Thursday, January 29th, 2009

IE=’\v’==’v’

Category: Tip

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. IE='\v'=='v'
  3.  

That is the current winner in the shortest way to test for IE (including 8). The other notable was:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. IE=top.execScript?1:0
  3.  

Huh :)

Gareth Heyes (the chap who did the v trick) has posted on this himself and comes up with One Line To Rule Them All:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. B=(function x(){})[-5]=='x'?'FF3':(function x(){})[-6]=='x'?'FF2':/a/[-1]=='a'?'FF':'\v'=='v'?'IE':/a/.__proto__=='//'?'Saf':/s/.test(/a/.toString)?'Chr':/^function \(/.test([].sort)?'Op':'Unknown'
  3.  

Posted by Dion Almaer at 1:02 am
22 Comments

++++-
4.5 rating from 46 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 separated list. For example dr:select="Firefox, Safari 3" will cause the link or style element to be included for any Firefox and for Safari 3. If you specify more than one token, each of which constitutes a positive selection, you may use any combination of tokens from the non-IE browsers plus the token "IE".

To select a specific IE only one token in the dr:select attribute is allowed, because it is directly used in constructing a Conditional Comment (CC). These are constructed on the fly only if the current browser is actually an IE. Any valid CC expression is allowed, so you can specify for example dr:select="lte IE 7" (positive selection) or dr:select="!IE 6" (negative selection). To clarify, a positive CC selection will allow only the IE's specified to read the CSS, and a negative CC will exclude them from seeing it. The best, you don't need anymore to include Microsoft proprietary CC's for selecting CSS in your HTML!

Link and style elements without a dr:select attribute are considered common stylesheets which every browser will see. They will remain unchanged, as any other HTML element. Only the dr:select attributes will be nullified.

You could do this when JavaScript isn't enabled for example.... although I am not sure how practical it actually is :)

Posted by Dion Almaer at 5:50 am
14 Comments

++++-
4.2 rating from 17 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
5 Comments

+++--
3.6 rating from 24 votes

Monday, January 12th, 2009

Forcing a UI redraw from JavaScript

Category: JavaScript, Tip

Thomas Fuchs has run into those annoying times when a redraw is required to irk the browser into a correct layout, and his weapon of choice is:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. Element.addMethods({
  3.   redraw: function(element){
  4.     element = $(element);
  5.     var n = document.createTextNode(' ');
  6.     element.appendChild(n);
  7.     (function(){n.parentNode.removeChild(n)}).defer();
  8.     return element;
  9.   }
  10. });
  11.  

This is an update to the Script.aculo.us forceRerendering so it will probably be in Scripty 2? :)

Sebastian of Qooxdoo had a similar technique:

You may also use some kind of addClass/removeClass combo. That would result into the same effect but without creating unused DOM elements. We use this method in qooxdoo and it works well.

Do you run into these issues?

Posted by Dion Almaer at 1:45 pm
9 Comments

++++-
4.1 rating from 7 votes

Friday, November 14th, 2008

Guid0: JavaScript GUIDs

Category: JavaScript, Library, Tip

Our own Michael Mahemoff is at it again, creating a simple little GUID generator called Guid0:

Guid0 is a GUID library for Javascript. Okay, it doesn't yet do official, bona fide, 128-bit, GUIDs yet, mainly for API design reasons. But this is a library you might find useful if you want to generate a unique ID in your Ajax app.

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. // simple
  3. guid = new Guid();
  4. var newguid = guid.generate();
  5.  
  6. // options
  7. guid = new Guid(
  8.   {
  9.         chars: Guid.constants.base85,  // or you could say "abc" if you only wanted those chars to appear
  10.         epoch: "June 1, 2003",
  11.         counterSequenceLength: 2, // a counter field appended to the end
  12.         randomSequenceLength: 2 // a random field appended to the end
  13.   }
  14. );
  15.  

He is working on 128-bit support.

Posted by Dion Almaer at 6:47 am
3 Comments

+++--
3.1 rating from 15 votes

Wednesday, October 1st, 2008

Finding those trailing commas

Category: Tip, Utility

Dan Fabulich got bitten by the "trailing comma" issue one too many times, so he created a script to solve his problem:

“How many thousands of developer hours have been lost to random IE bugs like this?” I asked myself. I decided that there had to be a good way to detect this problem in an automated way, without firing up a copy of IE and running a full test suite.

It turns out that these and other syntax errors can be detected automatically from the Windows command line, using the Windows Scripting Host (WSH). On Windows XP and higher, the command-line tool “cscript.exe” can be used to run JavaScript (ahem, JScript) headlessly (outside of any browser).

Just create a file called “wsh-parser.js” like this:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. var fso = new ActiveXObject( "Scripting.FileSystemObject" );
  3.  
  4. function parse(fname) {
  5.     var file = fso.OpenTextFile( fname, 1 );
  6.     ret = file.ReadAll();
  7.     file.Close();
  8.     try {
  9.         eval("(function(){\n"+ret+"\n});");
  10.     } catch (e) {
  11.         WScript.Echo("Syntax error parsing " + fname);
  12.         WScript.Echo("  " + e.message);
  13.     }
  14. }
  15.  
  16. function findJavaScript(folder) {
  17.     for (var fc = new Enumerator(folder.files); !fc.atEnd(); fc.moveNext()) {
  18.         var file=fc.item();
  19.         if (/.js$/.test(file.Name)) {
  20.             parse(file);
  21.         }
  22.     }
  23.     for (var fc = new Enumerator(folder.subfolders); !fc.atEnd(); fc.moveNext()) {
  24.         var subfolder = fc.item();
  25.         if (subfolder.Name == ".svn") continue; // ignore .svn folders
  26.         findJavaScript(subfolder);
  27.     }
  28. }
  29.  
  30. var rootPath = "src/main/javascript";
  31. var rootFolder = fso.GetFolder(rootPath);
  32.  
  33. findJavaScript(rootFolder);
  34.  

Other tools will help you hunt this down too, and I am sure some of you have Perl/Ruby/Python one liners to do the same ;)

Posted by Dion Almaer at 5:37 am
Comment here

+++--
3.7 rating from 3 votes

Friday, September 26th, 2008

Maintaining Browser Specific CSS

Category: CSS, Tip

Nick Cairns saw our post on conditional CSS for browsers and followed up discussing how he handles maintaining IE specific CSS selectors:

We keep our IE related styling right below the common (standards-based) declarations. BUT, we DON’T use hacks. Underscore hacks, * hacks, and all of those things that we all gave up with the birth of IE7 should remain dead and buried. Instead, we’re going to use IE’s conditional commenting to create IE specific CSS selectors. We do this by adding a conditional comment block as the outer most wrapper in our html template (ie. the first tag inside the ).

PLAIN TEXT
HTML:
  1.  
  2.   </body><body>
  3.      <!--[if IE 7]><div id="body1" class="IE IE7 IE67"><![endif]-->
  4.      <!--[if IE 6]><div id="body1" class="IE IE6 IE56 IE67"><![endif]-->
  5.      <!--[if IE 5]><div id="body1" class="IE IE5 IE56"><![endif]-->
  6.      <!--[if !IE]>-->
  7.           <div id="body1" class="W3C">
  8.      <!--<![endif]-->
  9.                 /* THE REST OF YOUR HTML GOES HERE */
  10.           </div>   
  11.   </div></div></div></body> 
  12.  

Now, in this sample, we do have support for older legacy versions of IE, so you could always reduce the number of conditions if your project doesn’t need this level of support. And, you could also easily extend it to include IE8, or to do minus versioning such as IE8-.

With this conditional block in place, it becomes quite easy to place IE only style declarations right below their standards-based counterparts. As an example:

PLAIN TEXT
CSS:
  1.  
  2. #header { overflow: hidden; }
  3. .IE #header { zoom: 1; }
  4.  

Posted by Dion Almaer at 6:35 am
23 Comments

++---
2.4 rating from 33 votes

Monday, September 15th, 2008

Tip: Using a background image on an image

Category: CSS, Tip

Pascal Opitz answered the question "Can you set an image background on an image element?" in simple fashion.

All you have to do is make sure that the image is display: block and has a padding.

He put up a simple demo that uses a div with an image, and he applies backgrounds to both:

PLAIN TEXT
CSS:
  1.  
  2. div {
  3.         background: url('blur.jpg') no-repeat top left;
  4.         width: 232px;
  5.         height: 200px;            
  6. }
  7.                
  8. img {
  9.         display: block;
  10.         background: url('parallax.gif') no-repeat bottom left;
  11.         padding: 93px 100px 75px 100px;
  12. }
  13.  

You have the little chap running as the actual src of the image, the animated background as the img background, and then the sky background applied to the div.

Posted by Dion Almaer at 5:23 am
8 Comments

++++-
4.1 rating from 32 votes

Tuesday, September 2nd, 2008

addSizes.js: automatic link file-size generation

Category: JavaScript, Tip, jQuery

Nathalie Downe has taken Simon Willison's json-head App Engine mini-service and used it to create addSizes.js, a little script that looks for large files linked from a page, and automatically adds their file size to the copy after the link.

Once in place, you simple do your usual link, and asynchronously the Web page will be updated to look like "your pdf link (pdf 2.8 MB)".

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. jQuery(function($){
  3.         $('a[href$=".pdf"], a[href$=".doc"], a[href$=".mp3"], a[href$=".m4u"]').each(function(){
  4.                 // looking at the href of the link, if it contains .pdf or .doc or .mp3
  5.                 var link = $(this);
  6.                 var bits = this.href.split('.');
  7.                 var type = bits[bits.length -1];
  8.                
  9.                
  10.                 var url= "http://json-head.appspot.com/?url="+encodeURI($(this).attr('href'))+"&callback=?";
  11.        
  12.                 // then call the json thing and insert the size back into the link text
  13.                  $.getJSON(url, function(json){
  14.                         if(json.ok && json.headers['Content-Length']) {
  15.                                 var length = parseInt(json.headers['Content-Length'], 10);
  16.                                
  17.                                 // divide the length into its largest unit
  18.                                 var units = [
  19.                                         [1024 * 1024 * 1024, 'GB'],
  20.                                         [1024 * 1024, 'MB'],
  21.                                         [1024, 'KB'],
  22.                                         [1, 'bytes']
  23.                                 ];
  24.                                
  25.                                 for(var i = 0; i <units.length; i++){
  26.                                        
  27.                                         var unitSize = units[i][0];
  28.                                         var unitText = units[i][1];
  29.                                        
  30.                                         if (length>= unitSize) {
  31.                                                 length = length / unitSize;
  32.                                                 // 1 decimal place
  33.                                                 length = Math.ceil(length * 10) / 10;
  34.                                                 var lengthUnits = unitText;
  35.                                                 break;
  36.                                         }
  37.                                 }
  38.                                
  39.                                 // insert the text directly after the link and add a class to the link
  40.                                 link.after(' (' + type + ' ' + length + ' ' + lengthUnits + ')');
  41.                                 link.addClass(type);
  42.                         }
  43.                 });
  44.         });
  45. });
  46.  

Posted by Dion Almaer at 5:07 am
8 Comments

++++-
4.4 rating from 16 votes

Next Page »