Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Best JavaScript Is No JavaScript

Best JavaScript Is No JavaScript

Radoslav Stankov

July 27, 2023
Tweet

More Decks by Radoslav Stankov

Other Decks in Technology

Transcript

  1. Best Javascript Is No
    Javascript
    Radoslav Stankov


    View full-size slide

  2. All You Need Is CSS
    Radoslav Stankov


    View full-size slide


  3. System Requirements

    Requires a computer running an operating
    system. The computer must have some
    memory and ideally some kind of long-term
    storage. An input device as well
    as some form of output device is recommended.


    View full-size slide



  4. ...
    ...


    ...
    ...
    ...


    View full-size slide



  5. ...
    ...


    ...
    ...
    ...


    View full-size slide

  6. details[open] .open-hidden {
    display: none;
    }
    details:not([open]) .open-visible {
    display: none;
    }

    View full-size slide

  7. Responsive Table

    View full-size slide

  8. @media (max-width: 640px) {
    .table-component,
    .table-component thead,
    .table-component tbody,
    .table-component tfoot,
    .table-component tr {
    display: block;
    }
    .table-component tbody td {
    display:
    fl
    ex;
    }
    .table-component tbody td:not(.actions):before {
    content: attr(title);
    fl
    ex: 0 1 35%;
    display: block;
    white-space: nowrap;
    }
    }

    View full-size slide

  9. @media (max-width: 640px) {
    .table-component,
    .table-component thead,
    .table-component tbody,
    .table-component tfoot,
    .table-component tr {
    display: block;
    }
    .table-component tbody td {
    display:
    fl
    ex;
    }
    .table-component tbody td:not(.actions):before {
    content: attr(title);
    fl
    ex: 0 1 35%;
    display: block;
    white-space: nowrap;
    }
    }

    View full-size slide

  10. @media (max-width: 640px) {
    .table-component,
    .table-component thead,
    .table-component tbody,
    .table-component tfoot,
    .table-component tr {
    display: block;
    }
    .table-component tbody td {
    display:
    fl
    ex;
    }
    .table-component tbody td:not(.actions):before {
    content: attr(title);
    fl
    ex: 0 1 35%;
    display: block;
    white-space: nowrap;
    }
    }

    View full-size slide

  11. @media (max-width: 640px) {
    .table-component,
    .table-component thead,
    .table-component tbody,
    .table-component tfoot,
    .table-component tr {
    display: block;
    }
    .table-component tbody td {
    display:
    fl
    ex;
    }
    .table-component tbody td:not(.actions):before {
    content: attr(title);
    fl
    ex: 0 1 35%;
    display: block;
    white-space: nowrap;
    }
    }

    View full-size slide

  12. 1⃣ Accessible


    2⃣ Mobile friendly


    3⃣ All batteries include

    ➡ No extra code


    🚫 Single date, no range

    🚫 Style doesn't match our site

    View full-size slide

  13. 1⃣ Accessible


    2⃣ Build-in backdrop


    3⃣ Auto handling of forms (example: auto-focus)


    4⃣ Stops scrolling of back page


    5⃣ Auto handle of ESC


    6⃣ Style as you wish


    🚫 JavaScript to trigger the modal version

    🚫 JavaScript need to close dialog when click backdrop

    View full-size slide

  14. import { setEventListners } from './utils';
    setEventListners(document, {
    '[data-dialog]:click': (e) => {
    document
    .getElementById(e.target.closest('[data-dialog]').dataset.dialog)
    ?.showModal();
    },
    'dialog:click': (e) => {
    if (e.target.tagName === 'DIALOG') {
    e.target.close();
    }
    },
    });

    View full-size slide