This gist shows how to create a GIF screencast using only free OS X tools: QuickTime, ffmpeg, and gifsicle.
To capture the video (filesize: 19MB), using the free "QuickTime Player" application:
When using directives, you often need to pass parameters to the directive. This can be done in several ways. The first 3 can be used whether scope is true or false. This is still a WIP, so validate for yourself.
Raw Attribute Strings
<div my-directive="some string" another-param="another string"></div>
Press minus + shift + s
and return
to chop/fold long lines!
(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
import { Component, h, cloneElement } from 'preact'; | |
export default class SwipeRecognizer extends Component { | |
tolerance = 100; | |
gesture = { x: [], y: [], match: '' }; | |
componentDidMount() { | |
this.base.addEventListener('touchstart', this.capture); | |
this.base.addEventListener('touchmove', this.capture); | |
this.base.addEventListener('touchend', this.compute) |