Skip to content

Instantly share code, notes, and snippets.

@kof
kof / BaseTransition.js
Created June 30, 2014 17:15
Transitions class to apply to RenderController
define(function(require, exports, module) {
'use strict'
var CachedMap = require('famous/transitions/CachedMap')
var Transform = require('famous/core/Transform')
var _ = require('underscore')
function BaseTransition(options) {
var o = this.options = _.extend({}, this.constructor.DEFAULT_OPTIONS, options)
var spec = this.spec = {}
@kof
kof / fastClickSurfacePatch.js
Created July 15, 2014 20:54
Fixes issue with FastClick
define(function(require, exports, module) {
var Surface = require('famous/core/Surface')
// https://github.com/Famous/core/issues/37
Surface.prototype.emit = function(type, event) {
if (event && !event.origin) event.origin = this;
return this.eventHandler.emit(type, event);
}
})
@kof
kof / Section.js
Last active August 29, 2015 14:14
Example of a react component with jss
'use strict'
import React from 'react'
import useSheet from 'react-jss'
import sectionStyle from './sectionStyle'
import Item from './Item'
/**
* One list section which has a title and list items.
*/
@kof
kof / decorated-component.js
Last active October 10, 2015 13:25
React component without extends.
import {component} from 'react'
@component
export default class MyComponent {
componentDidMount() {
}
render() {
}
}
export default {
input: {
display: 'inline-block',
width: '100%',
height: '100%',
lineHeight: 0
},
browser: {
position: 'absolute',
width: '100%',
@kof
kof / action-creator-vs-reducer.md
Last active January 18, 2020 09:06
Action creator vs. reducer

When should you use action creator and when reducer?

Action creator

  • you need to have side effects
  • you need to read from store to decide what to do
  • you need to dispatch more than one action
  • action produced by action creator needs to contain all the data reducer can need to shape the components state

Reducer

  • should not have any side effects
@kof
kof / react-inline-styles.md
Last active April 5, 2016 11:36
React inline style rendering

Rendering a style update

  1. Unset previous props.

Iterate over lastStyle and copy keys into styleUpdates with empty string as a value in order to "unset" them when they are missing in the next style version.

  1. Find modified props.

Iterate over new style and copy modified keys only into styleUpdates.

@kof
kof / StyledButton.js
Last active March 22, 2017 18:31
Styled Primitive Components with JSS
import {styled} from 'react-jss-components'
const RedButton = styled('button', {
color: 'red'
})
<RedButton>Click me</RedButton>
@kof
kof / MyComponent.js
Last active November 7, 2016 18:04
When to use functional components.
const Title = ({children}) => (
<div className={classes.titleContainer}>
<span className={classes.titleIcon} />
<h3 className={classes.titleHeadline}>
{children}
</h3>
</div>
)
@kof
kof / confirm-linkedin-skills.js
Last active July 8, 2017 10:20
Confirm all skills at linkedin
var expander = document.querySelector('[data-control-name="skill_details"][aria-expanded="false"]')
if (expander) expander.click()
;[].slice.apply(document.querySelectorAll('button[data-control-name="endorse"]')).forEach((btn) => {
btn.click()
})