aboutsummaryrefslogtreecommitdiff
path: root/docs/posts/color_conundrum
diff options
context:
space:
mode:
Diffstat (limited to 'docs/posts/color_conundrum')
-rw-r--r--docs/posts/color_conundrum/index.html66
1 files changed, 30 insertions, 36 deletions
diff --git a/docs/posts/color_conundrum/index.html b/docs/posts/color_conundrum/index.html
index 2001226..f732fd0 100644
--- a/docs/posts/color_conundrum/index.html
+++ b/docs/posts/color_conundrum/index.html
@@ -37,42 +37,36 @@
37 Color Conundrum 37 Color Conundrum
38 </h1> 38 </h1>
39 <div class="post-text"> 39 <div class="post-text">
40 <p>This piece aims to highlight (pun intended) some of the 40 <!DOCTYPE html>
41reasons behind my <a href="https://u.peppe.rs/bF.png">color 41<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
42free</a> editor setup.</p> 42<head>
43 43 <meta charset="utf-8" />
44<p>Imagine highlighting an entire book because <em>all</em> of it is 44 <meta name="generator" content="pandoc" />
45important. That is exactly what (most) syntax highlighting 45 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
46does. It is difficult for the human eye to filter out noise 46 <title>color_conundrum</title>
47in rainbow barf. Use color to draw attention, not diverge 47 <style>
48it.</p> 48 code{white-space: pre-wrap;}
49 49 span.smallcaps{font-variant: small-caps;}
50<p>At the same time, a book devoid of color is <em>boring!</em> What 50 span.underline{text-decoration: underline;}
51is the takeaway from this 10 line paragraph? What are the 51 div.column{display: inline-block; vertical-align: top; width: 50%;}
52technical terms used?</p> 52 div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
53 53 ul.task-list{list-style: none;}
54<p>Prose and code are certainly different, but the fickle 54 </style>
55minded human eye is the same. The eye constantly looks for a 55 <!--[if lt IE 9]>
56frame of reference, a focal point. It grows tired when it 56 <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
57can&#39;t find one.</p> 57 <![endif]-->
58 58</head>
59<p>The following comparison does a better job of explaining 59<body>
60(none, ample and over-the-top highlighting, from left to 60<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>
61right):</p> 61<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>
62 62<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>
63<p><a href="https://u.peppe.rs/lt.png"><img src="https://u.peppe.rs/lt.png" alt="hi.png" /></a></p> 63<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>
64 64<p>The following comparison does a better job of explaining (none, ample and over-the-top highlighting, from left to right):</p>
65<p>Without highlighting (far left), it is hard to differentiate 65<p><a href="https://u.peppe.rs/lt.png"><img src="https://u.peppe.rs/lt.png" /></a></p>
66between comments and code! The florid color scheme (far 66<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>
67right) is no good either, it contains too many attention 67<p>I’ll stop myself before I rant about color contrast and combinations.</p>
68grabbers. The center sample is a healthy balance of both. 68</body>
69Function calls and constants stand out, and repetitive 69</html>
70keywords and other noise (<code>let</code>, <code>as</code>) are mildly dimmed
71out. Comments and non-code text (sign column, status text)
72are dimmed further.</p>
73
74<p>I&#39;ll stop myself before I rant about color contrast and
75combinations.</p>
76 70
77 </div> 71 </div>
78 72