Welcome to my new blog! After about 6 weeks, I've managed to reinvent the wheel in Node.js and have created my own blog. There are a couple reasons why I've decided to do things the hard way instead of using something like WordPress.

• I failed to find an internship this summer, so I have ample time. I figured that it would be a good learning experience.
• I'm very particular about my editor, so I wanted complete customization. Specifically, I wanted my Emacs keybindings that are so deeply ingrained in me.
• Code highlighting and $\LaTeX$ with live preview were a must, too.
• I wanted the ability to save drafts of comments and posts, either because I want to keep them private as a diary, or to write them in pieces.

Writing this blog took me far longer than anticipated, which I mainly attribute to my lack of experience. I perhaps went overboard with testing, and I wrote hundreds of unit, integration, and functional tests. I must say that using Mocha for my test driver and Selenium for my functional tests was a very pleasant experience, however. Customizing Ace with buttons and keybindings and tying it all together with MathJax and marked was not easy, either, but I'm mostly satisified to have it working to my liking. There are a few improvements to make still like adjustable height.

I probably made a mistake in sticking to a low-level framework like Express for a straight-forward create, read, update and delete (CRUD) application and pure JavaScript for much of the front end—jQuery not even once. I had a really hard time with CSS and design, too. My stylesheet is a mess and needs refactoring. Thinking about security hurt my head, too. On the plus side, I was very excited to be able to use recursion for the commenting system. I also loved being able to share server-side and client-side code. For instance, using Browserify, I can use

var Markdown = require('lib/markdown.js');

in both my server-side and client-side code. Thus, if I don't trust the client, I can do the conversion myself on the server. Also, converting Markdown server-side may reduce page loading time for the client.

All the code for the blog can be found here on GitHub. Here are some cool features of the editor, which you can try with comment box below.

Math and SVG

I'm probably the only person in the world that writes in raw SVG. If you do, too, you can draw diagrams like

Now, we can prove the Pythagorean theorem. Note that $c = f + e$. By similar triangles we have that $$\frac{c}{a} = \frac{a}{f} \Rightarrow a^2 = cf,$$ and likewise, $$\frac{c}{b} = \frac{b}{e} \Rightarrow b^2 = ce.$$ Thus, \begin{align*} c^2 &= c(f+e) \\ &= cf + ce \\ &= a^2 + b^2. \end{align*}

The code for the SVG diagram is

<svg class="centered" width="230" height="130">
    <defs>
        <g id="right-angle-mark">
            <path d="M 12 0 L 12 12 L 0 12" style="stroke: black; fill: none;"></path>
        </g>
    </defs>
    <g transform="translate(15,15)">
        <g style="stroke: black">
            <line x1="0" y1="0" x2="0" y2="100"></line>
            <line x1="0" y1="0" x2="200" y2="0"></line>
            <line x1="0" y1="100" x2="200" y2="0"></line>
            <line x1="0" y1="0" x2="40" y2="80" style="stroke-dasharray: 5 5"></line>
        </g>
        <g>
            <use xlink:href="#right-angle-mark"></use>
        </g>
        <g transform="translate(40,80) rotate(243.4349)">
            <use xlink:href="#right-angle-mark"></use>
        </g>
        <g style="font-style: italic; text-anchor: middle">
            <text x="100" y="0" dy="-3">a</text>
            <text x="0" y="50" dx="-7">b</text>
            <text x="100" y="50" dx="5" dy="10">c</text>
            <text x="20" y="40" dx="7">d</text>
            <text x="20" y="90" dy="-5" dx="-3">e</text>
            <text x="120" y="40" dy="-5" dx="-3">f</text>
        </g>
    </g>
</svg>

I had to some basic trigonometry to calculate the coordinates, which mainly involved noting that $\theta = \tan^{-1}(2)$, where $\theta$ is the lower-left angle. Note that you can add a centered class to center your diagram. One of the annoying things about Mathematics Stack Exchange, from where I drew much inspiration is the lack of ability to center diagrams.

The $\LaTeX$ is $$\frac{c}{a} = \frac{a}{f} \Rightarrow a^2 = cf$$ and

\begin{align*}
c^2 &= c(f+e) \\
&= cf + ce \\
&= a^2 + b^2.
\end{align*}

Code

Code is automatically highlighted. See this implementation of binary search in C++ using iterators:

#include <iostream>     // std::cout
#include <algorithm>    // std::sort
#include <vector>       // std::vector
#include <iterator>     // ForwardIterator

namespace phillypham {
    template <class ForwardIterator, class T> ForwardIterator 
    binary_search (ForwardIterator first, ForwardIterator last, const T& val) {
        auto mid = first + (last - first)/2;        
        while (*mid != val && first < last) {        
            if (*mid > val) {
                last = mid; // new upper bound
            } else {    
                first = mid + 1; // *mid < val
            }
            mid = first + (last - first)/2;
        }
        std::cout << *mid << std::endl;
        // loop ends when val or first and last are equal
        while (mid != first && *(mid - 1) == *mid) --mid;
        return mid;
    }
}

int main (int argc, char *argv[]) {      
  std::vector<int> v{10,20,30,30,20,10,10,20}; // size 8
  std::sort (v.begin(), v.end()); // 10 10 10 20 20 20 30 30

  std::vector<int>::iterator it1, it2, it3, it4;
  it1 = phillypham::binary_search(v.begin(), v.end(), 20);   
  it2 = phillypham::binary_search(v.begin(), v.end(), -10);
  it3 = phillypham::binary_search(v.begin(), v.end(), 30); 
  it4 = phillypham::binary_search(v.begin(), v.end(), 1000); 


  std::cout << "found " << *it1 << " at position " << (it1 - v.begin()) << std::endl; 
  // 20, 3
  std::cout << "found " << *it2 << " at position " << (it2 - v.begin()) << std::endl;
  // 10, 0
  std::cout << "found " << *it3 << " at position " << (it3 - v.begin()) << std::endl; 
  // 30, 6
  std::cout << "found " << *it4 << " at position " << (it4 - v.begin()) << std::endl; 
  // undefined, 8  

  return 0;
}

Languages are auto-detected, but you can also use a hint to help hightlight.js like this

```cpp
// your code here
```

You can also insert code by highlighting your text and clicking the code button or indenting with 4 spaces.

Tables

There is support for GitHub-flavored markdown. You make this table

with

| Item      | Value  | Qty  |
| --------- | -----: | :--: |
| Computer  | $1600  |   5  |
| Phone     |   $12  |  12  |
| Pipe      |    $1  | 234  |