Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

    View full-size slide

  2. Radoslav Stankov
    @rstankov

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  5. “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 full-size slide

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

    View full-size slide

  7. "
    you # your $

    View full-size slide

  8. What's next %

    View full-size slide

  9. Focused Task

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. Manage your energy

    View full-size slide

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

    View full-size slide

  14. “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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  19. Capture knowledge

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  22. /Split task into parts

    View full-size slide

  23. done
    todo
    won't do
    in progress

    View full-size slide

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

    View full-size slide

  25. 2. Effective

    View full-size slide

  26. Know your craft

    View full-size slide

  27. First principles and fundaments

    View full-size slide

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

    View full-size slide

  29. 0 Read the source code

    View full-size slide

  30. ⚛ 2 React Hooks

    View full-size slide

  31. 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 full-size slide

  32. 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 full-size slide

  33. 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 full-size slide

  34. 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 full-size slide

  35. 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 full-size slide

  36. 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 full-size slide

  37. 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 full-size slide

  38. Know your tools

    View full-size slide

  39. 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 full-size slide

  40. Alfred + Dash

    View full-size slide

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

    View full-size slide

  42. ...more tools

    View full-size slide

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

    View full-size slide

  44. : Personal Goals
    7 Work Goals
    ; Baseline

    View full-size slide

  45. : 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 full-size slide

  46. A Yearly
    B Monthly

    C Weekly

    D Daily

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  49. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  53. https://speakerdeck.com/rstankov

    View full-size slide