ThirdMirrors
/
cheatsheets
mirror of https://gitee.com/Hawkin99/cheatsheets.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Crappy line highlights

This commit is contained in:
Rico Sta. Cruz 2017-08-24 18:40:09 +08:00
parent 0c8749580d
commit c5a8c32de8
No known key found for this signature in database
GPG Key ID: CAAD38AE2962619A
4 changed files with 148 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
_includes/2017/head.html
View File

@ -5,15 +5,17 @@
{% include polyfills.html %} {% include polyfills.html %}
<!-- 3rd-party libs --> <!-- 3rd-party libs -->
<script src="https://code.jquery.com/jquery-3.1.0.js"></script> <script src='https://code.jquery.com/jquery-3.1.0.js'></script>
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script> <script src='https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js'></script>
<script src="https://unpkg.com/prismjs@1.6.0"></script> <script src='https://unpkg.com/prismjs@1.6.0'></script>
<script src="https://unpkg.com/prismjs@1.6.0/components/prism-jsx.min.js"></script> <script src='https://unpkg.com/prismjs@1.6.0/components/prism-jsx.min.js'></script>
<script src="https://unpkg.com/prismjs@1.6.0/components/prism-bash.min.js"></script> <script src='https://unpkg.com/prismjs@1.6.0/components/prism-bash.min.js'></script>
<link rel='stylesheet' href='https://unpkg.com/prismjs@1.6.0/themes/prism.css' /> <script src='https://unpkg.com/prismjs@1.6.0/plugins/line-highlight/prism-line-highlight.min.js'></script>
<link rel='stylesheet' href='https://unpkg.com/prismjs@1.6.0/themes/prism.css'>
<link rel='stylesheet' href='https://unpkg.com/prismjs@1.6.0/plugins/line-highlight/prism-line-highlight.css'>
<!-- 2017 layout --> <!-- 2017 layout -->
<link href='{{base}}/assets/2017/style.css?t={{ timestamp }}' rel='stylesheet' /> <link href='{{base}}/assets/2017/style.css?t={{ timestamp }}' rel='stylesheet'>
<script src='{{base}}/assets/2017/script.js?t={{ timestamp }}'></script> <script src='{{base}}/assets/2017/script.js?t={{ timestamp }}'></script>
</head> </head>
<body> <body>

9
_sass/2017/components/h3-section.scss
View File

@ -12,8 +12,8 @@
& { & {
background: white; background: white;
box-shadow: box-shadow:
0 4px 8px rgba(80, 100, 150, 0.05), 0 4px 8px rgba(80, 100, 150, 0.07),
0 2px 3px rgba(80, 100, 150, 0.1); 0 2px 3px rgba(80, 100, 150, 0.15);
} }
/* Lists */ /* Lists */
@ -77,3 +77,8 @@
border-top: solid 1px $line-color; border-top: solid 1px $line-color;
} }
} }
.h3-section.-prime > .body {
border: solid 2px $baseA-400;
border-radius: 2px;
}

48
_sass/2017/markdown/headings.scss
View File

@ -70,19 +70,39 @@
* Undo prism theme crap * Undo prism theme crap
*/ */
.MarkdownBody pre { .MarkdownBody {
box-shadow: none; pre {
border-left: 0; box-shadow: none;
overflow: hidden; border-left: 0;
overflow-x: auto; overflow: hidden;
background: white; overflow-x: auto;
} background: white;
}
.MarkdownBody pre > code { pre > code {
color: $text-color; color: $text-color;
max-height: auto; max-height: auto;
padding: 0; padding: 0;
background: transparent; background: transparent;
overflow: visible; overflow: visible;
font-size: 1em; font-size: 1em;
}
// Line highlight
.line-highlight {
background: linear-gradient(
to right,
rgba($baseB-400, 0.05) 75%,
rgba($baseB-400, 0));
}
// Line highlight ranges
.line-highlight[data-end] {
margin-top: 0;
}
.line-highlight::before,
.line-highlight::after {
display: none;
}
} }

159
react.md
View File

@ -6,11 +6,12 @@ layout: 2017/sheet
{%raw%} {%raw%}
Example Components
------- ----------
{: .-left-reference} {: .-three-column}
### Basic example ### Components
{: .-prime}
```jsx ```jsx
import React from 'react' import React from 'react'
@ -32,37 +33,42 @@ const el = document.body
ReactDOM.render(<Hello name='John' />, el) ReactDOM.render(<Hello name='John' />, el)
``` ```
Use the [React.js jsfiddle](http://jsfiddle.net/reactjs/69z2wepo/) to start hacking. (or the unofficial [jsbin](http://jsbin.com/yafixat/edit?js,output)). Use the [React.js jsfiddle](http://jsfiddle.net/reactjs/69z2wepo/) to start hacking. (or the unofficial [jsbin](http://jsbin.com/yafixat/edit?js,output))
### Try it ### Properties
<iframe src="http://jsbin.com/yafixat/edit?js,output" height="400"></iframe> ```html
<Video fullscreen={true} />
[Open in jsbin](http://jsbin.com/yafixat/edit?js,output) ```
{: target="_blank"}
Components
----------
{: .-three-column}
### Class components
```jsx ```jsx
class MyComponent extends React.Component { render () {
render () { this.props.fullscreen
return <div className='message-box'> ···
Hello {this.props.name} }
</div> ```
} {: data-line="2"}
Use `this.props` to access properties passed to the component.
See: [Properties](https://facebook.github.io/react/docs/tutorial.html#using-props)
### States
```jsx
this.setState({ username: 'rstacruz' })
```
```jsx
render () {
this.state.username
···
} }
``` ```
```jsx Use states (`this.state`) to manage dynamic data.
const el = document.body See: [States](https://facebook.github.io/react/docs/tutorial.html#reactive-state)
ReactDOM.render(<MyComponent name='John' />, el)
```
### Functional components ### Function components
```jsx ```jsx
function MyComponent ({ name }) { function MyComponent ({ name }) {
@ -73,6 +79,7 @@ function MyComponent ({ name }) {
``` ```
Functional components have no state. Also, their `props` are passed as the first parameter to a function. Functional components have no state. Also, their `props` are passed as the first parameter to a function.
See: [Function and Class Components](https://facebook.github.io/react/docs/components-and-props.html#functional-and-class-components)
### Nesting ### Nesting
@ -88,43 +95,11 @@ class Info extends React.Component {
} }
} }
``` ```
{: data-line="6-7"}
Nest components to separate concerns. See: [multiple components](http://facebook.github.io/react/docs/multiple-components.html) Nest components to separate concerns. See: [Composing Components](https://facebook.github.io/react/docs/components-and-props.html#composing-components)
### Properties
```html
<Video fullscreen={true} />
```
```jsx
class Video extends React.Component {
render () {
this.props.fullscreen
/* ... */
}
}
```
Use [props](https://facebook.github.io/react/docs/tutorial.html#using-props) (`this.props`) to access parameters passed from the parent.
### States
```jsx
this.setState({ username: 'rstacruz' })
```
```jsx
render () {
this.state.username
/* ... */
}
```
Use states (`this.state`) to manage dynamic data.
See: [States](https://facebook.github.io/react/docs/tutorial.html#reactive-state)
### Setting default props ### Setting default props
```jsx ```jsx
@ -145,6 +120,30 @@ class Hello extends React.Component {
} }
} }
``` ```
{: data-line="4"}
Set the default state in the `constructor()`.
### Children
```jsx
class AlertBox extends React.Component {
render () {
return <div className='alert-box'>
{this.props.children}
</div>
}
}
```
{: data-line="4"}
```jsx
<AlertBox>
<h1>You have pending notifications</h1>
</AlertBox>
```
Children are passed as the `children` property.
### Component API ### Component API
@ -208,6 +207,7 @@ class MyComponent extends React.Component {
} }
} }
``` ```
{: data-line="4"}
```jsx ```jsx
this.input.focus() this.input.focus()
@ -223,6 +223,7 @@ Allows access to DOM nodes. See: [Refs and the DOM](https://facebook.github.io/r
value={this.state.value} value={this.state.value}
onChange={this.handleChange} /> onChange={this.handleChange} />
``` ```
{: data-line="3"}
```jsx ```jsx
handleChange: function(event) { handleChange: function(event) {
@ -361,6 +362,7 @@ class VideoPlayer extends React.Component {
} }
} }
``` ```
{: data-line="3"}
Propagates `src="..."` down to the sub-component. Propagates `src="..."` down to the sub-component.
See [Transferring props](http://facebook.github.io/react/docs/transferring-props.html). See [Transferring props](http://facebook.github.io/react/docs/transferring-props.html).
@ -435,6 +437,41 @@ Always supply a `key` property.
</div> </div>
``` ```
Examples
-------
{: .-left-reference}
### Basic example
```jsx
import React from 'react'
import ReactDOM from 'react-dom'
```
```jsx
class Hello extends React.Component {
render () {
return <div className='message-box'>
Hello {this.props.name}
</div>
}
}
```
```jsx
const el = document.body
ReactDOM.render(<Hello name='John' />, el)
```
Use the [React.js jsfiddle](http://jsfiddle.net/reactjs/69z2wepo/) to start hacking. (or the unofficial [jsbin](http://jsbin.com/yafixat/edit?js,output)).
### Try it
<iframe src="http://jsbin.com/yafixat/edit?js,output" height="400"></iframe>
[Open in jsbin](http://jsbin.com/yafixat/edit?js,output)
{: target="_blank"}
Also see Also see
-------- --------
{: .-one-column} {: .-one-column}