Skip to content

Instantly share code, notes, and snippets.


Andrew Krespanis andrewk

View GitHub Profile
View gist:f73704857d1a03bdea1c
### Keybase proof
I hereby claim:
* I am andrewk on github.
* I am andrew ( on keybase.
* I have a public key ASCxw9Pg4zFREfvoBsCnNQoawhSlSZb5J2z4DsVHbpoSEgo
To claim this, I am signing this object:
andrewk / es6Intl.js
Created Aug 11, 2015
ReactIntl without mixins
View es6Intl.js
import provideIntl from './provideIntl';
import ReactIntl from 'react-intl';
const components = {};
export default components;
// FormattedMessage, FormattedNumber, FormattedRelative, FormattedDate
Object.keys(ReactIntl).forEach(key => {
components[key] = provideIntl(ReactIntl[key]);
andrewk /
Created Mar 29, 2015
Good Enough™ Form Validation in React

Good Enough™ Form Validation in React

…specifically React 0.13 using ES6 class syntax

Originally I was implementing the validator as a context, but then I got stung by parent context vs owner context. I'll likely return to the context model when React's context implementation is more final (looks like they're moving towards parent context over owner context, which I'd prefer).


  • markup must match our existing markup, for UX consistency.
  • inputs are re-usable components with an explicit contract -- they are responsponsible for their error display and any required filtering of their value.
andrewk /
Last active Jan 3, 2018
Jasmine 2.0 quick reference


Create a spy

// "bare" spy
var spy = jasmine.createSpy('spyName');

// Mock object of spies:, spy.current(), etc
View karma.conf.js
module.exports = function (config) {
'use strict';
basePath: '',
preprocessors: {
'assets/tests/**/*.js': ['webpack'], // our specs
'assets/js/**/*.js': ['webpack'], // our components
andrewk / mov2gif
Created Aug 8, 2014
Animated screenshot for github PRs
View mov2gif
# Convert movie (screencast) to lofi animated gif for embedding in github PR's, emails etc.
# Requires: ffmpeg, gifsicle
# Screencasts are easily captured in Quicktime Player: File > New screen recording
if [ -z "$1" ]
echo "Usage: mov2gif 700 > output.gif"
andrewk / component-registry.js
Created Jul 30, 2014
Handling attaching Flight components to DOM nodes in async-injected content
View component-registry.js
define(function(require) {
'use strict';
var defineComponent = require('flight/lib/component');
return defineComponent(ComponentRegistry);
function ComponentRegistry() {
this.components = [];
andrewk / Makefile
Last active Aug 29, 2015
Sass include paths - bower vs npm
View Makefile
# watch assets for changes in development, using bower deps
sass -I assets/scss -I bower_components --watch assets/scss:public/css
# watch assets for changes in development, using npm deps
sass $(foreach d, $(shell find . -name 'node_modules' -type d), -I$d) -I assets/scss --watch assets/scss:public/css
# and what does that `find` call look like in reality?
andrewk / Nested DOM structure as FlightJS components
Last active Aug 29, 2015
Response to request for modelling nested DOM as flight components -
View Nested DOM structure as FlightJS components
- I wrote this on the train after a long day with a heavy head cold. I haven't run it,
but regardless of likely errors I think it expresses the design well enough.
- Segment and ConditionSet look close to identical, but that's likely due to the simplified
nature of the outline you provided
- I don't like attaching components to classes unless they're `js-`, as it's coupling
your styling and behaviour layers. We excelusively use data attributes for JS-DOM coupling
and I've quickly grown fond of the approach.
andrewk / Makefile
Last active Aug 29, 2015
Welcome to 2014, where apparently we need all this bullshit.
View Makefile
.PHONY: setup test
mkdir test
mkdir test/specs
mkdir test/fixtures
mkdir assets
mkdir assets/js
mkdir assets/css
mv test-main.js ./test/