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

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

∞ 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.

24e08a9ea84deb17ae121074d0f17125?s=128

Mathias Bynens

October 02, 2013
Tweet

More Decks by Mathias Bynens

Other Decks in Programming

Transcript

  1. ∞ things I didn’t know about HTML, CSS & JavaScript

    @mathias · #arrrrcamp
  2. @mathias

  3. Back to the ’90s kickin’ it old skool

  4. Background colors <body bgcolor="pink"></body>

  5. Background colors <body bgcolor="pink"></body>

  6. Background colors <body bgcolor="#ffc0cb"></body>

  7. Background colors <body bgcolor="ffc0cb"></body>

  8. Background colors <body bgcolor="#f3f"></body> ! #FF33FF

  9. Background colors <body bgcolor="f3f"></body> ! #0F030F

  10. Background colors <body bgcolor="sick"></body> ! #00C000

  11. Background colors <body bgcolor="MrT"></body> ! #000000

  12. Background colors <body bgcolor="chucknorris"></body> ! #C00000

  13. Background colors <body bgcolor="crap"></body> ! #C0A000

  14. Background colors <body bgcolor=" "></body> ! #000000

  15. Background colors <body bgcolor="arrrrcamp"></body> ! #A000A0 http://mths.be/bpf

  16. “Valid HTML” conformance criteria

  17. Document Type Definition

  18. DTD <head> <p>Lorem ipsum.</p> </head>

  19. DTD <kitchensink>

  20. DTD fail <input type="date" placeholder="foo">

  21. DTD fail <input type="date" placeholder="foo"> <table> <tr><td>foo</td></tr> <tr><td colspan="2">bar</td></tr> </table>

  22. 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>
  23. Computer says no <img src="foo.png" alt=""> <time datetime="2013-10-03">LOL</time> <blockquote>not a

    quote</blockquote>
  24. 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>
  25. 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">
  26. Character references aka. “entities”

  27. Character references <!-- valid and reliable: --> <p>foo &amp; bar</p>

    <!-- renders as “foo & bar” -->
  28. ;

  29. github:twbs/bootstrap#3057

  30. ;

  31. ; PRETENDS TO BE OPTIONAL BREAKS STUFF WHEN OMITTED

  32. Character references <!-- valid and reliable: --> <p>foo &amp; bar</p>

    <!-- renders as “foo & bar” -->
  33. Character references <!-- invalid, but reliable: --> <p>foo &amp bar</p>

    <!-- renders as “foo & bar” -->
  34. Character references <!-- invalid, and confusing: --> <p title="foo&ampbar"> foo&ampbar

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

    <!-- renders as “foo & bar” --> http://mths.be/bdu
  36. Character references <!-- valid and reliable: --> <p>foo &gt; bar</p>

    <!-- renders as “foo > bar” -->
  37. Character references <!-- invalid, but reliable: --> <p>foo &gt bar</p>

    <!-- renders as “foo > bar” -->
  38. Character references <!-- invalid, and confusing: --> <p title="foo&gtbar"> foo&gtbar

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

    <!-- renders as “foo > bar” -->
  40. Tags

  41. Valid HTML <!DOCTYPE html> <html> <head> <title>Foo</title> </head> <body> …

    </body> </html>
  42. Valid HTML <!DOCTYPE html> <html> <head> <title>Foo</title> </head> <body> …

    </body> </html>
  43. Valid HTML <!DOCTYPE html> <html> <head> <title>Huh?</title> <body> …

  44. Valid HTML <!DOCTYPE html> <html> <head> <title>Huh?</title> <body> …

  45. Valid HTML <!DOCTYPE html> <title>lolwut</title> …

  46. None
  47. None
  48. ^ n FTFY

  49. Using CSS without HTML

  50. None
  51. None
  52. 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
  53. None
  54. Font family names

  55. CSS html { font-family: 'Comic Sans MS'; } “If there’s

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

    whitespace in the font family name, it must be quoted.” http://mths.be/bft
  57. CSS html { font-family: 456bereastreet; }

  58. CSS html { font-family: 456bereastreet; }

  59. CSS html { font-family: \34 56bereastreet; }

  60. CSS html { font-family: \34 56bereastreet; }

  61. CSS html { font-family: '456bereastreet'; }

  62. CSS http://mths.be/bjm

  63. Attribute values

  64. Attribute values <a href="foo">…</a> <style> a[href="foo"] { background: hotpink; }

    </style>
  65. Attribute values <a href=foo>…</a> <style> a[href=foo] { background: hotpink; }

    </style>
  66. Attribute values <a href=foo|bar>…</a> <style> a[href=foo|bar] { background: hotpink; }

    </style>
  67. Attribute values <a href=foo|bar>…</a> <style> a[href=foo|bar] { background: hotpink; }

    </style>
  68. Attribute values <a href=foo|bar>…</a> <style> a[href="foo|bar"] { background: hotpink; }

    </style> http://mths.be/bal
  69. Attribute values http://mths.be/bjn

  70. Characters in JS

  71. JavaScript string length >> 'A'.length // U+0041 1 >> 'A'

    == '\u0041' true >> 'B'.length // U+0042 1 >> 'B' == '\u0042' true
  72. 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
  73. 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
  74. 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
  75. JS variable names

  76. Which is invalid? var H ̹̙̦̮͉̩̗̗ͧ̇̏̊̾ E ͨ͆͒̆ͮ̃͏̷̮̣̫̤̣ C ͯ̂͐͏̨̛͔̦̟͈̻

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

    ̜͎͍͙͚̬̝̣̽ͮ͐͗̀ͤ̍̀͢ M ̴̡̲̭͍͇̼̟̯̦̉̒͠Ḛ̛̙̞̪̗ͥͤͩ̾͑̔͐ͅṮ̴̷̷̗̼͍̿̿̓̽͐ H ̙̙̔̄͜ ; // valid var !_ಠӹಠ_!; // valid var ໦ϗ_₹îਓ Ǝ ℵೋ⏺ Δ େ; // valid var ʃː λ ˀπ ᐩᐨᐟᑉᐦᐸᐳƘƖ\u200C; // valid var a; // syntax error http://mths.be/ber
  78. /^(?!(?:do|if|in|for|let|new|try|var|case|else| enum|eval|false|null|this|true|void|with|break| catch|class|const|super|throw|while|yield|delete| export|import|public|return|static|switch|typeof| default|extends|finally|package|private|continue| debugger|function|arguments|interface|protected| implements|instanceof)$)[$A-Z\_a-z\xaa\xb5\xba \xc0-\xd6\xd8-\xf6\xf8-\u02c1\u02c6-\u02d1\u02e0- \u02e4\u02ec\u02ee\u0370- \u0374\u0376\u0377\u037a-\u037d\u0386\u0388-

    \u038a\u038c\u038e-\u03a1\u03a3-\u03f5\u03f7- \u0481\u048a-\u0527\u0531-\u0556\u0559\u0561- \u0587\u05d0-\u05ea\u05f0-\u05f2\u0620-\u064a http://mths.be/bpg
  79. \u203f\u2040\u2054\u20d0-\u20dc\u20e1\u20e5- \u20f0\u2cef-\u2cf1\u2d7f\u2de0-\u2dff\u302a- \u302f\u3099\u309a\ua620-\ua629\ua66f\ua674- \ua67d\ua69f\ua6f0\ua6f1\ua802\ua806\ua80b\ua823- \ua827\ua880\ua881\ua8b4-\ua8c4\ua8d0- \ua8d9\ua8e0-\ua8f1\ua900-\ua909\ua926-\ua92d \ua947-\ua953\ua980-\ua983\ua9b3-\ua9c0\ua9d0- \ua9d9\uaa29-\uaa36\uaa43\uaa4c\uaa4d\uaa50- \uaa59\uaa7b\uaab0\uaab2-\uaab4\uaab7\uaab8\uaabe \uaabf\uaac1\uaaeb-\uaaef\uaaf5\uaaf6\uabe3-

    \uabea\uabec\uabed\uabf0-\uabf9\ufb1e\ufe00- \ufe0f\ufe20-\ufe26\ufe33\ufe34\ufe4d-\ufe4f \uff10-\uff19\uff3f]*$/
  80. JS variable names http://mths.be/bjo

  81. Truthiness in JS

  82. JavaScript if (condition) { log('`condition` is truthy'); } else {

    log('`condition` is falsy'); }
  83. 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
  84. >> document.all [object HTMLCollection] >> !!document.all false “All objects are

    truthy” except in the DOM…
  85. 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?
  86. Benchmarking JavaScript timers

  87. 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;
  88. JavaScript var hz, period, startTime = new Date, runs =

    0; do { // Code snippet goes here runs++; totalTime = new Date - startTime; } while (totalTime < 1000);
  89. 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;
  90. 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.”
  91. 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.”
  92. 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
  93. jsPerf.com

  94. Questions? @mathias