diff options
Diffstat (limited to 'public/post')
| -rw-r--r-- | public/post/index.html | 27 | ||||
| -rw-r--r-- | public/post/index.xml | 2 | ||||
| -rw-r--r-- | public/post/programming-as-art/code.png | bin | 0 -> 530926 bytes | |||
| -rw-r--r-- | public/post/programming-as-art/index.html | 106 | ||||
| -rw-r--r-- | public/post/programming-as-art/math.png | bin | 0 -> 398307 bytes | |||
| -rw-r--r-- | public/post/programming-as-art/teaching.png | bin | 0 -> 410632 bytes | |||
| -rw-r--r-- | public/post/programming-as-art/wand.png | bin | 0 -> 356173 bytes | |||
| -rw-r--r-- | public/post/programs/index.html | 23 | ||||
| -rw-r--r-- | public/post/self-host/index.html | 23 |
9 files changed, 146 insertions, 35 deletions
diff --git a/public/post/index.html b/public/post/index.html index 12a4c71..f703434 100644 --- a/public/post/index.html +++ b/public/post/index.html @@ -5,7 +5,8 @@ <meta name="description" content="Git, email, resume etc."> <meta name="viewport" content="width=device-width, initial-scale=1"> -<meta charset="utf-8"/> +<meta charset="UTF-8"/> + @@ -15,8 +16,7 @@ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/academicons/1.9.1/css/academicons.min.css" integrity="sha512-b1ASx0WHgVFL5ZQhTgiPWX+68KjS38Jk87jg7pe+qC7q9YkEtFq0z7xCglv7qGIs/68d3mAp+StfC8WKC5SSAg==" crossorigin="anonymous" /> -<link rel="stylesheet" href="https://kumardamani.net/css/colour/gruvbox-dark.css"> -<link rel="stylesheet" href="https://kumardamani.net/css/colour/dark-mode.css"> +<link rel="stylesheet" href="https://kumardamani.net/css/palettes/gruvbox-dark.css"> <link rel="stylesheet" href="https://kumardamani.net/css/risotto.css"> <link rel="stylesheet" href="https://kumardamani.net/css/custom.css"> </head> @@ -29,7 +29,7 @@ <ul> - <li class="main-nav__item"><a class="nav-main-item active" href="/post/" title="Posts">Posts</a></li> + <li class="main-nav__item"><a class="nav-main-item active" href="https://kumardamani.net/post/" title="Posts">Posts</a></li> </ul> </nav> @@ -53,7 +53,7 @@ </header> <section class="post__summary"> - <p>Why programming I see programming as an art form.</p> + <p>Why there is art in programming.</p> </section> </article> @@ -118,7 +118,22 @@ </div> </section> - <footer class="page__footer"><p class="copyright"></p> + <footer class="page__footer"><p> + + + + + + + + + + + + +</p> +<br /><br /> +<p class="copyright"></p> <p class="advertisement">Powered by <a href="https://gohugo.io/">hugo</a> and <a href="https://github.com/joeroe/risotto">risotto</a>.</p> </footer> diff --git a/public/post/index.xml b/public/post/index.xml index 117b024..e40facd 100644 --- a/public/post/index.xml +++ b/public/post/index.xml @@ -13,7 +13,7 @@ <pubDate>Tue, 29 Nov 2022 00:00:00 +0000</pubDate> <guid>https://kumardamani.net/post/programming-as-art/</guid> - <description><p>Why programming I see programming as an art form.</p></description> + <description><p>Why there is art in programming.</p></description> </item> <item> diff --git a/public/post/programming-as-art/code.png b/public/post/programming-as-art/code.png Binary files differnew file mode 100644 index 0000000..30c3522 --- /dev/null +++ b/public/post/programming-as-art/code.png diff --git a/public/post/programming-as-art/index.html b/public/post/programming-as-art/index.html index 691abf4..5505e50 100644 --- a/public/post/programming-as-art/index.html +++ b/public/post/programming-as-art/index.html @@ -5,7 +5,22 @@ <meta name="description" content="Git, email, resume etc."> <meta name="viewport" content="width=device-width, initial-scale=1"> -<meta charset="utf-8"/> +<meta charset="UTF-8"/> + +<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.css" integrity="sha384-vKruj+a13U8yHIkAyGgK1J3ArTLzrFGBbBc0tDp4ad/EyewESeXE/Iv67Aj8gKZ0" crossorigin="anonymous"> +<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.js" integrity="sha384-PwRUT/YqbnEjkZO0zZxNqcxACrXe+j766U2amXcgMg5457rve2Y7I6ZJSm2A0mS4" crossorigin="anonymous"></script> +<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/contrib/auto-render.min.js" integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous" + onload="renderMathInElement(document.body);"></script> +<script> + document.addEventListener("DOMContentLoaded", function() { + renderMathInElement(document.body, { + delimiters: [ + {left: "$$", right: "$$", display: true}, + {left: "$", right: "$", display: false} + ] + }); + }); +</script> @@ -15,8 +30,7 @@ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/academicons/1.9.1/css/academicons.min.css" integrity="sha512-b1ASx0WHgVFL5ZQhTgiPWX+68KjS38Jk87jg7pe+qC7q9YkEtFq0z7xCglv7qGIs/68d3mAp+StfC8WKC5SSAg==" crossorigin="anonymous" /> -<link rel="stylesheet" href="https://kumardamani.net/css/colour/gruvbox-dark.css"> -<link rel="stylesheet" href="https://kumardamani.net/css/colour/dark-mode.css"> +<link rel="stylesheet" href="https://kumardamani.net/css/palettes/gruvbox-dark.css"> <link rel="stylesheet" href="https://kumardamani.net/css/risotto.css"> <link rel="stylesheet" href="https://kumardamani.net/css/custom.css"> </head> @@ -29,7 +43,7 @@ <ul> - <li class="main-nav__item"><a class="nav-main-item active" href="/post/" title="Posts">Posts</a></li> + <li class="main-nav__item"><a class="nav-main-item active" href="https://kumardamani.net/post/" title="Posts">Posts</a></li> </ul> </nav> @@ -41,18 +55,61 @@ <h1>Romanticism in Programming</h1> </header> <div class="content__body"> - <p>Why programming I see programming as an art form.</p> -<p>It started off in my first year as a CS student during a lecture about loops. -It was mind-bending to see “Hello World!” getting printed out to the console N-thousands of times -in just 3 functional lines of code.</p> -<p>But there was more. The TA then asks us to put our newly found power to use by producing the -sum of 1 to 100. Ofcourse, it was a natural application of our topic. We simply set the limit, -and do an increment a sum in the loop’s body.</p> -<p>Sure enough we saw the answer 5050 in the console. -But then the TA reminds us that we are making that computer work too hard. -It needs to do 100 basic ADD instructions in order to make this happen. -What if it was a million? -Is there a better way?</p> + <p>Why there is art in programming.</p> +<p>During my early days as a CS student, one of the first mind-blowing moments was +watching <code>Hello World!</code> getting printed out to the console thousands of times +in just two functional lines of code.</p> +<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-python" data-lang="python"><span style="display:flex;"><span><span style="color:#66d9ef">for</span> _ <span style="color:#f92672">in</span> range(<span style="color:#ae81ff">1</span>, <span style="color:#ae81ff">1001</span>): +</span></span><span style="display:flex;"><span> print(<span style="color:#e6db74">"Hello World!"</span>) +</span></span></code></pre></div><p>At the time it felt like having the <a href="https://harry-potter-compendium.fandom.com/wiki/Elder_Wand">Elder Wand</a>. +<img src="wand.png" alt="Dumbledore with Elder Wand pic"></p> +<p>But there was more to our lesson. +The TA then asks us to put our newly found power to use by computing the +sum of 1 to 100. Of course, it was a natural application of what we had just done earlier:</p> +<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-python" data-lang="python"><span style="display:flex;"><span>sum <span style="color:#f92672">=</span> <span style="color:#ae81ff">0</span> +</span></span><span style="display:flex;"><span><span style="color:#66d9ef">for</span> i <span style="color:#f92672">in</span> range(<span style="color:#ae81ff">1</span>, <span style="color:#ae81ff">100</span><span style="color:#f92672">+</span><span style="color:#ae81ff">1</span>): +</span></span><span style="display:flex;"><span> sum <span style="color:#f92672">=</span> sum <span style="color:#f92672">+</span> i +</span></span></code></pre></div><p>Sure enough we saw the answer <code>5050</code> in the console. +But then the TA reminds us that we are making our computers <strong>work too hard</strong>. +In other words, the computer needs to do one-hundred ADD instructions in order to make this computation happen.</p> +<p>What if it the number was a million? How well would our method scale?</p> +<p>Well then it would take a million ADD instructions. +We call this scaling <em>linearly</em> with the input size. +Later we would formalize this to $\mathcal{O}(n)$ (pronounced: <em>Big Oh of N</em>).</p> +<p>The TA hinted that there is a better way, and that we already know of the better way in math.</p> +<p><img src="teaching.png" alt="Teaching meme"></p> +<p>$\displaystyle S_n = \sum\limits_{i=1}^n i = 1 + 2 + … + n = \frac{n (n + 1)}{2}$</p> +<p>With this we are no longer using loops, but a known mathematical fact about sequences. +If you don’t belive me, see the <a href="https://letstalkscience.ca/educational-resources/backgrounders/gauss-summation">proof</a>.</p> +<p>Written as code:</p> +<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-python" data-lang="python"><span style="display:flex;"><span>sum <span style="color:#f92672">=</span> n (n <span style="color:#f92672">+</span> <span style="color:#ae81ff">1</span>) <span style="color:#f92672">/</span> <span style="color:#ae81ff">2</span> +</span></span></code></pre></div><p>This one-liner solves our problem with just 3 (ADD, MULTIPLY, DIVIDE) instructions. +Crucially, it does not depend on the size of the input like our previous solution, thus +<strong>no matter the input, it always takes 3 instructions to compute!</strong> +This is a HUGE win!</p> +<p><img src="math.png" alt="Math meme"></p> +<p>Later we would formalize this to $\mathcal{O}(1)$, or <em>constant</em> scaling.</p> +<blockquote> +<p>Yes, yes I know IRL the complier would optimize the loop solution +such that it does not take N instructions but for the purposes of +learning we were not allowed to depend on that.</p> +</blockquote> +<p>Looking back at it now, +both solutions are equally correct, and modern compilers would optimize the first solution +in the final instructions sent to the cpu, such that any performance differences would be negligible. +In other words, the computer wouldn’t acutally be <em>working so hard</em>.</p> +<p>Objectively, the first solution is more readable, and friendly to a new observer than the second.</p> +<p><em>Why then am I still so drawn to the second solution?</em></p> +<p>The first solution reminds me of the saying “to a hammer, eveything looks like a nail”. +Its a brute force approach. +In comparison, the second solution is using the exact tool for our particular problem. +It somehow feels personalized and dare I say <em>romantic</em>.</p> +<p>When I reflect on moments like this, it reminds me that there is emergent elegance and beauty +even in the seemingly arbitrary sequence of symbols that is <code>code</code>. +<img src="code.png" alt="The Matrix code going by image"></p> +<p>Programming is not quite as <em>objective</em> as people would have you believe. +There are trade-offs to each solution, and which solution you prefer relect on the trade-offs +you are willing to accept, which varies by the observer: much like <em>art</em>.</p> </div> <footer class="content__footer"></footer> @@ -85,7 +142,7 @@ Is there a better way?</p> </div> <hr> <div class="aside__content"> - <p>Why I see programming as an art form.</p> + <p>How programming is romantic.</p> <p> By Kumar Damani, @@ -96,7 +153,20 @@ Is there a better way?</p> </div> </section> - <footer class="page__footer"><p class="copyright"></p> + <footer class="page__footer"><p> + + + + + + + + + + +</p> +<br /><br /> +<p class="copyright"></p> <p class="advertisement">Powered by <a href="https://gohugo.io/">hugo</a> and <a href="https://github.com/joeroe/risotto">risotto</a>.</p> </footer> diff --git a/public/post/programming-as-art/math.png b/public/post/programming-as-art/math.png Binary files differnew file mode 100644 index 0000000..bbdc372 --- /dev/null +++ b/public/post/programming-as-art/math.png diff --git a/public/post/programming-as-art/teaching.png b/public/post/programming-as-art/teaching.png Binary files differnew file mode 100644 index 0000000..9bf5dce --- /dev/null +++ b/public/post/programming-as-art/teaching.png diff --git a/public/post/programming-as-art/wand.png b/public/post/programming-as-art/wand.png Binary files differnew file mode 100644 index 0000000..5eefc9c --- /dev/null +++ b/public/post/programming-as-art/wand.png diff --git a/public/post/programs/index.html b/public/post/programs/index.html index 8d27d54..85cd5c2 100644 --- a/public/post/programs/index.html +++ b/public/post/programs/index.html @@ -5,7 +5,8 @@ <meta name="description" content="Git, email, resume etc."> <meta name="viewport" content="width=device-width, initial-scale=1"> -<meta charset="utf-8"/> +<meta charset="UTF-8"/> + @@ -15,8 +16,7 @@ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/academicons/1.9.1/css/academicons.min.css" integrity="sha512-b1ASx0WHgVFL5ZQhTgiPWX+68KjS38Jk87jg7pe+qC7q9YkEtFq0z7xCglv7qGIs/68d3mAp+StfC8WKC5SSAg==" crossorigin="anonymous" /> -<link rel="stylesheet" href="https://kumardamani.net/css/colour/gruvbox-dark.css"> -<link rel="stylesheet" href="https://kumardamani.net/css/colour/dark-mode.css"> +<link rel="stylesheet" href="https://kumardamani.net/css/palettes/gruvbox-dark.css"> <link rel="stylesheet" href="https://kumardamani.net/css/risotto.css"> <link rel="stylesheet" href="https://kumardamani.net/css/custom.css"> </head> @@ -29,7 +29,7 @@ <ul> - <li class="main-nav__item"><a class="nav-main-item active" href="/post/" title="Posts">Posts</a></li> + <li class="main-nav__item"><a class="nav-main-item active" href="https://kumardamani.net/post/" title="Posts">Posts</a></li> </ul> </nav> @@ -141,7 +141,20 @@ suffice it to say I will not endorse the usage of proprietary software.</p> </div> </section> - <footer class="page__footer"><p class="copyright"></p> + <footer class="page__footer"><p> + + + + + + + + + + +</p> +<br /><br /> +<p class="copyright"></p> <p class="advertisement">Powered by <a href="https://gohugo.io/">hugo</a> and <a href="https://github.com/joeroe/risotto">risotto</a>.</p> </footer> diff --git a/public/post/self-host/index.html b/public/post/self-host/index.html index cdc2049..15b3144 100644 --- a/public/post/self-host/index.html +++ b/public/post/self-host/index.html @@ -5,7 +5,8 @@ <meta name="description" content="Git, email, resume etc."> <meta name="viewport" content="width=device-width, initial-scale=1"> -<meta charset="utf-8"/> +<meta charset="UTF-8"/> + @@ -15,8 +16,7 @@ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/academicons/1.9.1/css/academicons.min.css" integrity="sha512-b1ASx0WHgVFL5ZQhTgiPWX+68KjS38Jk87jg7pe+qC7q9YkEtFq0z7xCglv7qGIs/68d3mAp+StfC8WKC5SSAg==" crossorigin="anonymous" /> -<link rel="stylesheet" href="https://kumardamani.net/css/colour/gruvbox-dark.css"> -<link rel="stylesheet" href="https://kumardamani.net/css/colour/dark-mode.css"> +<link rel="stylesheet" href="https://kumardamani.net/css/palettes/gruvbox-dark.css"> <link rel="stylesheet" href="https://kumardamani.net/css/risotto.css"> <link rel="stylesheet" href="https://kumardamani.net/css/custom.css"> </head> @@ -29,7 +29,7 @@ <ul> - <li class="main-nav__item"><a class="nav-main-item active" href="/post/" title="Posts">Posts</a></li> + <li class="main-nav__item"><a class="nav-main-item active" href="https://kumardamani.net/post/" title="Posts">Posts</a></li> </ul> </nav> @@ -214,7 +214,20 @@ Short of this, you can only limit your usage.</li> </div> </section> - <footer class="page__footer"><p class="copyright"></p> + <footer class="page__footer"><p> + + + + + + + + + + +</p> +<br /><br /> +<p class="copyright"></p> <p class="advertisement">Powered by <a href="https://gohugo.io/">hugo</a> and <a href="https://github.com/joeroe/risotto">risotto</a>.</p> </footer> |
