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 |