Skip to content

Instantly share code, notes, and snippets.

Matt Smith AllThingsSmitty

Block or report user

Report or block AllThingsSmitty

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@AllThingsSmitty
AllThingsSmitty / responsive-images.htm
Last active Apr 11, 2016
Automatically art-directed responsive images
View responsive-images.htm
<!-- 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
AllThingsSmitty / readyState.js
Last active Mar 9, 2016
Using readyState to show document state
View readyState.js
// 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
AllThingsSmitty / preload.htm
Created Feb 12, 2016
Async CSS w/ link[rel=preload]
View preload.htm
<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
AllThingsSmitty / rainbow.css
Created Jan 17, 2016
Animated background color shift
View rainbow.css
/* 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
AllThingsSmitty / toggle-css-script-on-off.js
Created Nov 15, 2015
Disable/enable a stylesheet or script
View toggle-css-script-on-off.js
// 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
AllThingsSmitty / touch-icons.htm
Last active Sep 22, 2016
Which touch-icon sizes to use for mobile
View touch-icons.htm
<!-- 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
AllThingsSmitty / live-code.css
Created Aug 27, 2015
Making an entire live-code-enabled presentation
View live-code.css
<style contenteditable>
* {
display: block;
}
</style>
@AllThingsSmitty
AllThingsSmitty / js-terms.md
Last active Sep 30, 2019
10 terms to help you better understand JavaScript
View js-terms.md

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
AllThingsSmitty / truncate.js
Last active Nov 29, 2015
Apply ellipsis to the end of content that has more than 300 characters
View truncate.js
if (content.length > 300) {
// truncate to a shorter text length
return content.substring(0, 200) + '...';
}
@AllThingsSmitty
AllThingsSmitty / palindrome.js
Last active Nov 29, 2015
Determine if a given string is a palindrome
View palindrome.js
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');
}
}
You can’t perform that action at this time.