A tiny (265 byte) utility to create state machine components using two pure functions.
The API is a single function that accepts 2 pure functions as arguments:
import * as React from 'react'; | |
const useIsFirstRender = (): boolean => { | |
const isFirst = React.useRef(true); | |
if (isFirst.current) { | |
isFirst.current = false; | |
return true; | |
} else { |
function getDomDepthLevel(root = document.documentElement) { | |
let pathInfo = { | |
route: [], | |
level: 0 | |
}; | |
for (let i = 0, j = root.children.length; i < j; i++) { | |
const curNodePathInfo = getDomDepthLevel(root.children[i]); | |
if (curNodePathInfo.level > pathInfo.level) { | |
pathInfo = curNodePathInfo; | |
} |
A tiny (265 byte) utility to create state machine components using two pure functions.
The API is a single function that accepts 2 pure functions as arguments:
A list of languages which compile to JS (Elm, Purescript, OCaml) | |
(Inspired by this thread: https://groups.google.com/forum/#!topic/elm-discuss/Um7WIBTq9xU) | |
They all support curry calling convention by default. | |
Some interesting results: | |
1. `min` is curried function, only OCaml(BuckleScript) managed to optimize this overhead. | |
2. All optimize the self tail call | |
3. Only BuckleScript and PureScript type-specialized comparison functoin (>=) and inlined |
All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.
Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.
elem.offsetLeft
, elem.offsetTop
, elem.offsetWidth
, elem.offsetHeight
, elem.offsetParent
javascript:(function(){var styles = document.querySelectorAll('link[rel=\'stylesheet\']'); for (var s = 0; s < styles.length; s++) {styles[s].mediax = styles[s].media;if (styles[s].media === 'only x') { styles[s].media = styles[s].mediax; } else if (styles[s].media !== 'print') {styles[s].media = 'only x';}}})(); |
// UPD: | |
// Now available as npm module! | |
// Check out https://github.com/RReverser/better-log for details. | |
console.log = (function (log, inspect) { | |
return function () { | |
return log.apply(this, Array.prototype.map.call(arguments, function (arg) { | |
return inspect(arg, { depth: 1, colors: true }); | |
})); | |
}; |
(by @andrestaltz)
If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.