| import * as React from "react"; | |
| import { useMousePosition } from "~/hooks/useMousePosition"; | |
| /** Component to cover the area between the mouse cursor and the sub-menu, to allow moving cursor to lower parts of sub-menu without the sub-menu disappearing. */ | |
| export function MouseSafeArea(props: { parentRef: React.RefObject<HTMLDivElement> }) { | |
| const { x = 0, y = 0, height: h = 0, width: w = 0 } = props.parentRef.current?.getBoundingClientRect() || {}; | |
| const [mouseX, mouseY] = useMousePosition(); | |
| const positions = { x, y, h, w, mouseX, mouseY }; | |
| return ( | |
| <div |
None of the string methods modify this – they always return fresh strings.
charAt(pos: number): string ES1
Returns the character at index pos, as a string (JavaScript does not have a datatype for characters). str[i] is equivalent to str.charAt(i) and more concise (caveat: may not work on old engines).
| const State = React.createState(); | |
| function MyComponent(props) { | |
| return ( | |
| <State | |
| initialState={() => ({ counter: 0, lastProps: props, divRef: React.createRef() }) } | |
| deriveState={state => ({ lastProps: props }) } | |
| shouldUpdate={(state, nextState) => ... } | |
| didMount={(state, setState) => ... } | |
| getSnapshotBeforeUpdate={state => ... } |
| // node --harmony-async-iteration async-iteration-test.js | |
| // for-await-of converts sync iterables over Promises to async iterables over fulfillment values | |
| // Iterable<Promise<T>> -> AsyncIterable<T> | |
| // Roughly: { value: Promise.resolve(123), done: false } becomes Promise.resolve({ value: 123, done: false }) | |
| // Spec: https://tc39.github.io/proposal-async-iteration/#sec-createasyncfromsynciterator | |
| function* gen() { | |
| yield Promise.resolve(1); |
| // | |
| // MIT License | |
| // | |
| // Copyright (c) 2018 Ali Sharif | |
| // | |
| // Permission is hereby granted, free of charge, to any person obtaining a copy | |
| // of this software and associated documentation files (the "Software"), to deal | |
| // in the Software without restriction, including without limitation the rights | |
| // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | |
| // copies of the Software, and to permit persons to whom the Software is |
tl;dr I built a demo illustrating what it might look like to add async rendering to Facebook's commenting interface, while ensuring it appears on the screen simultaneous to the server-rendered story.
A key benefit of async rendering is that large updates don't block the main thread; instead, the work is spread out and performed during idle periods using cooperative scheduling.
But once you make something async, you introduce the possibility that things may appear on the screen at separate times. Especially when you're dealing with multiple UI frameworks, as is often the case at Facebook.
How do we solve this with React?
| <? | |
| // | |
| // [ BUY BTC & ETH DAILY ON BITSTAMP ] | |
| // by @levelsio | |
| // | |
| // 2017-08-23 | |
| // | |
| // 1) buy $40/day BTC | |
| // 2) buy $10/day ETH | |
| // |
| // UPDATE: In 2023, you should probably stop using this! The narrow version of Safari that | |
| // does not support `nomodule` is probably not being used anywhere. The code below is left | |
| // for posterity. | |
| /** | |
| * Safari 10.1 supports modules, but does not support the `nomodule` attribute - it will | |
| * load <script nomodule> anyway. This snippet solve this problem, but only for script | |
| * tags that load external code, e.g.: <script nomodule src="nomodule.js"></script> | |
| * | |
| * Again: this will **not** prevent inline script, e.g.: |
