yoavweiss

#!/bin/bash
hidutil property --set '{"UserKeyMapping":[{"HIDKeyboardModifierMappingSrc":0x700000064,"HIDKeyboardModifierMappingDst":0x700000029}, {"HIDKeyboardModifierMappingSrc":0x700000029,"HIDKeyboardModifierMappingDst":0x700000073}]}'

yoavweiss

var DOMTokenListSupports = function(tokenList, token) {
  if (!tokenList || !tokenList.supports) {
    return;
  }
  try {
    return tokenList.supports(token);
  } catch (e) {
    if (e instanceof TypeError) {
      console.log("The DOMTokenList doesn't have a supported tokens list");
    } else {

yoavweiss

var DOMTokenListSupports = function(tokenList, token) {
  if (!tokenList || !tokenList.supports) {
    return;
  }
  try {
    return tokenList.supports(token);
  } catch (e) {
    if (e instanceof TypeError) {
      console.log("The DOMTokenList doesn't have a supported tokens list");
    } else {

yoavweiss

<picture>
  <source srcset="http://placehold.it/300.png">
  <img src="http://placehold.it/100.png" id=bla>
</picture>
<script>
(function() {
  var img = document.getElementById("bla");
  img.parentNode.removeChild(img);
})();
</script>

yoavweiss

var tokenListSupports = function(tokenList, token) {
  if (!tokenList || !tokenList.supports) {
    return false;
  }
  try {
    return tokenList.supports(token);
  } catch (e) {
    if (e instanceof TypeError) {
      console.log("The DOMTokenList doesn't have a supported tokens list");
    } else {

yoavweiss

/**
 * Media query to detect full screen mode!
 * Y U NO WORK Chrome??
 * Firefox, you’re lovely.
 */

body {
	background: red;
	font: bold 400% Helvetica Neue, sans-serif;
	color: white;

yoavweiss

Official RICG Web sites

• http://responsiveimages.org/ - contains links to the specs, repos, etc
• http://ricg.io/ - contains feature status

Articles explaining the various use-cases and solutions:

• https://dev.opera.com/articles/native-responsive-images/ - An explainer article I wrote.
• https://dev.opera.com/articles/responsive-images/ - A "cookbook" with all the various permutations of use-cases, by Andreas Bovens.
• http://ericportis.com/posts/2014/srcset-sizes/ - An awesomely funny article explaining srcset and sizes.
• http://www.smashingmagazine.com/2014/05/14/responsive-images-done-right-guide-picture-srcset/ - An explainer by Eric Portis.

yoavweiss

    TestCase testCases[] = {
 24         {"screen", 300},
 25         {"(min-width:500px)", 300},
 26         {"(min-width:500px) 200px", 200},
 27         {"(min-width:500px) 200px, 400px", 200},
 28         {"(min-width:5000px) 200px, 400px", 400},
 29         {"(blalbadfsdf) 200px, 400px", 400},
 30         {0, 0} // Do not remove the terminator line.
 31     };

yoavweiss

http://responsivedesignworkflow.com/
https://www.rijksmuseum.nl/en/explore-the-collection/subjects/owls
http://www.julianabicycles.com/
http://metaframe.elliance.com/
http://purecss.io/
http://hellogeri.com/
http://2012.dconstruct.org/
http://www.moneydesktop.com/
http://thepaintdrop.com/
http://www.npr.org/blogs/thisisnpr/2013/05/08/180363048/see-a-new-npr-homepage-on-your-smartphone

yoavweiss

alistapart.com
animoto.com
behance.net
cato.org
ceskatelevize.cz
creativemarket.com
dribbble.com
evernote.com
extra.cz
flavorwire.com