Skip to content

Commit 2ede333

Browse files
mechmech
committed
Abstraction
1 parent 3533334 commit 2ede333

22 files changed

Lines changed: 258 additions & 113 deletions

‎CSS/OOCSS_BEM.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ Use `data-attribute` for JavaScript interaction.
2020
* [**Pros and cons of modular CSS**](https://github.com/staltz/cycle/issues/128)
2121
* [BEM - Tech pick of the week](http://futurice.com/blog/tech-pick-of-the-week-bem)
2222
* [**Contextual Styling**](http://csswizardry.com/2015/06/contextual-styling-ui-components-nesting-and-implementation-detail/)
23+
* [**Medium CSS is pretty fucking good**](https://medium.com/@fat/mediums-css-is-actually-pretty-fucking-good-b8e2a6c78b06#.mvrfqgqey)
2324

2425
Naming convention (BEM, SUIT) really come into their own when viewed in HTML.
2526

‎CSS/resources.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ https://smacss.com/signin
77
https://vimeo.com/3493226
88
http://blog.pexels.com/top-5-killer-css-talks-of-2014/
99
```
10+
11+
* [**10 commandments of sane style sheets**](https://benfrain.com/the-ten-commandments-of-sane-style-sheets/)
1012
* [**CSS Variables: Why Should You Care?**](https://developers.google.com/web/updates/2016/02/css-variables-why-should-you-care)
1113
* [**Should I Prefix?**](http://shouldiprefix.com/)
1214
* [**The new code**](http://thenewcode.com/)
@@ -67,6 +69,7 @@ http://blog.pexels.com/top-5-killer-css-talks-of-2014/
6769
## People
6870

6971
* [Ben Smithett](http://bensmithett.com/)
72+
* [Ben Frain](https://benfrain.com)
7073

7174
## Linting
7275

@@ -93,6 +96,15 @@ http://blog.pexels.com/top-5-killer-css-talks-of-2014/
9396
* [All you need to know about vertical-align](http://christopheraue.net/2014/03/05/vertical-align/)
9497
* [Balancing line length](http://www.smashingmagazine.com/2014/09/29/balancing-line-length-font-size-responsive-web-design/)
9598

99+
When using line height to vertically center a single line of text, be sure to set the line height to the height of the container -1:
100+
101+
```css
102+
.btn {
103+
height: 50px;
104+
line-height: 49px;
105+
}
106+
```
107+
96108
![](https://dl.dropboxusercontent.com/u/6815194/Notes/line_height_and_input.png)
97109

98110
```css

‎CSS/style_guide.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -171,6 +171,16 @@ grep "info" * -R
171171

172172
## Naming Convention
173173

174+
Component vs Page-level naming. We should not use Page-level if possible. Prefer Component-level names. However, Page-level can be used to override generic components in very specific contexts:
175+
176+
```css
177+
.home-page { /* Page-level */
178+
.nav { /* Component-level */
179+
margin-top: 10px; /* Override */
180+
}
181+
}
182+
```
183+
174184
* [Naming CSS stuff is really hard](http://seesparkbox.com/foundry/naming_css_stuff_is_really_hard)
175185

176186
We can fit a given class name into these 3 categories:
@@ -244,6 +254,10 @@ The aim of a component/template/object-oriented architecture is to be able to de
244254
}
245255
```
246256

257+
### Avoid run-on classnames
258+
259+
The evolution being: `.button` → `.button-primary` → `.button-primary-dark` → `.button-primary-dark-container` → `.button-primary-dark-container-label`, ad nauseam.
260+
247261
# My Style Guide
248262

249263
* Base - normalize and element selector. Base are not for button, table, input, those are modules.

‎CSS/tricks.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,15 @@ form.shake-me {
111111

112112
## Centering
113113

114+
```css
115+
.center {
116+
position: absolute;
117+
top: 50%;
118+
left: 50%;
119+
transform: translate(-50%, -50%);
120+
}
121+
```
122+
114123
```html
115124
<link href="//fonts.googleapis.com/css?family=Roboto:400,400italic,700,300" rel="stylesheet" type="text/css">
116125
<link rel="stylesheet" type="text/css" href="//s3-us-west-2.amazonaws.com/assets.atomic.io/styles/main.061d880f.css">

‎Design (Product)/tools.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ Rule of Optimization: Prototype before polishing. Get it working before you opti
4141

4242
Prototyping has become an integral part of product design.
4343

44+
* [The Hungry Designer](https://medium.com/@we_are_atomic/the-hungry-designer-b295459b29ec#.ucbsjpqqx)
4445
* [**Prototyping with Framer**](http://nlevin.com/whitespace/)
4546
* [Rule of optimization](http://www.faqs.org/docs/artu/ch01s06.html#id2879078)
4647
* [Composite](http://www.getcomposite.com/)

‎JavaScript/FRP/redux.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,10 @@ Data lives outside of React view hierarchy. I can easily reason about my view la
9898
* [Top-down vs bottom-up](https://github.com/cyclejs/core/issues/191#issuecomment-162320830)
9999
* [redux-react-local](https://github.com/threepointone/redux-react-local)
100100

101+
`connect()` does a ton of trickery to be very optimized. Always re-rendering from the top means you're doing a bunch of unnecessary reconciliation.
102+
103+
> A widget is an autonomous component that has its own reducer, use something like "connect" to get the state of that reducer. The widget only re-renders when its state changes. I try to make the widget only receive its own state, to make it really independent but it is really a mater of taste and many don't adopt a similar approach and assume the widget should have a global knowledge of the global appstate to select the state it needs to use.
104+
101105
## Libraries
102106

103107
* [react-router-redux](https://github.com/rackt/react-router-redux)
@@ -476,6 +480,15 @@ When you always render from the top you are coupling parent components too hard
476480

477481
Instead as soon as you see that component passes props down without using it, we suggest generating a "container" component using `connect()`.
478482

483+
```js
484+
// connect() API?
485+
export default PropTypes.shape({
486+
subscribe: PropTypes.func.isRequired,
487+
dispatch: PropTypes.func.isRequired,
488+
getState: PropTypes.func.isRequired
489+
})
490+
```
491+
479492
## `mapStateToProps`
480493

481494
* [Issue#291 - Should mapStateToProps be called every time an action is dispatched?](https://github.com/reactjs/react-redux/issues/291)

‎JavaScript/NodeJS/npm.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
* [NPM documentation](https://docs.npmjs.com/folders)
44
* [How to build and public ES6 NPM module today](https://booker.codes/how-to-build-and-publish-es6-npm-modules-today-with-babel/)
5+
* [How to use npm as a build tool](http://blog.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/)
56

67
```js
78
exports.setup = function() {};

‎JavaScript/React/component_hoc.md‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
# Higher-order Components
2+
3+
> You can use HOC in various situations like authentication: `requireAuth({ role: 'admin' })(MyComponent)` (check for a user in higher component and redirect if the user is not logged in) or connecting your component with Flux/Redux store.
4+
>
5+
> You can also separate data fetching and controller-like logic to higher order components and keep our views as simple as possible.
6+
7+
How do you wrap your components? What does wrapping even mean?
8+
9+
A higher-order component is a function that takes an existing component and returns another component that wraps it. The wrapping component will take care to render the wrapped component and also forwards the props to it, but also adds some useful behavior.
10+
11+
* [Structuring React Applications: Higher-Order Components](http://jamesknelson.com/structuring-react-applications-higher-order-components/)
12+
* [Higher-order components?](https://gist.github.com/sebmarkbage/ef0bf1f338a7182b6775)
13+
* [Mixins are dead. Long live composition.](https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750)
14+
* [Functional UI and Components as Higher Order Functions](http://blog.risingstack.com/functional-ui-and-components-as-higher-order-functions/)
15+
* [Sideways data loading](https://github.com/facebook/react/issues/3398)
16+
* [See Flummox's custom rendering](https://github.com/acdlite/flummox/blob/v3.5.1/docs/docs/api/fluxcomponent.md#custom-rendering)
17+
18+
React 0.14 switches to [parent-based context](https://github.com/facebook/react/pull/3615).
19+
20+
**Note**: Lambdas are frequently confused with anonymous functions, closures, first-class functions, and higher-order functions. The concepts are all similar, but they mean different things.
21+
22+
Not all lambdas are closures, and not all closures are lambdas. A closure is created when a function references data that is contained outside the function scope. A lambda is a function that is used as a value.
23+
24+
> HoCs are very similar to higher-order functions. In higher-order functions you pass one function to another function which returns a function. How does that help us? Well, with higher-order components, you pass a component (which as we know is just a function) to another function, which returns a component (again, is just a function).
25+
26+
```js
27+
// This is a higher-order container component accepting
28+
// a presentation component which is a pure-function.
29+
// The container component just handle all the states logic.
30+
const ContainerHoC = function(PresentationComponent) {
31+
return React.createClass({
32+
componentDidMount() {
33+
const success = (notifications) => {
34+
this.setState({ notifications: notifications });
35+
};
36+
37+
$.ajax({ url: '/notifications', success: success });
38+
},
39+
40+
onMarkAsRead(id) {},
41+
42+
render() {
43+
return (
44+
<PresentationComponent
45+
notification={this.state.notifications}
46+
onMarkAsRead={this.onMarkAsRead} />
47+
);
48+
}
49+
});
50+
}
51+
52+
const Notifications = ContainerHoC(React.createClass({
53+
renderNotification({notification}) {
54+
const { id, date, message } = notification;
55+
56+
return (
57+
<div>
58+
<span>{message} - {date}</span>
59+
<button onClick={this.props.onMarkAsRead.bind(null, id)}>Mark as Read</button>
60+
</div>
61+
);
62+
},
63+
64+
render() {
65+
return <div>{this.props.notifications.map(renderNotification)}</div>;
66+
}
67+
}));
68+
69+
const App = React.createClass({
70+
render() {
71+
return <Notifications />
72+
}
73+
});
74+
```
75+
76+
## Decorators
77+

‎JavaScript/React/components.md‎

Lines changed: 0 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -187,80 +187,6 @@ It is important to draw a distinction between ownership and parent-child relatio
187187
* [reactview](https://github.com/zackify/reactview)
188188
* [react-heatpack: Quick React development with webpack hot reloading](https://github.com/insin/react-heatpack)
189189
190-
## Higher-order Components
191-
192-
> You can use HOC in various situations like authentication: `requireAuth({ role: 'admin' })(MyComponent)` (check for a user in higher component and redirect if the user is not logged in) or connecting your component with Flux/Redux store.
193-
>
194-
> You can also separate data fetching and controller-like logic to higher order components and keep our views as simple as possible.
195-
196-
How do you wrap your components? What does wrapping even mean?
197-
198-
A higher-order component is a function that takes an existing component and returns another component that wraps it. The wrapping component will take care to render the wrapped component and also forwards the props to it, but also adds some useful behavior.
199-
200-
* [Higher-order components?](https://gist.github.com/sebmarkbage/ef0bf1f338a7182b6775)
201-
* [Mixins are dead. Long live composition.](https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750)
202-
* [Functional UI and Components as Higher Order Functions](http://blog.risingstack.com/functional-ui-and-components-as-higher-order-functions/)
203-
* [Sideways data loading](https://github.com/facebook/react/issues/3398)
204-
* [See Flummox's custom rendering](https://github.com/acdlite/flummox/blob/v3.5.1/docs/docs/api/fluxcomponent.md#custom-rendering)
205-
206-
React 0.14 switches to [parent-based context](https://github.com/facebook/react/pull/3615).
207-
208-
**Note**: Lambdas are frequently confused with anonymous functions, closures, first-class functions, and higher-order functions. The concepts are all similar, but they mean different things.
209-
210-
Not all lambdas are closures, and not all closures are lambdas. A closure is created when a function references data that is contained outside the function scope. A lambda is a function that is used as a value.
211-
212-
> HoCs are very similar to higher-order functions. In higher-order functions you pass one function to another function which returns a function. How does that help us? Well, with higher-order components, you pass a component (which as we know is just a function) to another function, which returns a component (again, is just a function).
213-
214-
```js
215-
// This is a higher-order container component accepting
216-
// a presentation component which is a pure-function.
217-
// The container component just handle all the states logic.
218-
const ContainerHoC = function(PresentationComponent) {
219-
return React.createClass({
220-
componentDidMount() {
221-
const success = (notifications) => {
222-
this.setState({ notifications: notifications });
223-
};
224-
225-
$.ajax({ url: '/notifications', success: success });
226-
},
227-
228-
onMarkAsRead(id) {},
229-
230-
render() {
231-
return (
232-
<PresentationComponent
233-
notification={this.state.notifications}
234-
onMarkAsRead={this.onMarkAsRead} />
235-
);
236-
}
237-
});
238-
}
239-
240-
const Notifications = ContainerHoC(React.createClass({
241-
renderNotification({notification}) {
242-
const { id, date, message } = notification;
243-
244-
return (
245-
<div>
246-
<span>{message} - {date}</span>
247-
<button onClick={this.props.onMarkAsRead.bind(null, id)}>Mark as Read</button>
248-
</div>
249-
);
250-
},
251-
252-
render() {
253-
return <div>{this.props.notifications.map(renderNotification)}</div>;
254-
}
255-
}));
256-
257-
const App = React.createClass({
258-
render() {
259-
return <Notifications />
260-
}
261-
});
262-
```
263-
264190
## Render function
265191
266192
1. `render` should be idempotent

‎JavaScript/React/form.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,10 @@
1313

1414
Either store the form state within the component or Flux store.
1515

16+
## Controlled and Uncontrolled Components
17+
18+
* [Controllables](https://jquense.github.io/react-widgets/docs/#/controllables)
19+
1620
## Form State
1721

1822
* [2-way data binding with `LinkedStateMixin`](http://facebook.github.io/react/docs/two-way-binding-helpers.html)

0 commit comments

Comments
 (0)