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
// create a React context Provider/Consumer pair that | |
// validates the consumer is rendered within a provider | |
function createRequiredContext(name) { | |
const Context = React.createContext() | |
function Consumer(props) { | |
return ( | |
<Context.Consumer {...props}> | |
{val => { | |
if (!val) { |
import React from 'react' | |
function Login({onSubmit}) { | |
return ( | |
<div> | |
<form | |
data-test="login-form" | |
onSubmit={e => { | |
e.preventDefault() | |
const {username, password} = e.target.elements |
'use strict'; | |
launchChrome() | |
.then(async chrome => { | |
const cdp = await CDP({port: chrome.port}); | |
try { | |
const {CSS, DOM, Page, Profiler} = cdp; | |
setupDevToolsTarget(cdp); |
// Based on http://stackoverflow.com/a/10520017/1307721 and http://stackoverflow.com/a/16022728/1307721 | |
Podium = {}; | |
Podium.keydown = function(k) { | |
var oEvent = document.createEvent('KeyboardEvent'); | |
// Chromium Hack | |
Object.defineProperty(oEvent, 'keyCode', { | |
get : function() { |
/* eslint-disable no-console */ | |
import Perf from 'react-addons-perf'; | |
import sinon from 'sinon'; | |
/** | |
* Counts the number of DOM operations that occurred while executing `fn`. | |
* | |
* Example usage: | |
# import React from 'react'; | |
# import ReactDOM from 'react-dom'; |
react + redux + RR
It uses https://gist.github.com/iNikNik/3c1b870f63dc0de67c38 for stores and actions.
1) create redux
const redux = createRedux(state);
2) get requireAccess func => bindCheckAuth to redux
-> tempExtremities | |
| normal -> lesion | |
| | no -> peripheralPulse | |
| | | normal -> capFillTime | |
| | | | low -> hadSurgery | |
| | | | | yes -> pain : + | |
| | | | | yes -> pain | |
| | | | | | severe -> rectalExam | |
| | | | | | | normal -> abdominalDistension | |
| | | | | | | | slight -> pulse |
|tempExtremities | |
| |pain | |
| | |lesion | |
| | | |packedCellVolume | |
| | | | |hadSurgery | |
| | | | -Died | |
| | | | |peripheralPulse | |
| | | | | |abdominalDistension | |
| | | | | | |abdominalDistension | |
| | | | | | | |abdomen |