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

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

/* 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

<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

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

<!-- source article: http://cloudinary.com/blog/automatically_art_directed_responsive_images -->

<picture>

  <!-- wide crop -->
  <source 
    media="(min-width: 600px)"
    srcset="http://res.cloudinary.com/eeeps/image/upload/c_fill,ar_2:1,g_face,f_auto,q_70,w_600/on_the_phone.jpg 600w,
            http://res.cloudinary.com/eeeps/image/upload/c_fill,ar_2:1,g_face,f_auto,q_70,w_1200/on_the_phone.jpg 1200w"
    sizes="100vw">

AllThingsSmitty

function css(element, property) {
  return window.getComputedStyle(element, null).getPropertyValue(property);
}

window.onload = function () {
  var span = document.createElement('span');
  
  span.className = 'fa';
  span.style.display = 'none';
  document.body.insertBefore(span, document.body.firstChild);

AllThingsSmitty

/* This has been added to CSS Protips https://github.com/AllThingsSmitty/css-protips */

/* The type font size in a responsive layout should be able to adjust with each viewport.
You can calculate the font size based on the viewport height and width using :root */
:root {
  font-size: calc(1vw + 1vh + .5vmin);
}

/* Now you can utilize the root em unit based on the value calculated by :root */
body {

AllThingsSmitty

// credit: Louis Lazaris
window.addEventListener('contextmenu', function (e) {
  console.log('context menu disabled');
  e.preventDefault();
}, false);

document.addEventListener('mouseup', function (e) {
  if (e.button === 2) {
    console.log('right-click enabled');
  }

AllThingsSmitty

function togglePassword() {
  let passwordInput = document.getElementById('txtPassword');
  if (passwordInput.type === 'password') {
    passwordInput.type = 'text';
  } else {
    passwordInput.type = 'password';
  }
}

(function () {