Skip to content

Instantly share code, notes, and snippets.

Avatar

Daniel Ciao plusCubed

View GitHub Profile
@developit
developit / purecomponent.js
Created Apr 25, 2017
PureComponent for preact
View purecomponent.js
import { Component } from 'preact';
export default class PureComponent extends Component {
shouldComponentUpdate(props, state) {
return !(shallowEqual(props, this.props) && shallowEqual(state, this.state));
}
}
function shallowEqual(a, b) {
for (let key in a) if (a[key]!==b[key]) return false;
@bvaughn
bvaughn / react-lifecycle-cheatsheet.md
Last active Dec 16, 2020
React lifecycle cheatsheet
View react-lifecycle-cheatsheet.md

React lifecycle cheatsheet

Method Side effects1 State updates2 Example uses
Mounting
componentWillMount Constructor equivalent for createClass
render Create and return element(s)
componentDidMount DOM manipulations, network requests, etc.
Updating
componentWillReceiveProps Update state based on changed props
@eyecatchup
eyecatchup / material-design-breakpoints.css
Last active Dec 4, 2020
CSS media queries based on the breakpoint guidance published by the Material Design team. http://www.google.com/design/spec/layout/adaptive-ui.html#adaptive-ui-breakpoint
View material-design-breakpoints.css
/* Material Design Adaptive Breakpoints */
/*
Below you'll find CSS media queries based on the breakpoint guidance
published by the Material Design team. You can choose to use, customise
or remove these breakpoints based on your needs.
http://www.google.com/design/spec/layout/adaptive-ui.html#adaptive-ui-breakpoints
*/
/* mobile-small */
@addyosmani
addyosmani / README.md
Last active Jan 4, 2021 — forked from 140bytes/LICENSE.txt
108 byte CSS Layout Debugger
View README.md

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

You can’t perform that action at this time.