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.
elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParentelem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeightelem.getClientRects(), elem.getBoundingClientRect()
| {"lastUpload":"2017-10-22T14:07:53.099Z","extensionVersion":"v2.8.3"} |
| function createStore(reducer, initialState) { | |
| let currentState = initialState; | |
| let listeners = []; | |
| function subscribe(listener) { | |
| listeners.push(listener); | |
| const isSubscribed = true; | |
| return function unsubscribe() { | |
| if (!isSubscribed) return | |
| isSubscribed = false |
Interesting part (unmounting & API) is at the end if you're not interested in the rest =).
This animation proposal is just an attempt. In case it doesn't work out, I've gathered a few examples that can test the power of a future animation system.
Parent is an infinitely spinning ball, and has a child ball that is also spinning. Clicking on the parent causes child to reverse spinning direction. This tests the ability of the animation system to compose animation, not in the sense of applying multiple interpolations to one or more variables passed onto the child (this should be trivial), but in the sense that the parent's constantly updating at the same time as the child, and has to ensure that it passes the animation commands correctly to it. This also tests that we can still intercept these animations (the clicking) and immediately change their configuration instead of queueing them.
Typing letters and let them fly in concurrently. This tests concurrency, coordination of an array of ch
Just trying to create a snowfall effect using SVG and CSS animations. JavaScript is used to simply randomize the location of the snowflakes. Full warning: works in Chrome, Safari, Firefox and later versions of Opera. Internet Explorer (up to and including 11) doesn't seem to like it.
A Pen by Chip Cullen on CodePen.
| // require 'css' | |
| { | |
| submit: "_957ii", | |
| disabledSubmit: "_1F9px" | |
| } |
| /* style.css */ | |
| .className { | |
| color: green; | |
| } | |
| /* form.css */ | |
| .submit { | |
| } |
| (function (root, factory) { | |
| "use strict"; | |
| if (typeof define === 'function' && define.amd) { | |
| define(['moment'], factory); | |
| } else if (typeof exports === 'object') { | |
| module.exports = factory(require('moment')); | |
| } else { | |
| factory(root.moment); | |
| } | |
| }(this, function (moment) { |
A lot of people mentioned other immutable JS libraries after reading my post. I thought it would be good to make a list of available ones.
There are two types of immutable libraries: simple helpers for copying JavaScript objects, and actual persistent data structure implementations. My post generally analyzed the tradeoffs between both kinds of libraries and everything applies to the below libraries in either category.
Libraries are sorted by github popularity.