Best JavaScript is No Javascript

Transcript

1. Best Javascript Is No
   Javascript
   Radoslav Stankov
   

   View Slide

2. !
   

   View Slide

3. I ❤
   

   View Slide

4. I ❤
   

   View Slide

5. I ❤
   

   View Slide

6. View Slide

7. View Slide

8. Radoslav Stankov
   @rstankov rstankov.com
   

   View Slide

9. View Slide

10. Product Hunt Architecture
    

    View Slide

11. View Slide

12. TypeScript
    Migration
    

    View Slide

13. Next.js
    Migration
    

    View Slide

14. View Slide

15. # Side project
    

    View Slide

16. View Slide

17. Angry Building Architecture $
    % Ruby on Rails
    & No JavaScript
    ' No custom CSS, use Tailwind
    ( Extensive e2e tests
    ) Focus on domain
    

    View Slide

18. View Slide

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)
    

    View Slide

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)
    

    View Slide

21. HTML CSS JavaScript
    

    View Slide

22. Plain HTML/CSS
    Plain HTML/CSS
    Everything with JS
    

    View Slide

23. View Slide

24. :hover
    

    View Slide

25. View Slide

26. function MyButton() {
    const [isHovered, setIsHovered] = useState(false);
    const className = isHovered ? 'button button-hover' : 'button';
    const onMouseEnter = () => setIsHovered(true);
    const onMouseLeave = () => setIsHovered(false);
    return (
    className={className}
    onMouseEnter={onMouseEnter}
    onMouseLeave={onMouseLeave}>Button
    );
    }
    

    View Slide

27. View Slide

28. 
    

    View Slide

29. View Slide

30. 
    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

31. View Slide

32. View Slide

33. View Slide

34. View Slide

35. 

    
    ...
    ...
    

    
    ...
    ...
    ...
    

    
    

    View Slide

36. 

    
    ...
    ...
    

    
    ...
    ...
    ...
    

    
    

    View Slide

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

    View Slide

38. Responsive Table
    

    View Slide

39. View Slide

40. View Slide

41. View Slide

42. View Slide

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;
    }
    }
    

    View Slide

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;
    }
    }
    

    View Slide

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;
    }
    }
    

    View Slide

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;
    }
    }
    

    View Slide

47. 
    

    View Slide

48. View Slide

49. View Slide

50. View Slide

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
    
    

    View Slide

52. 
    

    View Slide

53. View Slide

54. View Slide

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
    
    

    View Slide

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();
    }
    },
    });
    

    View Slide

57. 
    

    View Slide

58. View Slide

59. View Slide

60. View Slide

61. View Slide

62. https://chat.openai.com/share/2d4606ad-c764-4db8-9ed5-158e90e8e391
    

    View Slide

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;
    }
    

    View Slide

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
    

    View Slide

65. View Slide

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;
    }
    

    View Slide

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);
    

    View Slide

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;
    

    View Slide

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 {
    

    View Slide

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;
    }
    

    View Slide

71. View Slide

72. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_container_queries
    

    View Slide

73. View Slide

74. View Slide

75. View Slide

76. https://open-ui.org
    

    View Slide

77. https://open-ui.org/components/selectlist
    

    View Slide

78. View Slide

79. View Slide

80. ... in 2024/2025
    :
    

    View Slide

81. View Slide

82. View Slide

83. View Slide

84. View Slide

85. https://rstankov.com/appearances
    

    View Slide