Arun Michael Dsouza ArunMichaelDsouza

## text-detection.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Text Detection using the Shape Detection API</title>
    <style>
      body {
        margin: 0 4px;
        font-family: sans-serif;

## barcode-detection.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Baracode Detection using the Shape Detection API</title>
    <style>
      body {
        margin: 0 4px;
        font-family: sans-serif;

## face-detection.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Face Detection using the Shape Detection API</title>
    <style>
      body {
        margin: 0;
        font-family: sans-serif;

## lerna.txt
1) Initialise lerna
> lerna init
2) Create packages
> cd packages && mkdir package1 && cd package1 && yarn init -y
or
> lerna create package1 -y // This would scaffold a package directory
3) Add dependencies
> lerna add package2 // Installs dependency to all packages except package2
> lerna add package2 --scope=package1 // Installs package2 only to package1
> yarn add package2 // Installs global(top-level) dependency

## html-to-canvas.js
const data = `
    <svg xmlns="http://www.w3.org/2000/svg">
        <foreignObject width="100%" height="100%">
            <div xmlns="http://www.w3.org/1999/xhtml" style="border: 2px solid red; padding: 20px;">
                <span style="font-size: 22px;">This will be rendered on the canvas.</span>
            </div>
        </foreignObject>
    </svg>
`;
const svg = new Blob([data], { type: 'image/svg+xml;charset=utf-8' });

## react-image-appear-demo.js
import React from 'react';
import ReactImageAppear from 'react-image-appear';

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (

## app.js
var express = require('express');
var app = express();
var woodlotCustomLogger = require('woodlot').customLogger;

var woodlot = new woodlotCustomLogger({
    streams: ['./logs/custom.log'],
    stdout: false,
    format: {
        type: 'json',
        options: {

## app.js
var express = require('express');
var app = express();
var woodlot = require('woodlot').middlewareLogger;

app.use(woodlot({
    streams: ['./logs/app.log'],
    stdout: false,
    routes: {
        whitelist: ['/api', '/dashboard'],
        strictChecking: false

## app.js
// 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 => {

## amd-medium-parent-state-update-2.jsx
// DeeplyNestedChild.jsx
class DeeplyNestedChild extends React.Component {
    constructor(props) {
        super(props);
    }
    updateTopMostParent() {
        // Call this method with the state value to update
        window.updateTopMostParent(someValue);
    }
    render() {
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width" />
	<title>Text Detection using the Shape Detection API</title>
	<style>
	body {
	margin: 0 4px;
	font-family: sans-serif;
	1) Initialise lerna
	> lerna init
	2) Create packages
	> cd packages && mkdir package1 && cd package1 && yarn init -y
	or
	> lerna create package1 -y // This would scaffold a package directory
	3) Add dependencies
	> lerna add package2 // Installs dependency to all packages except package2
	> lerna add package2 --scope=package1 // Installs package2 only to package1
	> yarn add package2 // Installs global(top-level) dependency
	const data = `
	<svg xmlns="http://www.w3.org/2000/svg">
	<foreignObject width="100%" height="100%">
	<div xmlns="http://www.w3.org/1999/xhtml" style="border: 2px solid red; padding: 20px;">
	<span style="font-size: 22px;">This will be rendered on the canvas.</span>
	</div>
	</foreignObject>
	</svg>
	`;
	const svg = new Blob([data], { type: 'image/svg+xml;charset=utf-8' });
	import React from 'react';
	import ReactImageAppear from 'react-image-appear';

	class MyComponent extends React.Component {
	constructor(props) {
	super(props);
	}

	render() {
	return (
	var express = require('express');
	var app = express();
	var woodlotCustomLogger = require('woodlot').customLogger;

	var woodlot = new woodlotCustomLogger({
	streams: ['./logs/custom.log'],
	stdout: false,
	format: {
	type: 'json',
	options: {
	var express = require('express');
	var app = express();
	var woodlot = require('woodlot').middlewareLogger;

	app.use(woodlot({
	streams: ['./logs/app.log'],
	stdout: false,
	routes: {
	whitelist: ['/api', '/dashboard'],
	strictChecking: false
	// 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 => {
	// DeeplyNestedChild.jsx
	class DeeplyNestedChild extends React.Component {
	constructor(props) {
	super(props);
	}
	updateTopMostParent() {
	// Call this method with the state value to update
	window.updateTopMostParent(someValue);
	}
	render() {