jaredpalmer

Keybase proof

I hereby claim:

• I am jaredpalmer on github.
• I am jaredpalmer (https://keybase.io/jaredpalmer) on keybase.
• I have a public key whose fingerprint is 9885 CBA7 BA1C 902A 2A6C 46FE 6299 5319 5A64 B360

To claim this, I am signing this object:

jaredpalmer

Advanced Programming

Programming setup

• Instant visual output.
• Fast startup time, fast execution.
• Sensible errors, with code locations.
• Easy to set up and get working.

Architecture

jaredpalmer

<a href="https://www.washingtonpost.com/news/the-switch/wp/2016/06/24/the-british-are-frantically-googling-what-the-eu-is-hours-after-voting-to-leave-it/" target="_blank">
  <img class="bodyImage" src="http://ichef.bbci.co.uk/news/624/cpsprodpb/15AA2/production/_90083788_googeu2.jpg" width="486" height="274"/>
</a>

jaredpalmer

jsxstyle + Pseudo Selector API Proposal

Background / Motivation

Pete Hunt's jsxstyle library is incredibly fun to use. It colocates your React component's styling and functionality in the same place and with the same syntax: props. In exchange for this enormous benefit and productivity boost, you must give up pseudo selectors like :hover, :focus, etc. as they are not possible with inline css. This makes things like buttons and inputs extremely challenging. For example, this is a button component from a current project of mine:

// Button.js
import React, { Component } from 'react'
import {Flex} from 'jsxstyle'

jaredpalmer

<div class="xs-mb6 xs-mx-auto" style="max-width: 580px">
    <div class="clearfix gutters xs-mb5">
      <div class="col xs-col-2 sm-col-2">
        <div class="circle xs-text-center xs-align-middle" style="height: 4rem; width: 4rem; line-height: 4rem; border: 2px solid #79589F">
          <div class="xs-text-2 text-purple" style="line-height: 3.8rem !important;">1</div>
        </div>
      </div>
      <div class="col xs-col-10 sm-col-10">
        <h3 class="bold xs-mb1">AKBD</h3>
        <p class="xs-text-5">Industry newcomers can make an immediate impression on prospective clients and employers by earning this entry-level certification. A minimum of two years of kitchen/bath industry experience is required.</p>

jaredpalmer

const Hue = require('node-hue-api')

exports.decorateConfig = (config) => {
  const { host, username, light } = config.hyperhue
  const api = new Hue.HueApi(host, username)
  api
    .lightStatus(1)
    .then(status => {
      const { on, hue, sat, bri } = status
      const color = `hsb(${hue},${sat},${bri})`

jaredpalmer

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym,
address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i,
center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr,
th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav,
output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;

jaredpalmer

import React, { Component } from 'react';
import {withRouter} from 'react-router';
import auth from '../auth';

class Login extends Component {
  constructor() {
    super()
    this.state ={
      error: true
    };

jaredpalmer

import _ from 'lodash';
import s from 'underscore.string';
import chalk from 'chalk';

import parseValidationError from './parse-validation-error';
import sentry from './sentry';
import config from '../config';

// sentry supported log levels:

jaredpalmer

<nav class="nav xs-border-bottom-lighter xs-relative flex xs-flex-justify-start xs-flex-items-center fill-white xs-px2" style="height: 50px; line-height: 50px;" >
  <a class="xs-flex-grow-0 xs-inline-block xs-mr3 bold link-gray caps" style="letter-spacing: .1em;" href="/">Palmer</a>
   {% if user %}
    <div class="xs-flex-grow-1 xs-text-left">
      <a class="xs-inline-block xs-mr1 bold" href="/admin">Dashboard</a>
      <a class="xs-inline-block xs-mr1 bold" href="/admin/users">Users</a>
      <a class="xs-inline-block xs-mr1 bold" href="/admin">Companies</a>
      <a class="xs-inline-block xs-mr1 bold" href="/admin">News</a>
      <a class="xs-inline-block xs-mr1 bold" href="/admin">Events</a>
    </div>