Minimize cognitive overload and cognitive dissonance while programming by using the right programming font.

1. Minimizing cognitive load
in Perl source code parsing
javier@rodriguez.org.mx
Perl Mongers 20170831
Massachusetts General Hospital and Draper Labs

7. https://http.cat/403

10. A morning together

11. A morning together

15. http://www.pxleyes.com/profile/Sarah06/

16. – Master Yoda
“Disappointment is the path to the dark side.”

17. – Master Yoda
“Disappointment leads to anger. Anger leads to
hate. Hate leads to suffering. Suffering leads to
low productivity.”

19. Times New Roman
lO==10

20. Times New Roman
lO==10 lO==10
Courier

21. Courier
lO==10 lO==10
Inconsolata

22. Cognitive Dissonance
• Psychological conflict resulting from incongruous beliefs
and attitudes held simultaneously
https://www.merriam-webster.com/dictionary/cognitive%20dissonance

23. http://www.lowing.org/fonts/

29. http://hivelogic.com/articles/top-10-programming-fonts/

30. Top 10 Programming Fonts
• Courier
• Andale Mono
• Monaco
• Profont
• Monofur
• Proggy
• Droid Sans Mono
• Deja Vu Sans Mono
• Consolas
• Inconsolata

31. https://nerdfonts.com/

33. NerdFonts.com
• 3270
• AnonymousPro
• AurulentSansMono
• BitstreamVeraSansMono
• CodeNewRoman
• DejaVuSansMono
• DroidSansMono
• FantasqueSansMono
• FiraCode
• FiraMono
• Gohu
• Hack
• Hasklig
• HeavyData
• Hermit
• Inconsolata
• InconsolataGo
• Iosevka
• Lekton
• LiberationMono
• Meslo
• Monofur
• Monoid
• Mononoki
• MPlus
• ProFont
• ProggyClean
• RobotoMono
• ShareTechMono
• SourceCodePro
• SpaceMono
• Terminus
• Ubuntu
• UbuntuMono

34. =>

35. =>

36. => ≥

37. =>

38. =>

39. =>
?
≥ ?
?

40. Ligatures

53. ff fb fl fh fi ffi ffl ffh

54. http://ilovetypography.com/2007/09/09/decline-and-fall-of-the-ligature/

55. =>
=>

56. me
Inconsolata

57. Use a coding font with ligatures
1. Pick a font
2. Pick an editor
3. Enable ligatures if necessary

58. Coding fonts with ligatures
• Fira Code
https://github.com/tonsky/FiraCode
• Monoid
https://github.com/larsenwork/monoid
• Hasklig
https://github.com/i-tu/Hasklig
• Iosevka
https://github.com/be5invis/Iosevka
• Pragmata Pro (Commercial)
https://www.fsd.it/shop/fonts/pragmatapro/

59. Editors with support for Ligatures
• Android Studio
• Anjuta
• AppCode
• Atom 1.1 or
newer
• BBEdit/
TextWrangler
• Brackets
• Chocolat
• CLion
• Cloud9
• Coda 2
• CodeLite
• Eclipse
• Geany
• gEdit / Pluma
• GNOME Builder
• IntelliJ IDEA
• Kate, KWrite
• Komodo
• Leafpad
• LibreOffice
• LightTable
• LINQPad
• MacVim
• Mancy
• Meld
• Mousepad
• NetBeans
• Notepad
• Notepad++
• PhpStorm
• PyCharm
• QtCreator
• Rider
• RStudio
• RubyMine
• Scratch
• Spyder IDE
• TextAdept
• TextEdit
• TextMate 2
• VimR
• Visual Studio
2015
• Visual Studio
2017
• Visual Studio
Code
• WebStorm
• Xamarin Studio/
Monodevelop
• Xcode
https://github.com/tonsky/FiraCode#editor-support

60. Editors WITHOUT support for Ligatures
• Arduino IDE
• Adobe Dreamweaver
• Delphi IDE
• Eclipse (Win)
• Standalone Emacs
• gVim
• IDLE
• KDevelop 4
• Monkey Studio IDE
• SublimeText
https://github.com/tonsky/FiraCode#editor-support

61. Enable ligatures
• IntelliJ et. al.
• Enable in Settings → Editor → Colors & Fonts → Font → Enable Font Ligatures
• Select Fira Code as "Primary font" under
Settings → Editor → Colors & Fonts → Font → Editor Font
• ~/.gvimrc
set macligatures
set guifont=Fira Code:h12
• Atom
atom-text-editor {
text-rendering: optimizeLegibility;
}
• BBEdit
$ defaults write com.barebones.bbedit "EnableFontLigatures_Fira Code" -bool YES
https://github.com/tonsky/FiraCode#editor-support

62. https://github.com/tonsky/FiraCode

63. # apt-get install fonts-firacode
!

64. $ brew tap caskroom/fonts
$ brew cask install font-fira-code


65. C:> choco install firacode
#

66. Example (Fira Mono)
sub index($c) {
return $c->render();
}
sub view($c) {
my $id = $c->stash('id');
my $purchase = $c->customer->purchases->search({id => $id})->single;
die ("Invalid purchase") unless $purchase->customer->id eq $c->customer->id;
$c->stash(purchase => $purchase);
return $c->render();
}

67. Example (Fira Code)
sub index($c) {
return $c ->render();
}
sub view($c) {
my $id = $c ->stash('id');
my $purchase = $c ->customer ->purchases ->search({id => $id}) ->single;
die ("Invalid purchase") unless $purchase ->customer ->id eq $c ->customer ->id;
$c ->stash(purchase => $purchase);
return $c ->render();
}

68. Example (Fira Mono)
sub index($c) {
return $c->render();
}
sub view($c) {
my $id = $c->stash('id');
my $purchase = $c->customer->purchases->search({id => $id})->single;
die ("Invalid purchase") unless $purchase->customer->id eq $c->customer->id;
$c->stash(purchase => $purchase);
return $c->render();
}

69. Compare and contrast
sub index($c) {
return $c->render();
}
sub view($c) {
my $id = $c->stash('id');
my $purchase = $c->customer->purchases->search({id => $id})->single;
die ("Invalid purchase") unless $purchase->customer->id eq $c->customer->id;
$c->stash(purchase => $purchase);
return $c->render();
}

70. Compare and contrast
my $purchase = $c->customer->purchases->search({id => $id})->single;

71. Compare and contrast
my $purchase = $c->customer->purchases->search({id => $id})->single;

72. Compare and contrast
my $purchase = $c->customer->purchases->search({id => $id})->single;

73. Compare and contrast
my $purchase = $c ->customer ->purchases ->search({id => $id}) ->single;my $purchase = $c->customer->purchases->search({id => $id})->single;

74. Compare and contrast
my $purchase = $c ->customer ->purchases ->search({id => $id}) ->single;
my $purchase = $c->customer->purchases->search({id => $id})->single;

75. == != >= <= <=>
Compare and contrast
== != >= <= <=>

76. .= += -= *= |= ||= //=
Compare and contrast
.= += -= *= |= ||= //=

77. >> << >>= <<=
Compare and contrast
>> << >>= <<=

78. && || // -- ++ **
Compare and contrast
&& || // -- ++ **

79. -> => ::
Compare and contrast
-> => ::

80. ~~ .. ...
Compare and contrast
~~ .. ...

81. for (1..10)
Compare and contrast
for (1 ..10)

82. #! ## ###
Compare and contrast
#! ## ###

83. 0x1337
Compare and contrast
0x1337

84. /* ** */
Compare and contrast
/* ** */

85. <!-- -->
Compare and contrast
<!-- -->

86. <img/>
Compare and contrast
<img />

91. Coding fonts with ligatures
• Fira Code
https://github.com/tonsky/FiraCode
• Monoid
https://github.com/larsenwork/monoid
• Hasklig
https://github.com/i-tu/Hasklig
• Iosevka
https://github.com/be5invis/Iosevka
• Pragmata Pro (Commercial)
https://www.fsd.it/shop/fonts/pragmatapro/

92. Minimizing cognitive load
in Perl source code parsing
javier@rodriguez.org.mx
Perl Mongers 20170831
Massachusetts General Hospital and Draper Labs
Pretty Programming Fonts