The Making of Alain.xyz

Jen Simmons' in her Podcast The Web Ahead said Everyone wants to make their own CMS, that idea extends to Game Devs, everyone wants to make their own Game Engine, or with musicians, everyone wants to make their own unique Sound, or artists, everyone wants to make their own Style or Comic. I guess it's that desire to really make an strong impact on the world that drives people to reinvent.

Still, I succumbed to the temptation and built a custom website.

Design Goals

1. Loads core application components first.

2. Dynamically load modules as needed.

Modules being JavaScript modules, so full programmatic control of any view components you load! Since they're modules, they could be anything from books to entire applications. (So we can have apps inside of apps, appception anyone?)

Here's some of the dependencies I'm building on top of:

Server

1. NodeJS - Serverside JavaScript, one language for everything.

2. MongoDB - A simple to use NoSQL Database.

3. Express - Node.js' De'facto HTTP Server.

Client

1. React - Facebook's solution to the front end management problem, functional frontends.

2. Redux - A single place to manage changes in an entire application's state.

Markup

1. KaTex - Quickly process LaTex math expressions.

2. Remarkable - Handles markdown rendering.

3. Highlight.js - Handles code syntax highlighting.

Preprocessing

1. TypeScript - A superset of JavaScript which adds types, interfaces, enums, namespaces, and babel-esque compilation to older versions of JavaScript.

2. Webpack - The newest version of Webpack that supports tree shaking and ECMAScript Modules (ESM), really powerful stuff that can remove dead code and allow dynamic module loading respectively.

3. PostCSS - a sort of preprocessor that's much more modular than Stylus, Sass, or Less. It works similar to UglyfyJS or Katex in that in generates an AST, and users can supply functions to process that AST.

Host

Digital Ocean - After comparing AWS, Google Cloud, Dreamhost, Heroku this host offers the best balance of features and price $10.00.

Getting Started

"Complexity Anchors your thinking - If you think you need a giant toolchain to produce a website, then you're going to only produce websites you can make with these giant toolchains." ~ Maciej Ceglowski

The fastest way to get something rolling is to fork some boilerplate code, here's a few I found:

1. React JWT Example - A fully functional React/Redux app example with backend auth with Json Web Tokens.

2. React Starter Kit - SPA built with React.js, Express, Flux, ES6+, JSX, Babel, PostCSS, Webpack.

3. Angular 2 Webpack - Just because this is a React App doesn't mean you can't pull in ideas from other libraries.

Making Design Decisions

There's a lot of questions involved in making a website from a architectural perspective, and in the end a lot of it comes down to opinion - You're asking a lot if you want to understand every little detail down to the bits flipped, so some decisions will honestly be opinions, but I tried being as unbiased as possible:

1. What's your Ideal WebPageTest Score? - 100 ms of latency cost amazon 1% of sales, Performance is a big deal!

2. How can you make an Emotional Website? - We need websites people care about.

3. What kind of database should you use? What about Polyglot Persistence, Micro-Services?

4. Should you containerize your app with Docker or dedicate the entire Virtual Machine to your app with IncludeOS?

5. How do you balance looks and performance?

The list goes on and on.

Site Map

The site is comprised of 3 primary modules:

├─ daemon/    # Server Daemon
├─ backend/   # Express HTTP Server
├─ frontend/  # React Frontend Application
└─ portfolio/ # Personal Portfolio

Backend

The Backend is a basic Express HTTP server, with the added functionality of being able to prerender React components to help reduce the time to interaction.

• Node - JavaScript based web server.

• Express - Middleware based web server framework.

• MongoDB - Basic non-relational database.

Frontend

The Frontend is a React/Redux/Webpack application with that takes lots of artistic license.

• React - Front-end framework view framework.

• Redux - Unified Application State system.

Daemon

The Daemon is responsible for keeping the server in sync with this Github repo (so Continuous Integration), and uses Github's Repository Webhooks to do so. Alternatives such as using a git remote are also possible, but this has the added benefit of supporting pull requests from here 😁.

• Rust - easy to use systems language used for a continuous integration daemon.

• Iron - An Express like extendable web framework for Rust.

Build

• TypeScript - Typed JavaScript.

• Lerna - Tool for managing multiple projects in one repo.

• Webpack - Compilation tool for JavaScript.

• SystemJS - an import() polyfill.

• PostCSS - CSS with postprocessing functions applied to its AST.

Portfolio Design

A Portfolio is a collection of personal/professional work that shows you're not all talk.

It should be saturated, updated often, and should only consist of your best work.

A portfolio could be made of many things:

# Business
├─ businesses/ # 🏬 Physical Products
# Writings
├─ research/   # 📄 Research Papers
├─ talks/      # 🗨️ Conference Presentations
├─ books/      # 📘 Books
├─ readings/   # 👓 Reviews/Notes/Audio Clips
├─ blog/       # 📰 Blog Articles
# Code
├─ apps/       # 🅰️️ Applications
├─ libraries/  # 📚 Libraries
# Audio
├─ podcasts/   # 🎤 Podcasts
├─ music/      # 🎵 Music
# Art
├─ art/        # 🎨 Paintings
└─ video/      # 🎥 Shows, Movies, etc

Blog Design

We have Facebook, Twitter, Tumblr, Artstation, Soundcloud, Youtube, Udacity, Codepen, and there will be more to come, the days of the static site are over. So the question is:

How do you make your site feel like you never left these communities?

The way I did this is sync any new post or update events via apps that give me access to the APIs of these websites, so any updates to the main site pushes across the social network channels.

I want to make you comfortable, go to Tumblr if you want, we have repost buttons here, Facebook like buttons that link directly to the post on Facebook! :)

Prior Art

• StackEdit are really on top of their game when it comes to writing markdown posts, supporting Footnotes, Syntax Highlighting, Mathjax, UML diagrams, etc.

• Ghost - A blogging tool used by Graze, Nasa, Bitcoin, Envato to name a few. They have built in collaboration support too!

• Wordpress Calypso just came out, Wordpress coming to 2016 with node, express, react and flux!

• CodeSchool offers amazing high quality courses with built in exam questions, similar to TreeHouse, Udemy, Edx.

• Pluralsight has an amazing course system that very polished, and they're the parent company of tons of online schools, from CodeSchool to Digital tutors.

• The Graphics Codex offers an amazing ebook experience that features:

  • A symbol table at the end of every chapter
  • Brevity and plenty of illustrations (this is a graphics book lol)
  • An amazing appendix similar to Angular.io.

The goal of this blog is to be a place where you can learn by any means, articles (tutorials), podcasts, presentations, books, courses, or whatever medium makes it easier for you the reader to learn.

Academia

It's our job as the next generation to make it easier for future generations to learn what we learned. With that said, this website is built with full citation/bibtex support thanks to some automatically generated metadata with each post.

> I sometimes worry my life's work will be reduced to a 200-line @Shadertoy submission.[^timsweeny]

Similar to Latex References, to place references, simply write [^yourrefname], and this will be matched with the folder's references.json file. (This is directly inspired by the same feature on stackedit.io).

In addition, you can write complex math equations with KaTex like The emission-absorption optical model from the book Real Time Volume Rendering by Klaus Engel et al.:

Or Kajiya's famous rendering equation:

This tweet really helps to summarize it as well.