Skip to content

Instantly share code, notes, and snippets.

View mcavaliere's full-sized avatar

Mike Cavaliere mcavaliere

56 followers · 183 following
View GitHub Profile
@mcavaliere
mcavaliere / index.html
Created December 6, 2013 17:52 — forked from pixelhandler/index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Event Pooling, or perhaps Pub/Sub</title>
<script type="text/javascript" charset="utf-8" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
</head>
<body>
<strong>Who is this?</strong>
<form action="#" method="get" accept-charset="utf-8" id="whoisit">
@mcavaliere
mcavaliere / namespacing-grouping-methods.js
Created December 21, 2015 21:27
// Old
function sum($elements) { /* calculate sum */ }
function product($elements) { /* calculate sum */}
// New
var MathUtils = {
function sum($elements) {},
function product($elements) {}
};
@mcavaliere
mcavaliere / rn-design-systems-component-styles.js
Last active April 25, 2018 15:38
React Native Design Systems: Component Styles
import Constants from '../../global/constants';
import Colors from '../../global/styles/colors';
import Typography from '../../global/styles/typography';
import { StyleSheet } from 'react-native';
export default StyleSheet.create({
titleContainer: {
backgroundColor: Colors.green,
padding: Constants.GAP
},
@mcavaliere
mcavaliere / rn-design-systems-color-constants.js
Last active April 25, 2018 15:38
React Native Design Systems: Color Constants
import Constants from '../constants';
export default const Colors = {
black: {
default: '#232323',
absolute: '#000000'
},
white: {
default: '#ffffff'
@mcavaliere
mcavaliere / rn-design-systems-messy-cascade.js
Last active April 25, 2018 15:38
React Native Design Systems: Messy Cascading Example
class MessyCardComponent extends Component {
render() {
return (
<View style={[ CardComponentStyles.container, LayoutStyles.wideMargin, GlobalStyles.shadedBox ]}>
<View style={[ CardComponentStyles.headingBar, LayoutStyles.smPadding, BackgroundColors.mediumGreen ]}>
<Text style={[ TypographyStyles.heading1, Colors.textAbsoluteBlack ]}>{ this.props.title }</Text>
</View>
<View style={[ CardComponentStyles.contentContainer, BackgroundColors.offWhite ]}>
<Text style={[ TypographyStyles.bodyText, Colors.textAbsoluteBlack ]}>{ this.props.children }</Text>
</View>
@mcavaliere
mcavaliere / rn-design-systems-simple-component-with-cascade.js
Last active April 25, 2018 15:39
React Native Design Systems: SimpleComponentWithCascade
class SimpleComponentWithCascade extends Component {
render() {
return (
<View style={[ ComponentStyles.container, LayoutStyles.marginBottom ]}>
<View style={[ ComponentStyles.heading, LayoutStyles.paddingSm ]}>
<Text style={[ ComponentStyles.headingText, TypographyStyles.heading3, TextColors.black ]}>{ this.props.title }</Text>
</View>
<View style={[ ComponentStyles.body, LayoutStyles.paddingSm ]}>
<Text style={[ ComponentStyles.bodyText, TypographyStyles.bodyText, TextColors.darkGrey ]}>{ this.props.bodyText }</Text>
</View>
@mcavaliere
mcavaliere / rn-design-systems-simple-component.js
Last active April 25, 2018 16:12
React Native Design Systems: SimpleComponent
class SimpleComponent extends Component {
render() {
return (
<View style={{ borderRadius: 5 }}>
<View style={{ backgroundColor: 'beige', padding: 5 }}>
<Text style={{ color: 'black', fontSize: 16, fontWeight: 'bold' }}>{ this.props.title }</Text>
</View>
<View style={{ padding: 5 }}>
<Text style={{ color: 'black', fontSize: 12 }}>{ this.props.bodyText }</Text>
</View>
@mcavaliere
mcavaliere / rn-design-systems-simple-component-without-literals.js
Last active April 25, 2018 16:12
React Native Design Systems: SimpleComponentWithoutLiterals
let Style = StyleSheet.create({
container: { borderRadius: 5 },
heading: { backgroundColor: 'beige', padding: 5 },
headingText: { color: 'black', fontSize: 16, fontWeight: 'bold' },
body: { padding: 5 },
bodyText: { color: 'black', fontSize: 12 }
})
class SimpleComponentWithoutLiterals extends Component {
render() {
@mcavaliere
mcavaliere / rn-design-systems-clean-component.js
Last active April 25, 2018 16:17
React Native Design Systems: A Cleaner Component
import React, { Component } from 'react';
import { Text, View } from 'react-native';
import Styles from './Card.style';
class Card extends Component {
render() {
return (
<View style={ Styles.container }>
<View style={ Styles.titleContainer }>
@mcavaliere
mcavaliere / rn-design-systems-color-constants.js
Last active April 25, 2018 16:19
React Native Design Systems: Typography Constants
import Colors from './colors';
export default const Typography = {
heading1: {
fontSize: 30,
fontWeight: 'bold',
lineHeight: 32,
color: Colors.black
},