Best JavaScript Is No JavaScript

Transcript

1. Best Javascript Is No Javascript Radoslav Stankov
2. All You Need Is CSS Radoslav Stankov
4. <details>
6. <details> <summary>System Requirements</summary> <p> 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. </p> </details>
11. <details>
 <summary> <svg class="open-hidden">...</svg> <svg class="open-visible">...</svg> </summary>
 <ul> <li><a>...</a></li> <li><a>...</a></li> ... </ul>
 </details>
12. <details>
 <summary> <svg class="open-hidden">...</svg> <svg class="open-visible">...</svg> </summary>
 <ul> <li><a>...</a></li> <li><a>...</a></li> ... </ul>
 </details>
13. details[open] .open-hidden { display: none; } details:not([open]) .open-visible { display: none; }
14. Responsive Table
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; } }
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; } }
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; } }
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; } }
23. <input type="date">
27. 1⃣ Accessible 2⃣ Mobile friendly 3⃣ All batteries include 
 ➡ No extra code 🚫 Single date, no range 
 🚫 Style doesn't match our site <input type="date">
28. <dialog>
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 <dialog>
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(); } }, });
33. ... future
35. <selectmenu> <popover>