Skip to content

Instantly share code, notes, and snippets.

View natew's full-sized avatar

Nate Wienert natew

865 followers · 70 following
View GitHub Profile
@natew
natew / 0
Last active August 29, 2015 14:10
React - UI Structural question
Building a UI interface that is composed of Views.
One common interface is a split view. Similar to Mail on iPad, it contains a
side view and a main view.
1.html is my current solution, but thinking of doing 3.html.
Problem with current solution is how would Main manipulate props on Side
(necessary for parallax effect when dragging out of Main).
@natew
natew / 1.html
Created December 5, 2014 19:58
<ViewList initialStep={numRoutes - 2} noFakeTitleBar>
<View>
<DottedViewList touchStartBoundsX={{ from: 20, to: window.innerWidth - 20 }}>
<View title="Hot Articles">
<List dontWrapChildren styles={{ self: { borderTop: 'none' } }}>
{articles.count() ?
articles.map((article, i) =>
<ArticleItem cursor={article} key={i} />
).toArray()
.concat(
@natew
natew / *.js
Created December 6, 2014 04:03
module.exports = Component('Icon', {
mixins: [TweenState.Mixin],
getInitialState() {
return { step: 0 };
},
componentWillReceiveProps(nextProps) {
if (nextProps.animation === 'ROTATE')
@natew
natew / gist:d89650fe753f418650d6
Created December 9, 2014 18:00
react diffing
<li class="ListItem" style="list-style:none;margin:0;padding:0;overflow:hidden;flex-flow:row;align-items:center;justify-content:space-between;min-height:44px;border-top:1px solid #c8c7cc;position:relative;padding-right:20px;" data-reactid=".0.1.1:1.2:$=10:$0.1.0.2.1:$=12:$2">
<span class="ListItem--wrapper" style="position:absolute;top:0;left:-10px;right:0;bottom:0;max-width:none;flex-flow:row;justify-content:flex-end;z-index:1;" data-reactid=".0.1.1:1.2:$=10:$0.1.0.2.1:$=12:$2.$27">
<a href="/kitchen/modals" style="position:absolute;top:0;left:-10px;right:0;bottom:0;max-width:none;flex-flow:row;justify-content:flex-end;z-index:1;" data-reactid=".0.1.1:1.2:$=10:$0.1.0.2.1:$=12:$2.$27.0">
<span style="color:#c8c7cc;width:12px;height:12px;overflow:hidden;margin:auto 8px auto 0;" class="Icon" data-reactid=".0.1.1:1.2:$=10:$0.1.0.2.1:$=12:$2.$27.0.0"><svg style="width:12px;height:12px;shape-rendering:initial;fill:currentColor;" viewBox="0 0 64 64" fill="#c8c7cc" stroke="#c8c7cc" stroke-width="8" stroke-linecap="r
@natew
natew / make.js
Created January 12, 2015 19:07
// this is a webpack config that takes a number of options
// to let you build different style bundles
// based on the webpack react example
var fs = require('fs');
var path = require('path');
var webpack = require('webpack');
var ReactStylePlugin = require('react-style-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var joinEntry = require('./lib/joinEntry');
@natew
natew / gist:c51e1529db2c107fcf18
Created January 13, 2015 17:41
webpack.svg
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="562px"
height="649px" viewBox="0 0 562 649" enable-background="new 0 0 562 649" xml:space="preserve">
<g id="Polygon_2_1_" enable-background="new ">
<g id="Polygon_2">
<g>
<polygon fill="#A2BDE9" points="281.071,1 0.654,162.899 0.654,486.697 281.071,648.597 561.489,486.697 561.489,162.899 "/>
</g>
@natew
natew / buttonpage.jsx
Created January 13, 2015 22:51
<div>
<Title>Buttons</Title>
<Container>
<Button active>Active</Button>
<Button>Button</Button>
<Button rounded>Round</Button>
</Container>
<Title>ButtonGroup</Title>
@natew
natew / out
Last active August 29, 2015 14:13
webpack.config.js
{ entry: { main: './app/app.js' },
output:
{ path: '/Users/nw/projects/reapp/reapp-hn/build/public',
filename: '[name].js',
chunkFilename: '[id].js',
publicPath: '/',
sourceMapFilename: 'debugging/[file].map',
libraryTarget: undefined,
pathinfo: true },
target: 'web',
@natew
natew / webpack.config.js
Created January 21, 2015 16:08
{ entry:
{ main:
[ 'webpack-dev-server/client?http://localhost:3011',
'webpack/hot/only-dev-server',
'./app/app.js' ] },
output:
{ path: '/Users/nw/projects/reapp/reapp-hn/build/public',
filename: '[name].js',
chunkFilename: '[id].js',
publicPath: '/',
@natew
natew / gist:af849f1c8382d1129545
Created February 5, 2015 23:34
This file has been truncated, but you can view the full file.
{"errors":[],"warnings":["./app/routes.js\nCritical dependencies:\n25:16-23 require function is used in a way, in which dependencies cannot be statically extracted\n @ ./app/routes.js 25:16-23"],"version":"1.5.3","hash":"34ba053960e0a21e2f99","time":9355,"assetsByChunkName":{"main":"main.js"},"assets":[{"name":"main.js","size":1541590,"chunks":[0],"chunkNames":["main"],"emitted":true}],"chunks":[{"id":0,"rendered":true,"initial":true,"entry":true,"extraAsync":false,"size":1279840,"names":["main"],"files":["main.js"],"hash":"f2983abf0d200cca0f57","parents":[],"modules":[{"id":0,"identifier":"multi main","name":"multi main","size":52,"cacheable":true,"built":true,"optional":false,"prefetched":false,"chunks":[0],"assets":[],"failed":false,"errors":0,"warnings":0,"reasons":[]},{"id":1,"identifier":"/Users/nw/projects/reapp/reapp-pack/node_modules/webpack-dev-server/client/index.js?http://localhost:3011","name":"../reapp/reapp-pack/~/webpack-dev-server/client?http://localhost:3011","size":1674,"cacheable":true,"bu