joshdover

Idiomatic React Testing Patterns

Testing React components seems simple at first. Then you need to test something that isn't a pure interaction and things seem to break down. These 4 patterns should help you write readable, flexible tests for the type of component you are testing.

Setup

I recommend doing all setup in the most functional way possible. If you can avoid it, don't set variables in a beforeEach. This will help ensure tests are isolated and make things a bit easier to reason about. I use a pattern that gives great defaults for each test example but allows every example to override props when needed:

paulirish

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

bhauman

Recent improvements to the ClojureScript compiler have greatly simplified setting up development versus production outputs.

This example uses Figwheel as something that you want to exclude for production, but the pattern is general.

With this simple setup you only need one html file/view and it will work for developement and production.

runexec

Clojure does Objects Better

A hopefully short and concise explanation as to how Clojure deals with Objects. If you already write Clojure, this isn't for you.

You know what an Interface is if you write/read Java or PHP 5+. In Clojure it might be called defprotocol.

user> (defprotocol IABC
        (also-oo [this])
        (another-fn [this x]))

IABC

tkafka

The MIT License (MIT)

Copyright (c) 2014 Tomas Kafka

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

staltz

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

---

This tutorial as a series of videos

If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.

---

lelandbatey

Description

This simple script will take a picture of a whiteboard and use parts of the ImageMagick library with sane defaults to clean it up tremendously.

The script is here:

#!/bin/bash
convert "$1" -morphology Convolve DoG:15,100,0 -negate -normalize -blur 0x1 -channel RBG -level 60%,91%,0.1 "$2"

Results

Tho85

Build your own private, encrypted, open-source Dropbox-esque sync folder

Prerequisites:

• One or more clients running a UNIX-like OS. Examples are given for Ubuntu 12.04 LTS, although all software components are available for other platforms as well (e.g. OS X). YMMV
• A cheap Ubuntu 12.04 VPS with storage. I recommend Backupsy, they offer 250GB storage for $5/month. Ask Google for coupon codes.

Software components used:

• Unison for file synchronization
• EncFS for folder encryption

asmallteapot

Demanding software professionalism

Presented by Bob Martin in Tampa, Florida on 11 April 2012.

Miscellany

“Uranus is not a naked–eye object under any circumstances.”

• Copernicus’ motivation was religious, not scientific! Galileo looked at the phases of Venus to determine its orbit in relation to Sol.

Bob: How do you become unafraid of your code?

yumike

# codec: blocks

describe('articles.views.ArticleView'):

    context('when user has permissions'):

        it('should add new article'):
            # some code

        it('should delete existing article'):