Jekyll2020-05-11T02:21:56-04:00http://macbookandheels.com/feed.xmlMacbook and Heelswhere I blog about learning, coding, and uxmacbookandheelsXSV Search Regex2019-11-12T00:00:00-05:002019-11-12T00:00:00-05:00http://macbookandheels.com/programming/2019/11/12/xsv-search<p>I was looking up the syntax for specifying regex patterns with the <a href="https://github.com/BurntSushi/xsv">XSV</a> command-line toolkit for working with CSV files. The underlying language is Rust, the search feature uses the <code class="language-plaintext highlighter-rouge">RegexBuilder</code> module for it’s search feature. Kept digging and found myself looking through the Rust documentation. Found the specific <a href="https://docs.rs/regex/1.3.1/regex/#syntax">regex syntax</a>.</p>
<p>With that regex, you can write patterns to find specific substrings, for example:</p>
<div class="language-sh highlighter-rouge"><div class="highlight"><pre class="highlight"><code>xsv search <span class="nt">-s</span> 3 <span class="s1">'foo.*'</span> sample.csv
</code></pre></div></div>
<p>will search the 3rd column for values matching substring that starts with <code class="language-plaintext highlighter-rouge">foo</code>.</p>macbookandheelsI was looking up the syntax for specifying regex patterns with the XSV command-line toolkit for working with CSV files. The underlying language is Rust, the search feature uses the RegexBuilder module for it’s search feature. Kept digging and found myself looking through the Rust documentation. Found the specific regex syntax.A basic vimrc2019-01-29T00:00:00-05:002019-01-29T00:00:00-05:00http://macbookandheels.com/2019/01/29/basic-vimrc<p><img src="/assets/img/post/2019/01/29_vimrc.png" alt="" /></p>
<p>There are some vim settings that I always add to my <code class="language-plaintext highlighter-rouge">.vimrc</code> config file. The nice thing about the command line text editors is that one can customize them to the nth degree. On the other hand, getting started can be overwhelming.</p>
<p>Here I suggest a few that of possible configurations that I consider to be <em>essential</em> to vastly improving usability. I write this article for those who are new to the world of command line interfaces (CLI). For offical vim documentation you may want to check out <a href="https://www.vim.org/docs.php">vim.org</a></p>
<h2 id="syntax-highlighting">Syntax highlighting</h2>
<p>Not only does color make the view pop (I am a fan of color), it helps with navigating code. If you’re learning to code, your brain hasn’t formed the fluency yet. The colors can help with visualizing the syntax and improve readability.</p>
<pre><code class="language-vi">syntax on
</code></pre>
<p>Vim has its own default syntax colorscheme, and a few of them as well. I like browsing a site like <a href="https://vimcolors.com/">vimcolors</a> for additional color schemes available.</p>
<p>When you find one you like, save the <code class="language-plaintext highlighter-rouge">theme.vim</code> file into your <code class="language-plaintext highlighter-rouge">~/.vim/colors</code> location and turn on the colorscheme in your <code class="language-plaintext highlighter-rouge">.vimrc</code> file. Lately I’ve been using this theme called <strong>jellybean</strong>.</p>
<pre><code class="language-vi">colorscheme jellybeans
</code></pre>
<h2 id="view-line-numbers">View Line numbers</h2>
<p>I like being able to see line numbers when debugging to find the specific chunk of code that the compiler/interpreter finds problematic. You could set this to be absolute [1-n] values or use relative numbers, which would be +/- from your current cursor position. Either way to turn on numbers, you want to <code class="language-plaintext highlighter-rouge">set nu</code> or set numbers.</p>
<pre><code class="language-vi">set number
</code></pre>
<p>Note that without the visible line numbers, you could still navigate through a vim editor by jumping to specific line. For example to get to the 50th line you would use <code class="language-plaintext highlighter-rouge">:50</code></p>
<h2 id="highlighting-word-search-results">Highlighting word search results</h2>
<p>To round off the essential features of vim - highlighting the substring matched. In a sea of text, as a graphically visual person (I’m left handed, right brained), I read better when there’s color to highlight areas to focus.</p>
<pre><code class="language-vi">set hlsearch
</code></pre>
<hr />
<p>All together your barebones .vimrc might look like this:</p>
<figure class="highlight"><pre><code class="language-vi" data-lang="vi">syntax on
colorscheme jellybeans
set number
set hlsearch</code></pre></figure>macbookandheelsFixing Spacemacs Tern Binary not found2019-01-18T00:00:00-05:002019-01-18T00:00:00-05:00http://macbookandheels.com/emacs/2019/01/18/tern-binary-not-found<p>Wanted to write a quick note here, I often come across this warning message when setting up a new machine with <a href="http://spacemacs.org">Spacemacs</a>.</p>
<p><img src="/assets/img/post/2019/01/18_spacemacsmessage.png" alt="Tern Binary not found" /></p>
<p>The fix is simple, as pointed out <a href="https://github.com/syl20bnr/spacemacs/issues/5996">here</a>:</p>
<p><code class="language-plaintext highlighter-rouge">npm install --global tern</code></p>macbookandheelsWanted to write a quick note here, I often come across this warning message when setting up a new machine with Spacemacs.Counting Days since last Christmas2018-11-07T06:38:00-05:002018-11-07T06:38:00-05:00http://macbookandheels.com/haskell/2018/11/07/haskell-counting-days<p>Hello reader. It’s been a minute since there’s been an update about writing code in Haskell, so here’s one. Throughout the past year, I’ve been working on a small app during spare time for fun and to better understand Haskell’s handling of date types for web development.</p>
<p>For one of my blogging projects I’ve been whimsically counting the <a href="http://katychuang.com/getting-started-with-haskell/tutorials/xmas/xmas.jsexe/index.html">days since the last Christmas</a>, rather than counting down the days to Christmas. You might be wondering why. There’s a famous Christmas carol that counts the days of Christmas, a sequentially growing number with each passing day. Instead of focusing on material gifts, I wanted to focus on gratitude and personal for each passing day. I also wanted to take a page from George Michael’s songbook, where during the next Christmas I could compare last Christmas with the current Christmas :smile:</p>
<hr />
<p><strong>Table of Contents</strong></p>
<ol id="markdown-toc">
<li><a href="#getcurrenttime--io-utctime" id="markdown-toc-getcurrenttime--io-utctime">getCurrentTime :: IO UTCTime</a></li>
<li><a href="#utctday--utctime---day" id="markdown-toc-utctday--utctime---day">utctDay :: UTCTime -> Day</a></li>
<li><a href="#fromgregorian--integer---int---int---day" id="markdown-toc-fromgregorian--integer---int---int---day">fromGregorian :: Integer -> Int -> Int -> Day</a></li>
<li><a href="#diffdays--day---day---integer" id="markdown-toc-diffdays--day---day---integer">diffDays :: Day -> Day -> Integer</a></li>
<li><a href="#dayssincexmas-as-a-do-block" id="markdown-toc-dayssincexmas-as-a-do-block"><strong>daysSinceXmas</strong> as a do block</a></li>
</ol>
<hr />
<p>For the code shown here, I only used the <code class="language-plaintext highlighter-rouge">[time](http://hackage.haskell.org/package/time-1.6.0.1)</code> library that is bundled with the GHC compiler. At the time of the writing, I’m on version <code class="language-plaintext highlighter-rouge">time-1.6.0.1</code> which is missing some of the functions in the newer versions. You can likely use <code class="language-plaintext highlighter-rouge">ghc-pkg list</code> to see the current installed versions on your machine.</p>
<h1 id="getcurrenttime--io-utctime">getCurrentTime :: IO UTCTime</h1>
<p>The first thing I wanted to figure out was how to get the current date.</p>
<p>With Haskell you can import the <code class="language-plaintext highlighter-rouge">Date.Time</code> package then use the <code class="language-plaintext highlighter-rouge">getCurrentTime</code> method. Guess what, this returns an IO type. This presents a challenge for the ongoing work as I shall attempt to explain.</p>
<p class="image-caption"><img src="/assets/img/post/2018/11/07ghci.png" alt="Caption" /></p>
<p><em>Getting Current Time in ghci</em></p>
<p>Here’s what the UTCTime looks like:</p>
<p class="image-caption"><img src="/assets/img/post/2018/11/07now.png" alt="Caption" /></p>
<p><em>Getting Current Time in ghci</em></p>
<h1 id="utctday--utctime---day">utctDay :: UTCTime -> Day</h1>
<p>Data.Time comes with this function <code class="language-plaintext highlighter-rouge">diffDays</code>, and in the spirit of minimalism I try to use this function without writing extra.</p>
<p>What are we constrained to with the types? Let us take a look:</p>
<figure class="highlight"><pre><code class="language-haskell" data-lang="haskell"><span class="n">diffDays</span> <span class="o">::</span> <span class="kt">Day</span> <span class="o">-></span> <span class="kt">Day</span> <span class="o">-></span> <span class="kt">Integer</span></code></pre></figure>
<p>What we know now is that you are presented with a <code class="language-plaintext highlighter-rouge">IO UTCTime</code> for current time that needs to be a Day type. That’s like connecting an HDMI cable to USB-C. You need an adapter.</p>
<p>Luckily, there is a function that can act as the adapter.
<code class="language-plaintext highlighter-rouge">utctDay :: UTCTime -> Day</code> combined with <code class="language-plaintext highlighter-rouge">fmap</code> you can convert the current time to a <code class="language-plaintext highlighter-rouge">Day</code> type.</p>
<p class="image-caption"><img src="/assets/img/post/2018/11/07fmap.png" alt="Caption" /></p>
<p><em>Getting Current Time in ghci</em></p>
<h1 id="fromgregorian--integer---int---int---day">fromGregorian :: Integer -> Int -> Int -> Day</h1>
<p>Not quite finished yet. How do you get the last Christmas’ date?</p>
<p>For now let’s use this very readable function <code class="language-plaintext highlighter-rouge">fromGregorian</code>, it looks like so:</p>
<figure class="highlight"><pre><code class="language-haskell" data-lang="haskell"><span class="kr">let</span> <span class="n">last_xmas</span> <span class="o">=</span> <span class="p">(</span><span class="n">fromGregorian</span> <span class="mi">2017</span> <span class="mi">12</span> <span class="mi">25</span><span class="p">)</span></code></pre></figure>
<h1 id="diffdays--day---day---integer">diffDays :: Day -> Day -> Integer</h1>
<p>To this point we have the current day, and last Christmas as a day.</p>
<figure class="highlight"><pre><code class="language-haskell" data-lang="haskell"><span class="kr">let</span> <span class="n">today</span> <span class="o">=</span> <span class="n">fmap</span> <span class="n">utctDay</span> <span class="n">getCurrentTime</span>
<span class="kr">let</span> <span class="n">last_xmas</span> <span class="o">=</span> <span class="p">(</span><span class="n">fromGregorian</span> <span class="mi">2017</span> <span class="mi">12</span> <span class="mi">25</span><span class="p">)</span></code></pre></figure>
<p>Below you can see that you can’t force the <code class="language-plaintext highlighter-rouge">IO Day</code> into a <code class="language-plaintext highlighter-rouge">Day</code> type. Haskell won’t let you force an IO into a non IO type. You <em>can</em> use <code class="language-plaintext highlighter-rouge">unsafePerformIO</code>, however it is HIGHLY unadvised because of possible side effects. Don’t do it that way if possible.</p>
<p class="image-caption"><img src="/assets/img/post/2018/11/07dateError.png" alt="Caption" /></p>
<p><em>Example of IO Error</em></p>
<p>When it comes to IO conversions, I find it easier to put the code in a do block and liberally use the <code class="language-plaintext highlighter-rouge"><-</code> symbol. Not sure why this works, but it does.</p>
<h1 id="dayssincexmas-as-a-do-block"><strong>daysSinceXmas</strong> as a do block</h1>
<p>Finally we see how combining all these steps together into the ghci console looks like.</p>
<p class="image-caption"><img src="/assets/img/post/2018/11/07main.png" alt="Caption" /></p>
<p><em>Example of a do block in ghci</em></p>
<p>You can write this do block into a <code class="language-plaintext highlighter-rouge">*.hs</code> file, like the below image and continue building from there! I used this function in a web app I’m building with Reflex.</p>
<hr />
<p>Follow my instagram, where I will post more updates!</p>
<blockquote class="instagram-media" data-instgrm-permalink="https://www.instagram.com/p/Bhj34PuBgyP/?utm_source=ig_embed&utm_medium=loading" data-instgrm-version="12" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:540px; min-width:326px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:16px;"> <a href="https://www.instagram.com/p/Bhj34PuBgyP/?utm_source=ig_embed&utm_medium=loading" style=" background:#FFFFFF; line-height:0; padding:0 0; text-align:center; text-decoration:none; width:100%;" target="_blank"> <div style=" display: flex; flex-direction: row; align-items: center;"> <div style="background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 40px; margin-right: 14px; width: 40px;"></div> <div style="display: flex; flex-direction: column; flex-grow: 1; justify-content: center;"> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; margin-bottom: 6px; width: 100px;"></div> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; width: 60px;"></div></div></div><div style="padding: 19% 0;"></div><div style="display:block; height:50px; margin:0 auto 12px; width:50px;"><svg width="50px" height="50px" viewBox="0 0 60 60" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-511.000000, -20.000000)" fill="#000000"><g><path d="M556.869,30.41 C554.814,30.41 553.148,32.076 553.148,34.131 C553.148,36.186 554.814,37.852 556.869,37.852 C558.924,37.852 560.59,36.186 560.59,34.131 C560.59,32.076 558.924,30.41 556.869,30.41 M541,60.657 C535.114,60.657 530.342,55.887 530.342,50 C530.342,44.114 535.114,39.342 541,39.342 C546.887,39.342 551.658,44.114 551.658,50 C551.658,55.887 546.887,60.657 541,60.657 M541,33.886 C532.1,33.886 524.886,41.1 524.886,50 C524.886,58.899 532.1,66.113 541,66.113 C549.9,66.113 557.115,58.899 557.115,50 C557.115,41.1 549.9,33.886 541,33.886 M565.378,62.101 C565.244,65.022 564.756,66.606 564.346,67.663 C563.803,69.06 563.154,70.057 562.106,71.106 C561.058,72.155 560.06,72.803 558.662,73.347 C557.607,73.757 556.021,74.244 553.102,74.378 C549.944,74.521 548.997,74.552 541,74.552 C533.003,74.552 532.056,74.521 528.898,74.378 C525.979,74.244 524.393,73.757 523.338,73.347 C521.94,72.803 520.942,72.155 519.894,71.106 C518.846,70.057 518.197,69.06 517.654,67.663 C517.244,66.606 516.755,65.022 516.623,62.101 C516.479,58.943 516.448,57.996 516.448,50 C516.448,42.003 516.479,41.056 516.623,37.899 C516.755,34.978 517.244,33.391 517.654,32.338 C518.197,30.938 518.846,29.942 519.894,28.894 C520.942,27.846 521.94,27.196 523.338,26.654 C524.393,26.244 525.979,25.756 528.898,25.623 C532.057,25.479 533.004,25.448 541,25.448 C548.997,25.448 549.943,25.479 553.102,25.623 C556.021,25.756 557.607,26.244 558.662,26.654 C560.06,27.196 561.058,27.846 562.106,28.894 C563.154,29.942 563.803,30.938 564.346,32.338 C564.756,33.391 565.244,34.978 565.378,37.899 C565.522,41.056 565.552,42.003 565.552,50 C565.552,57.996 565.522,58.943 565.378,62.101 M570.82,37.631 C570.674,34.438 570.167,32.258 569.425,30.349 C568.659,28.377 567.633,26.702 565.965,25.035 C564.297,23.368 562.623,22.342 560.652,21.575 C558.743,20.834 556.562,20.326 553.369,20.18 C550.169,20.033 549.148,20 541,20 C532.853,20 531.831,20.033 528.631,20.18 C525.438,20.326 523.257,20.834 521.349,21.575 C519.376,22.342 517.703,23.368 516.035,25.035 C514.368,26.702 513.342,28.377 512.574,30.349 C511.834,32.258 511.326,34.438 511.181,37.631 C511.035,40.831 511,41.851 511,50 C511,58.147 511.035,59.17 511.181,62.369 C511.326,65.562 511.834,67.743 512.574,69.651 C513.342,71.625 514.368,73.296 516.035,74.965 C517.703,76.634 519.376,77.658 521.349,78.425 C523.257,79.167 525.438,79.673 528.631,79.82 C531.831,79.965 532.853,80.001 541,80.001 C549.148,80.001 550.169,79.965 553.369,79.82 C556.562,79.673 558.743,79.167 560.652,78.425 C562.623,77.658 564.297,76.634 565.965,74.965 C567.633,73.296 568.659,71.625 569.425,69.651 C570.167,67.743 570.674,65.562 570.82,62.369 C570.966,59.17 571,58.147 571,50 C571,41.851 570.966,40.831 570.82,37.631"></path></g></g></g></svg></div><div style="padding-top: 8px;"> <div style=" color:#3897f0; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:550; line-height:18px;"> View this post on Instagram</div></div><div style="padding: 12.5% 0;"></div> <div style="display: flex; flex-direction: row; margin-bottom: 14px; align-items: center;"><div> <div style="background-color: #F4F4F4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(0px) translateY(7px);"></div> <div style="background-color: #F4F4F4; height: 12.5px; transform: rotate(-45deg) translateX(3px) translateY(1px); width: 12.5px; flex-grow: 0; margin-right: 14px; margin-left: 2px;"></div> <div style="background-color: #F4F4F4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(9px) translateY(-18px);"></div></div><div style="margin-left: 8px;"> <div style=" background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 20px; width: 20px;"></div> <div style=" width: 0; height: 0; border-top: 2px solid transparent; border-left: 6px solid #f4f4f4; border-bottom: 2px solid transparent; transform: translateX(16px) translateY(-4px) rotate(30deg)"></div></div><div style="margin-left: auto;"> <div style=" width: 0px; border-top: 8px solid #F4F4F4; border-right: 8px solid transparent; transform: translateY(16px);"></div> <div style=" background-color: #F4F4F4; flex-grow: 0; height: 12px; width: 16px; transform: translateY(-4px);"></div> <div style=" width: 0; height: 0; border-top: 8px solid #F4F4F4; border-left: 8px solid transparent; transform: translateY(-4px) translateX(8px);"></div></div></div> <div style="display: flex; flex-direction: column; flex-grow: 1; justify-content: center; margin-bottom: 24px;"> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; margin-bottom: 6px; width: 224px;"></div> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; width: 144px;"></div></div></a><p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;"><a href="https://www.instagram.com/p/Bhj34PuBgyP/?utm_source=ig_embed&utm_medium=loading" style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none;" target="_blank">A post shared by Dr. Kat Chuang (@katychuang.nyc)</a> on <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2018-04-14T18:13:57+00:00">Apr 14, 2018 at 11:13am PDT</time></p></div></blockquote>
<script async="" src="//www.instagram.com/embed.js"></script>macbookandheelsHello reader. It’s been a minute since there’s been an update about writing code in Haskell, so here’s one. Throughout the past year, I’ve been working on a small app during spare time for fun and to better understand Haskell’s handling of date types for web development.Teaching Data Structures2018-10-31T07:38:00-04:002018-10-31T07:38:00-04:00http://macbookandheels.com/algorithm/2018/10/31/teachingds<p>Hello again reader. So glad you’re still reading my blog! I know, I’ve been very quiet over the past two months, was up to my ears in getting up to speed with a new challenge of teaching a data structures course at a local university on top of still working full time. Had found out about the week before classes started that I got the job, thankfully my employer was understanding to allow teaching. Getting acquainted with lecturing twice a week, every week, coming up with a grading scale for each assignment/exam was an ad-hoc process, learning a lot along the way and slowly getting settled in. Right now we’re about a bit after the midpoint of the semester. It’s a little over two months into the Fall semester and just under two more months left. Had to figure out a lot of things beyond the lectures, though arguably since it’s been nearly two decades since going into depth with this material preparing the lectures has been the most challenging. Today having signed the papers agreeing to teach again next semester, seemed like a good time to write about experiences thus far.</p>
<p class="image-caption"><img src="/assets/img/post/2018/10/BC_Campus.jpg" alt="Brooklyn College Campus" /></p>
<p><em>Brooklyn College Campus</em></p>
<hr />
<p><strong>Table of Contents</strong></p>
<ul id="markdown-toc">
<li><a href="#where-im-teaching" id="markdown-toc-where-im-teaching">Where I’m teaching</a></li>
<li><a href="#background" id="markdown-toc-background">Background</a></li>
<li><a href="#historical-context" id="markdown-toc-historical-context">Historical Context</a> <ul>
<li><a href="#cultural-relevance" id="markdown-toc-cultural-relevance">Cultural Relevance</a></li>
<li><a href="#interview-prep" id="markdown-toc-interview-prep">Interview Prep</a></li>
</ul>
</li>
</ul>
<hr />
<h1 id="where-im-teaching">Where I’m teaching</h1>
<p>By “local university” in the above paragraph, I was referring to within the NYC county border, so within the 5 boroughs. Just about all the universities I can name off the top of my head are located off a subway stop so while it was possible for me to commute to teach by public transit, for me it means an hour commute by subway via express line from one part of a borough to another part. I’m teaching at CUNY Brooklyn College, which is a City University of New York (CUNY) senior college located right off the 2/5 stop at Flatbush. Beautiful campus, lovely people, interesting history. It’s got the largest CS program of all the CUNY campuses.</p>
<p class="image-caption"><img src="/assets/img/post/2018/10/explore-colleges-nyc-map.jpg" alt="CUNY Campuses" /></p>
<p><em>CUNY Campuses</em></p>
<h1 id="background">Background</h1>
<p>My background with the field of Computer Science is quite long, would say we’ve had an on and off history over the last 20 years. I learned data structures and algorithms as an undergraduate CS student when Java was still in its infancy, version 3 or 4<sup id="fnref:1"><a href="#fn:1" class="footnote">1</a></sup>, right now for class we’re using version 8. Early 2000s was when Facebook and MySpace were first created. There was a lot about the world that I didn’t know about, there was a lot in the world that doesn’t exist yet<sup id="fnref:2"><a href="#fn:2" class="footnote">2</a></sup>. 20 years is a long time in <em>modern</em> CS history. Data structures is a required course that appears on just about every curriculum for computer science students. It’s the course where you start to think about the design patterns in your programs. The design of a tangible object like a teapot or door handle is easy to explain why it’s good or bad. Organization of data/information is harder to articulate.</p>
<p>Because of a distinct lack of context surrounding the field of CS when I was learning it way back when, I felt it quite important to illustrate the importance of data structures and algorithms in society by bringing in a brief history lesson periodically into the classroom. All our work in programming today is standing on the shoulders of giants. Respect should be given where its due by passing on knowledge of the great figures who gave us the things that we still use today. Rather than sticking to a dry presentation of what is <em>_this_ structure</em> and how it operates that can be read from a textbook, I wanted to bring in my anthropological training to the classroom to talk about the cultural relevance and the motivation(s) that compelled the computer scientists of the past to create new data structures and algorithms. There’s a lot I need to learn/edit in so far as presenting my thoughts cohesively but like I said it’s been quite ad-hoc so far :smile:</p>
<h1 id="historical-context">Historical Context</h1>
<p>In the first week of class, I introduced the beginning point of machine based computation. The <strong>Difference and Analytical Engine</strong> by Charles Babbage, the <strong>Turing Machine</strong> by Alan Turing, the history of calculating math and notating patterns of match with <em>lambda calculus</em>, the <em>modern</em> <strong>Computer Architecture</strong> by John von Neuman, and the evolutions of all the dialects of programming languages that share the theoretical principles of data structures and algorithms.</p>
<p><img src="/assets/img/post/2018/10/history-19thcentury.png" alt="19th Century" /></p>
<p class="image-caption"><img src="/assets/img/post/2018/10/history-20thcentury.png" alt="20th Century" /></p>
<p><em>19th & 20th Century Computers</em></p>
<h2 id="cultural-relevance">Cultural Relevance</h2>
<p>Later on in the semester after going through simple sorting techniques on arrays and linked lists, I realized that it would be good to differentiate various operations that algorithms and data structures execute, for instance, <em>sorting</em> vs <em>searching</em> from the shape themselves. In the 1960s the whole world was facing changes in social and political issues as well as industrial shifts. We can see that Computer Science research also experienced radical shifts in the 60s.</p>
<p>I did some research to find out how the publication dates line up and because I could not find it illustrated, I drew these important dates (not drawn to scale) to show the evolution of non-linear data structures in the 60s. The “above” dates focus on the history of the <em>shapes</em> as I like to call them, to refer to the structures for organizing data. The “bottom” part show the evolution of important moments in history on <em>sorting techniques</em>.</p>
<p class="image-caption"><img src="/assets/img/post/2018/10/timeline-dsalgo.png" alt="Timeline" /></p>
<p><em>© Illustrated by <a href="http://github.com/katychuang">katychuang</a> for <a href="http://macbookandheels.com">MacbookandHeels.com</a></em></p>
<h2 id="interview-prep">Interview Prep</h2>
<p>As I wrote on the slide itself, the history displayed is brief and incomplete. In addition to a historical lens, I also emphasize the importance of knowing enough of data structures and algorithms as preparation for job seeking as these are the topics being tested along with language fluency. That time may seem far away but creeps up on you real quick. While lectures contain more theoretical aspects, the class exercises and take home assignments are designed to be more akin to the things that might be found as real world experiences.</p>
<p>The first assignment was to test for a review of the java language. The second, some interview like questions, and now the third a project with many pieces, one part utilizing data structures to make meaning from a text file. I didn’t realize until the third assignment that students need explicit prodding to socially engage with each other. I encouraged them to work together, to discuss their implementations of the assignment objectives with each other and discuss reading of API docs with each other. Just a small handful of students took that upon themselves.</p>
<p>Hopefully by the end of this semester I’ll be able to successfully tie in both the hopes and dreams of the computer scientists of yore with practical skills that computer scientists of today need to know.</p>
<div class="footnotes">
<ol>
<li id="fn:1">
<p>looking at the wikipedia page on <a href="http://en.wikipedia.org/wiki/Java_version_history">Java version history</a> shows Java version 4 was a very long time ago <a href="#fnref:1" class="reversefootnote">↩</a></p>
</li>
<li id="fn:2">
<p>At the time of learning CS, I didn’t know yet about psychologies such as imposter syndrome or gender differences. There is definitely a strong contrast in reading the material as a teen vs now as an adult with considerably more experience as a published author/editor and having seen more problems solved via data structures and algorithms. I deviated to explore HCI, Health Informatics, and social computing for quite sometime before coming back to the roots. All these topics I’ll save for another day if anyone has interest, as the points I want to make today in this post is my perspectives on one of the core, fundamental topics in CS. <a href="#fnref:2" class="reversefootnote">↩</a></p>
</li>
</ol>
</div>macbookandheelsHello again reader. So glad you’re still reading my blog! I know, I’ve been very quiet over the past two months, was up to my ears in getting up to speed with a new challenge of teaching a data structures course at a local university on top of still working full time. Had found out about the week before classes started that I got the job, thankfully my employer was understanding to allow teaching. Getting acquainted with lecturing twice a week, every week, coming up with a grading scale for each assignment/exam was an ad-hoc process, learning a lot along the way and slowly getting settled in. Right now we’re about a bit after the midpoint of the semester. It’s a little over two months into the Fall semester and just under two more months left. Had to figure out a lot of things beyond the lectures, though arguably since it’s been nearly two decades since going into depth with this material preparing the lectures has been the most challenging. Today having signed the papers agreeing to teach again next semester, seemed like a good time to write about experiences thus far.Typed NameTuples2018-08-08T07:38:00-04:002018-08-08T07:38:00-04:00http://macbookandheels.com/programming/2018/08/08/namedtuples<p>Last week I tried a Python 3.6+ featured called <a href="https://docs.python.org/3.8/library/typing.html#typing.NamedTuple">NamedTuples</a> using the <em>typing</em> module. This blog post I write my thoughts about using the <code class="language-plaintext highlighter-rouge">NamedTuple</code> from the <em>typing</em> module however there’s also a <code class="language-plaintext highlighter-rouge">NamedTuple</code> object in the <em>collections</em> module.</p>
<h2 id="type-checking-with-python">Type Checking with Python</h2>
<p>In the ideal Python set up you’d have the <code class="language-plaintext highlighter-rouge">mypy</code> package installed when using <em>typing</em> to achieve the full benefit of type checking. However, you can still <code class="language-plaintext highlighter-rouge">import typing</code> and <code class="language-plaintext highlighter-rouge">from typing import *</code> to take advantage of the <code class="language-plaintext highlighter-rouge">NamedTuple</code> data structures.</p>
<p>My task required organizing data during transformation in a pipeline from one format in one arrangement to another format in another arrangement. The <em>bits</em>, (or <em>fields</em> for you database folks), are the same in both arrangements. There was a challenge in keeping track of the 30 fields in my mental space, yet more importantly keeping track of them in the code, (1) using the core Python interpreter without use of extra libraries, and (2) making sure the output of the fields is consistent in order in the resulting CSV format.</p>
<p>In my first version of the data transformations code, I used a list of dictionaries to track the passing of data from one function to another. It was tedious to write and also verbose; it was easy to reason with as a prototype. Here’s an example using wine to demonstrate that it’s easy to end up with a lot of lines of code.</p>
<div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">wine_rack</span> <span class="o">=</span> <span class="p">[]</span>
<span class="n">bottle</span> <span class="o">=</span> <span class="p">{}</span>
<span class="n">bottle</span><span class="p">[</span><span class="s">"product_name"</span><span class="p">]</span> <span class="o">=</span> <span class="s">"Remy Martin 1738"</span>
<span class="n">bottle</span><span class="p">[</span><span class="s">"size"</span><span class="p">]</span> <span class="o">=</span> <span class="s">"1L"</span>
<span class="n">bottle</span><span class="p">[</span><span class="s">"price"</span><span class="p">]</span> <span class="o">=</span> <span class="s">"65.00"</span>
<span class="n">bottle</span><span class="p">[</span><span class="s">"currency"</span><span class="p">]</span> <span class="o">=</span> <span class="s">"USD$"</span>
<span class="n">bottle</span><span class="p">[</span><span class="s">"type"</span><span class="p">]</span> <span class="o">=</span> <span class="s">"Cognac"</span>
<span class="n">bottle</span><span class="p">[</span><span class="s">"year"</span><span class="p">]</span> <span class="o">=</span> <span class="s">"2010"</span>
<span class="n">bottle</span><span class="p">[</span><span class="s">"flavor"</span><span class="p">]</span> <span class="o">=</span> <span class="s">"Butterscotch"</span>
<span class="n">bottle</span><span class="p">[</span><span class="s">"country_of_origin"</span><span class="p">]</span> <span class="o">=</span> <span class="s">"France"</span>
</code></pre></div></div>
<p>It’s readable, but I thought I could do better than that in terms of thinking about maintainability of code. More lines of code is not necessarily more productive code. More lines of code is actually more lines of potential typos, so I personally prefer tuples if it’s a list of the same data structure, and with the <code class="language-plaintext highlighter-rouge">typing.NamedTuple</code> I could even add in the type information for future reference. Here’s the same example again using the preferred data structure, <code class="language-plaintext highlighter-rouge">NamedTuple</code>…</p>
<h2 id="example-use-of-namedtuple">Example use of NamedTuple</h2>
<p>First you create the class object for the <code class="language-plaintext highlighter-rouge">NamedTuple</code>, the order defined here is the order in which you’ll input the information later. You define this once in the part where you define the specs and other business logics, and you can easily update it depending on the business stakeholders’ needs. I really like this format as it allows for easier time working with tentative structure. Say I want to save the information on the store that is selling the bottle and whether I’ve had it before, I can default the values.</p>
<div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kn">from</span> <span class="nn">typing</span> <span class="kn">import</span> <span class="n">NamedTuple</span>
<span class="n">wine_rack</span> <span class="o">=</span> <span class="p">[]</span>
<span class="k">class</span> <span class="nc">Bottle</span><span class="p">(</span><span class="n">NamedTuple</span><span class="p">):</span>
<span class="n">product_name</span><span class="p">:</span> <span class="nb">str</span>
<span class="n">size</span><span class="p">:</span> <span class="nb">str</span>
<span class="n">price</span><span class="p">:</span> <span class="nb">float</span>
<span class="n">currency</span><span class="p">:</span> <span class="nb">str</span>
<span class="nb">type</span><span class="p">:</span> <span class="nb">str</span>
<span class="n">year</span><span class="p">:</span> <span class="nb">int</span>
<span class="n">flavor</span><span class="p">:</span> <span class="nb">str</span>
<span class="n">country_of_origin</span><span class="p">:</span> <span class="nb">str</span>
<span class="n">store</span><span class="p">:</span> <span class="nb">str</span> <span class="o">=</span> <span class="s">"Local Wine Store"</span>
<span class="n">tried_before</span><span class="p">:</span> <span class="nb">bool</span> <span class="o">=</span> <span class="bp">False</span>
</code></pre></div></div>
<p>Then later in your code when you’re working to save and transform the data structure, it becomes so much easier to work with, such as below. I can add two bottles to the wine rack and only think about the order and the type of input. With Tuples, the order does matter… so do keep that in mind. It’s not for everyone, but since I usually an pulling data and labeling them with variables, I like tuples for maintaining code.</p>
<div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">wine_rack</span><span class="o">.</span><span class="n">append</span><span class="p">(</span><span class="n">Bottle</span><span class="p">(</span><span class="s">"Remy Martin 1738"</span><span class="p">,</span> <span class="s">"1L"</span><span class="p">,</span> <span class="s">"65.00"</span><span class="p">,</span> <span class="s">"USD$"</span><span class="p">,</span> <span class="s">"Cognac"</span><span class="p">,</span> <span class="s">"2010"</span><span class="p">,</span> <span class="s">"Butterscotch"</span><span class="p">,</span> <span class="s">"France"</span><span class="p">))</span>
<span class="n">wine_rack</span><span class="o">.</span><span class="n">append</span><span class="p">(</span><span class="n">Bottle</span><span class="p">(</span><span class="s">"Dom Perignon"</span><span class="p">,</span> <span class="s">"750ml"</span><span class="p">,</span> <span class="s">"150"</span><span class="p">,</span> <span class="s">"USD$"</span><span class="p">,</span> <span class="s">"Champagne"</span><span class="p">,</span> <span class="s">"2010"</span><span class="p">,</span> <span class="s">"Citrus"</span><span class="p">,</span> <span class="s">"France"</span><span class="p">,</span> <span class="s">"Wine.com"</span><span class="p">,</span> <span class="bp">True</span><span class="p">))</span>
</code></pre></div></div>
<p>I had one function focused on the management of that list of tuples. In another function, the <code class="language-plaintext highlighter-rouge">wine_rack</code> list object was modified with list comprehension make it list of lists <code class="language-plaintext highlighter-rouge">menu = [[bottle[attr] for attr in bottle._fields] for bottle in wine_rack]</code> to <code class="language-plaintext highlighter-rouge">writerows(menu)</code> to a CSV file. It was super easy to pass that original list along from stage to stage of the data transformation and feel the guarantee that the order was right, the types matched, and that there were far fewer lines of code to maintain down the road.</p>
<p>That’s how easy it was! The choice between tuples and dictionaries as the base data structure isn’t always clear. For this project I enjoyed using tuples.</p>macbookandheelsLast week I tried a Python 3.6+ featured called NamedTuples using the typing module. This blog post I write my thoughts about using the NamedTuple from the typing module however there’s also a NamedTuple object in the collections module.Level of Details in Tableau2018-08-01T07:38:00-04:002018-08-01T07:38:00-04:00http://macbookandheels.com/2018/08/01/fixed<p>Hello! Happy August! :smile:</p>
<p>Last night I finally understood the proper use of the <code class="language-plaintext highlighter-rouge">{INCLUDE dim: expr}</code>, <code class="language-plaintext highlighter-rouge">{EXCLUDE dim: expr}</code>, and <code class="language-plaintext highlighter-rouge">{FIXED dim: expr}</code> functions for calculated fields in Tableau.</p>
<p>They operate relative to the position the field is located for the chart, meaning if you’ve already got filters and group bys it takes those into consideration.</p>macbookandheelsHello! Happy August! :smile:Quantified Self - Metrocard Months2018-06-06T07:38:00-04:002018-06-06T07:38:00-04:00http://macbookandheels.com/2018/06/06/metrocard<p>I wanted to see in graphical form how many days of the month I used my metro card in recent months as a way to figure out whether it’s worth going back to unlimited monthly fares.</p>
<p>To get the data, I logged into my easypass account and then downloaded the data into csv files. Imported that CSV file into tableau to play with the drag and drop interface.</p>
<p><img src="/assets/img/post/2018/06/tableau-calendar.png" alt="Calendar by MacbookandHeels.com" /></p>
<p>Here’s how I constructed the calendar view:</p>
<p>In the columns, I used the <code class="language-plaintext highlighter-rouge">WEEKDAY()</code> function to transform the transaction day into the day of weeks.</p>
<p>In the rows, I used the <code class="language-plaintext highlighter-rouge">Month()</code> function to show the month and then the <code class="language-plaintext highlighter-rouge">WEEK()</code> to break down the view into weeks.</p>macbookandheelsI wanted to see in graphical form how many days of the month I used my metro card in recent months as a way to figure out whether it’s worth going back to unlimited monthly fares.Jekyll Class Names2018-04-18T00:00:00-04:002018-04-18T00:00:00-04:00http://macbookandheels.com/design/2018/04/18/jekyll-class-names<p>Sometimes you might want to add classnames on a per post basis for just one or two items. You can easily do that with adding a block that is encapsulated with the <code class="language-plaintext highlighter-rouge">{:refdef:}</code> like the following example:</p>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code>{:refdef: class="specific_class_name"}
<span class="nt"><img</span> <span class="na">border=</span><span class="s">"0"</span> <span class="na">src=</span><span class="s">"image.jpg"</span> <span class="nt">></span>
{: refdef}
</code></pre></div></div>
<p>Note that this is for <code class="language-plaintext highlighter-rouge">kramdown</code> formatted markdown<sup id="fnref:docs"><a href="#fn:docs" class="footnote">1</a></sup>, which you would also need to specify for your jekyll instance by turning on this mode in your configs. Update your <code class="language-plaintext highlighter-rouge">_config.yml</code> with <code class="language-plaintext highlighter-rouge">markdown: kramdown</code></p>
<p>I’m doing this for the images that I want to be stylized a certain way on this blog. An example of this being used would be the post on <a href="/design/2018/01/17/macbook-cover/">Pretty Macbook Covers for 2018</a>, where I added a classname to center the image to the post paragraphs.</p>
<div class="footnotes">
<ol>
<li id="fn:docs">
<p>You can read more about formatting for <code class="language-plaintext highlighter-rouge">Kramdown</code> by reading the <a href="https://kramdown.gettalong.org/quickref.html#block-attributes">documentation</a> <a href="#fnref:docs" class="reversefootnote">↩</a></p>
</li>
</ol>
</div>macbookandheelsSometimes you might want to add classnames on a per post basis for just one or two items. You can easily do that with adding a block that is encapsulated with the {:refdef:} like the following example:CSS Gradient Background2018-04-11T00:00:00-04:002018-04-11T00:00:00-04:00http://macbookandheels.com/design/2018/04/11/css-gradient<p>Just came back from a trip out in Dallas, TX. It was a old cold weekend with temperatures reaching freezing point, however I had numerous fabulous meals out there. The exquisite cornocopia of flavors inspired me to post about color, here.</p>
<div class="fb-post" data-href="https://www.facebook.com/DrSnapKat/photos/a.1749974755254809.1073741828.1749956671923284/2035294166722865/" data-width="500" data-show-text="true"><blockquote cite="https://www.facebook.com/DrSnapKat/photos/a.1749974755254809.1073741828.1749956671923284/2035294166722865/?type=3" class="fb-xfbml-parse-ignore"><p>Looking back at Dallas meals.... here's the lemongrass chicken soup at Bangkok Inn!!! Perfect antidote to a bitterly cold day 😋
#thaifood #dallasfoodie #foodphotography #chickensoupforthesoul</p>Posted by <a href="https://www.facebook.com/DrSnapKat/">Dr SnapKat</a> on <a href="https://www.facebook.com/DrSnapKat/photos/a.1749974755254809.1073741828.1749956671923284/2035294166722865/?type=3">Wednesday, April 18, 2018</a></blockquote></div>
<div class="fb-post" data-href="https://www.facebook.com/DrSnapKat/photos/a.1749974755254809.1073741828.1749956671923284/2043330722585876/" data-width="500" data-show-text="true"><blockquote cite="https://www.facebook.com/DrSnapKat/photos/a.1749974755254809.1073741828.1749956671923284/2043330722585876/?type=3" class="fb-xfbml-parse-ignore"><p>I dream of ice cream 😋
What a great week, weather is fantastically warm finally up in NYC. Some people eat ice cream...</p>Posted by <a href="https://www.facebook.com/DrSnapKat/">Dr SnapKat</a> on <a href="https://www.facebook.com/DrSnapKat/photos/a.1749974755254809.1073741828.1749956671923284/2043330722585876/?type=3">Wednesday, May 2, 2018</a></blockquote></div>
<p>Recently I changed the background to move from a milky white, sterile theme into one that’s more colorful. Here’s something you can add to your stylesheets to get a background like mine, that goes three different shades from top to bottom as you scroll down:</p>
<p><code class="language-plaintext highlighter-rouge">background: linear-gradient(0deg, #bfcfef, #eed4f3, #fff7f7);</code></p>macbookandheelsJust came back from a trip out in Dallas, TX. It was a old cold weekend with temperatures reaching freezing point, however I had numerous fabulous meals out there. The exquisite cornocopia of flavors inspired me to post about color, here.