Learning log for building the lair

npm vs yarn

While npm was the initial package manager for node.js facebook people wrote yarn due to npm not being deterministic and not having a version number lock. Seems good to have. npm now supports these things but yarn is more popular so I will stick to that as i assume it will have better support, updates etc.

Using react

React seems popular enough and bootstrap looks good and simple. I have very little experience so I am following some tutorials on the side trying to learn the ins and outs of state and props.

JSX Javascript XML

Syntax extension to javascipt. It produces react elements. Some usage:

const name = 'Jonas';
const element = <h1>Hello, {name}</h1>;

To use a variable just put it in {} in text. This can also be done with functions as:

const element = <h1>Hello, {upper(name)}</h1>

You can put these variables pretty much everywhere as {}. And syntax prefers camelCase.

Empty tags

If a tag is empty as

<button></button>

You can close it right away by

<button/>

this also works in XML.

XSS protection

Any user input embedded in JSX is escaping malicious code. So no need to worry about using user input in what you render.

MongoDB

I decided to not convert the markdown files in the react logic but instead have a separate python process that converts markdown to html and puts it in a document database. And then just retrieve the html posts from the document database upon request.

At this moment I have installed the dependencies for mongodb for js with yarn, for starting a server locally using homebrew and python package with pip.

Markdown conversion in python

This is amazing. The extent of the code in python dealing with markdown amounted to:

import markdown
with open('./app/src/markdown/log.md', 'r') as f, open('./md.html', 'w') as g:
    g.write(markdown.markdown(f.read(), extensions=['extra']))

It’s pretty cool you can use context manager with several files just separate with comma which also makes it line-breakable pep8 clap not to mention context managers fucking rock. I put all the logic in one line because it’s obvious and not too long.