(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.
(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.
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
The earlier example of this brushable radial chart led to some feedback to make the filtering better. I introduced a #circularBrush.filter(array,accessor) that takes an array of data and and accessor for that data and returns to you the data that falls into the area of the brush. The functionality of this chart is no different than the other, but if you take a look at the code, it's much more efficient.
import Html exposing (..) | |
import Keyboard | |
import Window exposing (Size) | |
import AnimationFrame | |
import Task | |
import Html.App as App | |
import Collage exposing (..) | |
import Element exposing (..) |
/* | |
* Available context bindings: | |
* COLUMNS List<DataColumn> | |
* ROWS Iterable<DataRow> | |
* OUT { append() } | |
* FORMATTER { format(row, col); formatValue(Object, col) } | |
* TRANSPOSED Boolean | |
* plus ALL_COLUMNS, TABLE, DIALECT | |
* | |
* where: |
*$CapsLock:: | |
Send {LControl down} | |
Sleep 300 | |
Send {LControl up} |
// ->|--|<- (Narrow) | |
javascript:w = document._w || 1100; w = w - 100; document.body.style.width = w + "px"; document._w = w; | |
// <-|--|-> (Widen) | |
javascript:w = document._w || 900; w = w + 100; document.body.style.width = w + "px"; document._w = w; |