Skip to content

Instantly share code, notes, and snippets.

View chrisui's full-sized avatar

Chris Pearce chrisui

60 followers · 2 following
View GitHub Profile
@chrisui
chrisui / button__index.js
Last active November 15, 2016 00:53
example component
// all of our components are in their own directories with local css
// so we use index.js (node resolution paradigm) so we can write:
// `import Button from 'components/button'`
// rather than:
// `import Button from 'components/button/button'`
//
// eg. dir structure
// /components/button
// /components/button/index.js
// /components/button/button.js
@chrisui
chrisui / recon-stats.txt
Last active February 19, 2017 14:43
recon$ stats
These stats were made available from https://github.com/lystable/recon
Num modules parsed
How many modules did we explore?
1243
---
Num components
@chrisui
chrisui / report.html
Created March 17, 2017 19:55
Webpack report
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Webpack Bundle Analyzer</title>
<!-- viewer.js -->
<script>
@chrisui
chrisui / jsxstyle-composition.js
Last active March 20, 2017 20:11
function Text(props) {
return <Span color="black" {...props} />
}
const BlueText = withProps({
color: 'blue'
})(Text)
@chrisui
chrisui / 1. testComponent.js
Created March 31, 2017 18:45
Component test utility
export const testComponent = (
Component: RC,
defaultProps?
: () => Object
= () => ({}),
) => {
return (otherProps: Object, hoc?: (RC) => RC) => {
// our final props for the component merged from default
// and per-test
@chrisui
chrisui / owner.js
Last active September 7, 2017 18:57
Who is the OWNER of the <A /> instance here?
const A = () => <div />;
const B = ({children}) => children();
const C = () => <B>{() => <A />}</B>;
@chrisui
chrisui / button.jsx
Created February 11, 2016 14:21
cx .undefined
import cx from 'classnames';
import styles from './button.css';
const Button = ({children}) => (
<button className={cx({[styles.button]: true})}>{children}</button>
);
// If we didn't define .button inside button.css then the above cx call
// looks like cx({[undefined]: true}) which actually means the class name
// "undefined" is set.
@chrisui
chrisui / example.js
Created June 15, 2015 08:45
Responsive CSS in JS
// Responsive init ----------------
import Responsive, {Breakpoints} from 'responsive';
// Register breakpoints - creates a Symbol for each breakpoint descriptor
// - Basic breakpoint descriptor is as seen here. A simple desktop-first Number
Responsive.registerBreakpoints({
SMALL: 320,
MEDIUM: 768,
LARGE: 1024
});
@chrisui
chrisui / keybase.md
Created August 10, 2021 11:41
keybase.md

Keybase proof

I hereby claim:

  • I am chrisui on github.
  • I am chrisui (https://keybase.io/chrisui) on keybase.
  • I have a public key ASAU3gLmS3BbBl6xAi_lMk0iFWHBN92EvlaF9DL6xhR82wo

To claim this, I am signing this object:

@chrisui
chrisui / example-project.json
Created December 10, 2021 13:32
Nx Dev Processes
{
"root": "project",
"sourceRoot": "project/src",
"projectType": "application",
"targets": {
"serve": {
"executor": "..."
},
"dev": {
"executor": "my-executor-pkg:serve"