I didn't know that!

I didn't know that!

22725c2d3eb331146549bf0d5d3c050c?s=128

stefan judis

July 19, 2018
Tweet

Transcript

  1. 3.

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

    and a Frontend application with a Prototype/ jQuery mix.
  2. 4.

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

    and a Frontend application with a Prototype/ jQuery mix.
  3. 5.

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

    and a Frontend application with a Prototype/ jQuery mix.
  4. 6.

    “ 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. 12.
  6. 13.
  7. 16.
  8. 20.
  9. 22.
  10. 25.

    My learnings in 2 years (a random list in no

    particular order) (not always useful)
  11. 31.

    isNaN(NaN); // true isNaN(undefined); // true isNaN({}); // true isNaN(true);

    // false isNaN(null); // false isNaN(37); // false
  12. 32.

    isNaN(NaN); // true isNaN(undefined); // true isNaN({}); // true isNaN(true);

    // false isNaN(null); // false isNaN(37); // false function myIsNaN(value) { return value !== value; }
  13. 33.

    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
  14. 34.

    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
  15. 35.

    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
  16. 38.

    ['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
  17. 39.

    Abstract Equality Comparison Equality comparison and sameness == Strict Equality

    Comparison ===, indexOf, ... SameValueZero includes, ... SameValue Object.is, ...
  18. 42.

    $ 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 ...
  19. 44.

    $ git co -p --amend index.html $ git push -f

    origin some-feature It's very easy to overwrite remote changes with force pushing!
  20. 45.
  21. 58.
  22. 60.
  23. 62.
  24. 65.

    <link rel="stylesheet" href="app.css" /> <script> var script = document.createElement('script'); script.src

    = "analytics.js"; document.getElementsByTagName('head')[0].appendChild(script); </script>
  25. 66.

    <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
  26. 68.
  27. 69.
  28. 73.

    “ 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.
  29. 74.

    “ 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.
  30. 77.
  31. 84.

    'aBcD' === 'abcd' // false 'ábcd' === 'abcd' // false

    'Price 2€' > 'Price 1€' // true
  32. 85.

    'aBcD' === 'abcd' // false 'ábcd' === 'abcd' // false

    'Price 2€' > 'Price 1€' // true 'Price 20€' > 'Price 3€'
  33. 86.

    'aBcD' === 'abcd' // false 'ábcd' === 'abcd' // false

    'Price 2€' > 'Price 1€' // true 'Price 20€' > 'Price 3€' // false
  34. 88.

    localCompare a ≠ b, a = á, a = A

    'aBcD'.localeCompare('abcd', undefined, { sensitivity: 'base' }) // 0 'ábcd'.localeCompare('abcd', undefined, { sensitivity: 'base' }) // 0
  35. 89.

    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
  36. 90.

    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"
  37. 92.
  38. 94.

    .center { display: flex; align-items: center; justify-content: center; } .center-using-grid

    { display: grid; align-items: center; justify-items: center; }
  39. 96.
  40. 97.
  41. 101.

    <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]
  42. 108.

    document.querySelectorAll // static NodeList element.childNodes // live NodeList element.children //

    (live) HTMLCollection document.getElementsByTagName // (live) HTMLCollection
  43. 112.
  44. 113.

    “ 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.
  45. 114.

    “ 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.
  46. 130.
  47. 132.

    .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; }
  48. 133.
  49. 149.

    “ The Element.matches() method returns true if the element would

    be selected by the specified selector string; otherwise, returns false.
  50. 150.

    “ The Element.matches() method returns true if the element would

    be selected by the specified selector string; otherwise, returns false.
  51. 152.
  52. 164.

    <h2> Merel van der Woude <span>Creative director</span> </h2> h2 {

    width: min-content; min-width: 0; max-width: 100%; }
  53. 165.

    <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%; }
  54. 169.

    { "name": "my-package", "config": { "src": "./src/*" }, "scripts": {

    "lint": "eslint $npm_package_config_src", "test": "jest $npm_package_config_src" } }
  55. 170.

    { "name": "my-package", "config": { "src": "./src/*" }, "scripts": {

    "lint": "eslint $npm_package_config_src", "test": "jest $npm_package_config_src" } } Avoid duplication
  56. 172.

    { "foo": "bar" "scripts": { "start": "node index.js" } }

    // index.js console.log(process.env.npm_package_foo); // 'bar'
  57. 174.

    function f() { try { return 'A'; } finally {

    return 'B'; } } f(); // ? 'B'
  58. 175.

    function g() { try { throw new Error('Foo'); } catch(

    e ) { return 'A'; } finally { return 'B'; } } f(); // ? 'B'
  59. 176.

    function h() { try { throw new Error('Foo'); } finally

    { return 'B'; } } h(); //? 'B' (without throwing exception)
  60. 177.

    function i() { try { throw new Error('Foo'); } catch(

    e ) { throw new Error('Bar'); return 'A'; } finally { return 'B'; } } i(); //? 'B' (without throwing exception)
  61. 178.

    “ 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.
  62. 179.

    “ 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.
  63. 183.