Skip to content

Instantly share code, notes, and snippets.

@kof
kof / logo-without-noise.svg
Created October 8, 2022 13:42
Webstudio Logo
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@kof
kof / node-wipe.sh
Last active March 7, 2021 08:41
Complete wipe of all node related files for MacOS
#!/bin/bash
yarn cache clean
npm cache clean --force
sudo rm -rfv /usr/local/{lib/node{,/.npm,_modules},bin,share/man}/{npm*,node*,man1/node*}
sudo rm -rfv ~/.npm ~/.nvm ~/node_modules ~/.node-gyp ~/.npmrc ~/.yarnrc ~/.node_repl_history
sudo rm -rfv /usr/local/bin/npm /usr/local/bin/node-debug /usr/local/bin/node /usr/local/bin/node-gyp
sudo rm -rfv /usr/local/share/man/man1/node* /usr/local/share/man/man1/npm*
sudo rm -rfv /usr/local/include/node /usr/local/include/node_modules
sudo rm -rfv /usr/local/lib/node /usr/local/lib/node_modules /usr/local/lib/dtrace/node.d
sudo rm -rfv /opt/local/include/node /opt/local/bin/node /opt/local/lib/node
@kof
kof / Switch1.js
Last active January 27, 2020 01:23
Material-UI Switch using imaginary state machine
// Original implementation https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Switch/Switch.js
// An attempt to use state machines inside of styles declaration.
const useStyles = createUseStyles({
root: {
display: 'inline-flex',
overflow: 'hidden',
boxSizing: 'border-box',
position: 'relative',
flexShrink: 0,
@kof
kof / button-hooked.js
Last active November 23, 2021 08:13
Inject styles with custom hooks
const styles = {
button: {
color: 'red'
}
}
const Button = () => {
const {classes} = useStyles(styles)
return <button className={classes.button}>Test<Button>
}
@kof
kof / example.js
Created July 11, 2018 17:38
static jss as a raw css string
// source js
const styles = {
static: {
color: 'green'
},
mixed: {
color: 'red',
margin: (props) => props.spacing
}
}
@kof
kof / structure.txt
Last active June 26, 2018 10:30
Redux app structure
- components
- utils
features
- feature-x
- action-types
- action-creators
- reducer
- containers
- renderers
- index.js
@kof
kof / react-component.js
Last active August 30, 2017 15:49
Reactive Component
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 July 17, 2017 19:36
weird linked-in conversation

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 July 3, 2017 17:43
External things that keep me motivated at work
  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 22:00
Detect Rendered CSS using a probe container.
// 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%}' +