Best JavaScript is No Javascript

Transcript

1. Best Javascript Is No Javascript Radoslav Stankov
2. !
3. I ❤
4. I ❤
5. I ❤
8. Radoslav Stankov @rstankov rstankov.com
10. Product Hunt Architecture
12. TypeScript Migration
13. Next.js Migration
15. # Side project
17. Angry Building Architecture $ % Ruby on Rails & No JavaScript ' No custom CSS, use Tailwind ( Extensive e2e tests ) Focus on domain
19. * How to avoid writing code checklist + reduce scope, by adjusting business requirement , use build-in feature of the browser - use feature from core platform - Next / React / Angular ... . use type system / move to logic backend 0 (only when I really have to) use 3rd party library (browser edition)
20. * How to avoid writing code checklist + reduce scope, by adjusting business requirement , use build-in feature of the browser - use feature from core platform - Next / React / Angular ... . use type system / move to logic backend 0 (only when I really have to) use 3rd party library (browser edition)
21. HTML CSS JavaScript
22. Plain HTML/CSS Plain HTML/CSS Everything with JS
24. :hover
26. function MyButton() { const [isHovered, setIsHovered] = useState(false); const className = isHovered ? 'button button-hover' : 'button'; const onMouseEnter = () => setIsHovered(true); const onMouseLeave = () => setIsHovered(false); return ( <button className={className} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>Button</button> ); }
28. <details>
30. <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>
35. <details>
 <summary> <svg class="open-hidden">...</svg> <svg class="open-visible">...</svg> </summary>
 <ul> <li><a>...</a></li> <li><a>...</a></li> ... </ul>
 </details>
36. <details>
 <summary> <svg class="open-hidden">...</svg> <svg class="open-visible">...</svg> </summary>
 <ul> <li><a>...</a></li> <li><a>...</a></li> ... </ul>
 </details>
37. details[open] .open-hidden { display: none; } details:not([open]) .open-visible { display: none; }
38. Responsive Table
43. @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: flex; } .table-component tbody td:not(.actions):before { content: attr(title); flex: 0 1 35%; display: block; white-space: nowrap; } }
44. @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: flex; } .table-component tbody td:not(.actions):before { content: attr(title); flex: 0 1 35%; display: block; white-space: nowrap; } }
45. @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: flex; } .table-component tbody td:not(.actions):before { content: attr(title); flex: 0 1 35%; display: block; white-space: nowrap; } }
46. @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: flex; } .table-component tbody td:not(.actions):before { content: attr(title); flex: 0 1 35%; display: block; white-space: nowrap; } }
47. <input type="date">
51. 1 Accessible 2 Mobile friendly 3 All batteries include ➡ No extra code 5 Single date, no range 5 Style doesn't match our site <input type="date">
52. <dialog>
55. 1 Accessible 2 Build-in backdrop 3 Auto handling of forms (example: auto-focus) 6 Stops scrolling of back page 7 Auto handle of ESC 8 Style as you wish 5 JavaScript to trigger the modal version 5 JavaScript need to close dialog when click backdrop <dialog>
56. 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(); } }, });
57. <span title="tooltip">
62. https://chat.openai.com/share/2d4606ad-c764-4db8-9ed5-158e90e8e391
63. /* Tooltip base styles for any element with a title attribute */ [title] { position: relative; cursor: pointer; display: inline-block; } /* Hidden before hover */ [title]::before, [title]::after { visibility: hidden; opacity: 0; pointer-events: none; } /* Tooltip text styling */ [title]::after { content: attr(title); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(-5px); white-space: nowrap; z-index: 10; padding: 8px; border-radius: 4px; background-color: black; color: white; text-align: center; font-size: 14px; line-height: 1.2; transition: opacity 0.3s, visibility 0.3s; } /* Tooltip arrow */ [title]::before { content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(5px); border-width: 5px; border-style: solid; border-color: black transparent transparent transparent; transition: opacity 0.3s, visibility 0.3s; } /* Show tooltip on hover */ [title]:hover::before, [title]:hover::after { visibility: visible; opacity: 1; }
64. /* Tooltip base styles for any element with a title attribute */ [title] { position: relative; cursor: pointer; display: inline-block; } /* Hidden before hover */ [title]::before, [title]::after { visibility: hidden; opacity: 0; pointer-events: none; } /* Tooltip text styling */ [title]::after { content: attr(title); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(-5px); white-space: nowrap; z-index: 10; padding: 8px; border-radius: 4px; background-color: black; color: white; text-align: center; font-size: 14px; line-height: 1.2; transition: opacity 0.3s, visibility 0.3s; } /* Tooltip arrow */ [title]::before { content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(5px); border-width: 5px; border-style: solid; border-color: black transparent transparent transparent; transition: opacity 0.3s, visibility 0.3s; } /* Show tooltip on hover */ [title]:hover::before, [title]:hover::after { visibility: visible; opacity: 1; } ... and the code fits on a slide 9
66. /* Tooltip base styles for any element with a title attribute */ [title] { position: relative; cursor: pointer; display: inline-block; } /* Hidden before hover */ [title]::before, [title]::after { visibility: hidden; opacity: 0; pointer-events: none; } /* Tooltip text styling */ [title]::after { content: attr(title); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(-5px); white-space: nowrap; z-index: 10; padding: 8px; border-radius: 4px; background-color: black; color: white; text-align: center; font-size: 14px; line-height: 1.2; transition: opacity 0.3s, visibility 0.3s; } /* Tooltip arrow */ [title]::before { content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(5px); border-width: 5px; border-style: solid; border-color: black transparent transparent transparent; transition: opacity 0.3s, visibility 0.3s; } /* Show tooltip on hover */ [title]:hover::before, [title]:hover::after { visibility: visible; opacity: 1; }
67. /* Tooltip base styles for any element with a title attribute */ [title] { position: relative; cursor: pointer; display: inline-block; } /* Hidden before hover */ [title]::before, [title]::after { visibility: hidden; opacity: 0; pointer-events: none; } /* Tooltip text styling */ [title]::after { content: attr(title); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(-5px);
68. /* Tooltip base styles for any element with a title attribute */ [title] { position: relative; cursor: pointer; display: inline-block; } /* Hidden before hover */ [title]::before, [title]::after { visibility: hidden; opacity: 0; pointer-events: none; } /* Tooltip text styling */ [title]::after { content: attr(title); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(-5px); white-space: nowrap;
69. pointer-events: none; } /* Tooltip text styling */ [title]::after { content: attr(title); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(-5px); white-space: nowrap; z-index: 10; padding: 8px; border-radius: 4px; background-color: black; color: white; text-align: center; font-size: 14px; line-height: 1.2; transition: opacity 0.3s, visibility 0.3s; } /* Tooltip arrow */ [title]::before {
70. line-height: 1.2; transition: opacity 0.3s, visibility 0.3s; } /* Tooltip arrow */ [title]::before { content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(5px); border-width: 5px; border-style: solid; border-color: black transparent transparent transparent; transition: opacity 0.3s, visibility 0.3s; } /* Show tooltip on hover */ [title]:hover::before, [title]:hover::after { visibility: visible; opacity: 1; }
72. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_container_queries
76. https://open-ui.org
77. https://open-ui.org/components/selectlist
80. ... in 2024/2025 :
85. https://rstankov.com/appearances