Skip to content

Instantly share code, notes, and snippets.

@cassler

cassler/index.html

Created May 22, 2021 19:18
Show Gist options
  • Save cassler/c597663ab804d8243771815acfcfcac6 to your computer and use it in GitHub Desktop.
Save cassler/c597663ab804d8243771815acfcfcac6 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/mojaces
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/2.0.8/es5-shim.min.js"></script>
<script src="https://fb.me/react-with-addons-15.1.0.js"></script>
<script src="https://fb.me/react-dom-15.1.0.js"></script>
<script id="jsbin-javascript">
"use strict";
function getShorthand(str) {
if (str.length <= 3)
return str;
return [
str.slice(0, 1),
str.length - 2,
str.slice(-1)
].join('');
}
var sh = getShorthand('org');
var getShorthandParts = function (str) {
return [
// label, slice args
['first letter', [0, 1]],
['middle section', [1, -1]],
['last letter', [-1]]
].map(function (x) {
// apply slice args
var text = str.slice.apply(str, x[1]); // i, nternationalizatio, n
// include label and length of size of resulting slice
return {
label: x[0],
text: text,
length: text.length
};
});
};
/**
Example output:
[{
label: "first letter",
length: 1,
text: "i"
}, {
label: "middle section",
length: 18,
text: "nternationalizatio"
}, {
label: "last letter",
length: 1,
text: "n"
}]
*/
function explainer(str) {
if (str.length <= 2)
return str;
return {
input: str,
shorthand: getShorthand(str),
breakdown: getShorthandParts(str)
};
}
var _a = explainer("internationalization"), input = _a.input, shorthand = _a.shorthand, breakdown = _a.breakdown;
console.log("The shorthander version of '" + input + "' is '" + shorthand + "'");
console.log('Heres an explanation....');
console.log(breakdown);
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoianNiaW4uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyJqc2Jpbi50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsc0JBQXNCLEdBQVU7SUFDOUIsRUFBRSxDQUFDLENBQUMsR0FBRyxDQUFDLE1BQU0sSUFBSSxDQUFDLENBQUM7UUFBQyxNQUFNLENBQUMsR0FBRyxDQUFDO0lBQ2pDLE1BQU0sQ0FBQztRQUNKLEdBQUcsQ0FBQyxLQUFLLENBQUMsQ0FBQyxFQUFDLENBQUMsQ0FBQztRQUNkLEdBQUcsQ0FBQyxNQUFNLEdBQUcsQ0FBQztRQUNkLEdBQUcsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLENBQUM7S0FDZCxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsQ0FBQTtBQUNaLENBQUM7QUFFRCxJQUFNLEVBQUUsR0FBRyxZQUFZLENBQUMsS0FBSyxDQUFDLENBQUM7QUFHL0IsSUFBTSxpQkFBaUIsR0FBRyxVQUFDLEdBQVU7SUFDcEMsTUFBTSxDQUFDO1FBQ0osb0JBQW9CO1FBQ3JCLENBQUMsY0FBYyxFQUFFLENBQUMsQ0FBQyxFQUFDLENBQUMsQ0FBQyxDQUFDO1FBQ3RCLENBQUMsZ0JBQWdCLEVBQUUsQ0FBQyxDQUFDLEVBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztRQUMxQixDQUFDLGFBQWEsRUFBRSxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7S0FDdEIsQ0FBQyxHQUFHLENBQUMsVUFBQSxDQUFDO1FBQ0wsbUJBQW1CO1FBQ3BCLElBQUksSUFBSSxHQUFHLEdBQUcsQ0FBQyxLQUFLLE9BQVQsR0FBRyxFQUFVLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFBLENBQUMsMkJBQTJCO1FBQ3hELHNEQUFzRDtRQUN0RCxNQUFNLENBQUM7WUFDTixLQUFLLEVBQUUsQ0FBQyxDQUFDLENBQUMsQ0FBQztZQUNWLFVBQUk7WUFDSixNQUFNLEVBQUUsSUFBSSxDQUFDLE1BQU07U0FDcEIsQ0FBQTtJQUNKLENBQUMsQ0FBQyxDQUFBO0FBQ0gsQ0FBQyxDQUFBO0FBRUQ7Ozs7Ozs7Ozs7Ozs7Ozs7O0VBaUJFO0FBRUYsbUJBQW1CLEdBQVc7SUFDN0IsRUFBRSxDQUFDLENBQUMsR0FBRyxDQUFDLE1BQU0sSUFBSSxDQUFDLENBQUM7UUFBQyxNQUFNLENBQUMsR0FBRyxDQUFDO0lBQy9CLE1BQU0sQ0FBQztRQUNOLEtBQUssRUFBRSxHQUFHO1FBQ1QsU0FBUyxFQUFFLFlBQVksQ0FBQyxHQUFHLENBQUM7UUFDNUIsU0FBUyxFQUFFLGlCQUFpQixDQUFDLEdBQUcsQ0FBQztLQUNsQyxDQUFBO0FBQ0gsQ0FBQztBQUVELElBQUEsc0NBQXlFLEVBQWpFLGdCQUFLLEVBQUUsd0JBQVMsRUFBRSx3QkFBUyxDQUF1QztBQUUxRSxPQUFPLENBQUMsR0FBRyxDQUFDLGlDQUErQixLQUFLLGNBQVMsU0FBUyxNQUFHLENBQUMsQ0FBQTtBQUN0RSxPQUFPLENBQUMsR0FBRyxDQUFDLDBCQUEwQixDQUFDLENBQUE7QUFDdkMsT0FBTyxDQUFDLEdBQUcsQ0FBQyxTQUFTLENBQUMsQ0FBQSIsInNvdXJjZXNDb250ZW50IjpbImZ1bmN0aW9uIGdldFNob3J0aGFuZChzdHI6c3RyaW5nKSB7XG4gIGlmIChzdHIubGVuZ3RoIDw9IDMpIHJldHVybiBzdHI7XG5cdHJldHVybiBbXG4gICAgc3RyLnNsaWNlKDAsMSksIFxuICAgIHN0ci5sZW5ndGggLSAyLCBcbiAgICBzdHIuc2xpY2UoLTEpXG4gIF0uam9pbignJylcbn1cblxuY29uc3Qgc2ggPSBnZXRTaG9ydGhhbmQoJ29yZycpO1xuXG5cbmNvbnN0IGdldFNob3J0aGFuZFBhcnRzID0gKHN0cjpzdHJpbmcpID0+IHtcblx0cmV0dXJuIFtcbiAgICAvLyBsYWJlbCwgc2xpY2UgYXJnc1xuICBcdFsnZmlyc3QgbGV0dGVyJywgWzAsMV1dLFxuICAgIFsnbWlkZGxlIHNlY3Rpb24nLCBbMSwtMV1dLFxuICAgIFsnbGFzdCBsZXR0ZXInLCBbLTFdXVxuICBdLm1hcCh4ID0+IHtcbiAgICAvLyBhcHBseSBzbGljZSBhcmdzXG4gIFx0bGV0IHRleHQgPSBzdHIuc2xpY2UoLi4ueFsxXSkgLy8gaSwgbnRlcm5hdGlvbmFsaXphdGlvLCBuXG4gICAgLy8gaW5jbHVkZSBsYWJlbCBhbmQgbGVuZ3RoIG9mIHNpemUgb2YgcmVzdWx0aW5nIHNsaWNlXG4gICAgcmV0dXJuIHsgXG4gICAgXHRsYWJlbDogeFswXSxcbiAgICAgIHRleHQsXG4gICAgICBsZW5ndGg6IHRleHQubGVuZ3RoIFxuICAgIH1cblx0fSlcbn1cblxuLyoqXG4gRXhhbXBsZSBvdXRwdXQ6XG4gXG4gW3tcbiAgbGFiZWw6IFwiZmlyc3QgbGV0dGVyXCIsXG4gIGxlbmd0aDogMSxcbiAgdGV4dDogXCJpXCJcbn0sIHtcbiAgbGFiZWw6IFwibWlkZGxlIHNlY3Rpb25cIixcbiAgbGVuZ3RoOiAxOCxcbiAgdGV4dDogXCJudGVybmF0aW9uYWxpemF0aW9cIlxufSwge1xuICBsYWJlbDogXCJsYXN0IGxldHRlclwiLFxuICBsZW5ndGg6IDEsXG4gIHRleHQ6IFwiblwiXG59XVxuXG4qL1xuXG5mdW5jdGlvbiBleHBsYWluZXIoc3RyOiBzdHJpbmcpIHtcblx0aWYgKHN0ci5sZW5ndGggPD0gMikgcmV0dXJuIHN0cjtcbiAgcmV0dXJuIHtcbiAgXHRpbnB1dDogc3RyLFxuICAgIHNob3J0aGFuZDogZ2V0U2hvcnRoYW5kKHN0ciksXG4gICAgYnJlYWtkb3duOiBnZXRTaG9ydGhhbmRQYXJ0cyhzdHIpXG4gIH1cbn1cblxuY29uc3QgeyBpbnB1dCwgc2hvcnRoYW5kLCBicmVha2Rvd24gfSA9IGV4cGxhaW5lcihcImludGVybmF0aW9uYWxpemF0aW9uXCIpO1xuXG5jb25zb2xlLmxvZyhgVGhlIHNob3J0aGFuZGVyIHZlcnNpb24gb2YgJyR7aW5wdXR9JyBpcyAnJHtzaG9ydGhhbmR9J2ApXG5jb25zb2xlLmxvZygnSGVyZXMgYW4gZXhwbGFuYXRpb24uLi4uJylcbmNvbnNvbGUubG9nKGJyZWFrZG93bikiXX0=
</script>
<script id="jsbin-source-javascript" type="text/javascript">function getShorthand(str:string) {
if (str.length <= 3) return str;
return [
str.slice(0,1),
str.length - 2,
str.slice(-1)
].join('')
}
const sh = getShorthand('org');
const getShorthandParts = (str:string) => {
return [
// label, slice args
['first letter', [0,1]],
['middle section', [1,-1]],
['last letter', [-1]]
].map(x => {
// apply slice args
let text = str.slice(...x[1]) // i, nternationalizatio, n
// include label and length of size of resulting slice
return {
label: x[0],
text,
length: text.length
}
})
}
/**
Example output:
[{
label: "first letter",
length: 1,
text: "i"
}, {
label: "middle section",
length: 18,
text: "nternationalizatio"
}, {
label: "last letter",
length: 1,
text: "n"
}]
*/
function explainer(str: string) {
if (str.length <= 2) return str;
return {
input: str,
shorthand: getShorthand(str),
breakdown: getShorthandParts(str)
}
}
const { input, shorthand, breakdown } = explainer("internationalization");
console.log(`The shorthander version of '${input}' is '${shorthand}'`)
console.log('Heres an explanation....')
console.log(breakdown)
</script></body>
</html>
Raw
jsbin.mojaces.js
"use strict";
function getShorthand(str) {
if (str.length <= 3)
return str;
return [
str.slice(0, 1),
str.length - 2,
str.slice(-1)
].join('');
}
var sh = getShorthand('org');
var getShorthandParts = function (str) {
return [
// label, slice args
['first letter', [0, 1]],
['middle section', [1, -1]],
['last letter', [-1]]
].map(function (x) {
// apply slice args
var text = str.slice.apply(str, x[1]); // i, nternationalizatio, n
// include label and length of size of resulting slice
return {
label: x[0],
text: text,
length: text.length
};
});
};
/**
Example output:
[{
label: "first letter",
length: 1,
text: "i"
}, {
label: "middle section",
length: 18,
text: "nternationalizatio"
}, {
label: "last letter",
length: 1,
text: "n"
}]
*/
function explainer(str) {
if (str.length <= 2)
return str;
return {
input: str,
shorthand: getShorthand(str),
breakdown: getShorthandParts(str)
};
}
var _a = explainer("internationalization"), input = _a.input, shorthand = _a.shorthand, breakdown = _a.breakdown;
console.log("The shorthander version of '" + input + "' is '" + shorthand + "'");
console.log('Heres an explanation....');
console.log(breakdown);
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoianNiaW4uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyJqc2Jpbi50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsc0JBQXNCLEdBQVU7SUFDOUIsRUFBRSxDQUFDLENBQUMsR0FBRyxDQUFDLE1BQU0sSUFBSSxDQUFDLENBQUM7UUFBQyxNQUFNLENBQUMsR0FBRyxDQUFDO0lBQ2pDLE1BQU0sQ0FBQztRQUNKLEdBQUcsQ0FBQyxLQUFLLENBQUMsQ0FBQyxFQUFDLENBQUMsQ0FBQztRQUNkLEdBQUcsQ0FBQyxNQUFNLEdBQUcsQ0FBQztRQUNkLEdBQUcsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLENBQUM7S0FDZCxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsQ0FBQTtBQUNaLENBQUM7QUFFRCxJQUFNLEVBQUUsR0FBRyxZQUFZLENBQUMsS0FBSyxDQUFDLENBQUM7QUFHL0IsSUFBTSxpQkFBaUIsR0FBRyxVQUFDLEdBQVU7SUFDcEMsTUFBTSxDQUFDO1FBQ0osb0JBQW9CO1FBQ3JCLENBQUMsY0FBYyxFQUFFLENBQUMsQ0FBQyxFQUFDLENBQUMsQ0FBQyxDQUFDO1FBQ3RCLENBQUMsZ0JBQWdCLEVBQUUsQ0FBQyxDQUFDLEVBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztRQUMxQixDQUFDLGFBQWEsRUFBRSxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7S0FDdEIsQ0FBQyxHQUFHLENBQUMsVUFBQSxDQUFDO1FBQ0wsbUJBQW1CO1FBQ3BCLElBQUksSUFBSSxHQUFHLEdBQUcsQ0FBQyxLQUFLLE9BQVQsR0FBRyxFQUFVLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFBLENBQUMsMkJBQTJCO1FBQ3hELHNEQUFzRDtRQUN0RCxNQUFNLENBQUM7WUFDTixLQUFLLEVBQUUsQ0FBQyxDQUFDLENBQUMsQ0FBQztZQUNWLFVBQUk7WUFDSixNQUFNLEVBQUUsSUFBSSxDQUFDLE1BQU07U0FDcEIsQ0FBQTtJQUNKLENBQUMsQ0FBQyxDQUFBO0FBQ0gsQ0FBQyxDQUFBO0FBRUQ7Ozs7Ozs7Ozs7Ozs7Ozs7O0VBaUJFO0FBRUYsbUJBQW1CLEdBQVc7SUFDN0IsRUFBRSxDQUFDLENBQUMsR0FBRyxDQUFDLE1BQU0sSUFBSSxDQUFDLENBQUM7UUFBQyxNQUFNLENBQUMsR0FBRyxDQUFDO0lBQy9CLE1BQU0sQ0FBQztRQUNOLEtBQUssRUFBRSxHQUFHO1FBQ1QsU0FBUyxFQUFFLFlBQVksQ0FBQyxHQUFHLENBQUM7UUFDNUIsU0FBUyxFQUFFLGlCQUFpQixDQUFDLEdBQUcsQ0FBQztLQUNsQyxDQUFBO0FBQ0gsQ0FBQztBQUVELElBQUEsc0NBQXlFLEVBQWpFLGdCQUFLLEVBQUUsd0JBQVMsRUFBRSx3QkFBUyxDQUF1QztBQUUxRSxPQUFPLENBQUMsR0FBRyxDQUFDLGlDQUErQixLQUFLLGNBQVMsU0FBUyxNQUFHLENBQUMsQ0FBQTtBQUN0RSxPQUFPLENBQUMsR0FBRyxDQUFDLDBCQUEwQixDQUFDLENBQUE7QUFDdkMsT0FBTyxDQUFDLEdBQUcsQ0FBQyxTQUFTLENBQUMsQ0FBQSIsInNvdXJjZXNDb250ZW50IjpbImZ1bmN0aW9uIGdldFNob3J0aGFuZChzdHI6c3RyaW5nKSB7XG4gIGlmIChzdHIubGVuZ3RoIDw9IDMpIHJldHVybiBzdHI7XG5cdHJldHVybiBbXG4gICAgc3RyLnNsaWNlKDAsMSksIFxuICAgIHN0ci5sZW5ndGggLSAyLCBcbiAgICBzdHIuc2xpY2UoLTEpXG4gIF0uam9pbignJylcbn1cblxuY29uc3Qgc2ggPSBnZXRTaG9ydGhhbmQoJ29yZycpO1xuXG5cbmNvbnN0IGdldFNob3J0aGFuZFBhcnRzID0gKHN0cjpzdHJpbmcpID0+IHtcblx0cmV0dXJuIFtcbiAgICAvLyBsYWJlbCwgc2xpY2UgYXJnc1xuICBcdFsnZmlyc3QgbGV0dGVyJywgWzAsMV1dLFxuICAgIFsnbWlkZGxlIHNlY3Rpb24nLCBbMSwtMV1dLFxuICAgIFsnbGFzdCBsZXR0ZXInLCBbLTFdXVxuICBdLm1hcCh4ID0+IHtcbiAgICAvLyBhcHBseSBzbGljZSBhcmdzXG4gIFx0bGV0IHRleHQgPSBzdHIuc2xpY2UoLi4ueFsxXSkgLy8gaSwgbnRlcm5hdGlvbmFsaXphdGlvLCBuXG4gICAgLy8gaW5jbHVkZSBsYWJlbCBhbmQgbGVuZ3RoIG9mIHNpemUgb2YgcmVzdWx0aW5nIHNsaWNlXG4gICAgcmV0dXJuIHsgXG4gICAgXHRsYWJlbDogeFswXSxcbiAgICAgIHRleHQsXG4gICAgICBsZW5ndGg6IHRleHQubGVuZ3RoIFxuICAgIH1cblx0fSlcbn1cblxuLyoqXG4gRXhhbXBsZSBvdXRwdXQ6XG4gXG4gW3tcbiAgbGFiZWw6IFwiZmlyc3QgbGV0dGVyXCIsXG4gIGxlbmd0aDogMSxcbiAgdGV4dDogXCJpXCJcbn0sIHtcbiAgbGFiZWw6IFwibWlkZGxlIHNlY3Rpb25cIixcbiAgbGVuZ3RoOiAxOCxcbiAgdGV4dDogXCJudGVybmF0aW9uYWxpemF0aW9cIlxufSwge1xuICBsYWJlbDogXCJsYXN0IGxldHRlclwiLFxuICBsZW5ndGg6IDEsXG4gIHRleHQ6IFwiblwiXG59XVxuXG4qL1xuXG5mdW5jdGlvbiBleHBsYWluZXIoc3RyOiBzdHJpbmcpIHtcblx0aWYgKHN0ci5sZW5ndGggPD0gMikgcmV0dXJuIHN0cjtcbiAgcmV0dXJuIHtcbiAgXHRpbnB1dDogc3RyLFxuICAgIHNob3J0aGFuZDogZ2V0U2hvcnRoYW5kKHN0ciksXG4gICAgYnJlYWtkb3duOiBnZXRTaG9ydGhhbmRQYXJ0cyhzdHIpXG4gIH1cbn1cblxuY29uc3QgeyBpbnB1dCwgc2hvcnRoYW5kLCBicmVha2Rvd24gfSA9IGV4cGxhaW5lcihcImludGVybmF0aW9uYWxpemF0aW9uXCIpO1xuXG5jb25zb2xlLmxvZyhgVGhlIHNob3J0aGFuZGVyIHZlcnNpb24gb2YgJyR7aW5wdXR9JyBpcyAnJHtzaG9ydGhhbmR9J2ApXG5jb25zb2xlLmxvZygnSGVyZXMgYW4gZXhwbGFuYXRpb24uLi4uJylcbmNvbnNvbGUubG9nKGJyZWFrZG93bikiXX0=
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment