From f3fe0d09fba4dce08b1aa978ee62145f994ff62d Mon Sep 17 00:00:00 2001 From: "Rico Sta. Cruz" Date: Thu, 24 Aug 2017 14:53:13 +0800 Subject: [PATCH] Update --- _sass/2017/base/base.scss | 17 ++- _sass/2017/components/h3-section-list.scss | 38 ++---- _sass/2017/components/h3-section.scss | 15 +- _sass/2017/markdown/headings.scss | 5 + _sass/2017/markdown/table.scss | 5 +- _sass/2017/style.scss | 8 +- assets/2017/script.js | 2 - react.md | 152 ++++++++++++--------- 8 files changed, 127 insertions(+), 115 deletions(-) diff --git a/_sass/2017/base/base.scss b/_sass/2017/base/base.scss index 192375cc8..6f2a0c36a 100644 --- a/_sass/2017/base/base.scss +++ b/_sass/2017/base/base.scss @@ -3,7 +3,7 @@ */ html, body { - background: #fcfcfc; + background: $body-bg; font-family: $body-font; font-size: 14px; line-height: 1.6; @@ -11,11 +11,22 @@ html, body { } body { - padding: 16px; - max-width: $column * 3 + 32px; + padding: 8px; margin: 0 auto; } +@media (min-width: 481px) { + body { + padding: 16px; + max-width: $column * 3 + 32px; + } +} + pre, code { font-family: $monospace-font; } + +* { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/_sass/2017/components/h3-section-list.scss b/_sass/2017/components/h3-section-list.scss index f9452b523..cfd7b6278 100644 --- a/_sass/2017/components/h3-section-list.scss +++ b/_sass/2017/components/h3-section-list.scss @@ -19,35 +19,13 @@ // Each section & > .h3-section { float: left; - padding: $gutter / 2; + padding: $gutter / 4; width: 100%; } - @media (min-width: 768px) { + @media (min-width: 481px) { & > .h3-section { - width: 50%; - } - - & > .h3-section.-wide { - width: 100%; - } - - & > .h3-section.-halfwide { - width: 100%; - } - } - - @media (min-width: 960px) { - & > .h3-section { - width: 33.33%; - } - - & > .h3-section.-wide { - width: 66.67%; - } - - & > .h3-section.-halfwide { - width: 50%; + padding: $gutter / 2; } } } @@ -58,7 +36,7 @@ .h3-section-list, .h3-section-list.-two-column { - @media (min-width: 768px) { + @media (min-width: 769px) { & > .h3-section { width: 50%; } @@ -80,13 +58,13 @@ */ .h3-section-list.-three-column { - @media (min-width: 768px) { + @media (min-width: 769px) { & > .h3-section { width: 50%; } } - @media (min-width: 960px) { + @media (min-width: 961px) { & > .h3-section { width: 33.33%; } @@ -98,13 +76,13 @@ */ .h3-section-list.-left-reference { - @media (min-width: 768px) { + @media (min-width: 769px) { & > .h3-section { width: 50%; } } - @media (min-width: 960px) { + @media (min-width: 961px) { & > .h3-section { width: 66.67%; } diff --git a/_sass/2017/components/h3-section.scss b/_sass/2017/components/h3-section.scss index 9ab5d5ec3..d6b8d3571 100644 --- a/_sass/2017/components/h3-section.scss +++ b/_sass/2017/components/h3-section.scss @@ -12,10 +12,11 @@ & { background: white; box-shadow: - 0 4px 5px rgba(80, 100, 150, 0.05), + 0 4px 8px rgba(80, 100, 150, 0.05), 0 2px 3px rgba(80, 100, 150, 0.1); } + /* Lists */ & > ul { margin: 0; padding: 0; @@ -23,8 +24,8 @@ } & > ul > li { - padding: 8px 16px; - padding-left: 32px; + padding: 16px; + padding-left: 32px + 4px; position: relative; } @@ -32,12 +33,12 @@ content: ''; position: absolute; display: inline-block; - width: 8px; - height: 8px; - background: #666; + width: 4px; + height: 4px; + background: $gray-text; border-radius: 50%; left: 16px; - top: 16px; + top: 24px + 2px; } & > ul > li + li { diff --git a/_sass/2017/markdown/headings.scss b/_sass/2017/markdown/headings.scss index 3fb2d039f..a5f64c497 100644 --- a/_sass/2017/markdown/headings.scss +++ b/_sass/2017/markdown/headings.scss @@ -61,6 +61,11 @@ font-size: 0.86em; } +.MarkdownBody pre, +.MarkdownBody code { + font-family: $monospace-font; +} + /* * Undo prism theme crap */ diff --git a/_sass/2017/markdown/table.scss b/_sass/2017/markdown/table.scss index ffa6db869..dbb65fab3 100644 --- a/_sass/2017/markdown/table.scss +++ b/_sass/2017/markdown/table.scss @@ -13,12 +13,13 @@ /* Horizontal lines */ & tbody + tbody { - border-top: solid 1px $dark-line-color; + border-top: solid 4px $line-color; } & td, & th { padding: 8px 16px; + vertical-align: top; } & tr td:last-child { @@ -52,7 +53,7 @@ font-size: 1em; padding: 5px 6px; padding-left: 8px; // compensation - background: #fafafa; + background: $gray-bg; border-radius: 3px; margin-right: 2px; letter-spacing: 0.2em; diff --git a/_sass/2017/style.scss b/_sass/2017/style.scss index 6f4f16648..78f77f2f2 100644 --- a/_sass/2017/style.scss +++ b/_sass/2017/style.scss @@ -2,17 +2,19 @@ $gutter: 32px; $column: 400px; $body-font: roboto, sans-serif; -$monospace-font: menlo, monospace; +$monospace-font: 'fira mono', Consolas, menlo, 'Andale Mono', 'Ubuntu Mono', monospace; +$body-bg: #f8f8fb; $gray-bg: #fcfcfc; $gray-text: #678; $text-color: #333; $baseA-400: #53a; $baseB-400: #35a; -$line-color: #f5f5f5; -$dark-line-color: #ccc; +$line-color: rgba(50, 80, 150, 0.1); +$dark-line-color: rgba(50, 80, 150, 0.2); @import url('https://unpkg.com/sanitize.css@5.0.0/sanitize.css'); +@import url('https://fonts.googleapis.com/css?family=Fira+Mono:400'); @import './base/base'; @import './markdown/headings'; diff --git a/assets/2017/script.js b/assets/2017/script.js index 670e17ef8..cca5c3ca7 100644 --- a/assets/2017/script.js +++ b/assets/2017/script.js @@ -64,8 +64,6 @@ function groupify ($this, { tag, wrapper, body }) { function wrap ($pivot, $first, $sibs) { const $wrap = $(wrapper) $wrap.addClass($pivot.attr('class')) - console.log($pivot[0]) - console.log('addclass', $pivot.attr('class')) $pivot.before($wrap) const $body = $(body) diff --git a/react.md b/react.md index d75cb3c70..a9ac20d91 100644 --- a/react.md +++ b/react.md @@ -87,24 +87,6 @@ class Info extends React.Component { Nest components to separate concerns. See: [multiple components](http://facebook.github.io/react/docs/multiple-components.html) -### Component API - -```jsx -this.forceUpdate() -``` - -```jsx -this.setState({ ... }) -this.replaceState({ ... }) -``` - -```jsx -this.state -this.props -``` - -These methods and properies are available for `Component` instances. See [Component API](http://facebook.github.io/react/docs/component-api.html). - ### Properties ```html @@ -136,7 +118,7 @@ render () { ``` Use states (`this.state`) to manage dynamic data. -See [States](https://facebook.github.io/react/docs/tutorial.html#reactive-state). +See: [States](https://facebook.github.io/react/docs/tutorial.html#reactive-state) ### Setting default props @@ -146,7 +128,7 @@ Hello.defaultProps = { } ``` -See [defaultProps](https://facebook.github.io/react/docs/react-component.html#defaultprops). +See: [defaultProps](https://facebook.github.io/react/docs/react-component.html#defaultprops) ### Setting default state @@ -159,16 +141,36 @@ class Hello extends React.Component { } ``` +### Component API + +```jsx +this.forceUpdate() +``` + +```jsx +this.setState({ ... }) +``` + +```jsx +this.state +this.props +``` + +These methods and properies are available for `Component` instances. See: [Component API](http://facebook.github.io/react/docs/component-api.html) + Lifecycle --------- {: .-two-column} ### Mounting +| Method | Description | +| --- | --- | | `constructor` _(props)_ | Before rendering [#](https://facebook.github.io/react/docs/react-component.html#constructor) | | `componentWillMount()` | _Don't use this_ [#](https://facebook.github.io/react/docs/react-component.html#componentwillmount) | | `render()` | Render [#](https://facebook.github.io/react/docs/react-component.html#render) | | `componentDidMount()` | After rendering (DOM available) [#](https://facebook.github.io/react/docs/react-component.html#componentdidmount) | +| --- | --- | | `componentWillUnmount()` | Before DOM removal [#](https://facebook.github.io/react/docs/react-component.html#componentwillunmount) | Set initial the state on `constructor()`. @@ -176,13 +178,15 @@ Add DOM event handlers, timers (etc) on `componentDidMount()`, then remove them ### Updating +| Method | Description | +| --- | --- | | `componentWillReceiveProps` *(newProps)* | Use `setState()` here | | `shouldComponentUpdate` *(newProps, newState)* | Skips `render()` if returns false | | `componentWillUpdate` *(newProps, newState)* | Can't use `setState()` here | | `render()` | Render | | `componentDidUpdate` *(prevProps, prevState)* | Operate on the DOM here | -Called when parents change properties and `.setState()`. These are not called for initial renders. See [reference](http://facebook.github.io/react/docs/component-specs.html#updating-componentwillreceiveprops). +Called when parents change properties and `.setState()`. These are not called for initial renders. See: [Reference](http://facebook.github.io/react/docs/component-specs.html#updating-componentwillreceiveprops). DOM nodes --------- @@ -205,7 +209,7 @@ this.input.focus() this.input.value() ``` -Allows access to DOM nodes. See [Refs and the DOM](https://facebook.github.io/react/docs/refs-and-the-dom.html). +Allows access to DOM nodes. See: [Refs and the DOM](https://facebook.github.io/react/docs/refs-and-the-dom.html) ### DOM Events @@ -221,50 +225,54 @@ handleChange: function(event) { } ``` -Add attributes like `onChange`. See [events](https://facebook.github.io/react/docs/events.html). +Add attributes like `onChange`. See: [Events](https://facebook.github.io/react/docs/events.html) Property validation ------------------- {: .-three-column} -### React.PropTypes +### PropTypes -| PropType | Description | -| --- | --- | -| `any` | Anything | -| --- | --- | -| `string` | | -| `number` | | -| `func` | Function | -| `bool` | True or false | -| --- | --- | -| `oneOf`_(any)_ | Enum types | -| `oneOfType`_(type array)_ | Union | -| --- | --- | -| `array` | | -| `arrayOf`_(...)_ | | -| --- | --- | -| `object` | | -| `objectOf`_(...)_ | | -| `instanceOf`_(...)_ | | -| `shape`_(...)_ | | -| --- | --- | -| `element` | React element | -| `node` | DOM node | -| --- | --- | -| `.isRequired` | Required | +```js +import PropTypes from 'prop-types' +``` -See [propTypes](http://facebook.github.io/react/docs/reusable-components.html#prop-validation). +See: [Typechecking with PropTypes](https://facebook.github.io/react/docs/typechecking-with-proptypes.html) + +| PropType | Description | +| --- | --- | +| `any` | Anything | +| --- | --- | +| `string` | | +| `number` | | +| `func` | Function | +| `bool` | True or false | +| --- | --- | +| `oneOf`_(any)_ | Enum types | +| `oneOfType`_(type array)_ | Union | +| --- | --- | +| `array` | | +| `arrayOf`_(...)_ | | +| --- | --- | +| `object` | | +| `objectOf`_(...)_ | Object with values of a certain type | +| `instanceOf`_(...)_ | Instance of a class | +| `shape`_(...)_ | | +| --- | --- | +| `element` | React element | +| `node` | DOM node | +| --- | --- | +| `.isRequired` | Required | ### Basic types ```jsx MyComponent.propTypes = { - email: React.PropTypes.string, - seats: React.PropTypes.number, - callback: React.PropTypes.func, - isClosed: React.PropTypes.bool, - any: React.PropTypes.any + email: PropTypes.string, + seats: PropTypes.number, + callback: PropTypes.func, + isClosed: PropTypes.bool, + any: PropTypes.any } ``` @@ -272,7 +280,7 @@ MyComponent.propTypes = { ```jsx MyCo.propTypes = { - name: React.PropTypes.string.isRequired + name: PropTypes.string.isRequired } ``` @@ -281,10 +289,10 @@ MyCo.propTypes = { ```jsx MyCo.propTypes = { // React element - element: React.PropTypes.element, + element: PropTypes.element, // num, string, element, or an array of those - node: React.PropTypes.node + node: PropTypes.node } ``` @@ -292,7 +300,7 @@ MyCo.propTypes = { ```jsx MyCo.propTypes = { - direction: React.PropTypes.oneOf([ + direction: PropTypes.oneOf([ 'left', 'right' ]) } @@ -302,15 +310,19 @@ MyCo.propTypes = { ```jsx MyCo.propTypes = { - array: React.PropTypes.array, - arrayOf: React.PropTypes.arrayOf(React.PropTypes.number), - object: React.PropTypes.object, - objectOf: React.PropTypes.objectOf(React.PropTypes.number), - message: React.PropTypes.instanceOf(Message), + list: PropTypes.array, + ages: PropTypes.arrayOf(PropTypes.number), + user: PropTypes.object, + user: PropTypes.objectOf(PropTypes.number), + message: PropTypes.instanceOf(Message) +} +``` - object2: React.PropTypes.shape({ - color: React.PropTypes.string, - size: React.PropTypes.number +```jsx +MyCo.propTypes = { + user: PropTypes.shape({ + name: PropTypes.string, + age: PropTypes.number }) } ``` @@ -376,7 +388,11 @@ var style = { height: 10 } return
``` -See [inline styles](https://facebook.github.io/react/tips/inline-styles.html). +```jsx +return
+``` + +See: [Inline styles](https://facebook.github.io/react/tips/inline-styles.html) ### Inner HTML @@ -385,7 +401,7 @@ function markdownify() { return "

...

"; }
``` -See [dangerously set innerHTML](https://facebook.github.io/react/tips/dangerously-set-inner-html.html). +See: [Dangerously set innerHTML](https://facebook.github.io/react/tips/dangerously-set-inner-html.html) ### Lists