CarlMungazi

ReactRoot.prototype.render = function (children, callback) {
  var root = this._internalRoot;
  var work = new ReactWork();
  callback = callback === undefined ? null : callback;
  {
    warnOnInvalidCallback(callback, 'render');
  }
  if (callback !== null) {
    work.then(callback);
  }

CarlMungazi

// Initial mount should not be batched.
unbatchedUpdates(function () {
  if (parentComponent != null) {
    root.legacy_renderSubtreeIntoContainer(parentComponent, children, callback);
  } else {
    root.render(children, callback);
  }
});

CarlMungazi

{
  actualDuration: 0
  actualStartTime: -1
  alternate: null
  child: null
  childExpirationTime: 0
  effectTag: 0
  elementType: null
  expirationTime: 0
  firstContextDependency: null

CarlMungazi

{
  containerInfo: div#root
  context: null
  current: FiberNode {tag: 3, key: null, …}
  didError: false
  earliestPendingTime: 0
  earliestSuspendedTime: 0
  expirationTime: 0
  finishedWork: null
  firstBatch: null

CarlMungazi

function legacyRenderSubtreeIntoContainer(parentComponent, children, container, forceHydrate, callback) {
  ...
  let root = container._reactRootContainer;
  if (!root) {
    // Initial mount
    root = container._reactRootContainer = legacyCreateRootFromDOMContainer(container, forceHydrate);
    if (typeof callback === 'function') {
      const originalCallback = callback;
      callback = function () {
        const instance = DOMRenderer.getPublicRootInstance(root._internalRoot);

CarlMungazi

ReactDOM.render( 
  <h1>Hello, world!</h1>, 
  document.getElementById('root'), 
  () => {} 
);

CarlMungazi

Typography

• Use font sizes between 15-25px for body text
• Use bigger font sizes for headlines. Decrease font-weight as font-size increases.
• Use 120-150% of font-size for line-height
• Allow 45-90 characters per line. Increase font-size and/or whitespace or use a multi-column to help with this
• Use sans-serif fonts for UI elements and most other things. Use serif fonts for content and long text sections
• Do not put text on images you do not control
• Text shadows can improve legibility
• 4:5:1 contrast ratio for text below 24px and 3:1 for text above 24px
• Do not mix text effects which add emphasis. For example, do not underline and italicise text which is also bold

CarlMungazi

In my first explainer of Mithril's source code, I broke down how the hyperscript function worked. It's main task is the creation of virtual DOM nodes (vnodes), the objects which represent DOM elements or parts of the DOM. So how are these objects created?

Vnode functions

This is the function which creates a vnode:

function Vnode(tag, key, attrs, children, text, dom) {
	return {tag: tag, key: key, attrs: attrs, children: children, text: text, dom: dom, domSize: undefined, state: undefined, _state: undefined, events: undefined, instance: undefined, skip: false}
}

This function is assisted in its work by these two helper functions:

CarlMungazi

Before reading a library or framework's source code, it's advisable to go through the documentation. Thankfully, mithril's size means reading through the main APIs is not that arduous a task. When reading the docs, you will often find notes from the authors detailing recommended ways of using the available features. This is useful when you read the source because you can more easily understand why certain bits of code exist. I've noted below five recommendations I came across during my latest round of reading the mithril docs. I found more than five but I'll go through the rest at a later time. The example code below each recommendation has been taken from the docs.

1. Use CSS selectors for attributes with unchanging values and pass an attributes object for attributes with values that can change

m("div#hello") // static

m("a.link[href=/]", { 
	class: currentURL === "/" ? "selected" : ""
}, "Home") // dynamic

CarlMungazi

Earlier this year at work we re-wrote an internal framework we used to create SPA e-learning courses. After briefly trying out React, Angular 2, Ember and Vue, we settled on mithril (https://mithril.js.org). If I were to compare it to the frameworks we tried out, I would say it's more like React but with a simpler, smaller codebase. By the way, if you like geeking out on code articles, the articles from mithril's old site have some real nuggets of gold (http://lhorie.github.io/mithril-blog/).

A few months after the re-write was done, I dug into mithril's codebase to gain a deeper understanding and this is what I found...

The main entry point into mithril's source code is the m() function, which is a hyperscript function that, according to the docs (https://mithril.js.org/hyperscript.html), represents an element in a mithril view. It's demonstrated below as:

m("div", {id: "box"}, "hello")
// equivalent HTML:
// <div id="box">hello</div>