$30 off During Our Annual Pro Sale. View Details »

How to Be Effective Javascript Developer

How to Be Effective Javascript Developer

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

Radoslav Stankov

November 09, 2022
Tweet

More Decks by Radoslav Stankov

Other Decks in Technology

Transcript

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

  2. None
  3. None
  4. None
  5. None
  6. !

  7. Radoslav Stankov @rstankov

  8. None
  9. None
  10. None
  11. None
  12. “It is better to be a good programmer with great

    habits, than a great programmer.” - Kent Beck
  13. “Process is automatic decisions for trivial questions and framework for

    making decisions for all other questions.” - Rado What is process
  14. None
  15. None
  16. 1. Focus

  17. None
  18. None
  19. Flow

  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
  21. None
  22. “Task switching is an executive function that involves the ability

    to shift attention between one task and another unconsciously.” - WikipediA Task switching
  23. " you # your $

  24. What's next %

  25. Todoist

  26. Focused Task

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

  28. & Eliminate distractions ' block websites ( reduce app notifications

    ) do not disturb mode
  29. Manage your energy

  30. “In cognitive psychology, cognitive load refers to the used amount

    of working memory resources. ” - WikipediA Cognitive load
  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
  32. None
  33. None
  34. None
  35. None
  36. None
  37. None
  38. “Process is automatic decisions for trivial questions and framework for

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

    making decisions for all other questions.” - Rado What is process
  40. * Routine ⏲ Reminders , Checklist - Templates . Automations

  41. Prepare the clothes you are going to wear tomorrow the

    evening before. /Life Hack
  42. Capture knowledge

  43. “Our head is for creating ideas, not storing them” -

    David Allen, author GTD
  44. Rado's Head Bear Todoist Idea / Store Next action

  45. None
  46. None
  47. None
  48. None
  49. None
  50. None
  51. /Split task into parts

  52. done todo won't do in progress

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

  54. 2. Effective

  55. None
  56. Know your craft

  57. None
  58. None
  59. First principles and fundaments

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

  61. None
  62. 0 Read the source code

  63. ⚛ 2 React Hooks

  64. export function useEffect( create: () => (() => void) |

    void, deps: Array<mixed> | void | null, ): void { const dispatcher = resolveDispatcher(); return dispatcher.useEffect(create, deps); } https://github.com/facebook/react/blob/main/packages/react/src/ReactHooks.js
  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, // ... };
  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, // ... };
  67. https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberHooks.new.js function updateRef<T>(initialValue: T): {current: T} { const hook =

    updateWorkInProgressHook(); return hook.memoizedState; }
  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.
  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.
  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.
  71. Know your tools

  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
  73. None
  74. None
  75. None
  76. None
  77. 9

  78. 9

  79. None
  80. Alfred + Dash

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

  84. ...more tools

  85. None
  86. None
  87. None
  88. None
  89. 3. Goals

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

    Lean Startup)
  91. : Personal Goals 7 Work Goals ; Baseline

  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
  93. A Yearly B Monthly 
 C Weekly 
 D Daily

  94. E Top priority F G Second priority H I Third

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

    priority J ⏺ Something else ⏺ Something else ⏺ Something else F Priority
  96. None
  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
  98. Books

  99. The Pragmatic Programmer Getting Things Done The Checklist Manifesto Soft

    Skills Peak Performance
  100. Recap

  101. “Every productivity system stops working eventually and there’s nothing you

    can do about it” - Someone on the internet
  102. “Think about your own workflows and improve them one step

    of the time/” - Rado
  103. None
  104. None
  105. None
  106. Thanks :

  107. https://speakerdeck.com/rstankov