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

∞ things I didn’t know about HTML, CSS & JavaScript
@mathias · #arrrrcamp

@mathias

Back to the ’90s kickin’ it old skool

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

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

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

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

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

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

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

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

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

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

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

“Valid HTML” conformance criteria

Document Type Deﬁnition

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

DTD <kitchensink>

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

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

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>

Computer says no <img src="foo.png" alt=""> <time datetime="2013-10-03">LOL</time> <blockquote>not a
quote</blockquote>

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>

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">

Character references aka. “entities”

Character references  <p>foo & bar</p>

github:twbs/bootstrap#3057

; PRETENDS TO BE OPTIONAL BREAKS STUFF WHEN OMITTED

Character references  <p>foo &amp bar</p>

Character references  <p title="foo&ampbar"> foo&ampbar
</p>

http://mths.be/bdu

Character references  <p>foo > bar</p>

Character references  <p>foo &gt bar</p>

Character references  <p title="foo&gtbar"> foo&gtbar
</p>

Character references  <p>foo > bar</p>

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

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

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

^ n FTFY

Using CSS without HTML

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

Font family names

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

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

CSS html { font-family: 456bereastreet; }

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

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

CSS http://mths.be/bjm

Attribute values

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

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

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

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

Attribute values http://mths.be/bjn

Characters in JS

JavaScript string length >> 'A'.length // U+0041 1 >> 'A'
== '\u0041' true >> 'B'.length // U+0042 1 >> 'B' == '\u0042' true

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

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

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

JS variable names

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

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

\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]*$/

JS variable names http://mths.be/bjo

Truthiness in JS

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

ToBoolean(condition) Argument type Result undeﬁned false null false boolean same
as input number +0, -0, NaN → false otherwise → true string empty string → false otherwise → true object true

>> document.all [object HTMLCollection] >> !!document.all false “All objects are
truthy” except in the DOM…

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?

Benchmarking JavaScript timers

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;

JavaScript var hz, period, startTime = new Date, runs =
0; do { // Code snippet goes here runs++; totalTime = new Date - startTime; } while (totalTime < 1000);

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;

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

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

jsPerf.com

Questions? @mathias

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

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

More Decks by Mathias Bynens

Other Decks in Programming

Featured

Transcript