Upgrade to Pro — share decks privately, control downloads, hide ads and more …

∞ things I didn’t know about HTML, CSS, and Jav...

∞ things I didn’t know about HTML, CSS, and JavaScript @ Arrrcamp 2013

Slides for my talk on random web development fun facts at Arrrrcamp 2013.

Mathias Bynens

October 02, 2013
Tweet

More Decks by Mathias Bynens

Other Decks in Programming

Transcript

  1. DTD fail <input type="date" placeholder="foo"> → can still be checked

    by a computer <table> <tr><td>foo</td></tr> <tr><td colspan="2">bar</td></tr> </table>
  2. Computer says no <img src="foo.png" alt=""> → can only be

    checked by a human <time datetime="2013-10-03">LOL</time> <blockquote>not a quote</blockquote>
  3. Take-away Don’t obsess about HTML validation. • not the whole

    story • validators have bugs, too Functionality trumps validation anyway. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4. ;

  5. ;

  6. Character references <!-- invalid, and confusing: --> <p title="foo&ampbar"> foo&ampbar

    </p> <!-- title renders as “foo&ampbar” --> <!-- text renders as “foo&bar” -->
  7. Character references <!-- valid and reliable: --> <p>foo & bar</p>

    <!-- renders as “foo & bar” --> http://mths.be/bdu
  8. Character references <!-- invalid, and confusing: --> <p title="foo&gtbar"> foo&gtbar

    </p> <!-- title renders as “foo&gtbar” --> <!-- text renders as “foo>bar” -->
  9. Attribute values $ curl -i http://mathiasbynens.be/demo/css-without-html HTTP/1.1 200 OK Date:

    Wed, 03 Oct 2013 13:33:37 GMT Link: <css-without-html.css>;rel=stylesheet Content-Length: 0 Content-Type: text/html; charset=UTF-8 http://mths.be/bpe
  10. CSS html { font-family: 'Comic Sans MS'; } “If there’s

    whitespace in the font family name, it must be quoted.”
  11. CSS html { font-family: Comic Sans MS; } “If there’s

    whitespace in the font family name, it must be quoted.” http://mths.be/bft
  12. JavaScript string length >> 'A'.length // U+0041 1 >> 'A'

    == '\u0041' true >> 'B'.length // U+0042 1 >> 'B' == '\u0042' true
  13. String length ≠ char count >> 'A'.length // U+1D400 2

    >> 'A' == '\uD835\uDC00' true >> 'B'.length // U+1D401 2 >> 'B' == '\uD835\uDC01' true http://mths.be/bed
  14. Surrogate pairs // for non-BMP code points (> 0xFFFF) function

    getSurrogates(codePoint) { var high = Math.floor((codePoint - 0x10000) / 0x400) + 0xD800; var low = (codePoint - 0x10000) % 0x400 + 0xDC00; return [ high, low ]; } function getCodePoint(high, low) { var codePoint = (high - 0xD800) * 0x400 + low - 0xDC00 + 0x10000; return codePoint; } >> getSurrogates('A'); // U+1D400 [ 0xD835, 0xDC00 ] >> getCodePoint(0xD835, 0xDC00); 0x1D400 http://mths.be/bed
  15. JS string character count function countSymbols(string) { return punycode.ucs2.decode(string).length; }

    >> countSymbols('A') // U+0041 1 >> countSymbols('A') // U+1D400 1 http://mths.be/punycode
  16. Which is invalid? var H ̹̙̦̮͉̩̗̗ͧ̇̏̊̾ E ͨ͆͒̆ͮ̃͏̷̮̣̫̤̣ C ͯ̂͐͏̨̛͔̦̟͈̻

    O ̜͎͍͙͚̬̝̣̽ͮ͐͗̀ͤ̍̀͢ M ̴̡̲̭͍͇̼̟̯̦̉̒͠Ḛ̛̙̞̪̗ͥͤͩ̾͑̔͐ͅṮ̴̷̷̗̼͍̿̿̓̽͐ H ̙̙̔̄͜ ; var !_ಠӹಠ_!; var ໦ϗ_₹îਓ Ǝ ℵೋ⏺ Δ େ; var ʃː λ ˀπ ᐩᐨᐟᑉᐦᐸᐳƘƖ\u200C; var a; http://mths.be/ber
  17. ♥ JS var H ̹̙̦̮͉̩̗̗ͧ̇̏̊̾ E ͨ͆͒̆ͮ̃͏̷̮̣̫̤̣ C ͯ̂͐͏̨̛͔̦̟͈̻ O

    ̜͎͍͙͚̬̝̣̽ͮ͐͗̀ͤ̍̀͢ M ̴̡̲̭͍͇̼̟̯̦̉̒͠Ḛ̛̙̞̪̗ͥͤͩ̾͑̔͐ͅṮ̴̷̷̗̼͍̿̿̓̽͐ H ̙̙̔̄͜ ; // valid var !_ಠӹಠ_!; // valid var ໦ϗ_₹îਓ Ǝ ℵೋ⏺ Δ େ; // valid var ʃː λ ˀπ ᐩᐨᐟᑉᐦᐸᐳƘƖ\u200C; // valid var a; // syntax error http://mths.be/ber
  18. ToBoolean(condition) Argument type Result undefined false null false boolean same

    as input number +0, -0, NaN → false otherwise → true string empty string → false otherwise → true object true
  19. if (document.all) { // code that uses `document.all`, // for

    ancient browsers } else if (document.getElementById) { // code that uses `document.getElementById`, // for “modern” browsers } But… Why?
  20. JavaScript var totalTime, start = new Date, iterations = 6;

    while (iterations--) { // Code snippet goes here } // totalTime ! the number of milliseconds it took // to execute the code snippet 6 times totalTime = new Date - start;
  21. JavaScript var hz, period, startTime = new Date, runs =

    0; do { // Code snippet goes here runs++; totalTime = new Date - startTime; } while (totalTime < 1000);
  22. JavaScript // convert ms to seconds totalTime /= 1000; //

    period ! how long per operation period = totalTime / runs; // hz ! the number of operations per second hz = 1 / period; // can be shortened to // hz = (runs * 1000) / totalTime;
  23. JavaScript “When Windows XP boots, the typical default clock interrupt

    period is 10 milliseconds, although a period of 15 milliseconds is used on some systems. That means that every 10 milliseconds, the operating system receives an interrupt from the system timer hardware.”
  24. JavaScript “When Windows XP boots, the typical default clock interrupt

    period is 10 milliseconds, although a period of 15 milliseconds is used on some systems. That means that every 10 milliseconds, the operating system receives an interrupt from the system timer hardware.”
  25. Benchmark.js • Detects various timers • (new Date).getTime() (ms) •

    chrome.Interval (µs) • performance.now (µs) • Node microtime module (µs) • Node’s high-res timer (ns) • Java timer applet (ns) • Performs statistical analysis of results • Used in RoboHornet and on jsPerf.com