Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

I didn't know that!

I didn't know that!

stefan judis

July 19, 2018
Tweet

More Decks by stefan judis

Other Decks in Technology

Transcript

  1. “ We're running a Magento shop combined with a CouchDB

    and a Frontend application with a Prototype/ jQuery mix.
  2. “ We're running a Magento shop combined with a CouchDB

    and a Frontend application with a Prototype/ jQuery mix.
  3. “ We're running a Magento shop combined with a CouchDB

    and a Frontend application with a Prototype/ jQuery mix.
  4. “ We're running a Magento shop combined with a CouchDB

    and a Frontend application with a Prototype/ jQuery mix. I didn't say that I didn't know most of these technologies...
  5. My learnings in 2 years (a random list in no

    particular order) (not always useful)
  6. isNaN(NaN); // true isNaN(undefined); // true isNaN({}); // true isNaN(true);

    // false isNaN(null); // false isNaN(37); // false
  7. isNaN(NaN); // true isNaN(undefined); // true isNaN({}); // true isNaN(true);

    // false isNaN(null); // false isNaN(37); // false function myIsNaN(value) { return value !== value; }
  8. isNaN(NaN); // true isNaN(undefined); // true isNaN({}); // true isNaN(true);

    // false isNaN(null); // false isNaN(37); // false myIsNaN(NaN); // true myIsNaN(undefined); // false myIsNaN({}); // false myIsNaN(true); // false myIsNaN(null); // false myIsNaN(37); // false
  9. isNaN(NaN); // true isNaN(undefined); // true isNaN({}); // true isNaN(true);

    // false isNaN(null); // false isNaN(37); // false myIsNaN(NaN); // true myIsNaN(undefined); // false myIsNaN({}); // false myIsNaN(true); // false myIsNaN(null); // false myIsNaN(37); // false Number.isNaN(NaN); // true Number.isNaN(undefined); // false Number.isNaN({}); // false Number.isNaN(true); // false Number.isNaN(null); // false Number.isNaN(37); // false
  10. isNaN(NaN); // true isNaN(undefined); // true isNaN({}); // true isNaN(true);

    // false isNaN(null); // false isNaN(37); // false myIsNaN(NaN); // true myIsNaN(undefined); // false myIsNaN({}); // false myIsNaN(true); // false myIsNaN(null); // false myIsNaN(37); // false Number.isNaN(NaN); // true Number.isNaN(undefined); // false Number.isNaN({}); // false Number.isNaN(true); // false Number.isNaN(null); // false Number.isNaN(37); // false Object.is(NaN, NaN); // true Object.is(undefined, NaN); // false Object.is({}, NaN); // false Object.is(true, NaN); // false Object.is(null, NaN); // false Object.is(37, NaN); // false
  11. ['foo', 123, true, undefined, NaN].indexOf(NaN) ['foo', 123, true, undefined, NaN].includes(NaN)

    true ['foo', 123, true, undefined, -0].includes(0) true SameValueZero Comparison -1
  12. Abstract Equality Comparison Equality comparison and sameness == Strict Equality

    Comparison ===, indexOf, ... SameValueZero includes, ... SameValue Object.is, ...
  13. $ history | grep amend 53 git co -p --amend

    index.html 69 git co -p --amend 71 git co -p --amend content/blueprints 1538 git co -p --amend 1540 git co -p --amend migration-tests 1542 git co -p --amend migration-tests 1545 git co -p --amend test_app.py 1627 git co -p --amend 1842 git co --amend 1845 git co --amend 1941 git co --amend 2273 git co -p --amend ...
  14. $ git co -p --amend index.html $ git push -f

    origin some-feature It's very easy to overwrite remote changes with force pushing!
  15. <link rel="stylesheet" href="app.css" /> <script> var script = document.createElement('script'); script.src

    = "analytics.js"; document.getElementsByTagName('head')[0].appendChild(script); </script>
  16. <link rel="stylesheet" href="app.css" /> <script> var script = document.createElement('script'); script.src

    = "analytics.js"; document.getElementsByTagName('head')[0].appendChild(script); </script> app.css analytics.js
  17. “ Two IdentifierName that are canonically equivalent according to the

    Unicode standard are not equal unless they are represented by the exact same sequence of code units.
  18. “ Two IdentifierName that are canonically equivalent according to the

    Unicode standard are not equal unless they are represented by the exact same sequence of code units.
  19. 'aBcD' === 'abcd' // false 'ábcd' === 'abcd' // false

    'Price 2€' > 'Price 1€' // true
  20. 'aBcD' === 'abcd' // false 'ábcd' === 'abcd' // false

    'Price 2€' > 'Price 1€' // true 'Price 20€' > 'Price 3€'
  21. 'aBcD' === 'abcd' // false 'ábcd' === 'abcd' // false

    'Price 2€' > 'Price 1€' // true 'Price 20€' > 'Price 3€' // false
  22. localCompare a ≠ b, a = á, a = A

    'aBcD'.localeCompare('abcd', undefined, { sensitivity: 'base' }) // 0 'ábcd'.localeCompare('abcd', undefined, { sensitivity: 'base' }) // 0
  23. localCompare 'Price 2€'.localeCompare('Price 3€', undefined, { numeric: true }) //

    -1 'Price 3€'.localeCompare('Price 3€', undefined, { numeric: true }) // 0 'Price 23€'.localeCompare('Price 3€', undefined, { numeric: true }) // 1
  24. localCompare 'Price 2€'.localeCompare('Price 3€', undefined, { numeric: true }) //

    -1 'Price 3€'.localeCompare('Price 3€', undefined, { numeric: true }) // 0 'Price 23€'.localeCompare('Price 3€', undefined, { numeric: true }) // 1 "1" < "2" < "10"
  25. .center { display: flex; align-items: center; justify-content: center; } .center-using-grid

    { display: grid; align-items: center; justify-items: center; }
  26. <ul> <li>foo</li> <li>bar</li> <li>baz</li> </ul> document.querySelectorAll('li'); // NodeList(3) [li, li,

    li] document.getElementsByTagName('li'); // HTMLCollection(3) [li, li, li]
  27. document.querySelectorAll // static NodeList element.childNodes // live NodeList element.children //

    (live) HTMLCollection document.getElementsByTagName // (live) HTMLCollection
  28. “ Document languages may define additional ways in which an

    element can match :hover. For example, [HTML5] defines a labeled control element as matching :hover when its label is hovered.
  29. “ Document languages may define additional ways in which an

    element can match :hover. For example, [HTML5] defines a labeled control element as matching :hover when its label is hovered.
  30. .mod img { display: block; margin: 0 auto; width: 100%;

    max-width: 250px; } .mod:media( min-width: 425px ) img { float: left; width: 30%; max-width: 9999px; }
  31. “ The Element.matches() method returns true if the element would

    be selected by the specified selector string; otherwise, returns false.
  32. “ The Element.matches() method returns true if the element would

    be selected by the specified selector string; otherwise, returns false.
  33. <h2> Merel van der Woude <span>Creative director</span> </h2> h2 {

    width: min-content; min-width: 0; max-width: 100%; }
  34. <h2> Merel van der Woude <span>Creative director</span> </h2> h2 {

    width: min-content; min-width: 0; max-width: 100%; } h2 span { width: max-content; max-width: 100%; }
  35. { "name": "my-package", "config": { "src": "./src/*" }, "scripts": {

    "lint": "eslint $npm_package_config_src", "test": "jest $npm_package_config_src" } }
  36. { "name": "my-package", "config": { "src": "./src/*" }, "scripts": {

    "lint": "eslint $npm_package_config_src", "test": "jest $npm_package_config_src" } } Avoid duplication
  37. { "foo": "bar" "scripts": { "start": "node index.js" } }

    // index.js console.log(process.env.npm_package_foo); // 'bar'
  38. function f() { try { return 'A'; } finally {

    return 'B'; } } f(); // ? 'B'
  39. function g() { try { throw new Error('Foo'); } catch(

    e ) { return 'A'; } finally { return 'B'; } } f(); // ? 'B'
  40. function h() { try { throw new Error('Foo'); } finally

    { return 'B'; } } h(); //? 'B' (without throwing exception)
  41. function i() { try { throw new Error('Foo'); } catch(

    e ) { throw new Error('Bar'); return 'A'; } finally { return 'B'; } } i(); //? 'B' (without throwing exception)
  42. “ If the finally block returns a value, this value

    becomes the return value of the entire try-catch-finally production, regardless of any return statements in the try and catch blocks.
  43. “ If the finally block returns a value, this value

    becomes the return value of the entire try-catch-finally production, regardless of any return statements in the try and catch blocks.