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
watchman watch-del-all && rm -rf node_modules/ && yarn cache clean && yarn install && yarn start -- --reset-cache |
watchman watch-del-all && rm -rf node_modules/ && yarn cache clean && yarn install && yarn start -- --reset-cache |
// array utils | |
// ================================================================================================= | |
const combine = (...arrays) => [].concat(...arrays); | |
const compact = arr => arr.filter(Boolean); | |
const contains = (() => Array.prototype.includes | |
? (arr, value) => arr.includes(value) | |
: (arr, value) => arr.some(el => el === value) |
// Examples at https://gist.github.com/bendc/9b05735dfa6966859025#gistcomment-1370485 | |
// array utils | |
// ================================================================================================= | |
const combine = (...arrays) => [].concat(...arrays); | |
const compact = arr => arr.filter(Boolean); |
/* HOC fundamentally is just a function that accepts a Component and returns a Component: | |
(component) => {return componentOnSteroids; } or just component => componentOnSteroids; | |
Let's assume we want to wrap our components in another component that is used for debugging purposes, | |
it just wraps them in a DIV with "debug class on it". | |
Below ComponentToDebug is a React component. | |
*/ | |
//HOC using Class | |
//it's a function that accepts ComponentToDebug and implicitly returns a Class | |
let DebugComponent = ComponentToDebug => class extends Component { |
// Media Queries in Sass 3.2 | |
// | |
// These mixins make media queries a breeze with Sass. | |
// The media queries from mobile up until desktop all | |
// trigger at different points along the way | |
// | |
// And important point to remember is that and width | |
// over the portrait width is considered to be part of the | |
// landscape width. This allows us to capture widths of devices | |
// that might not fit the dimensions exactly. This means the break |
.navbar | |
.caret | |
.label | |
.table | |
.img-responsive | |
.img-rounded | |
.img-thumbnail | |
.img-circle | |
.sr-only | |
.lead |