jcblw

var d3 = require('d3')
var w = 1280,
    h = 800;

var nodes = d3.range(200).map(function() { return {radius: Math.random() * 12 + 4}; }),
    color = d3.scale.category10();

var force = d3.layout.force()
    .gravity(0.05)

jcblw

var Simplex = require('perlin-simplex')
var TWEEN = require('@tweenjs/tween.js')

const canvas = document.getElementsByTagName('canvas')[0];
const context = canvas.getContext('2d')

class WanderingCircle {
  constructor({ 
    anchorAmount = 180, 
    radius = 5, 

jcblw

	Mac	Windows	Android	IOS
Chrome	✔︎	✔︎	✔︎	✔︎
Firefox	✔︎	✔︎	✔︎	✔︎
Opera	✔︎	✔︎	✔︎	✔︎
Edge		✔︎

jcblw

var d3 = require('d3')
var w = 1280,
    h = 800;

var nodes = d3.range(200).map(function() { return {radius: Math.random() * 12 + 4}; }),
    color = d3.scale.category10();

var force = d3.layout.force()
    .gravity(0.05)

jcblw

const Delaunator = require('delaunator')

function colorDistance(r1,g1,b1,r2,g2,b2){
  const dr = r1 - r2
  const dg = g1 - g2
  const db = b1 - b2
  return Math.sqrt( dr*dr + dg*dg + db*db )
}

function sumDistance(imageData,x,y,n){

jcblw

const formData = new FormData();
const URL = '/path-to-something';
var req = new XMLHttpRequest();

formData.append('file', /* a file */);

req.upload.addEventListener('progress', (e) => {
    if (!e.lengthComputable) return;
    console.log(`${(Math.round((e.loaded/e.total)*100))}% done`);
});

jcblw

Visual continuity component

This is a concept in material design that helps define meaningful and easy to follow transitions in user interfaces

I had the idea to do this transition in react components. The basics of the transition is to take a piece of ui and transfer it over to the new state of the ui without losing some type of visual que of the element that is shared.

Intergration with react.

Pesuado code.

jcblw

rcs

This is to be a quick development/production server that will take react components make pages for them and bundles that with auto reload.

This is to be based of a few directories inside the project.

app
├── components
├── package.json

jcblw

// require() some stuff from npm (like you were using browserify)
// and then hit Run Code to run it on the right
var domla = require('domla')
var div = domla.div
var str = 'hello http://google.com world https://onradpad.com'
var segments = str.match(/https?:\/\/\w+\.\w+/g)
console.log(segments)

document.body.appendChild(div({}, JSON.stringify(segments)))

jcblw

// sample of how the api could look
// this is setting up the server, putting in some routes and configuring them.

import ComponentServer from 'react-component-server'
import Component from './components/Component'
import template from './templates/_layout'
const port = process.env.PORT || 3000

const componentServer = ComponentServer.create({
  server: server, // optionally pass in own express server