Skip to content

Instantly share code, notes, and snippets.

Oleg Isonen kof

Block or report user

Report or block kof

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@kof
kof / react-inline-styles.md
Last active Apr 5, 2016
React inline style rendering
View react-inline-styles.md

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 / action-creator-vs-reducer.md
Last active Jul 24, 2018
Action creator vs. reducer
View action-creator-vs-reducer.md

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
View jss-es6-example-1.js
export default {
input: {
display: 'inline-block',
width: '100%',
height: '100%',
lineHeight: 0
},
browser: {
position: 'absolute',
width: '100%',
@kof
kof / decorated-component.js
Last active Oct 10, 2015
React component without extends.
View decorated-component.js
import {component} from 'react'
@component
export default class MyComponent {
componentDidMount() {
}
render() {
}
}
@kof
kof / Section.js
Last active Aug 29, 2015
Example of a react component with jss
View Section.js
'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 / fastClickSurfacePatch.js
Created Jul 15, 2014
Fixes issue with FastClick
View fastClickSurfacePatch.js
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 / BaseTransition.js
Created Jun 30, 2014
Transitions class to apply to RenderController
View BaseTransition.js
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 / app.js
Created Jun 25, 2014
Famo.us app init
View app.js
exports.ready = new Promise(function(fulfill, reject) {
var isResized, isDomReady
var isDeviceReady = !window.cordova
context.on('resize', function() {
isResized = true
resolve()
})
domready(function() {
@kof
kof / SomeView.js
Last active Aug 29, 2015
RenderController
View SomeView.js
SomeView.prototype.show = function() {
var prevAnimation = {
transition: {},
transform: {}
}
var thisAnimation = {
transition: {},
transform: {}
}
@kof
kof / structure.md
Last active Aug 29, 2015
Project structure
View structure.md

app

  1. lib (app unspecific, installed from bower, npm or component) - lib1
  2. src (app specific) - screens (take components and build screens)
    • screen1
      • models
        • Model1.js
      • views
        • View1.js
You can’t perform that action at this time.