Best JavaScript Is No JavaScript

Transcript

1. Best Javascript Is No
   Javascript
   Radoslav Stankov
   
   
   

   View Slide

2. All You Need Is CSS
   Radoslav Stankov
   
   
   

   View Slide

3. View Slide

4. 
   

   View Slide

5. View Slide

6. 
   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 Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. 

    
    ...
    ...
    

    
    ...
    ...
    ...
    

    
    

    View Slide

12. 

    
    ...
    ...
    

    
    ...
    ...
    ...
    

    
    

    View Slide

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

    View Slide

14. Responsive Table
    

    View Slide

15. View Slide

16. View Slide

17. View Slide

18. View Slide

19. @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 Slide

20. @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 Slide

21. @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 Slide

22. @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 Slide

23. 
    

    View Slide

24. View Slide

25. View Slide

26. View Slide

27. 1⃣ Accessible
    
    
    2⃣ Mobile friendly
    
    
    3⃣ All batteries include
    

    ➡ No extra code
    
    
    🚫 Single date, no range
    

    🚫 Style doesn't match our site
    
    

    View Slide

28. 
    

    View Slide

29. View Slide

30. View Slide

31. 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 Slide

32. 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 Slide

33. ... future
    

    View Slide

34. View Slide

35. 
    
    

    View Slide

36. View Slide