How to Be Effective Javascript Developer

Process is automatic decisions for trivial questions and framework for making decisions for all other questions.

Transcript

1. The effective
   JavaScript
   developer
   Radoslav Stankov 12/11/2022
   

   View Slide

2. View Slide

3. View Slide

4. View Slide

5. View Slide

6. !
   

   View Slide

7. Radoslav Stankov
   @rstankov
   

   View Slide

8. View Slide

9. View Slide

10. View Slide

11. View Slide

12. “It is better to be a good programmer with great
    habits, than a great programmer.”
    - Kent Beck
    

    View Slide

13. “Process is automatic decisions for trivial
    questions and framework for making decisions
    for all other questions.”
    - Rado
    What is process
    

    View Slide

14. View Slide

15. View Slide

16. 1. Focus
    

    View Slide

17. View Slide

18. View Slide

19. Flow
    

    View Slide

20. “Flow state, also known as being in the zone,
    is the mental state of operation in which a
    person performing an activity is fully immersed
    in a feeling of energized focus, full involvement,
    and enjoyment in the process of the activity.”
    - WikipediA
    Flow
    

    View Slide

21. View Slide

22. “Task switching is an executive function that
    involves the ability to shift attention between
    one task and another unconsciously.”
    - WikipediA
    Task switching
    

    View Slide

23. "
    you # your $
    

    View Slide

24. What's next %
    

    View Slide

25. Todoist
    

    View Slide

26. Focused Task
    

    View Slide

27. Focused Task
    https://github.com/RStankov/FocusedTask
    

    View Slide

28. & Eliminate distractions
    ' block websites
    ( reduce app notifications
    ) do not disturb mode
    

    View Slide

29. Manage your energy
    

    View Slide

30. “In cognitive psychology, cognitive load refers
    to the used amount of working
    memory resources. ”
    - WikipediA
    Cognitive load
    

    View Slide

31. “Ego depletion refers to the idea that self-
    control or willpower draws upon a limited pool
    of mental resources that can be used up.”
    - WikipediA
    Ego depletion
    

    View Slide

32. View Slide

33. View Slide

34. View Slide

35. View Slide

36. View Slide

37. View Slide

38. “Process is automatic decisions for trivial
    questions and framework for making decisions
    for all other questions.”
    - Rado
    What is process
    

    View Slide

39. “Process is automatic decisions for trivial
    questions and framework for making decisions
    for all other questions.”
    - Rado
    What is process
    

    View Slide

40. * Routine
    ⏲ Reminders
    , Checklist
    - Templates
    . Automations
    

    View Slide

41. Prepare the clothes you are going to wear
    tomorrow the evening before.
    /Life Hack
    

    View Slide

42. Capture knowledge
    

    View Slide

43. “Our head is for creating ideas, not storing them”
    - David Allen, author GTD
    

    View Slide

44. Rado's Head Bear Todoist
    Idea / Store Next action
    

    View Slide

45. View Slide

46. View Slide

47. View Slide

48. View Slide

49. View Slide

50. View Slide

51. /Split task into parts
    

    View Slide

52. done
    todo
    won't do
    in progress
    

    View Slide

53. https://blog.rstankov.com/how-i-plan-and-execute-features/
    

    View Slide

54. 2. Effective
    

    View Slide

55. View Slide

56. Know your craft
    

    View Slide

57. View Slide

58. View Slide

59. First principles and fundaments
    

    View Slide

60. First principles and fundaments
    TypeScript
    Node
    Browser
    React
    Next
    JavaScript
    

    View Slide

61. View Slide

62. 0 Read the source code
    

    View Slide

63. ⚛ 2 React Hooks
    

    View Slide

64. export function useEffect(
    create: () => (() => void) | void,
    deps: Array | void | null,
    ): void {
    const dispatcher = resolveDispatcher();
    return dispatcher.useEffect(create, deps);
    }
    https://github.com/facebook/react/blob/main/packages/react/src/ReactHooks.js
    

    View Slide

65. https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberHooks.new.js
    const HooksDispatcherOnMount: Dispatcher = {
    // ...
    useRef: mountRef,
    // ...
    };
    const HooksDispatcherOnUpdate: Dispatcher = {
    // ...
    useRef: updateRef,
    // ...
    };
    const HooksDispatcherOnRerender: Dispatcher = {
    // ...
    useRef: updateRef,
    // ...
    };
    const ContextOnlyDispatcher: Dispatcher = {
    // ...
    useRef: throwInvalidHookError,
    // ...
    };
    

    View Slide

66. https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberHooks.new.js
    "
    const HooksDispatcherOnMount: Dispatcher = {
    // ...
    useRef: mountRef,
    // ...
    };
    const HooksDispatcherOnUpdate: Dispatcher = {
    // ...
    useRef: updateRef,
    // ...
    };
    const HooksDispatcherOnRerender: Dispatcher = {
    // ...
    useRef: updateRef,
    // ...
    };
    const ContextOnlyDispatcher: Dispatcher = {
    // ...
    useRef: throwInvalidHookError,
    // ...
    };
    

    View Slide

67. https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberHooks.new.js
    function updateRef(initialValue: T): {current: T} {
    const hook = updateWorkInProgressHook();
    return hook.memoizedState;
    }
    

    View Slide

68. function updateWorkInProgressHook(): Hook {
    // This function is used both for updates and for re-renders triggered by a
    // render phase update. It assumes there is either a current hook we can
    // clone, or a work-in-progress hook from a previous render pass that we can
    // use as a base. When we reach the end of the base list, we must switch to
    // the dispatcher used for mounts.
    let nextCurrentHook: null | Hook;
    if (currentHook === null) {
    const current = currentlyRenderingFiber.alternate;
    if (current !== null) {
    nextCurrentHook = current.memoizedState;
    } else {
    nextCurrentHook = null;
    }
    } else {
    nextCurrentHook = currentHook.next;
    }
    let nextWorkInProgressHook: null | Hook;
    if (workInProgressHook === null) {
    nextWorkInProgressHook = currentlyRenderingFiber.memoizedState;
    } else {
    nextWorkInProgressHook = workInProgressHook.next;
    }
    if (nextWorkInProgressHook !== null) {
    // There's already a work-in-progress. Reuse it.
    

    View Slide

69. function updateWorkInProgressHook(): Hook {
    // This function is used both for updates and for re-renders triggered by a
    // render phase update. It assumes there is either a current hook we can
    // clone, or a work-in-progress hook from a previous render pass that we can
    // use as a base. When we reach the end of the base list, we must switch to
    // the dispatcher used for mounts.
    let nextCurrentHook: null | Hook;
    if (currentHook === null) {
    const current = currentlyRenderingFiber.alternate;
    if (current !== null) {
    nextCurrentHook = current.memoizedState;
    } else {
    nextCurrentHook = null;
    }
    } else {
    nextCurrentHook = currentHook.next;
    }
    let nextWorkInProgressHook: null | Hook;
    if (workInProgressHook === null) {
    nextWorkInProgressHook = currentlyRenderingFiber.memoizedState;
    } else {
    nextWorkInProgressHook = workInProgressHook.next;
    }
    if (nextWorkInProgressHook !== null) {
    // There's already a work-in-progress. Reuse it.
    

    View Slide

70. function updateWorkInProgressHook(): Hook {
    // This function is used both for updates and for re-renders triggered by a
    // render phase update. It assumes there is either a current hook we can
    // clone, or a work-in-progress hook from a previous render pass that we can
    // use as a base. When we reach the end of the base list, we must switch to
    // the dispatcher used for mounts.
    let nextCurrentHook: null | Hook;
    if (currentHook === null) {
    const current = currentlyRenderingFiber.alternate;
    if (current !== null) {
    nextCurrentHook = current.memoizedState;
    } else {
    nextCurrentHook = null;
    }
    } else {
    nextCurrentHook = currentHook.next;
    }
    let nextWorkInProgressHook: null | Hook;
    if (workInProgressHook === null) {
    nextWorkInProgressHook = currentlyRenderingFiber.memoizedState;
    } else {
    nextWorkInProgressHook = workInProgressHook.next;
    }
    if (nextWorkInProgressHook !== null) {
    // There's already a work-in-progress. Reuse it.
    

    View Slide

71. Know your tools
    

    View Slide

72. 3 Run a test
    0 Search in codebase
    ✈ Jump across files
    5 Refactoring - moving code around
    6 Search documentation
    7 Writing new code
    ⛩ Common operations
    

    View Slide

73. View Slide

74. View Slide

75. View Slide

76. View Slide

77. View Slide

78. View Slide

79. View Slide

80. Alfred + Dash
    

    View Slide

81. View Slide

82. View Slide

83. https://blog.rstankov.com/my-alfred-setup/
    

    View Slide

84. ...more tools
    

    View Slide

85. View Slide

86. View Slide

87. View Slide

88. View Slide

89. 3. Goals
    

    View Slide

90. “Reading is good, action is better.”
    - Eric Ries ( Lean Startup)
    

    View Slide

91. : Personal Goals
    7 Work Goals
    ; Baseline
    

    View Slide

92. : Personal Goals
    ✈ Travel to Japan <
    3 Weight 90kg
    7 Work Goals
    = Ship claiming of Product Hub
    6 Learn PostgreSQL internals
    ; Baseline
    > 10k steps per day
    ? Train 3 days a week
    @ Sleep 8 hours a night
    

    View Slide

93. A Yearly
    B Monthly
    

    C Weekly
    

    D Daily
    

    View Slide

94. E Top priority F
    G Second priority H
    I Third priority J
    ⏺ Something else
    ⏺ Something else
    ⏺ Something else
    F Priority
    

    View Slide

95. E Top priority F
    G Second priority H
    I Third priority J
    ⏺ Something else
    ⏺ Something else
    ⏺ Something else
    F Priority
    

    View Slide

96. View Slide

97. E Status of goals
    G What went well?
    I What could have been done better?
    L What are the goals and plans for next week?
    M Weekly Review
    

    View Slide

98. Books
    

    View Slide

99. The
    Pragmatic
    Programmer
    Getting
    Things Done
    The
    Checklist
    Manifesto
    Soft Skills Peak
    Performance
    

    View Slide

100. Recap
     

     View Slide

101. “Every productivity system stops working
     eventually and there’s nothing you can do about it”
     - Someone on the internet
     

     View Slide

102. “Think about your own workflows and improve
     them one step of the time/”
     - Rado
     

     View Slide

103. View Slide

104. View Slide

105. View Slide

106. Thanks :
     

     View Slide

107. https://speakerdeck.com/rstankov
     

     View Slide