jtcho - Tumblr blog

[jtcho]

Installing Node.js / npm (1.4.28) 'Properly'

Short post today.

As I've only very recently gotten into web development and Node.js (largely out of a self-perceived necessity), I've had to install npm and Node.js on all of my development computers. I run a bunch of devices, and I develop for the web on both OSX and ElementaryOS (Ubuntu 12.04 fork). I haven't tried on Windows yet, because I imagine it would be a nightmare.

Setting up npm properly seems to be a bit of a pain, since I've run into my fair share of botched installs with permission errors and whatnot. Since I just had to set up npm on my PC's Linux partition, I'll note what steps I took to get Yeoman generators up and running, without sudo.

curl -sL https://deb.nodesource.com/setup | sudo bash -

sudo apt -get install -y nodejs 

npm config set prefix ~/npm

mkdir ~/npm    #To satisfy the npm config.

All good! :) I'll update this if I run into any future problems with this method.

[jtcho]

Drawing Tidy Trees in Javascript

Howdy again!

It turns out that the rate at which I can make projects exceeds that of my blog-writing, so I'll have to be a bit more concise with my posts for the sake of completion.

Today, I'll be discussing how I drew 'tidy' binary search trees for my Binary Search Tree Visualizer!

I quickly realized that drawing compact, nice-looking binary trees was not easy. Turns out, it's actually an NP-complete problem!

My initial approach made something like this:

Yuck. I had to 'cheat' by decreasing the size of child nodes, but that was still ugly and caused problems with rotations for the self-balancing trees.

A quick Google search brought me to Bill Mill's page on drawing presentable trees. He discusses at length the intuitions behind the algorithmic decisions made for drawing nice trees, but in particular I took note of the Reingold-Tilford algorithm (No need for the Bucheim n-ary algorithm!).

There are a few invariants that I needed to maintain with regards to the horizontal positioning of each node:

No edges or nodes should overlap.

Every parent node is centered above its children.

If there is only one child, space the parent a horizontal unit (e.g. 2 radii) away from it.

A root node's right subtree should be as close to the left subtree as possible.

And of course, any nodes at the same height should be at the same y-coordinate.

I'll preface my explanation of my implementation by stating that my solution was not the most optimal one - I chose not to use threads as in the original R-T algorithm, only the concept of contours. More on that later.

The top-down approach makes the design pretty straightforward. I won't go into too much detail here as the comments make it pretty clear.

All in all, we make several amortized linear time, post-order passes over the entire tree.

A couple of terminology clarifications, a contour refers to an entire 'path' down a node's subtree, i.e. the leftmost path or the rightmost path.

In the above tree, the left contour is [CB] and the right contour is [NP]. I check the contours of every node's subtrees, which represent the index extremes, to make sure that no nodes are overlapping.

I'll omit the code from this post for the sake of conciseness, but it is available on my Github. 

Here's how the final result draws:

Not bad!

How could this code be more efficient? a) I could consolidate the determineInitialX and positionParents functions - as both operate post-order over the tree nodes. b) Adding 'threads' as described by Reingold/Tilford would save some algorithmic runtime for fixOverlaps. 

However, for the limited purpose of demonstration, I did not deem the performance improvements worth the extra time investment, so I left it as is.

I may eventually release a Javascript library for drawing SVG binary trees, but for now that's it!

Thanks for reading, and if you have any questions, feel free to shoot me a message!

[jtcho]

personal website development: part two, d3 and angular

I knew from the get-go that I wanted a skills section on my website with snazzy bar charts. There's something very satisfactory about quantifying your hard work and experience, and what better way than with data visualization?

Of course, I didn't want to go for anything as extreme as Munroe's seeming obsession with self-referential data plots.

a slight anecdote

At the HackMIT Fall 2014 hackathon, I had talked with the Thomson Reuters representatives and received an API key. While I had already committed to another project, looking through the vast amount of pharmaceutical and financial data available to me through TR inspired my subconscious to figure out how I could use such a bulk amount of data.

I came up with two answers - data mining to identify certain numerical trends or patterns, or data visualization to qualitatively determine trends (or to please the CS aesthetes). I kept it on the back of my mind that I should figure out data-visualization at some point.

Around a week later, someone posted on the Hackathon Hackers group asking about something called D3, Data Driven Documents. I was amazed that such a tool existed, and that I hadn't heard about it before. I figured I'd learn it the only way I knew how, by using it in my website!

angularjs and d3

I worked on every section on my website from the (literal) bottom-up, so at this point I had very little experience with AngularJS or anything (apart from grunt serve, grunt serve:dist, etc.) I went through various tutorials on what I wanted to do - make bar charts with axes that would animate on page-load and mouse hover.

Turns out it wasn't quite as easy as I expected. I knew how to do the expanding rectangles with CSS animations, but I had little to no exposure with SVGs.

First, I had to wrap D3 in AngularJS. The recommended way to do this from tutorials was using a directive.

Simple enough. I created a skeleton directive that would take as parameters the data for the bar graphs, and simply render it all in one package. Therefore, the directive would be portable and make for readable HTML! The meat of the code, however, would be in the link function.

Still being written! Check back soon. Gists work kind of funny with Tumblr.

[jtcho]

personal website development: part one

Howdy again! This series of posts will detail my development of my personal website, http://jtcho.me. I have yet to figure out the kinks in my writing process, so bear with me as I hone my online-writing style!

In the weeks prior to the deadline for the KPCB Engineering Fellows application, I found myself in sore need of a web-presence. My Github had not been particularly active as of late (mostly due to laziness), and I had no personal website.

I spent some time to find all of my projects (old and new) and to put them on Github, but I still needed to build a website.

Given that I had no modern web-development experience, the first question I had to tackle was:

What technologies should I use?

The last time i had done any web-work was a few years in the past, and I had only used pure HTML, CSS, and some JavaScript. Everything had been written painstakingly by hand, and I had grown a severe distaste for the web-markup language and styling.

And here I was, trying to get back into web development. I looked around some for commonly used web-technologies and found:

PHP, Rails, Django, AngularJS, MeteorJS + more! The endless list of modern web-technologies was daunting. 

So I asked around a bit and did my research.

What I got: PHP was a recommended "easy" solution that would allow me to better appreciate the under the hood stuff that more powerful frameworks like Rails/Django would hand-wave. However, I was told that it also encouraged bad coding practice and suffered in scalability and performance. Rails was great for prototyping fast webapps but wouldn't be optimal for large-scale production.... etc.

This was all great advice, but I was able to quickly determine that I probably wouldn't need anything as "complex" as Rails or Django for something as "simple" as a personal website.

Yet, I didn't want to resort to the plain and simple HTML/CSS/Wordpress solution I had been using in the past. I needed to learn something powerful enough to create web-apps, for posterity!

I didn't know Ruby but I knew Python and Javascript. Purely based on a whim, I started with the JavaScript stack. I opened a tutorial on AngularJS that used Yeoman to scaffold.

I was quickly blown away with what I could create in such a small amount of time. The amount of power that Angular gave me with two-way data binding was awesome. While I'm sure I could achieve similar results with other frameworks, the high-modularization that Angular enforced (highly appreciated given Javascript's correlation with high code entropy) along with Grunt's ease of task automation were eons beyond my past tinkering with basic HTML and CSS. I was sold.

I knew I had some space on DigitalOcean floating around, and with a free domain from NameCheap, I was in a prime position to get started working on a new website.

Initial Design

I knew from the start that I wanted a website with a charcoal, orange, and blue palette. I'm not much of a designer, but I was aware that choosing a good color palette from the get-go would be instrumental in guiding my later design choices.

I opened Photoshop and whipped out a simple page layout, using a SubtlePatterns pattern for the background. I knew I wanted a "bootstrap"-esque scrolling page, and I also wanted the banner to be something very distinctive and emblematic of my personality. I chose to make a pixel-art side scroller.

This was the initial design in Photoshop:

I did all the pixel art separately, one pixel at a time in another .psd, and I inflated the image with nearest-neighbor resampling to satisfy a 1920 px width.

I quickly scaffolded using Yeoman's angular generator. Getting the basic form of the website was simple enough using a heavily customized Twitter Bootstrap skeleton.

From there I separated the bulk of the coding work into five parts: the 'skills', 'about', 'projects', 'sticky scroll navbar', and 'portal/banner sections. Each took a decent amount of time and learning in AngularJS!

Pausing here... in the interest of spatial efficiency, I will be compartmentalizing this post into different sections. I'll pick up again in the next post starting with the D3 skill charts!

[jtcho]

hello world!

Howdy!

I decided to use Tumblr as a blogging service, mostly because it's relatively hassle free and saves me the trouble of hosting on my own server space. I may end up switching later on in the future, but since I don't expect to be blogging too much, this will suffice.

Otherwise, welcome to my second home on the internet, my blog! Note, this is not a personal blog in the sense that I will not be reblogging posts that I find interesting or gushing over the most recent Homestuck updates.

I anticipate that I will only be posting opinion pieces and things of an academic or computer science-specific nature. In particular, writeups on projects that I am working on will be posted here!

That's it for now. Thanks for reading!