Hidden Gems in Code Reviews

Code reviews are one of the most helpful instruments that engineers have in their toolbox to enable teams to ship reliable and sustainable features. In her talk, Olena shares tips and tricks that she learned during her 4 years at Webflow that help teams accomplish even more through code reviews.

Transcript

1. Hidden Gems
   in Code Reviews
   Olena Sovyn
   

   View Slide

2. ➔ 󰑒 & 󰏅
   ➔ 9 years in software industry
   ➔ 4,5 years with Webflow
   ➔ Tech lead & Staff SE
   ➔ 1000+ PRs, 1000+ CRs
   

   View Slide

3. doing better job with
   code reviews matter?
   Why
   

   View Slide

4. It is a WIN - WIN - WIN
   enable folks to take more
   responsibilities, rather than
   gatekeeping complex changes
   PR author(s) Company
   Growing your career as
   you’ll be able to work on
   larger context
   You
   enable sustainable
   company growth
   󰩽 󰡰 ©
   

   View Slide

5. Cycle of typical PR
   PR ready for
   code review
   Code review
   

   View Slide

6. PR ready for
   code review
   Code review
   🔍 Self-review
   

   View Slide

7. Why
   Where
   

   View Slide

8. PR ready for
   code review
   Code review
   🔍 Self-review
   

   View Slide

9. PR ready for
   code review
   Code review
   🔍 Self-review
   󰡲 Choosing
   CR buddy
   

   View Slide

10. 🏻 ♀
    🏼
    
    Rose Mark Boris
    - Senior Software Engineer
    - 10+ years of experience
    - 5+ years working at the company
    - Junior Software Engineer
    - less 1 year of experience
    - 3+ years working at the company
    - Software Engineer
    - 5 years of experience
    - second week at the company
    

    View Slide

11. Rose Mark Boris
    - Senior Software Engineer
    - 10+ years of experience
    - 5+ years working at the company
    - Junior Software Engineer
    - less 1 year of experience
    - 3+ years working at the company
    - Software Engineer
    - 5 years of experience
    - second week at the company
    

    View Slide

12. Rose Mark Boris
    - Senior Software Engineer
    - 10+ years of experience
    - 5+ years working at the company
    - Junior Software Engineer
    - less 1 year of experience
    - 3+ years working at the company
    - Software Engineer
    - 5 years of experience
    - second week at the company
    

    View Slide

13. Hi! I’ve added you as one of the code reviewers
    for PR12345. Please, feel free to ask any
    questions about changes that you’ll see there
    

    View Slide

14. Use code reviews as
    a way to share
    general or domain specific knowledge
    

    View Slide

15. PR ready for
    code review
    Code review
    🔍 Self-review
    󰡲 Choosing
    CR buddy
    

    View Slide

16. PR ready for
    code review
    Code review
    🔍 Self-review
    󰡲 Choosing
    CR buddy
    🦄 Reading code first time
    

    View Slide

17. Reading this code for the
    first time
    is something
    that you never will be able to do again
    🦄
    

    View Slide

18. 1. Take notes
    2. Ask yourself questions:
    a. how easy code is to understand? (for example,
    variable names, code structure, code
    organisation)
    b. is it obvious what code is doing?
    3. Your first impression is an invaluable signal
    How to read code first time:
    

    View Slide

19. PR ready for
    code review
    Code review
    🔍 Self-review
    󰡲 Choosing
    CR buddy
    🦄 Reading code first time
    

    View Slide

20. PR ready for
    code review
    Code review
    🔍 Self-review
    󰡲 Choosing
    CR buddy
    🦄 Reading code first time
    🤿 Deep dive
    

    View Slide

21. 🛠 Change request
    👍 LGTM
    

    View Slide

22. 🗣 Sharing feedback
    

    View Slide

23. ● if not sure about anything ask rather than state
    ● review changes, not a person
    ● be as specific as possible
    Talk from the place of respect
    

    View Slide

24. ● if not sure about anything ask rather than state
    ● review changes, not a person
    ● be as specific as possible
    Talk from the place of respect
    

    View Slide

25. provides
    information why
    changes are
    needed generous with
    examples
    

    View Slide

26. Make sure that CR comments include
    everything needed
    

    View Slide

27. View Slide

28. Clearly indicate expected outcome
    Read more about this https://twitter.com/swyx/status/1235678969162338304
    🔴 [Change request]
    🟨 [Suggestion]
    💚 [Appreciation]
    

    View Slide

29. Praise & positivity☺
    

    View Slide

30. PR ready for
    code review
    Code review
    🔍 Self-review
    󰡲 Choosing
    CR buddy
    🦄 Reading code first time
    🤿 Deep dive
    

    View Slide

31. PR ready for
    code review
    Code review
    🔍 Self-review
    󰡲 Choosing
    CR buddy
    🦄 Reading code first time
    🤿 Deep dive
    🔮 THE END
    

    View Slide

32. Praise & positivity☺
    

    View Slide

33. PR ready for
    code review
    Code review
    🔍 Self-review
    󰡲 Choosing
    CR buddy
    🦄 Reading code first time
    🤿 Deep dive
    🔮 Bigger picture
    

    View Slide

34. 🙂
    

    View Slide

35. 🤩
    

    View Slide

36. PR ready for
    code review
    Code review
    🔍 Self-review
    󰡲 Choosing
    CR buddy
    🦄 Reading code first time
    🤿 Deep dive
    🔮 Bigger picture
    

    View Slide

37. PR ready for
    code review
    Code review
    🔍 Self-review
    󰡲 Choosing
    CR buddy
    🦄 Reading code first time
    🤿 Deep dive
    🔮 Bigger picture
    💎
    ?
    💎
    ?
    💎
    ?
    💎
    ?
    💎
    ?
    

    View Slide

38. Thank you!
    @frontendgirl from @webflow
    

    View Slide