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
6. !
7. Radoslav Stankov @rstankov
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
16. 1. Focus
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
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
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
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
56. Know your craft
59. First principles and fundaments
60. First principles and fundaments TypeScript Node Browser React Next JavaScript
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
80. Alfred + Dash
83. https://blog.rstankov.com/my-alfred-setup/
84. ...more tools
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
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
106. Thanks :
107. https://speakerdeck.com/rstankov