Joeltbond

CSS Layout Debugger

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

Joeltbond

.hidden {
  display: none;
}

Joeltbond

/**
 * Assumes use of font awesome for menu and 'x' icons.
 * Also assumes that there is a '.hidden' class set up in your css
 * with display: none;
 *
 * Usage:
 *
 * 	<a href="javascript:void(0);" id="menuButton" class="pull-right">
 *		<i class="fa fa-bars pull-right"></i>
 *	</a>

Joeltbond

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: [],

Joeltbond

import React from "react";

export default ({ notes }) => (
  <div>
    <div>Notes: {Object.keys(notes).join(", ")}</div>
  </div>
);

Joeltbond

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();
  }

Joeltbond

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 = {

Joeltbond

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