Skip to content

Instantly share code, notes, and snippets.

Avatar

Andrew Krespanis andrewk

View GitHub Profile
View gist:f73704857d1a03bdea1c
### Keybase proof
I hereby claim:
* I am andrewk on github.
* I am andrew (https://keybase.io/andrew) on keybase.
* I have a public key ASCxw9Pg4zFREfvoBsCnNQoawhSlSZb5J2z4DsVHbpoSEgo
To claim this, I am signing this object:
@andrewk
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
andrewk / form-validation.md
Created Mar 29, 2015
Good Enough™ Form Validation in React
View form-validation.md

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).

Requirements

  • 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
andrewk / jasmine.md
Last active Jan 3, 2018
Jasmine 2.0 quick reference
View jasmine.md

Spies

Create a spy

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

// Mock object of spies: spy.next(), spy.current(), etc
View karma.conf.js
module.exports = function (config) {
'use strict';
config.set({
basePath: '',
preprocessors: {
'assets/tests/**/*.js': ['webpack'], // our specs
'assets/js/**/*.js': ['webpack'], // our components
@andrewk
andrewk / mov2gif
Created Aug 8, 2014
Animated screenshot for github PRs
View mov2gif
#!/bin/sh
# 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" ]
then
echo "Usage: mov2gif input.mov 700 > output.gif"
@andrewk
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 = [];
this.defaultAttrs({
@andrewk
andrewk / Makefile
Last active Aug 29, 2015
Sass include paths - bower vs npm
View Makefile
# watch assets for changes in development, using bower deps
watch:
sass -I assets/scss -I bower_components --watch assets/scss:public/css
# watch assets for changes in development, using npm deps
watch:
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
andrewk / Nested DOM structure as FlightJS components
Last active Aug 29, 2015
Response to request for modelling nested DOM as flight components - https://gist.github.com/djreimer/10687904
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
andrewk / Makefile
Last active Aug 29, 2015
Welcome to 2014, where apparently we need all this bullshit.
View Makefile
.PHONY: setup test
setup:
mkdir test
mkdir test/specs
mkdir test/fixtures
mkdir assets
mkdir assets/js
mkdir assets/css
mv test-main.js ./test/
You can’t perform that action at this time.