AllThingsSmitty

// credit: Louis Lazaris
document.onreadystatechange = function () {
  switch (document.readyState) {
    case 'loading':
      console.log('loading...');
      break;
    case 'interactive':
      console.log('DOM is ready...');
      break;
    case 'complete':

AllThingsSmitty

<link rel="preload" href="http://scottjehl.com/css-temp/slow.php" as="style" onload="this.rel='stylesheet'">

<!-- Ref: http://filamentgroup.github.io/loadCSS/test/preload.html -->

AllThingsSmitty

/* based on dbox.us */
body {
  background: linear-gradient(238deg, #fd8800, #fd008f, #9700fd, #003dfd, #05c7e6, #4bd58d);
  background-size: 1200% 1200%;
  -webkit-animation: rainbow 30s ease infinite;
  animation: rainbow 30s ease infinite;
}
@-webkit-keyframes rainbow {
  0% { background-position: 0% 50% }
  50% { background-position: 100% 50% }

AllThingsSmitty

// Use the Boolean `disabled` attribute
myCSS.disabled = true;
myJS.disabled = true;

// Create a stylesheet toggle button:
var stylesheet = document.getElementById('boot'),
  btn = document.querySelector('.btn');

btn.addEventListener('click', function () {
  stylesheet.disabled = (stylesheet.disabled === false) ? true : false;

AllThingsSmitty

<!-- https://mathiasbynens.be/notes/touch-icons#sizes -->

<!-- For the iPad mini and the first- and second-generation iPad (@1× display) on iOS ≤ 6: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">
<!-- For the iPad mini and the first- and second-generation iPad (@1× display) on iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76-precomposed.png">
<!-- For iPhone with @2× display running iOS ≤ 6: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">
<!-- For iPhone with @2× display running iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120-precomposed.png">

AllThingsSmitty

<style contenteditable>
  * {
    display: block;
  }
</style>

AllThingsSmitty

10 JavaScript Terms You Should Know

From currying to closures there are quite a number of special words used in JavaScript. These will not only help you increase your vocabulary but also better understand JavaScript. Special terms are normally found in documentation and technical articles. But some of them like closures are pretty standard things to know about. Knowing what the word itself means can help you know the concept it's named for better.

1. Arity
2. Anonymous
3. Closure
4. Currying
5. Hoisting
6. Mutation

AllThingsSmitty

if (content.length > 300) {
  // truncate to a shorter text length
  return content.substring(0, 200) + '...';
}

AllThingsSmitty

var input_str = 'madam';
 
function checkIfPalindrome(str) {
  if (str == str.split('').reverse().join('')) {
    alert('Yup, ' + str +  'is a palindrome');
  } else {
    alert('Nope, ' + str + ' isn\'t a palindrome');
  }
}

AllThingsSmitty

var list = [
  2, -4,
  6, -9, [8, 9, -6],
  12, [45, 3, 7], -34, [7, -2]
];
 
sublists = [];
sublists_sum = [];
for (var i in list) {
  if (Object.prototype.toString.call(list[i]) == '[object Array]') {