charliewilco

const compose = (...fns) => fns.reduce((f, g) => (...args) => f(g(...args)))

charliewilco

title	date	excerpt
I Just Can't with CSS Anymore	2018-08-08	Okay, CSS. Like seriously. Come on

Four years ago, I worked at an agency and oh my did I write a lot of CSS. From project to project, a lot of CSS would have a lot of commonality. Patterns emerged, I needed custom buttons, a page wrapper, a flexible grid system, a type scale. I open sourced them on GitHub (because who hasn't ran down that rabbit-hole in the name of GitHub stars and immortality) and made them easy for me to find and update (well not so much update). A started to find that I'd need these in almost ever project I touched, from job to job. A lot of these patterns never changed much.

In building these patterns, I found the language underneath really rigid to work with and the environment pretty unintuitive. A lot projects tried to fix this and no matter what preprocessor or abstraction came along, the underlying problems remained:

charliewilco

class Modal {
  constructor () {
    this.open()
    this.close()
  }

  settings () {
    return {
      open: '.modalOpen',
      close: '.modalClose',

charliewilco

class Something {
  static reporter() {
    console.log('hello')
  }
  
  privateVar = false
  
  privateMethod = (x) => Boolean(x) && !== this.update(x)

  update = (x) => this.privateVar = x

charliewilco

{
    "editor.fontFamily": "Operator Mono, monospace",
    "editor.fontWeight": "300",
    "workbench.colorTheme": "Ocean Dark Extended",
    "workbench.colorCustomizations": {
        "statusBar.background": "#343d46"
    },
    "workbench.statusBar.feedback.visible": false,
    "editor.minimap.enabled": false,
    "git.ignoreMissingGitWarning": true,

charliewilco

import React, { Component, Fragment } from 'react'
import 'universal-fetch'

export default class extends Component {
  static async getInitialProps({ match, prefetch }) {
    const { user, repo } = match.params
    const response = await fetch(`https://api.github.com/repos/${user}/${repo}`)
    const post = await response.json()

    return { post, user, repo };

charliewilco

const API = () => (
  <Endpoints>
    <Get path='/posts' render={(req, res, props) => (
      <Mongoose schema={Post} find={req.params} />
    )} />

    <Post path='/posts' render={(req, res, props) => (
      <Mongoose schema={Post} add={req.params} />
    )} />

charliewilco

/*
	facebook.github.io
	reactjs.org
	flow.org
	graphql.org
	draftjs.org
	npmjs.com
*/
pre,
code,

charliewilco

import React from 'react'
import Dropzone from 'react-dropzone'
import fm from 'front-matter'
import { Editor, EditorState, convertFromRaw } from 'draft-js'
import { markdownToDraft } from 'markdown-draft-js'
import './App.css'

const styles = {
  fontFamily: 'Operator Mono, sans-serif'
}

charliewilco

import React from 'react'

export default class extends React.Component {
	state = {
		positionY: 0
	}

	static displayName = 'Ball'

	moveDown = () => this.setState(({ positionY }) => ({ positionY: positionY + 2 }))