Skip to content

Instantly share code, notes, and snippets.

View gist:98be605945387ffc327b21ad00db7b0f
/* shadow scroll */
background: linear-gradient(white 30%, rgba(255, 255, 255, 0)) center top,
linear-gradient(rgba(255, 255, 255, 0), white 70%) center bottom,
radial-gradient(
farthest-side at 50% 0,
rgba(0, 0, 0, 0.2),
rgba(0, 0, 0, 0)
)
center top,
radial-gradient(
View css grid 3 columns responsive
body {
max-width: 700px;
margin: 0 auto;
padding: 20px;
}
.container {
display: grid;
gap: 20px;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
@eldyvoon
eldyvoon / gist:70b1200d1819fca137f0c3d09a4faf4b
Created Oct 19, 2020
most rated Christian book of all time (updated 2020)
View gist:70b1200d1819fca137f0c3d09a4faf4b
<table class="table table-bordered table-hover table-condensed">
<thead><tr><th title="Field #1">theologian</th>
<th title="Field #2">century</th>
<th title="Field #3">title</th>
<th title="Field #4">year</th>
<th title="Field #5">average_rating</th>
<th title="Field #6">ratings_count</th>
</tr></thead>
<tbody><tr>
<td>C. S. Lewis</td>
View index.html
<table border="1" cellpadding="5" cellspacing="0" class="table table-bordered table-hover table-condensed">
<thead><tr><th title="Field #1">century</th>
<th title="Field #2">theologian</th>
<th title="Field #3">goodreadsId</th>
<th title="Field #4">books/title</th>
<th title="Field #5">books/year</th>
<th title="Field #6">books/average_rating</th>
<th title="Field #7">books/ratings_count</th>
</tr></thead>
<tbody><tr>
View compOne.js
import useCounter from "./useCounter";
const CompOne = ({ initCounter }) => {
const [count, increase] = useCounter(initCounter);
return (
<div>
Count: {count}
<button onClick={increase}>+</button>
</div>
View useCcounter.js
import { useState } from "react";
const useCounter = initCount => {
const [count, setCount] = useState(initCount);
return [
count,
() => setCount(count => count + 1),
() => setCount(count => count - 1)
];
View CompOne.js
import Counter from "./renderPropCounter";
const CompOne = ({ initCounter }) => (
<Counter initCounter={initCounter}>
{({ count, increase }) => (
<div>
Count: {count}
<button onClick={increase}>+</button>
</div>
)}
View renderPropCounter.js
class Counter extends Component {
constructor(props) {
super(props);
this.state = { count: props.initCounter };
}
increase = () => this.setState(prevState => ({ count: prevState.count + 1 }));
decrease = () => this.setState(prevState => ({ count: prevState.count - 1 }));
render() {
View CompOne.js
import CounterHoc from "./CounterHOC";
const CompOne = ({ count, increase }) => (
<div>
Count: {count}
<button onClick={increase}>+</button>
</div>
);
export default CounterHoc(CompTwo);
View CounterHoc.js
const CounterHOC = ComposedComponent =>
class extends Component {
constructor(props) {
super(props);
this.state = {
count: props.initCounter
};
}