aboutsummaryrefslogtreecommitdiff
path: root/docs/posts/color_conundrum/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'docs/posts/color_conundrum/index.html')
-rw-r--r--docs/posts/color_conundrum/index.html36
1 files changed, 27 insertions, 9 deletions
diff --git a/docs/posts/color_conundrum/index.html b/docs/posts/color_conundrum/index.html
index 6c493c2..eeba49b 100644
--- a/docs/posts/color_conundrum/index.html
+++ b/docs/posts/color_conundrum/index.html
@@ -33,7 +33,7 @@
33 <span class="stats-unit">cm</span> 33 <span class="stats-unit">cm</span>
34 &nbsp 34 &nbsp
35 <span class="stats-number"> 35 <span class="stats-number">
36 1.3 36 1.4
37 </span> 37 </span>
38 <span class="stats-unit">min</span> 38 <span class="stats-unit">min</span>
39 </div> 39 </div>
@@ -42,14 +42,32 @@
42 Color Conundrum 42 Color Conundrum
43 </h1> 43 </h1>
44 <div class="post-text"> 44 <div class="post-text">
45 <p>This piece aims to highlight (pun intended) some of the reasons behind my <a href="https://u.peppe.rs/bF.png">color free</a> editor setup.</p> 45 <p>This piece aims to highlight (pun intended) some of the reasons
46<p>Imagine highlighting an entire book because <em>all</em> of it is important. That is exactly what (most) syntax highlighting does. It is difficult for the human eye to filter out noise in rainbow barf. Use color to draw attention, not diverge it.</p> 46behind my <a href="https://u.peppe.rs/bF.png">color free</a> editor
47<p>At the same time, a book devoid of color is <em>boring!</em> What is the takeaway from this 10 line paragraph? What are the technical terms used?</p> 47setup.</p>
48<p>Prose and code are certainly different, but the fickle minded human eye is the same. The eye constantly looks for a frame of reference, a focal point. It grows tired when it can’t find one.</p> 48<p>Imagine highlighting an entire book because <em>all</em> of it is
49<p>The following comparison does a better job of explaining (none, ample and over-the-top highlighting, from left to right):</p> 49important. That is exactly what (most) syntax highlighting does. It is
50<p><a href="https://u.peppe.rs/lt.png"><img src="https://u.peppe.rs/lt.png" /></a></p> 50difficult for the human eye to filter out noise in rainbow barf. Use
51<p>Without highlighting (far left), it is hard to differentiate between comments and code! The florid color scheme (far right) is no good either, it contains too many attention grabbers. The center sample is a healthy balance of both. Function calls and constants stand out, and repetitive keywords and other noise (<code>let</code>, <code>as</code>) are mildly dimmed out. Comments and non-code text (sign column, status text) are dimmed further.</p> 51color to draw attention, not diverge it.</p>
52<p>I’ll stop myself before I rant about color contrast and combinations.</p> 52<p>At the same time, a book devoid of color is <em>boring!</em> What is
53the takeaway from this 10 line paragraph? What are the technical terms
54used?</p>
55<p>Prose and code are certainly different, but the fickle minded human
56eye is the same. The eye constantly looks for a frame of reference, a
57focal point. It grows tired when it can’t find one.</p>
58<p>The following comparison does a better job of explaining (none, ample
59and over-the-top highlighting, from left to right):</p>
60<p><a href="https://u.peppe.rs/lt.png"><img
61src="https://u.peppe.rs/lt.png" /></a></p>
62<p>Without highlighting (far left), it is hard to differentiate between
63comments and code! The florid color scheme (far right) is no good
64either, it contains too many attention grabbers. The center sample is a
65healthy balance of both. Function calls and constants stand out, and
66repetitive keywords and other noise (<code>let</code>, <code>as</code>)
67are mildly dimmed out. Comments and non-code text (sign column, status
68text) are dimmed further.</p>
69<p>I’ll stop myself before I rant about color contrast and
70combinations.</p>
53 71
54 </div> 72 </div>
55 73