alexbenic

Keybase proof

I hereby claim:

• I am alexbenic on github.
• I am alexbenic (https://keybase.io/alexbenic) on keybase.
• I have a public key whose fingerprint is B02E 3242 8EA1 C081 76E4 B4DF 9027 9EB5 863C 8CE5

To claim this, I am signing this object:

alexbenic

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

alexbenic

set noautofocus
let blacklists = ["*://www.draw.io/*"]

alexbenic

Principles of Adult Behavior

1. Be patient. No matter what.
2. Don’t badmouth: Assign responsibility, not blame. Say nothing of another you wouldn’t say to him.
3. Never assume the motives of others are, to them, less noble than yours are to you.
4. Expand your sense of the possible.
5. Don’t trouble yourself with matters you truly cannot change.
6. Expect no more of anyone than you can deliver yourself.
7. Tolerate ambiguity.
8. Laugh at yourself frequently.

alexbenic

render() {
  return React.createElement(
    "div",
    {
      className:
      "helvetica vh-100 vw-100 flex flex-column items-center justify-center f2"
    },
    [
      React.createElement("input", {
        className: "ma2 pa1",

alexbenic

render() {
  return(
    <div 
      className="helvetica f2">
      <input className="ma2 pa1" 
          onChange={this.handleChange("firstName")} />
      <input className="ma2 pa1" 
          onChange={this.handleChange("lastName")} />
      <div className="ma2">
        {`Hello ${this.state.firstName} ${this.state.lastName}`}

alexbenic

render() {
  return (
    <Router>
      <Switch>
	<Route exact path="/" 
		render={() => <Redirect to="/one" />} />
	<Route exact path="/one" component={Lorem} />
	<Route exact path="/two" component={Lorem} />
	<Route exact path="/three" component={Lorem} />
	<Route component={NotFound} />

alexbenic

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {};
  }

  render() {
    return (
      <div></div>

alexbenic

const NotFound = () => {
  return (
    <Fragment>
      <Header />
      <div className="f1 mesaure center mv4 tc w-100">404</div>
    </Fragment>
  );
};

alexbenic

return (
  <div>
    <div style={{ marginBottom: "25px" }}>
      <input
        type="text"
        style={inputStyle}
        value={this.state.filter}
        onChange={evt => this.handleChange(evt)}
        tabIndex={0}
      />