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
import React, {useEffect, useState} from 'react'; | |
import {StatusBar} from 'react-native'; | |
import {NavigationContainer} from '@react-navigation/native'; | |
import {createStackNavigator} from '@react-navigation/stack'; | |
import Heap from '@heap/react-native-heap'; | |
import {useAsyncStorage} from '@react-native-async-storage/async-storage'; | |
import {Provider as PaperProvider} from 'react-native-paper'; | |
import {OrientationLocker, PORTRAIT} from 'react-native-orientation-locker/src/OrientationLocker'; | |
import {useReactiveVar} from '@apollo/client'; | |
import {LightNavigationTheme, DarkNavigationTheme, LightPaperTheme, DarkPaperTheme} from '@styles/theme'; |
interface Worker { | |
name: string, | |
surname: string, | |
deparment: 'ENGINEERING' | 'SALES', | |
skills: Array<string>, | |
}; | |
interface Developer extends Worker { | |
type: 'FRONT-END' | 'FULL-STACK', |
import Color from "color"; | |
import brandStore from "./brand-store"; | |
const defaultColours = [ | |
{ name: "primary", value: "#333" }, | |
{ name: "secondary", value: "#222" }, | |
{ name: "tertiary", value: "#555" }, | |
]; | |
const defaultBodyFont = "Lato"; |
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 |
var isSquare = function (n) { | |
return n >= 0 && Math.sqrt(n) % 1 === 0 ? true : false; | |
} | |
// Sum of a sequence | |
const sequenceSum = (begin, end, step) => { | |
if (begin > end) { | |
return 0; | |
} | |
return begin + sequenceSum(begin + step, end, step); |
// 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 { |