Skip to content

Instantly share code, notes, and snippets.

🖖

Krzysztof Jendrzyca kjendrzyca

🖖
Block or report user

Report or block kjendrzyca

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
View hook-component-test.js
function Button({ disabled, onClick }) {
return <button disabled={disabled} onClick={onClick}>Hi</button>;
}
function useHook(disabled) {
const onClick = useCallback(() => console.log('works'), []);
const renderedButton = <Button disabled={disabled} onClick={onClick} />;
return {
View structure-rationale.md

Redux structure rationale

Goal

We wanted to create an application that is easy to extend and also easy to maintain. In order to achieve that, there has to be clear separation of concerns made by design. We believe that project folder structure is the part where you can enforce many good practices from ground-up. Essenially decreasing the burden on developers.

Introduction

We have couple of building blocks and 'binders' in react-redux application. We create components that represent the view, we create containers that connect views to state and we create actions/sagas/reducers trio to maintain the state. We will also need pages/routes that will display all the containers on one page to user.

View redux-saga-redux-observable.md

Choosing redux-observable or redux-sagas

My task is to compare two libraries which help you resolve same problem, in different manner - Handling async actions in redux applications. I don't want to state which one is better than another but I do want to list pros and cons of each and provide clear feedback which one I have picked and my reasons for it.

There is a nice topic on stack-overflow on the question "Why use Redux-Observable over Redux-Saga?". In this topic there is feedback from creator of react-observable, stating "We don't currently provide any reason redux-observable is better than redux-saga because...it's not. They solve the same problem in extremely similar ways, but have some fundamental differences that only become truly apparent once you use them enough"

In the same response he also points out that deciding for one or another prematurely is unnecessary and even after you can/should still use redux in

@kjendrzyca
kjendrzyca / flush-dns.sh
Created Jun 7, 2018 — forked from craigvantonder/flush-dns.sh
Flushing the DNS in Ubuntu 16.04
View flush-dns.sh
#!/bin/bash
# NB: First install nscd with sudo apt-get install nscd
# run this command to flush dns cache:
sudo /etc/init.d/dns-clean restart
# or use:
sudo /etc/init.d/networking force-reload
# Flush nscd dns cache:
sudo /etc/init.d/nscd restart
View docker-run
#!/usr/bin/env node
const program = require('commander') // eslint-disable-line
program
.version('0.1.0')
.option('-r, --rebuild', 'Start the containers and rebuild the images')
.option('-d, --down', 'Stop the containers')
.option('-l, --logs', 'Log the output of all containers')
.option('-f, --follow', 'Log the output of all containers in watch mode')
.parse(process.argv)
View JSXTransformer.min.js
(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.JSXTransformer=f()}})(function(){var define,module,exports;return function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({1:[function(_dereq_,module,exports){"use strict";var ReactTools=_dereq_("../main");var inlineSourceMap=_dereq_("./inline-source-map");var headEl;var dummyAnchor;var inlineScriptCount=0;var supportsAccessors=Obj
View setup.md
  1. do this:
yarn add prettier --dev
yarn add --dev prettier eslint-plugin-prettier
yarn add --dev eslint-config-prettier

// .eslintrc
{
  "extends": [
@kjendrzyca
kjendrzyca / component.jsx
Created Dec 22, 2016
Post - 13 things you need to know about React
View component.jsx
React.createClass({
getInitialState () {
return {
hideTodos: true
}
},
render () {
return (
<div>
View generators-magic.js
function async(genFunc) {
const genObj = genFunc();
const firstNext = genObj.next()
log(firstNext)
step(firstNext);
function step({value,done}) {
if (!done) {
// A Promise was yielded
value
@kjendrzyca
kjendrzyca / .eslintrc
Created Mar 13, 2016
problematic jsx auto-formatting
View .eslintrc
{
"env": {
"browser": true,
"node": true,
"es6": true,
"jest": true
},
parserOptions: {
ecmaVersion: 6,
You can’t perform that action at this time.