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
Linked Account Detail Page A | |
No Linking error | |
plaid error -> Linking error | |
Linking error | |
No Modal | |
click relink cta -> Modal - Did you change your credentials? | |
Modal - Did you change your credentials? | |
no -> Modal - Login to Institiution X create Linked Account A |
import { eventChannel } from "redux-saga"; | |
import { takeEvery, take, call, put } from "redux-saga/effects"; | |
const APP_MOUNTED = "app/APP_MOUNTED"; | |
const MIDI_UNSUPPORTED = "app/MIDI_UNSUPPORTED"; | |
const MIDI_ACCESS_FAILURE = "app/MIDI_ACCESS_FAILURE"; | |
const MIDI_NOTE_ON = "app/MIDI_NOTE_ON"; | |
const MIDI_NOTE_OFF = "app/MIDI_NOTE_OFF"; | |
const initialState = { |
import React, { Component } from "react"; | |
import { connect } from "react-redux"; | |
import { appMounted } from "../redux_modules/app"; | |
import MidiInput from "../components/MidiInput"; | |
class App extends Component { | |
componentDidMount() { | |
this.props.appMounted(); | |
} |
import React from "react"; | |
export default ({ notes }) => ( | |
<div> | |
<div>Notes: {Object.keys(notes).join(", ")}</div> | |
</div> | |
); |
import { eventChannel } from "redux-saga"; | |
import { takeEvery, take, call, put } from "redux-saga/effects"; | |
const APP_MOUNTED = "midi/APP_MOUNTED"; | |
const MIDI_UNSUPPORTED = "midi/MIDI_UNSUPPORTED"; | |
const MIDI_NOTE_ON = "midi/MIDI_NOTE_ON"; | |
const MIDI_NOTE_OFF = "midi/MIDI_NOTE_OFF"; | |
const initialState = { | |
errors: [], |