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

The visual perception of code

The visual perception of code

How do we read code? Are there things we can do to make that reading more easy? I recently gave a talk about this exact topic.

In this talk, I give six pointers to improve this visual perception, to make it easier to read your own code: fonts, code folding, colours, patterns, documentation and names.

C420fe596268ab2a30ffd3e8bda7b62d?s=128

Brent Roose

August 30, 2018
Tweet

Transcript

  1. None
  2. Visual percep,on of code

  3. Opinionated and personal Controversial Out of your comfort zone

  4. Studies and facts Common sense and reasoning

  5. The problem:

  6. Reading vs. wri.ng

  7. Reading requires A"en%on "human memory space"

  8. "Human memory space" = Cogni3ve load 1 1 s"tcher.io/cogni"ve-load

  9. Improve your code:

  10. Aesthe&cs

  11. Fonts

  12. None
  13. Fonts font-family: "Courier New"; font-size: 14px; line-height: 16px;

  14. None
  15. None
  16. Fonts font-family: "Ubuntu Mono"; font-size: 21px; line-height: 38px;

  17. None
  18. More space = ?

  19. More space = more things to see

  20. More things to see = more cogni/ve load

  21. Code folding

  22. None
  23. Method signatures close by Implementa)on hidden Colour coded structure of

    classes
  24. Code folding requires key bindings 2 2 s"tcher.io/key-binding

  25. None
  26. Colours

  27. None
  28. None
  29. Colours Studies 3 Contrast !== brightness 3 E"enne Grandjean: Ergonomic

    Aspects of Visual Display Terminals
  30. None
  31. Aesthe&cs Fonts and spacing Code folding Colours

  32. Structure

  33. Curly brackets

  34. None
  35. None
  36. None
  37. None
  38. None
  39. None
  40. None
  41. None
  42. None
  43. None
  44. Kevlin Henney

  45. Visual Pa)erns

  46. Self documen,ng code

  47. None
  48. None
  49. Naming

  50. Go naming 4 4 h"ps://speakerdeck.com/tpryan/go-for-php-developers

  51. None
  52. None
  53. An old prac+ce

  54. None
  55. None
  56. None
  57. UserCreated Event, Mail or No/fica/on?

  58. UserCreatedEvent UserCreatedMail UserCreatedNotification

  59. CreateUser Command, HTTP request or Job?

  60. CreateUserCommand CreateUserRequest CreateUserJob

  61. Structure Curly brackets DocBlocks Names

  62. What about your code? #cleancode - @brendt_gd

  63. Thanks! @brendt_gd s"tcher.io/presenta"ons

  64. None