lxynox

{
  "window:devtools": "command+alt+i",
  "window:reload": "command+r",
  "window:reloadFull": "command+shift+r",
  "window:preferences": "command+,",
  "zoom:reset": "command+0",
  "zoom:in": "command+plus",
  "zoom:out": "command+-",
  "window:new": "command+n",
  "window:minimize": "command+m",

lxynox

How about an ascii art version Octocat?

This can simply be achieved by the github api(https://api.github.com/octocat?s={query_string_value}), replace the {query_string_value} with the words you want the octocat to say.

As the browser trims empty space for display, the pattern might not render properly, i found 2 ways to preview:

1. web inspector

If using Chrome, open Chrome Dev Tool and inspect the HTML elements, it's wrapped in a pair of <pre></pre> tag.

lxynox

Mobx-State-Tree (MST)

mobx-state-tree is a state container that combines the simplicity and ease of mutable data with the traceability of immutable data and the reactiveness and performance of observable data.

How???

feature/
  state/
 - index.js

lxynox

When you create a npm package, remember it might be used in a browser or a server, or even a command line utility… For each package you create, please pay attention at what it will be used for:

1. Is it going to be used as a dependency to a nodejs application that is not bundled? (e.g. command line utilities)
2. Is it going to be used as a dependency to a nodejs application that is bundled? (e.g. AWS Lambdas)
3. Is it going to be used as a dependency to a browser application (always bundled)?.

• In cases 2) and 3) you want to allow for tree shaking.
• In cases 1) and 2) you want to benefit from the "ES6"/"ES next" features supported natively by nodejs.
• In case 3) you also want to benefit from the native support of "ES6" from your browser.

lxynox

Dependency

Peer Dependency

What we need is a way of expressing these "dependencies" between plugins and their host package. Some way of saying, "I only work when plugged in to version 1.2.x of my host package, so if you install me, be sure that it's alongside a compatible host." We call this relationship a peer dependency.

Problem	Solution

lxynox

Always starts from changing node_modules/ directly, for more complex use cases

🔰🔰🔰

npm link

/path/to/lib $ npm link
/path/to/app $ npm link lib

lxynox

asycn/await

async function readFiles(files) {
  for(const file of files) {
    await readFile(file);
  }
};

yield

lxynox

Top level Components handles client-side navigation state (HTML5 history api) transition

History API (State - source of truth)

Link (Dispatcher)

class Link extends React.PureComponent {
  static propTypes = {
    to: PropTypes.string,

lxynox

const createStore = (rootReducer) => {
  let state
  let listeners

  const getState = (state) => state

  const dispatch = (action) => {
    state = rootReducer(action, state)
 listeners.forEach(l => l())

lxynox

Features

• Add to home screen
• Install banner
• Offline support
• App shell
• Push notifications?
• Background sync?
• Server side rendering (SEO + improve First Meaningful Paint(FMP))