murtaugh

<figure class="text full-width">
<p data-height="388" data-theme-id="0" data-slug-hash="BJrpg" data-default-tab="result" class='codepen'>See the demo: <a href='http://alistapart.com/d/390/ui-animation-and-ux-a-not-so-secret-friendship/demo-show-hide'>Show/hide example</a></p>
<script async src="//codepen.io/assets/embed/ei.js"></script>
<figcaption>Select items on the main nav to reveal the submenus.</figcaption>
</figure>

murtaugh

$(window).scroll(function(e){
	parallax();
});


function parallax() {
	
	var scrolled = $(window).scrollTop();
    
    	//81% is the original top position of the element,

murtaugh

.notched-box {
  position: relative;
  width: 50%;
  height: 200px;
  margin: 2em auto;
  padding: 2em 0;
  background: #eee;
  overflow: hidden;
}

murtaugh

Keybase proof

I hereby claim:

• I am murtaugh on github.
• I am murtaugh (https://keybase.io/murtaugh) on keybase.
• I have a public key whose fingerprint is D47C 9FB7 E5D4 4EC1 DD55 6D3D BE9F DFE5 D9A1 EB0F

To claim this, I am signing this object:

murtaugh

$('img').on('error', function(){
	
	//console.log('img load failure: ' + $(this).attr('src'));
	
	var fallback = $(this).attr('data-fallback');
 
	if (typeof fallback !== 'undefined' && fallback !== false) {
		
		$(this).attr('src', fallback);
		

murtaugh

document.onkeydown = checkKey;
 
function checkKey(e) {
	
	e = e || window.event;
 
	if ((e.keyCode == '39') || (e.keyCode == '40')) { // right  / down arrow
		
		console.log('right / down');
	

murtaugh

$(document).on('click', function(event) {
  if (!$(event.target).closest('#menucontainer').length) {
    // Hide the menus.
  }
});

murtaugh

0. Make sure local and dev files are in synch.

1. turn off comments on prod
... by hiding the comment form
2. clear caches on prod

3. turn off local
4. clear caches on local

5. make local copy of prod db

murtaugh

'svg'	=>	'image/svg+xml',

murtaugh

<figure data-picture data-alt="">
<div data-src="<!-- URL for standard image here -->"></div>
<div data-src="<!-- URL for high-DPI image here -->" data-media="(min-device-pixel-ratio: 2.0)"></div>
<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
<noscript><img src="<!-- URL for standard image here -->" alt=""></noscript>
</figure>


<figure data-picture data-alt="">
<div data-src="<!-- URL for small-screen image here -->" data-media="(max-width: 700px)"></div>