andrejewski

document.body.appendChild((function () {
  var e = document.createElement('div'); 
  e.style = 'background-color: #000; position: fixed; right: 30vw; top: 40vh; width: 2px; height: 4px'; 
  return e;
})())

andrejewski

export function getNestedChecks (check) {
  if (typeof check !== 'object') {
    return check;
  }

  return (x, key) => {
    const props = Object.keys(check);
    for (let i = 0; i < props.length; i++) {
      const prop = props[i];
      const subCheck = getNestedChecks(check[prop]);

andrejewski

import request from './shared-request'

export function assemble (deps, {data, view, logic}) {
  return {view, ...logic(data(deps))}
}

export function data (deps) {
  return {
    getUser (userId) {
      return dispatch => {

andrejewski

My convention for CSS naming is:

• For a component, pascal-case (capitalized + camel-case) the root class name, Button
• For any other element classes within that component, use the component name followed by a dash - and then the element'c class name in dash case icon, so Button's icon would be Button-icon.
• For modifiers, meaning classes that override styles from a base class name, use the component name followed by two dashes -- and then the class name in dash case shopping-cart, so Button's icon style overrides for the shopping cart icon would be Button-icon--shopping-cart.

A button component with an icon and text:

<button class='Button Button--primary'>

andrejewski

(defn program [{:keys [init, update, done, view]}]
  (let [state (atom nil)
        running (atom true)
        change (fn [dispatch [newState effect]]
          (do
            (if effect
              (effect dispatch))
            (reset! state newState)
            (view @state dispatch)))
        dispatch (fn dispatch [message]

andrejewski

interface Tag {
  kind: string
  data: any
}

interface Union {
  match<T>(tag: Tag, handleMap: { [kind: string]: (data: any) => T }, catchAll?: () => T): T,
  tags: { [kind: string]: (data: any) => Tag }
}

andrejewski

import Component from 'can-component'
import {program} from './raj-can-map'
import Map from 'can-map' // or whatever Map-like thing
import stache from 'can-stache'

export default Component.extend({
  tag: 'my-app',
  template: stache(`
    <p>{{count}}</p>
    <button on:click="increment()">Increment</button>

andrejewski

A refactoring

This is a refactoring where an example task goes through rounds of iteration, improving the design with commentary.

Our goal is to create a service for sending email. We need a set of options that fit into two sets:

• Service options, that will remain constant for the service's lifetime, like transport configuration.
• Per-email options, that will be used to send a single email.

We separate the two for ergonomics.

andrejewski

import Map from 'can/map/';
import Component from 'can/component/';

// Range methods from https://github.com/yapplabs/ember-wormhole/blob/f6bdea79ee1d9b3ef6b7f19e378e3bfb103b2e5e/addon/components/ember-wormhole.js
function appendRange (destinationElement, firstNode, lastNode) {
  while(firstNode) {
    destinationElement.insertBefore(firstNode, null);
    firstNode = firstNode !== lastNode ? lastNode.parentNode.firstChild : null;
  }
}

andrejewski

// A quick refactor

// 1
function foo (fieldValue) {
    //If the fieldValue is a number, use ID
    //Otherwise, use codeName
    //Postgres gets grouchy about comparing strings to numbers
    let fieldName;
    try {
        const parsed = parseInt(fieldValue);