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.

Transcript

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
13. Fonts font-family: "Courier New"; font-size: 14px; line-height: 16px;
16. Fonts font-family: "Ubuntu Mono"; font-size: 21px; line-height: 38px;
18. More space = ?
19. More space = more things to see
20. More things to see = more cogni/ve load
21. Code folding
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
26. Colours
29. Colours Studies 3 Contrast !== brightness 3 E"enne Grandjean: Ergonomic Aspects of Visual Display Terminals
31. Aesthe&cs Fonts and spacing Code folding Colours
32. Structure
33. Curly brackets
44. Kevlin Henney
45. Visual Pa)erns
46. Self documen,ng code
49. Naming
50. Go naming 4 4 h"ps://speakerdeck.com/tpryan/go-for-php-developers
53. An old prac+ce
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