title |
---|
Comparison to OCaml |
If you come from OCaml or are a newcomer reading a tutorial written on OCaml, this guide's for you! But don't forget that reason-tools can convert between OCaml and Reason syntax on the fly.
OCaml | Reason |
---|
title |
---|
Comparison to OCaml |
If you come from OCaml or are a newcomer reading a tutorial written on OCaml, this guide's for you! But don't forget that reason-tools can convert between OCaml and Reason syntax on the fly.
OCaml | Reason |
---|
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
While this gist has been shared and followed for years, I regret not giving more background. It was originally a gist for the engineering org I was in, not a "general suggestion" for any React app.
Typically I avoid folders altogether. Heck, I even avoid new files. If I can build an app with one 2000 line file I will. New files and folders are a pain.
# OSX for Hackers (Mavericks/Yosemite) | |
# | |
# Source: https://gist.github.com/brandonb927/3195465 | |
#!/bin/sh | |
# Some things taken from here | |
# https://github.com/mathiasbynens/dotfiles/blob/master/.osx | |
# Ask for the administrator password upfront |
Recommendations of unit types per media type:
Media | Recommended | Occasional use | Infrequent use | Not recommended |
---|---|---|---|---|
Screen | em, rem, % | px | ch, ex, vw, vh, vmin, vmax | cm, mm, in, pt, pc |
em, rem, % | cm, mm, in, pt, pc | ch, ex | px, vw, vh, vmin, vmax |
(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.
Google Chrome Developers says:
The new WOFF 2.0 Web Font compression format offers a 30% average gain over WOFF 1.0 (up to 50%+ in some cases). WOFF 2.0 is available since Chrome 36 and Opera 23.
Some examples of file size differences: WOFF vs. WOFF2
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
// === Arrays | |
var [a, b] = [1, 2]; | |
console.log(a, b); | |
//=> 1 2 | |
// Use from functions, only select from pattern | |
var foo = () => [1, 2, 3]; |