| /*! | |
| * gulp | |
| * $ npm install gulp-ruby-sass gulp-autoprefixer gulp-cssnano gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev | |
| */ | |
| // Load plugins | |
| var gulp = require('gulp'), | |
| sass = require('gulp-ruby-sass'), | |
| autoprefixer = require('gulp-autoprefixer'), | |
| cssnano = require('gulp-cssnano'), |
| {{#each (expand 'content/*.md')}} | |
| {{#markdown}} | |
| {{inline .}} | |
| {{/markdown}} | |
| {{/each}} |
(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.
| # Add a link to itself in its own node_modules directory: | |
| npm link && npm link app-name |
The final result: require() any module on npm in your browser console with browserify
This article is written to explain how the above gif works in the chrome (and other) browser consoles. A quick disclaimer: this whole thing is a huge hack, it shouldn't be used for anything seriously, and there are probably much better ways of accomplishing the same.
Update: There are much better ways of accomplishing the same, and the script has been updated to use a much simpler method pulling directly from browserify-cdn. See this thread for details: mathisonian/requirify#5
Example and reasonings when using Reflux stores and actions for a Master/Detail app with React – with an eye to server-side rendering. Some concepts apply to reflux#166 and reflux#180.
This hypotetical app would use a router to display a list of items (e.g. at the url example.org/items, the master view) and a single item (e.g. example.org/items/:id, the detail view).
| let Rx = require("rx"); | |
| Rx.Observable.fromSuperagent = request => () => Rx.Observable.create(observer => { | |
| request.end((err, res) => { | |
| if (err) { | |
| observer.onError(err) | |
| } else { | |
| observer.onNext(res); | |
| } | |
| observer.onCompleted(); |
| /** | |
| * Adds an accessibility layer to the default noUiSlider. | |
| * | |
| * @see $.fn.noUiSlider() | |
| */ | |
| $.fn.noUiSliderA11y = function(options, rebuild) { | |
| var slider = this; | |
| if (!('noUiSlider' in slider)) { | |
| throw new Error('noUiSlider is not loaded.'); |
