staydecent

const seq = (...args) => input => args.reduce((acc, el) => el(acc), input)
const cons = (a, b) => fn => fn(b == null ? b : a, b || a)
const car = pair => pair((a, b) => a)
const cdr = pair => pair((a, b) => b)
const tree = comp => seq(car(comp), cdr(comp))
const isCons = fn => fn.toString() === 'fn => fn(b == null ? b : a, b || a)'

;((win, doc) => {

  const tags = ["a", "abbr", "acronym", "address", "applet", "area", "article", "aside", "audio", "b", "base", "basefont", "bdi", "bdo", "big", "blockquote", "body", "br", "button", "canvas", "caption", "center", "cite", "code", "col", "colgroup", "data", "datalist", "dd", "del", "details", "dfn", "dialog", "dir", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "font", "footer", "form", "frame", "frameset", "h1", "h2", "h3", "h4", "h5", "h6", "head", "header", "hr", "html", "i", "iframe", "img", "input", "ins", "kbd", "keygen", "label", "legend", "li", "link", "main", "map", "mark", "menu", "menuitem", "meta", "meter", "nav", "noframes", "n

staydecent

const seq = (...args) => input => args.reduce((acc, el) => el(acc), input)
const cons = (a, b) => fn => fn(a, b)
const car = pair => pair((a, b) => a)
const cdr = pair => pair((a, b) => b)
const render = Comp => seq(car(Comp), cdr(Comp))

const App = cons(state => state.count, count => `Count ${count}`)

console.log(
	render(App)({count: 2})

staydecent

# Configuration for Alacritty, the GPU enhanced terminal emulator.

# Any items in the `env` entry below will be added as
# environment variables. Some entries may override variables
# set by alacritty itself.
#env:
  # TERM variable
  #
  # This value is used to set the `$TERM` environment variable for
  # each instance of Alacritty. If it is not present, alacritty will

staydecent

function assign (obj, props) {
  for (var i in props) obj[i] = props[i]
}

function toLower (str) {
  return String(str).toLowerCase()
}

function splice (arr, item, add, byValueOnly) {
  var i = arr ? findWhere(arr, item, true, byValueOnly) : -1

staydecent

hotkeys:
  profile: {}
  shell: {}
  close-tab: []
  close-pane:
    - - Ctrl-Shift-W
  pane-nav-up:
    - - Ctrl-Alt-Up
    - - Ctrl-Shift-Up
  pane-nav-down:

staydecent

import { useEffect, useReducer, useRef } from 'react' // alias to 'preact/hooks'
import equal from '@app-elements/equal'

export function useMappedState (store, mapper) {
  const [, forceRender] = useReducer(n => n + 1, 0)

  const mapperRef = useRef()
  const stateRef = useRef()

  let mappedState = mapper !== mapperRef.current

staydecent

Why migrate from class to hooks?

class is syntactic sugar that abstracts prototypal inheritance, making it appear more familiar to those coming from languages with classical inheritance, but does not actually introduce a classical object-oriented inheritance model.

So, it’s basically a LIE.

React docs recommend AGAINST using inheritance to share functionality anyway

So why did they introduce class based components??

staydecent

const handler = {
  get (obj, prop) {
    if (prop in obj) {
      if (typeof obj[prop] === 'object') {
        return new Proxy(obj[prop], handler)
      }
      return obj[prop]
    }
    return new Proxy({}, handler)
  }

staydecent

iOS Deployment

• Create an App ID in the Apple Developer portal
• Add a new App on App Store Connect (may need to wait for App ID to be available)
• In you xcode project make sure Automatic code signing is checked and a development team is chosen
• cd ios/ && fastlane init
• When you are ready: fastlane beta

Sample Fastline config

staydecent

Why Preact over React?

• Preact filesize is much smaller than React. ~8kb vs ~100kb
• Rendering performance is also faster. (https://developit.github.io/preact-perf/)
• Preact, while it is a subset of React, implements the most common API surface of React. This means the exact same stateless functional components and ES6 class based component definitions will work with either library.
• Preact also supports Contexts and Refs, which can be useful in more complex apps.
• PropTypes, Hooks, and other features that are not included with the base Preact library are opt-in. Many of which are provided by the preact-compat library.
• Full compatibility can be acheived for third-party libraries built for React by aliasing the preact-compat library to "react" and "react-dom".

This means you get a smaller, faster app with a simpler React API surface to learn. If complexity of your app eventually requires more advanced features, you can include preact-compat to acheive the full React API.