jescalan

Spike v0.11.0 Migration Guide

In this release of spike, we switch posthtml for reshape. Reshape is a complete rewrite of posthtml by the static-dev team with several significant differences:

• It returns a function by default, so that its results can be used as client-side templates
• It has a much more clear and robust error reporting system, reporting errors that include the line/col in the original source, and exposing a code snippet to show where it came from
• It has more clearly written documentation, more thorough tests, consistent code style, and 100% coverage on all core modules

However, as a consequence of this move, the jade plugin is no longer available. The jade plugin was always a hack, and had several crippling caveats. In addition, jade does not fit well with reshape's philosophy of breaking functionality down into small modules. As such, we have replaced ja

jescalan

Spike v1 Migration Guide

Spike v1 represents a significant change, mostly because it includes an update from webpack v1 to webpack v2 behind the scenes. The aim of this piece is to guide you through the process of migration from one version to the next, and explain a bit of the rationale behind these changes.

App.js Updates

The bulk of the migration work lies in the app.js file. Webpack drastically changed its configuration in a very breaking manner between v1 and v2, so spike was forced to do the same, since spike is an extension of webpack.

Webpack Config Changes

mattdesl

agnostic modules

Most of the modules I write are "agnostic" in that they should work in Node, browserify, webpack, Rollup, jspm... hell, even Unreal.js. It's just ES5, CommonJS and a few quirks like process.nextTick or require('path') (which browserify and webpack will shim).

Other modules are a bit trickier, and need to include a static asset like HTML, GLSL or another file.

In Node you might see this:

var fs = require('fs')

baybatu

/*
* Splits array into subarrays.
* count parameter indicates that how many item per subarray contains.
* Example usage: splitIntoSubArray([1,2,3,4,5], 2) -> [[1, 2], [3, 4], [5]]
*/
function splitIntoSubArray(arr, count) {
  var newArray = [];
  while (arr.length > 0) {
    newArray.push(arr.splice(0, count)); 
  }

danawoodman

WebSockets + Reflux + React

Using WebSockets, React and Reflux together can be a beautiful thing, but the intial setup can be a bit of a pain. The below examples attempt to offer one (arguably enjoyable) way to use these tools together.

Overview

This trifect works well if you think of things like so:

1. Reflux Store: The store fetches, updates and persists data. A store can be a list of items or a single item. Most of the times you reach for this.state in react should instead live within stores. Stores can listen to other stores as well as to events being fired.
2. Reflux Actions: Actions are triggered by components when the component wants to change the state of the store. A store listens to actions and can listen to more than one set of actions.

markusklems

// create an IAM Lambda role with access to dynamodb
// Launch Lambda in the same region as your dynamodb region
// (here: us-east-1)
// dynamodb table with hash key = user and range key = datetime

console.log('Loading event');
var AWS = require('aws-sdk');
var dynamodb = new AWS.DynamoDB({apiVersion: '2012-08-10'});

exports.handler = function(event, context) {

ramirezd42

var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var streamNode;
var masterNode;
var bypassNode;
var delayNode;
var feedbackNode;

//request an audio MediaStream track and save a reference to it
navigator.mediaDevices.getUserMedia({audio: true})
.then(stream => {

arthurbeggs

#!/bin/bash

################################################################################
###                       OpenCV2 Installation Script                        ###
################################################################################
#            Source code at https://github.com/arthurbeggs/scripts             #
################################################################################
#                                                                              #
#     Feel free to copy and modify this file. Giving me credit for it is your  #
# choice, but please keep references to other people's work, which I don't     #

supinf

console.log('Loading event');

var Q = require('q');
var aws = require('aws-sdk');
var cloudfront = new aws.CloudFront();

exports.handler = function (event, context) {
  //_log('Received event: ', event);

  var bucket = event.Records[0].s3.bucket.name;

acdlite

// getComponent is a function that returns a promise for a component
// It will not be called until the first mount
function asyncComponent(getComponent) {
  return class AsyncComponent extends React.Component {
    static Component = null;
    state = { Component: AsyncComponent.Component };

    componentWillMount() {
      if (!this.state.Component) {
        getComponent().then(Component => {