Skip to content

Instantly share code, notes, and snippets.

@kof
kof / button-hooked.js
Last active Nov 2, 2018
Inject styles with custom hooks
View button-hooked.js
const styles = {
button: {
color: 'red'
}
}
const Button = () => {
const {classes} = useStyles(styles)
return <button className={classes.button}>Test<Button>
}
@kof
kof / example.js
Created Jul 11, 2018
static jss as a raw css string
View example.js
// source js
const styles = {
static: {
color: 'green'
},
mixed: {
color: 'red',
margin: (props) => props.spacing
}
}
@kof
kof / structure.txt
Last active Jun 26, 2018
Redux app structure
View structure.txt
- components
- utils
features
- feature-x
- action-types
- action-creators
- reducer
- containers
- renderers
- index.js
@kof
kof / react-component.js
Last active Aug 30, 2017
Reactive Component
View react-component.js
class MyComponent extends Component {
componentWillMount() {
alert('will mount')
}
onClick = () => {
alert('Button Clicked')
// Forward click to the outer listeners.
this.props.onClick()
@kof
kof / weird.md
Last active Jul 17, 2017
weird linked-in conversation
View weird.md

Jul 5 LinkedIn Member sent the following message at 7:19 PM LinkedIn Member Hi Oleg

We are a 12 person team of young professionals building our own company in Berlin. We are looking for another Reactjs developer to cofound with us. Would you like to hear more about it?

Best regards, Josh

@kof
kof / external-motivators.md
Last active Jul 3, 2017
External things that keep me motivated at work
View external-motivators.md
  1. Open Source being officially part of the job, not just an "after job fun" instead of spending time with the family.
  2. Colleagues one can learn from, not those one needs to clean up after.
  3. Money matters. Only a stupid person can think that money doesn't matter in our capitalistic society. This also includes social security, medical ensurance and any other expenses. I am not mercantile, no.
  4. Soft deadlines. Having time to do things right.
  5. No pressure in being at time every day in the office. We all got our issues.
  6. Workout during working hours. Possibility to go quickly for a run or to the gym.
  7. Office is optional. I prefer to work from any location I want. Sometimes being in the office is nice though.
  8. Good sitting conditions: good chairs, gym ball, stay desk, sofas.
  9. Relaxation room or nap room.
@kof
kof / detect-rendered-css.js
Created May 28, 2017
Detect Rendered CSS using a probe container.
View detect-rendered-css.js
// This allows you to benchmark CSSinJS libs after styles have been really applied.
function detectCSSRendered(className, callback) {
const probe = document.createElement('div')
probe.style.visibility = 'hidden'
probe.className = className
var style = document.head.appendChild(document.createElement('style'))
style.textContent = '' +
'@keyframes probe-animation {' +
' from {left: 20%}' +
@kof
kof / confirm-linkedin-skills.js
Last active Jul 8, 2017
Confirm all skills at linkedin
View confirm-linkedin-skills.js
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()
})
@kof
kof / MyComponent.js
Last active Nov 7, 2016
When to use functional components.
View MyComponent.js
const Title = ({children}) => (
<div className={classes.titleContainer}>
<span className={classes.titleIcon} />
<h3 className={classes.titleHeadline}>
{children}
</h3>
</div>
)
@kof
kof / StyledButton.js
Last active Mar 22, 2017
Styled Primitive Components with JSS
View StyledButton.js
import {styled} from 'react-jss-components'
const RedButton = styled('button', {
color: 'red'
})
<RedButton>Click me</RedButton>
You can’t perform that action at this time.