Skip to content

Commit cff8d2b

Browse files
mathiasbynensmathiasbynens
committedNov 25, 2011
Initial commit.
0 parents  commit cff8d2b

37 files changed

+12483
-0
lines changed
 

‎.gitattributes

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
* text=auto

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.DS_Store

‎README.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# [Mothereffing web developer tools](http://mothereff.in/)
2+
3+
This repository uses separate HTML and external CSS and JS files for clarity. On the live site all of this is minified and inlined together into a single HTML file per tool.
4+
5+
## Credits
6+
7+
Made by [Mathias Bynens](http://mathiasbynens.be/).

‎ampersands/README.md

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Made by [Mathias Bynens](http://mathiasbynens.be/).

‎ampersands/apple-touch-icon.png

440 Bytes
Loading

‎ampersands/eff.css

+111
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
html, textarea {
2+
font: 1em/1.6 sans-serif;
3+
}
4+
5+
body {
6+
max-width: 40em;
7+
padding: 0 1em;
8+
}
9+
10+
h1 {
11+
text-align: center;
12+
font-size: 1.3em;
13+
margin: 0 0 .5em;
14+
padding-top: 1em;
15+
}
16+
17+
a {
18+
color: #333;
19+
text-decoration: none;
20+
border-bottom: 1px solid #aaa;
21+
padding: .1em .2em;
22+
}
23+
24+
a:hover, a:focus {
25+
color: #fff;
26+
border-color: #036;
27+
background: #36c;
28+
}
29+
30+
#output a, textarea, code {
31+
font-family: Monaco, Consolas, monospace;
32+
}
33+
34+
#output a {
35+
float: right;
36+
}
37+
38+
#output p:first-child {
39+
margin-top: 0;
40+
}
41+
42+
#output p:last-child, #output ul:last-child {
43+
margin-bottom: 0;
44+
}
45+
46+
code {
47+
font-size: .9em;
48+
white-space: pre;
49+
white-space: pre-wrap;
50+
word-wrap: break-word;
51+
}
52+
53+
ul {
54+
margin-bottom: 0;
55+
}
56+
57+
58+
blockquote {
59+
margin: 0 0 1em;
60+
border-left: .5em solid #e3e3e3;
61+
padding-left: 10px;
62+
}
63+
64+
#footer {
65+
margin-top: 2em;
66+
text-align: center;
67+
}
68+
69+
textarea {
70+
background: #eee;
71+
border: 3px double grey;
72+
width: 100%;
73+
-moz-box-sizing: border-box;
74+
-webkit-box-sizing: border-box;
75+
box-sizing: border-box;
76+
display: block;
77+
margin: 1em 0 .5em;
78+
padding: .7em;
79+
resize: vertical;
80+
min-height: 9.5em;
81+
}
82+
83+
#output {
84+
padding: .5em;
85+
border: 3px double green;
86+
background: #90ee90;
87+
}
88+
89+
#output.fail {
90+
border-color: red;
91+
background: #ffb6c1;
92+
}
93+
94+
@media (min-width: 50em) {
95+
96+
html {
97+
font-size: 1.2em;
98+
background: #c4c4c4;
99+
height: 100%;
100+
}
101+
102+
body {
103+
margin: 0 auto;
104+
padding: 0 2em;
105+
min-height: 100%;
106+
background: #fff;
107+
border: solid #aaa;
108+
border-width: 0 1px;
109+
}
110+
111+
}

‎ampersands/eff.js

+2,264
Large diffs are not rendered by default.

‎ampersands/favicon.ico

1.12 KB
Binary file not shown.

‎ampersands/index.html

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang=en>
3+
<meta charset=utf-8>
4+
<title>Ambiguous ampersand checker for HTML</title>
5+
<meta name=viewport content="width=device-width">
6+
<link rel=stylesheet href=eff.css>
7+
<meta name=description content="An on-the-fly ambiguous ampersand checker for HTML.">
8+
<h1>Ambiguous ampersand checker for HTML</h1>
9+
<noscript><strong>To use this tool, please <a href=//enable-javascript.com/>enable JavaScript</a> and reload the page.</strong></noscript>
10+
<p><textarea autofocus>foo &amp;lolwat; bar &amp;123; baz</textarea>
11+
<div id=output class=fail><p><a href=#foo%20%26lolwat%3B%20bar%20%26123%3B%20baz>#</a> Found 2 ambiguous ampersands:<ul><li><code>&amp;lolwat;</code><li><code>&amp;123;</code></ul><p>Found no character references that don’t end with a semicolon.</div>
12+
<p>See <a href=//mathiasbynens.be/notes/ambiguous-ampersands>“Ambiguous ampersands in HTML”</a>:
13+
<blockquote cite=//mathiasbynens.be/notes/ambiguous-ampersands><p>To summarize: there’s a difference between unencoded ampersands (sometimes valid), ambiguous ampersands (always invalid) and encoded ampersands (always valid). An unencoded ampersand is not always an ambiguous ampersand. An unambiguous ampersand can still be invalid.</blockquote>
14+
<p>For more information, <a href=//mathiasbynens.be/notes/ambiguous-ampersands title="Ambiguous ampersands in HTML">read the whole thing</a>.
15+
<p>Note that this tool treats all ampersands as if they were used as text, i.e. outside of an attribute value and outside of <code>&lt;script></code> or <code>&lt;style></code> elements. Browsers parse ampersands differently when they’re part of an attribute value. For example, the ampersand in <code>&lt;a href="&ampfoo;"></code> is an ambiguous ampersand, rather than a parsed entity without a semicolon (which is what this tool would report). The ampersand in <code>&lt;script>"&ampfoo;"&lt;/script></code> is neither.
16+
<p id=footer>Made by <a href=//mathiasbynens.be/>@mathias</a> — <a href=https://github.com/mathiasbynens/mothereff.in>fork this on GitHub!</a></p>
17+
<script src=eff.js></script>

‎byte-counter/eff.css

+83
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
html, textarea {
2+
font: 1em/1.6 sans-serif;
3+
}
4+
5+
body {
6+
max-width: 40em;
7+
padding: 0 1em;
8+
}
9+
10+
h1 {
11+
text-align: center;
12+
font-size: 1.3em;
13+
margin: 0 0 .5em;
14+
padding-top: 1em;
15+
}
16+
17+
a {
18+
color: #333;
19+
text-decoration: none;
20+
border-bottom: 1px solid #aaa;
21+
padding: .1em .2em;
22+
}
23+
24+
a:hover, a:focus {
25+
color: #fff;
26+
border-color: #036;
27+
background: #36c;
28+
}
29+
30+
#permalink, textarea, code {
31+
font-family: Monaco, Consolas, monospace;
32+
}
33+
34+
code {
35+
font-size: .9em;
36+
white-space: pre;
37+
white-space: pre-wrap;
38+
word-wrap: break-word;
39+
}
40+
41+
#footer {
42+
margin-top: 2em;
43+
text-align: center;
44+
}
45+
46+
textarea {
47+
background: #eee;
48+
border: 3px double grey;
49+
width: 100%;
50+
-moz-box-sizing: border-box;
51+
-webkit-box-sizing: border-box;
52+
box-sizing: border-box;
53+
display: block;
54+
margin: 1em 0 .5em;
55+
padding: .7em;
56+
resize: vertical;
57+
min-height: 10em;
58+
}
59+
60+
strong {
61+
padding: .5em;
62+
border: 3px double green;
63+
background: #90ee90;
64+
}
65+
66+
@media (min-width: 50em) {
67+
68+
html {
69+
font-size: 1.2em;
70+
background: #c4c4c4;
71+
height: 100%;
72+
}
73+
74+
body {
75+
margin: 0 auto;
76+
padding: 0 2em;
77+
min-height: 100%;
78+
background: #fff;
79+
border: solid #aaa;
80+
border-width: 0 1px;
81+
}
82+
83+
}

‎byte-counter/eff.js

+79
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
(function(window, document) {
2+
3+
var textarea = document.getElementsByTagName('textarea')[0],
4+
characters = document.getElementById('characters'),
5+
bytes = document.getElementById('bytes'),
6+
permalink = document.getElementById('permalink'),
7+
storage = (function() {
8+
try {
9+
var storage = window.localStorage;
10+
return storage.getItem && storage;
11+
} catch(e) {}
12+
}());
13+
14+
// Taken from http://mths.be/punycode
15+
function utf16decode(string) {
16+
var output = [],
17+
counter = 0,
18+
length = string.length,
19+
value,
20+
extra;
21+
while (counter < length) {
22+
value = string.charCodeAt(counter++);
23+
if ((value & 0xF800) == 0xD800) {
24+
extra = string.charCodeAt(counter++);
25+
if ((value & 0xFC00) != 0xD800 || (extra & 0xFC00) != 0xDC00) {
26+
throw Error('Illegal UTF-16 sequence');
27+
}
28+
value = ((value & 0x3FF) << 10) + (extra & 0x3FF) + 0x10000;
29+
}
30+
output.push(value);
31+
}
32+
return output;
33+
}
34+
35+
function formatNumber(number, unit) {
36+
return String(number).replace(/(?=(?:\d{3})+$)(?!\b)/g, ',') + ' ' + unit + (number == 1 ? '' : 's');
37+
}
38+
39+
function update() {
40+
var value = textarea.value,
41+
encodedValue = encodeURI(value),
42+
byteCount = ~-encodedValue.split(/%..|./).length, // https://gist.github.com/1010324
43+
characterCount = utf16decode(value).length;
44+
characters.innerHTML = formatNumber(characterCount, 'character');
45+
bytes.innerHTML = formatNumber(byteCount, 'byte');
46+
permalink.href = '#' + encodedValue;
47+
storage && (storage.byteCountText = value);
48+
};
49+
50+
textarea.onkeyup = update;
51+
textarea.oninput = function() {
52+
textarea.onkeyup = null;
53+
update();
54+
};
55+
56+
if (storage) {
57+
storage.byteCountText && (textarea.value = storage.byteCountText);
58+
update();
59+
}
60+
61+
window.onhashchange = function() {
62+
textarea.value = decodeURIComponent(location.hash.slice(1));
63+
update();
64+
};
65+
66+
if (location.hash) {
67+
window.onhashchange();
68+
}
69+
70+
}(this, document));
71+
72+
// Google Analytics
73+
var _gaq = [['_setAccount', 'UA-6065217-60'], ['_trackPageview']];
74+
(function(d, t) {
75+
var g = d.createElement(t),
76+
s = d.getElementsByTagName(t)[0];
77+
g.src = '//www.google-analytics.com/ga.js';
78+
s.parentNode.insertBefore(g, s);
79+
}(document, 'script'));

‎byte-counter/index.html

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html lang=en>
3+
<meta charset=utf-8>
4+
<title>UTF-8 string length & byte counter</title>
5+
<meta name=viewport content="width=device-width">
6+
<link rel=stylesheet href=eff.css>
7+
<meta name=description content="An on-the-fly UTF-8 byte counter.">
8+
<h1>UTF-8 string length & byte counter</h1>
9+
<noscript><strong>To use this tool, please <a href=//enable-javascript.com/>enable JavaScript</a> and reload the page.</strong></noscript>
10+
<p><textarea autofocus>i ♥ u</textarea>
11+
<p>That’s <strong id=characters>5 characters</strong>, totaling <strong id=bytes>7 bytes</strong>. <a href=#%E2%82%AC id=permalink>#</a>
12+
<p>Pro tip: add <code>http://mothereff.in/byte-counter#<var>%s</var></code> to the custom search engines / location bar shortcuts in your browser of choice. Whenever I want to check string length / byte count, I just enter <code>len <var>some string</var></code> in my address bar.
13+
<p id=footer>Made by <a href=//mathiasbynens.be/>@mathias</a> — <a href=https://github.com/mathiasbynens/mothereff.in>fork this on GitHub!</a></p>
14+
<script src=eff.js></script>

‎css-escapes/README.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# [Mothereffing CSS escapes](http://mothereff.in/css-escapes)
2+
3+
Ever needed to escape a character in CSS? Ever used something like `<p class=123>` or even `<p id=/]o$o[\>` and got stuck trying to style it?
4+
5+
You can [learn how to do this yourself](http://mathiasbynens.be/notes/html5-id-class#css), or just let Mothereffing CSS Escapes do all the work for you. Or both. Whatever.
6+
7+
Made by [Mathias Bynens](http://mathiasbynens.be/).

‎css-escapes/apple-touch-icon.png

640 Bytes
Loading

‎css-escapes/eff.css

+129
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
html {
2+
font: 1em/1.6 sans-serif;
3+
}
4+
5+
body {
6+
max-width: 40em;
7+
padding: 0 1em;
8+
}
9+
10+
h1 {
11+
text-align: center;
12+
font-size: 1.3em;
13+
margin: 0 0 1em;
14+
padding-top: 1em;
15+
}
16+
17+
h2 {
18+
font-size: .8em;
19+
}
20+
21+
h2:before {
22+
content: '<!-- ';
23+
}
24+
25+
h2:after {
26+
content: ' -->';
27+
}
28+
29+
div { /* http://bugzil.la/414526 */
30+
display: inline;
31+
border: 1px dotted #666;
32+
padding: .2em;
33+
}
34+
35+
b {
36+
font-weight: normal;
37+
}
38+
39+
mark {
40+
background: #f8f5bc;
41+
padding: .2em;
42+
}
43+
44+
#whitespace {
45+
display: none;
46+
font-weight: bold;
47+
color: #b00b00;
48+
}
49+
50+
a {
51+
color: #333;
52+
text-decoration: none;
53+
border-bottom: 1px solid #aaa;
54+
padding: .1em .2em;
55+
}
56+
57+
a:hover, a:focus {
58+
color: #fff;
59+
border-color: #036;
60+
background: #36c;
61+
}
62+
63+
#footer {
64+
text-align: center;
65+
}
66+
67+
pre {
68+
background: #eee;
69+
padding: 1em;
70+
}
71+
72+
code, h2 {
73+
font-family: Monaco, monospace;
74+
}
75+
76+
code {
77+
font-size: .9em;
78+
white-space: pre;
79+
white-space: pre-wrap;
80+
word-wrap: break-word;
81+
}
82+
83+
.comment, h2 {
84+
font-style: italic;
85+
color: #060;
86+
}
87+
88+
.element {
89+
color: #036;
90+
}
91+
92+
.attribute, .property {
93+
color: #006;
94+
}
95+
96+
.parens {
97+
color: #090;
98+
}
99+
100+
.symbol {
101+
color: #393;
102+
}
103+
104+
.quote {
105+
color: #36c;
106+
}
107+
108+
.method {
109+
color: #606;
110+
}
111+
112+
@media (min-width: 50em) {
113+
114+
html {
115+
font-size: 1.2em;
116+
background: #c4c4c4;
117+
height: 100%;
118+
}
119+
120+
body {
121+
margin: 0 auto;
122+
padding: 0 2em;
123+
min-height: 100%;
124+
background: #fff;
125+
border: solid #aaa;
126+
border-width: 0 1px;
127+
}
128+
129+
}

‎css-escapes/eff.js

+128
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
(function(window, document) {
2+
3+
var input = document.getElementsByTagName('div')[0],
4+
quotes = document.getElementsByTagName('b'),
5+
marks = document.getElementsByTagName('mark'),
6+
css = marks[0],
7+
js = marks[1],
8+
qsa = marks[2],
9+
permalink = document.getElementById('permalink'),
10+
example = document.getElementById('example'),
11+
whitespace = document.getElementById('whitespace'),
12+
escaped = {
13+
"'": "\\'",
14+
'\\': '\\\\',
15+
'\n': '\\n',
16+
'\u2028': '\\u2028',
17+
'\u2029': '\\u2029'
18+
},
19+
storage = (function() {
20+
try {
21+
var storage = window.localStorage;
22+
return storage.getItem && storage;
23+
} catch(e) {}
24+
}());
25+
26+
function forEach(array, fn) {
27+
var length = array.length;
28+
while (length--) {
29+
fn(array[length]);
30+
}
31+
}
32+
33+
function map(array, fn) {
34+
var length = array.length;
35+
while (length--) {
36+
array[length] = fn(array[length]);
37+
}
38+
return array;
39+
}
40+
41+
// http://mathiasbynens.be/notes/html5-id-class#css
42+
function cssEscape(str) {
43+
var firstChar = str.charAt(0),
44+
result = '';
45+
if (/^-+$/.test(str)) {
46+
return '\\-' + str.slice(1);
47+
}
48+
if (/^--/.test(str)) {
49+
result = '\\-';
50+
str = str.slice(1);
51+
}
52+
if (/\d/.test(firstChar)) {
53+
result = '\\3' + firstChar + ' ';
54+
str = str.slice(1);
55+
}
56+
result += map(str.split(''), function(chr) {
57+
if (/[\t\n\v\f]/.test(chr)) {
58+
return '\\' + chr.charCodeAt().toString(16) + ' ';
59+
}
60+
return (/[ !"#$%&'()*+,./:;<=>?@\[\\\]^_`{|}~]/.test(chr) ? '\\' : '') + chr;
61+
}).join('');
62+
return result;
63+
}
64+
65+
function doubleSlash(str) {
66+
return str.replace(/['\n\u2028\u2029\\]/g, function(chr) {
67+
return escaped[chr];
68+
});
69+
}
70+
71+
function text(el, str) {
72+
if (str == null) {
73+
return el.innerText || el.textContent;
74+
}
75+
el.innerText != null && (el.innerText = str);
76+
el.textContent != null && (el.textContent = str);
77+
}
78+
79+
function update(event) {
80+
// \r\n and \r become \n in the tokenizer as per HTML5
81+
var value = text(input).replace(/\r\n?/g, '\n'),
82+
cssValue = '#' + cssEscape(value),
83+
qsaValue = doubleSlash(cssValue),
84+
jsValue = doubleSlash(value).replace(/<\/script/g, '<\\/script'), // http://mths.be/etago
85+
link = '#' + encodeURIComponent(value);
86+
whitespace.style.display = /\s/.test(value) ? 'block' : 'none';
87+
forEach(quotes, function(el) {
88+
text(el, ~value.indexOf('"') ? '\'' : '"');
89+
});
90+
text(css, cssValue);
91+
text(qsa, qsaValue);
92+
text(js, jsValue);
93+
permalink.href = link;
94+
storage && (storage.cssEscapes = value);
95+
example.href = 'data:text/html;charset=utf-8,' + encodeURIComponent('<!DOCTYPE html><title>Mothereffing CSS escapes example</title><style>pre{background:#eee;padding:.5em}p{display:none}' + cssValue + '{display:block}</style><h1><a href="http://mothereff.in/css-escapes#' + link + '">Mothereffing CSS escapes</a> example</h1><pre><code>' + value.replace(/</g, '&lt;') + '</code></pre><p id="' + value.replace(/"/g, '&quot;') + '">If you can read this, the escaped CSS selector worked. </p><script>document.getElementById(\'' + jsValue + '\').innerHTML += \' <code>document.getElementById</code> worked.\';document.querySelector(\'' + qsaValue + '\').innerHTML+=\' <code>document.querySelector</code> worked.\'<\/script>');
96+
}
97+
98+
input.onkeyup = update;
99+
input.oninput = function() {
100+
this.onkeyup = null;
101+
update();
102+
};
103+
104+
if (storage && storage.cssEscapes) {
105+
text(input, storage.cssEscapes);
106+
update();
107+
}
108+
109+
window.onhashchange = function() {
110+
text(input, decodeURIComponent(location.hash.slice(1)));
111+
};
112+
if (location.hash) {
113+
window.onhashchange();
114+
update();
115+
}
116+
117+
input.focus();
118+
119+
}(this, document));
120+
121+
/*! Optimized Google Analytics snippet: http://mths.be/aab */
122+
var _gaq = [['_setAccount', 'UA-6065217-60'], ['_trackPageview']];
123+
(function(d, t) {
124+
var g = d.createElement(t),
125+
s = d.getElementsByTagName(t)[0];
126+
g.src = '//www.google-analytics.com/ga.js';
127+
s.parentNode.insertBefore(g, s);
128+
}(document, 'script'));

‎css-escapes/favicon.ico

1.12 KB
Binary file not shown.

‎css-escapes/index.html

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang=en>
3+
<meta charset=utf-8>
4+
<title>Mothereffing CSS escapes</title>
5+
<meta name=viewport content="width=device-width">
6+
<link rel=stylesheet href=eff.css>
7+
<meta name=description content="Wondering how to escape any character in CSS? There’s a web app for that™.">
8+
<!--[if lt IE 9]><script>document.createElement('mark')</script><![endif]-->
9+
<h1>Mothereffing CSS escapes</h1>
10+
<p>Wondering <strong>how to escape any character in CSS</strong>? <a href=//mathiasbynens.be/notes/html5-id-class#css title="How to escape any character in CSS">Learn how</a>, or just use this tool ☺</p>
11+
<noscript><strong>To use this tool, please <a href=//enable-javascript.com/>enable JavaScript</a> and reload the page.</strong></noscript>
12+
<h2>HTML (edit the ID and optionally hit “permalink” to save)</h2>
13+
<pre><code><span class=sc2>&lt;<span class=element>p</span> <span class=attribute>id</span><span class=symbol>=</span><span class=quote><b>"</b><div contenteditable>1a2b3c</div><b>"</b></span>><a href=#1a2b3c id=permalink>permalink</a>, <a href="data:text/html;charset=utf-8,%3C!DOCTYPE%20html%3E%3Ctitle%3EMothereffing%20CSS%20escapes%20example%3C%2Ftitle%3E%3Cstyle%3Ep%7Bdisplay%3Anone%7D%23%5C31%20a2b3c%7Bdisplay%3Ablock%7D%3C%2Fstyle%3E%3Ch1%3E%3Ca%20href%3Dhttp%3A%2F%2Fmothereff.in/css-escapes%2F%3EMothereffing%20CSS%20escapes%3C%2Fa%3E%20example%3A%20%3Ccode%3E1a2b3c%3C%2Fcode%3E%3C%2Fh1%3E%3Cp%20id%3D%221a2b3c%22%3EIf%20you%20can%20read%20this%2C%20the%20escaped%20CSS%20selector%20worked.%20%3C%2Fp%3E%3Cscript%3Edocument.getElementById('1a2b3c').innerHTML%20%2B%3D%20'%20%3Ccode%3Edocument.getElementById%3C%2Fcode%3E%20worked.'%3Bdocument.querySelector('%23%5C%5C31%20a2b3c').innerHTML%2B%3D'%20%3Ccode%3Edocument.querySelector%3C%2Fcode%3E%20worked.'%3C%2Fscript%3E" id=example>example</a>&lt;<span class=symbol>/</span><span class=element>p</span>></code></pre>
14+
<p id=whitespace>Whitespace is not allowed!</p>
15+
<h2>CSS</h2>
16+
<pre><code><span class=sc2>&lt;<span class=element>style</span>></span><br> <mark>#\31 a2b3c</mark> <span class=parens>{</span><br> <span class=property>background</span><span class=symbol>:</span> hotpink<span class=symbol>;</span><br> <span class=parens>}</span><br><span class=sc2>&lt;<span class=symbol>/</span><span class=element>style</span>></span></code></pre>
17+
<h2>JavaScript</h2>
18+
<pre><code><span class=sc2>&lt;<span class=element>script</span>><br> <span class=comment>// document.getElementById or similar</span><br> document.<span class=method>getElementById</span><span class=parens>(</span><span class=quote>'</span><mark>1a2b3c</mark><span class=quote>'</span><span class=parens>)</span><span class=symbol>;</span><br> <span class=comment>// document.querySelector or similar</span><br> $<span class=parens>(</span><span class=quote>'<mark>#\\31 a2b3c</mark>'</span><span class=parens>)</span><span class=symbol>;</span><br>&lt;<span class=symbol>/</span><span class=element>script</span>></span></code></pre>
19+
<p id=footer>Made by <a href=//mathiasbynens.be/>@mathias</a> — <a href=https://github.com/mathiasbynens/mothereff.in>fork this on GitHub!</a></p>
20+
<script src=eff.js></script>

‎operator-precedence/eff.css

+72
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
html, input {
2+
font: 1em/1.6 sans-serif;
3+
}
4+
5+
body {
6+
max-width: 40em;
7+
padding: 0 1em;
8+
}
9+
10+
h1 {
11+
text-align: center;
12+
font-size: 1.3em;
13+
margin: 0 0 .5em;
14+
padding-top: 1em;
15+
}
16+
17+
a {
18+
color: #333;
19+
text-decoration: none;
20+
border-bottom: 1px solid #aaa;
21+
padding: .1em .2em;
22+
}
23+
24+
a:hover, a:focus {
25+
color: #fff;
26+
border-color: #036;
27+
background: #36c;
28+
}
29+
30+
#permalink, code {
31+
font-family: Monaco, Consolas, monospace;
32+
}
33+
34+
#footer {
35+
margin-top: 2em;
36+
text-align: center;
37+
}
38+
39+
code {
40+
border: 1px dotted #666;
41+
padding: .2em;
42+
}
43+
44+
strong {
45+
padding: .5em;
46+
border: 3px double green;
47+
background: #90ee90;
48+
}
49+
50+
.fail {
51+
border-color: red;
52+
background: #ffb6c1;
53+
}
54+
55+
@media (min-width: 50em) {
56+
57+
html {
58+
font-size: 1.2em;
59+
background: #c4c4c4;
60+
height: 100%;
61+
}
62+
63+
body {
64+
margin: 0 auto;
65+
padding: 0 2em;
66+
min-height: 100%;
67+
background: #fff;
68+
border: solid #aaa;
69+
border-width: 0 1px;
70+
}
71+
72+
}

‎operator-precedence/eff.js

+72
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
(function(window, document) {
2+
3+
var a = document.getElementById('a'),
4+
b = document.getElementById('b'),
5+
permalink = document.getElementById('permalink'),
6+
output = document.getElementById('output'),
7+
storage = (function() {
8+
try {
9+
var storage = window.localStorage;
10+
return storage.getItem && storage;
11+
} catch(e) {}
12+
}());
13+
14+
function text(el, str) {
15+
if (str == null) {
16+
return el.innerText || el.textContent;
17+
}
18+
el.innerText != null && (el.innerText = str);
19+
el.textContent != null && (el.textContent = str);
20+
}
21+
22+
function parse(value) {
23+
try {
24+
var zeon = new Zeon(value, Zeon.getNewConfig());
25+
zeon.parse();
26+
zeon.startProcess();
27+
zeon.disambiguate();
28+
// TODO: check zeon.hasError
29+
return zeon.btree.map(function(t) {
30+
return t.value;
31+
}).join('');
32+
} catch(e) {}
33+
}
34+
35+
function update() {
36+
var textA = text(a),
37+
textB = text(b),
38+
ok = parse(textA) == parse(textB);
39+
output.className = ok ? 'pass' : 'fail';
40+
output.innerHTML = ok ? 'Yep.' : 'Nope.';
41+
permalink.href = '#' + encodeURIComponent(textA + '@' + textB);
42+
}
43+
44+
a.onkeyup = b.onkeyup = update;
45+
a.oninput = b.oninput = function() {
46+
a.onkeyup = b.onkeyup = null;
47+
update();
48+
};
49+
50+
if (storage) {
51+
storage.a && text(a, storage.a);
52+
storage.b && text(b, storage.b);
53+
update();
54+
}
55+
56+
a.focus();
57+
a.onkeyup.call(a);
58+
59+
window.onhashchange = function() {
60+
var parts = location.hash.slice(1).split('%40');
61+
if (parts.length == 1 || parts.length == 2) {
62+
text(a, decodeURIComponent(parts[0]));
63+
text(b, decodeURIComponent(parts[parts.length == 2 ? 1 : 0]));
64+
update();
65+
}
66+
};
67+
68+
if (location.hash) {
69+
window.onhashchange();
70+
}
71+
72+
}(this, document));

‎operator-precedence/index.html

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<meta charset=utf-8>
4+
<title>JavaScript operator precedence</title>
5+
<meta name=description content="A JavaScript operator precedence learning tool.">
6+
<h1>JavaScript operator precedence</h1>
7+
<link rel=stylesheet href=eff.css>
8+
<p>Is <code id=a contenteditable>a &lt;&lt; b + 3 * c</code> semantically equivalent to <code id=b contenteditable>a &lt;&lt; (b + 3) * c</code>? <a href=#a%20%3C%3C%20b%20%2B%203%20*%20c%40a%20%3C%3C%20(b%20%2B%203)%20*%20c id=permalink>#</a>
9+
<p><strong id=output>Nope.</strong>
10+
<p id=footer>Made by <a href=//mathiasbynens.be/>@mathias</a> using <a href=//zeonjs.com/>Zeon.js</a> for <a href=//140byt.es/>@140bytes</a> — <a href=https://github.com/mathiasbynens/mothereff.in>fork this on GitHub!</a></p>
11+
<script src=vendor/Tokenizer.js></script>
12+
<script src=vendor/ZeParser.js></script>
13+
<script src=vendor/Zeon.js></script>
14+
<script src=eff.js></script>

‎operator-precedence/update.sh

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
#!/bin/bash
2+
3+
cd "$(dirname "$0")/vendor"
4+
5+
for file in https://raw.github.com/qfox/Zeon/master/Zeon.js https://raw.github.com/qfox/Zeon/master/zeparser/Tokenizer.js https://raw.github.com/qfox/Zeon/master/zeparser/ZeParser.js; do
6+
curl -O "$file"
7+
done
8+
9+
cat Tokenizer.js ZeParser.js Zeon.js ../eff.js > ../all.js.tmp
10+
11+
cd ..
12+
tr -d '\r' < all.js.tmp > all.js
13+
14+
rm all.js.tmp

‎operator-precedence/vendor/Tokenizer.js

+1,050
Large diffs are not rendered by default.

‎operator-precedence/vendor/ZeParser.js

+2,557
Large diffs are not rendered by default.

‎operator-precedence/vendor/Zeon.js

+4,903
Large diffs are not rendered by default.

‎punycode/apple-touch-icon.png

346 Bytes
Loading

‎punycode/eff.css

+78
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
html {
2+
font: 1em/1.6 sans-serif;
3+
}
4+
5+
body {
6+
max-width: 40em;
7+
padding: 0 1em;
8+
}
9+
10+
h1 {
11+
text-align: center;
12+
font-size: 1.3em;
13+
margin: 0 0 .5em;
14+
padding-top: 1em;
15+
}
16+
17+
a {
18+
color: #333;
19+
text-decoration: none;
20+
border-bottom: 1px solid #aaa;
21+
padding: .1em .2em;
22+
}
23+
24+
a:hover, a:focus {
25+
color: #fff;
26+
border-color: #036;
27+
background: #36c;
28+
}
29+
30+
#permalink, code {
31+
font-family: Monaco, Consolas, monospace;
32+
}
33+
34+
#footer {
35+
margin-top: 2em;
36+
text-align: center;
37+
}
38+
39+
code {
40+
border: 1px dotted #666;
41+
padding: .2em;
42+
}
43+
44+
strong {
45+
padding: .5em;
46+
border: 3px double green;
47+
background: #90ee90;
48+
}
49+
50+
.fail {
51+
border-color: red;
52+
background: #ffb6c1;
53+
}
54+
55+
#invalid {
56+
display: none;
57+
font-weight: bold;
58+
color: #b00b00;
59+
}
60+
61+
@media (min-width: 50em) {
62+
63+
html {
64+
font-size: 1.2em;
65+
background: #c4c4c4;
66+
height: 100%;
67+
}
68+
69+
body {
70+
margin: 0 auto;
71+
padding: 0 2em;
72+
min-height: 100%;
73+
background: #fff;
74+
border: solid #aaa;
75+
border-width: 0 1px;
76+
}
77+
78+
}

‎punycode/eff.js

+81
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
(function(window, document, toASCII, toUnicode) {
2+
3+
var decoded = document.getElementById('decoded'),
4+
encoded = document.getElementById('encoded'),
5+
permalink = document.getElementById('permalink'),
6+
invalid = document.getElementById('invalid'),
7+
storage = (function() {
8+
try {
9+
var storage = window.localStorage;
10+
return storage.getItem && storage;
11+
} catch(e) {}
12+
}());
13+
14+
function text(el, str) {
15+
if (str == null) {
16+
return el.innerText || el.textContent;
17+
}
18+
el.innerText != null && (el.innerText = str);
19+
el.textContent != null && (el.textContent = str);
20+
}
21+
22+
function update() {
23+
var element,
24+
value,
25+
result;
26+
if (this == decoded) {
27+
element = encoded;
28+
value = text(decoded);
29+
result = toASCII(value);
30+
text(element, result);
31+
permalink.href = '#' + encodeURIComponent(value);
32+
} else {
33+
element = decoded;
34+
value = text(encoded);
35+
if (/^[a-zA-Z0-9-\.]*$/.test(value)) {
36+
result = toUnicode(value);
37+
permalink.href = '#' + encodeURIComponent(result);
38+
text(element, result);
39+
this.className = null;
40+
invalid.style.display = 'none';
41+
} else {
42+
this.className = 'fail';
43+
invalid.style.display = 'block';
44+
}
45+
}
46+
};
47+
48+
decoded.onkeyup = encoded.onkeyup = update;
49+
decoded.oninput = encoded.oninput = function() {
50+
decoded.onkeyup = encoded.onkeyup = null;
51+
update.call(this);
52+
};
53+
54+
if (storage) {
55+
storage.decoded && text(decoded, storage.decoded);
56+
storage.encoded && text(encoded, storage.encoded);
57+
update();
58+
}
59+
60+
decoded.focus();
61+
decoded.onkeyup.call(decoded);
62+
63+
window.onhashchange = function() {
64+
text(decoded, decodeURIComponent(location.hash.slice(1)));
65+
update.call(decoded);
66+
};
67+
68+
if (location.hash) {
69+
window.onhashchange();
70+
}
71+
72+
}(this, document, punycode.toASCII, punycode.toUnicode));
73+
74+
// Google Analytics
75+
var _gaq = [['_setAccount', 'UA-6065217-60'], ['_trackPageview']];
76+
(function(d, t) {
77+
var g = d.createElement(t),
78+
s = d.getElementsByTagName(t)[0];
79+
g.src = '//www.google-analytics.com/ga.js';
80+
s.parentNode.insertBefore(g, s);
81+
}(document, 'script'));

‎punycode/favicon.ico

1.12 KB
Binary file not shown.

‎punycode/index.html

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html lang=en>
3+
<meta charset=utf-8>
4+
<title>Punycode domain name converter</title>
5+
<meta name=viewport content="width=device-width">
6+
<link rel=stylesheet href=eff.css>
7+
<meta name=description content="An on-the-fly Punycode domain name converter.">
8+
<h1>Punycode domain name converter</h1>
9+
<noscript><strong>To use this tool, please <a href=//enable-javascript.com/>enable JavaScript</a> and reload the page.</strong></noscript>
10+
<p><code id=decoded contenteditable>mañana.com</code> encodes to <code id=encoded contenteditable>xn--maana-pta.com</code>. <a href=#ma%C3%B1ana.com id=permalink>#</a>
11+
<p id=invalid>That’s not a valid Punycode domain name.
12+
<p id=footer>Made by <a href=//mathiasbynens.be/>@mathias</a> — <a href=https://github.com/bestiejs/punycode.js>powered by Punycode.js</a> — <a href=https://github.com/mathiasbynens/mothereff.in>fork this on GitHub!</a></p>
13+
<script src=vendor/punycode.js></script>
14+
<script src=eff.js></script>

‎punycode/vendor/punycode.js

+514
Large diffs are not rendered by default.

‎unquoted-attributes/README.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# [Mothereffing unquoted HTML attribute values](http://mothereff.in/unquoted-attributes)
2+
3+
See <http://mathiasbynens.be/notes/unquoted-attribute-values> for the full explanation.
4+
5+
Made by [Mathias Bynens](http://mathiasbynens.be/) for use in [Paul Irish](http://paulirish.com/)’s #txjs talk.

‎unquoted-attributes/apple-touch-icon.png

602 Bytes
Loading

‎unquoted-attributes/eff.css

+140
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
html, input, hgroup h2 {
2+
font: 1em/1.6 sans-serif;
3+
}
4+
5+
body {
6+
max-width: 40em;
7+
padding: 0 1em;
8+
}
9+
10+
h1 {
11+
text-align: center;
12+
font-size: 1.3em;
13+
margin: 0 0 .5em;
14+
padding-top: 1em;
15+
}
16+
17+
mark {
18+
background: #f8f5bc;
19+
padding: .2em;
20+
}
21+
22+
a {
23+
color: #333;
24+
text-decoration: none;
25+
border-bottom: 1px solid #aaa;
26+
padding: .1em .2em;
27+
}
28+
29+
a:hover, a:focus {
30+
color: #fff;
31+
border-color: #036;
32+
background: #36c;
33+
}
34+
35+
i {
36+
font-style: normal;
37+
}
38+
39+
#footer {
40+
margin-top: 2em;
41+
text-align: center;
42+
}
43+
44+
blockquote {
45+
margin: 0 0 1em;
46+
border-left: .5em solid #e3e3e3;
47+
padding-left: 10px;
48+
}
49+
50+
pre {
51+
padding: 1em;
52+
border: 3px double green;
53+
background: #90ee90;
54+
}
55+
56+
.invalid {
57+
border-color: red;
58+
background: #ffb6c1;
59+
}
60+
61+
input {
62+
background: #eee;
63+
border: 3px double grey;
64+
width: 100%;
65+
-moz-box-sizing: border-box;
66+
-webkit-box-sizing: border-box;
67+
box-sizing: border-box;
68+
display: block;
69+
text-align: center;
70+
margin: 1em 0 .5em;
71+
padding: .7em;
72+
}
73+
74+
label {
75+
display: block;
76+
cursor: pointer;
77+
}
78+
79+
code, input {
80+
font-family: Monaco, monospace;
81+
font-size: .9em;
82+
white-space: pre;
83+
white-space: pre-wrap;
84+
word-wrap: break-word;
85+
}
86+
87+
hgroup h2 {
88+
text-align: center;
89+
font-weight: bold;
90+
}
91+
92+
h2 code, p code {
93+
border: 1px solid grey;
94+
padding: .2em;
95+
background: #f0f0f0;
96+
}
97+
98+
var {
99+
background: #90ee90;
100+
padding: .2em;
101+
}
102+
103+
.element {
104+
color: #036;
105+
}
106+
107+
.attribute, .property {
108+
color: #006;
109+
}
110+
111+
.parens {
112+
color: #090;
113+
}
114+
115+
.symbol {
116+
color: #393;
117+
}
118+
119+
.quote {
120+
color: #36c;
121+
}
122+
123+
@media (min-width: 50em) {
124+
125+
html {
126+
font-size: 1.2em;
127+
background: #c4c4c4;
128+
height: 100%;
129+
}
130+
131+
body {
132+
margin: 0 auto;
133+
padding: 0 2em;
134+
min-height: 100%;
135+
background: #fff;
136+
border: solid #aaa;
137+
border-width: 0 1px;
138+
}
139+
140+
}

‎unquoted-attributes/eff.js

+86
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
(function(window, document) {
2+
3+
// Up for a challenge? Golf this down: https://gist.github.com/1020383
4+
var isUnquotableHTML = function(value) {
5+
return /^[^ \t\n\f\r"'`=<>]+$/.test(value);
6+
},
7+
isUnquotableCSS = function(value) {
8+
if (!value) return;
9+
// Escapes are valid, so replace them with a valid non-empty string
10+
value = value.replace(/\\([0-9A-Fa-f]{1,6})[ \t\n\f\r]?/g, 'a').replace(/\\./g, 'a');
11+
return !(
12+
/[\u0000-\u002c\u002e\u002f\u003A-\u0040\u005B-\u005E\u0060\u007B-\u009f]/.test(value)
13+
|| /^(?:-?\d|--)/.test(value)
14+
);
15+
},
16+
getElems = function(tagName) {
17+
var elems = document.getElementsByTagName(tagName);
18+
return {
19+
'html': elems[0],
20+
'css': elems[1]
21+
};
22+
},
23+
iElems = getElems('i'),
24+
preElems = getElems('pre'),
25+
markElems = getElems('mark'),
26+
input = document.getElementsByTagName('input')[0],
27+
permalink = document.getElementById('permalink'),
28+
showHide = function(el, bool) {
29+
el.style.display = bool ? 'none' : 'inline';
30+
},
31+
storage = (function() {
32+
try {
33+
var storage = window.localStorage;
34+
return storage.getItem && storage;
35+
} catch(e) {}
36+
}()),
37+
text = function(el, str) {
38+
if (str == null) {
39+
return el.innerText || el.textContent;
40+
}
41+
el.innerText != null && (el.innerText = str);
42+
el.textContent != null && (el.textContent = str);
43+
},
44+
update = function() {
45+
var value = input.value,
46+
html = isUnquotableHTML(value),
47+
css = isUnquotableCSS(value);
48+
text(markElems.html, value);
49+
text(markElems.css, value);
50+
preElems.html.className = html ? 'valid' : 'invalid';
51+
preElems.css.className = css ? 'valid' : 'invalid';
52+
text(iElems.html, html ? 'a valid' : 'an invalid');
53+
text(iElems.css, css ? 'a valid' : 'an invalid');
54+
permalink.href = '#' + encodeURIComponent(value);
55+
storage && (storage.unquotedAttributes = value);
56+
};
57+
58+
input.onkeydown = update;
59+
input.oninput = function() {
60+
this.onkeydown = null;
61+
update();
62+
};
63+
64+
if (storage && storage.unquotedAttributes) {
65+
input.value = storage.unquotedAttributes;
66+
update();
67+
}
68+
69+
window.onhashchange = function() {
70+
input.value = decodeURIComponent(location.hash.slice(1));
71+
update();
72+
};
73+
if (location.hash) {
74+
window.onhashchange();
75+
}
76+
77+
}(this, document));
78+
79+
/*! Optimized Google Analytics snippet: http://mths.be/aab */
80+
var _gaq = [['_setAccount', 'UA-6065217-60'], ['_trackPageview']];
81+
(function(d, t) {
82+
var g = d.createElement(t),
83+
s = d.getElementsByTagName(t)[0];
84+
g.src = '//www.google-analytics.com/ga.js';
85+
s.parentNode.insertBefore(g, s);
86+
}(document, 'script'));

‎unquoted-attributes/favicon.ico

1.12 KB
Binary file not shown.

‎unquoted-attributes/index.html

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html lang=en>
3+
<meta charset=utf-8>
4+
<title>Mothereffing unquoted attribute value validator</title>
5+
<meta name=viewport content="width=device-width">
6+
<link rel=stylesheet href=eff.css>
7+
<meta name=description content="Wondering if you can use a given character sequence as an unquoted attribute value in HTML or CSS? This tool will tell you.">
8+
<hgroup>
9+
<h1>Mothereffing unquoted attribute value validator</h1>
10+
<h2>“Can I use <code>&lt;a href=<var>foo</var>>&lt;/a></code> and <code>a[href=<var>foo</var>] {}</code> or does it need quotes?”</h2>
11+
</hgroup>
12+
<noscript><strong>To use this tool, please <a href=//enable-javascript.com/>enable JavaScript</a> and reload the page.</strong></noscript>
13+
<label>Enter an attribute value: <input value="mailto:foo@example.org?subject=bar" required autofocus placeholder="e.g. http://example.com/?lol=wat"></label>
14+
<p>In HTML, that’s <i>an invalid</i> unquoted attribute value:
15+
<pre class=invalid><code>&lt;<span class=element>a</span> <span class=attribute>href</span><span class=symbol>=</span><span class=quote><mark>mailto:foo@example.org?subject=bar</mark></span>><a href=#mailto%3Afoo%40example.org%3Fsubject%3Dbar id=permalink>permalink</a>&lt;<span class=symbol>/</span><span class=element>a</span>></code></pre>
16+
<p>In CSS, that’s <i>an invalid</i> unquoted attribute value:
17+
<pre class=invalid><code><span class=sc2>&lt;<span class=element>style</span>></span><br> <span class=element> a</span><span class=symbol>[</span><span class=attribute>href</span><span class=symbol>=</span><mark>mailto:foo@example.org?subject=bar</mark><span class=symbol>]</span> <span class=parens>{</span><br> <span class=property>background</span><span class=symbol>:</span> hotpink<span class=symbol>;</span><br> <span class=parens>}</span><br><span class=sc2>&lt;<span class=symbol>/</span><span class=element>style</span>></span></code></pre>
18+
<p>To quote <a href=//mathiasbynens.be/notes/unquoted-attribute-values>“Unquoted attribute values in HTML and CSS”</a>:
19+
<blockquote cite=//mathiasbynens.be/notes/unquoted-attribute-values><p>A valid unquoted attribute value in HTML is any string of text that is not the empty string and that doesn’t contain spaces, tabs, line feeds, form feeds, carriage returns, <code>"</code>, <code>'</code>, <code>`</code>, <code>=</code>, <code>&lt;</code>, or <code>></code>.<p>A valid unquoted attribute value in CSS is any string of text that is not the empty string, consists of escaped characters and/or characters matching <code>/[-_\u00A0-\u10FFFF]/</code> entirely, and doesn’t start with a digit or two hyphens or a hyphen followed by a digit.</blockquote>
20+
<p id=footer>Made by <a href=//mathiasbynens.be/>@mathias</a> for <a href=//paulirish.com/>π</a> — <a href=https://github.com/mathiasbynens/mothereff.in>fork this on GitHub!</a></p>
21+
<script src=eff.js></script>

0 commit comments

Comments
 (0)
Please sign in to comment.