miguelbermudez

Checking the State of Your States

If applicable, make sure your design component accounts for all these states. This is basically copied from the Nine States of Design Medium article. 😛

• Initial state: What happens before your component does anything? Maybe it’s the first time a user sees it. Maybe it’s not activated yet. Essentially, the component exists but hasn’t started.
• Loading state: Have you accounted for when a user will be waiting for something to happen? What does that look like?
• Empty state: Your component has initialized, but it’s empty. No data. No Items. Now may be a good time to get the user to act (“Do this thing!”), or to reward them (“Good job, everything is taken care of”).
• One state: You have some data. On an input, this may be after the first keystroke. In a list, it might be when you have one item (or one left).
• Some data state: This is usually what you think

miguelbermudez

// getComponent is a function that returns a promise for a component
// It will not be called until the first mount
function asyncComponent(getComponent) {
  return class AsyncComponent extends React.Component {
    static Component = null;
    state = { Component: AsyncComponent.Component };

    componentWillMount() {
      if (!this.state.Component) {
        getComponent().then(Component => {

miguelbermudez

#
# Aliases
# (sorted alphabetically)
#

# GIT #

alias g 'git'

alias ga 'git add'

miguelbermudez

(ns preloader
  "Example from http://tympanus.net/codrops/2014/08/05/page-preloading-effect/"
  (:require [reagent.core :as r]))

(def status (r/atom {:progress   0
                     :length     0
                     :dasharray  0
                     :dashoffset 0}))

(defn set-progress [status]

miguelbermudez

OS X Screencast to animated GIF

This gist shows how to create a GIF screencast using only free OS X tools: QuickTime, ffmpeg, and gifsicle.

Instructions

To capture the video (filesize: 19MB), using the free "QuickTime Player" application:

miguelbermudez

Atom Clojure Setup

This describes how I setup Atom for an ideal Clojure development workflow. This fixes indentation on newlines, handles parentheses, etc. The keybinding settings for enter (in keymap.cson) are important to get proper newlines with indentation at the right level. There are other helpers in init.coffee and keymap.cson that are useful for cutting, copying, pasting, deleting, and indenting Lisp expressions.

Install Atom

Download Atom

The Atom documentation is excellent. It's highly worth reading the flight manual.

miguelbermudez

datomic % uri="datomic:sql://heh?jdbc:postgresql://localhost:5432/heh?user=myPSQLUser&password=myPSQLPassword";
<datomic:sql://heh?jdbc:postgresql://localhost:5432/heh?user=myPSQLUser&password=myPSQLPassword>
datomic % Peer.createDatabase(uri);
<true>
datomic % conn = Peer.connect(uri);
<{:db-id "heh-5193d8ad-0ec4-4fcc-b995-0915581bb2e0", :unsent-updates-queue 0, :pending-txes 0, :next-t 1000, :basis-t 62, :index-rev 0, :index-root {:rev 0, :key "5193d921-b783-47c2-a9cf-7e555747b8cd"}, :log-root {:rev 0, :key "5193d921-17a1-4a03-9717-f10a869812cb"}}>
datomic % datom = Util.list("db/add",
                  Peer.tempid("db.part/user"),
                  "db/doc",
                  "hello world");

miguelbermudez

Datomic pro with Postgresql Setup

Prep

• Get evaluation license key : http://my.datomic.com/eval/request
• Download pro version : http://downloads.datomic.com/pro.html

Setups

1. Dev mode setup

miguelbermudez

'use strict';

var _extend = function extend(target) {
  var sources = [].slice.call(arguments, 1);
  sources.forEach(function(source) {
    for (var property in source) {
      if (source[property] && source[property].constructor &&
        source[property].constructor === Object) {
        target[property] = target[property] || {};
        target[property] = extend(target[property], source[property]);

miguelbermudez

// originally from http://dabblet.com/gist/ed4f0a7dc7326e8e28b8

setInterval(function(){
	var d = new Date();
	var h = d.getHours();
	var m = d.getMinutes();
	var s = d.getSeconds();
	
	document.body.textContent = [h, m, s].map(function(a){ return a < 10? '0' + a : a}).join(':');