Skip to content

Instantly share code, notes, and snippets.

View dzNavitski's full-sized avatar

Dzmitry dzNavitski

5 followers · 27 following
View GitHub Profile
@dzNavitski
dzNavitski / joy-example.js
Created May 2, 2017 18:18
joy example
import Joi from 'joi-full';
const schema = Joi.object().keys({
postTitle: Joi.string()
.required()
.min(3)
.options({
language: {
any: {
empty: '{{key}} is required',
@dzNavitski
dzNavitski / AutoSavingForm.md
Created May 2, 2017 09:06 — forked from oyeanuj/AutoSavingForm.md
Auto-saving forms using Redux-Form

Here is how I ended up making this work. For more context and background on the discussion, I recommend reading conversation in ReduxForm#2169 (and chiming in with your learnings, etc).

So, as per the conversation there, I tried the 'many little forms' approach. I am sharing both my approach, and a crude abstracted out gist that can hopefully help out y'all.

Essentially, with this approach:

  1. You want to use each field as a little form which submits debounced onChange.
  2. For each field as a little form, you want to abstract that into a component which can be provided an input, as much as possible.
  3. Set autofocus for the first form.
  4. For debounced onChange, I used react-debounced-input.
@dzNavitski
dzNavitski / cancel-on-contect.js
Created April 30, 2017 17:48
cancel depend on context
const fetchUserEpic = action$ =>
action$.ofType(FETCH_USER)
.mergeMap(action => {
var date = Date.now();
console.log(date)
return fakeAjax(`/api/users/${action.payload}`)
.map(response => fetchUserFulfilled(response))
.takeUntil(
action$.
ofType(FETCH_USER_CANCELLED)
@dzNavitski
dzNavitski / redux-observable-dispatch-multiple-redux-actions-in-a-single-epic.js
Last active April 2, 2019 04:02
redux-observable - dispatch multiple redux actions in a single epic (http://stackoverflow.com/questions/40886655/redux-observable-dispatch-multiple-redux-actions-in-a-single-epic)
There is no requirement that you make a one-to-one in/out ratio. So you can emit multiple actions using flatMap if you need to:
const loaded = (results) => ({type: 'RESULTS_LOADED', results});
const otherAction = (results) => ({type: 'MY_OTHER_ACTION', results});
searchEpic = (action$) =>
action$
.ofType('SEARCH')
.mergeMap(
Observable
@dzNavitski
dzNavitski / cancelPromise.md
Created December 19, 2016 05:17 — forked from pygy/cancelPromise.md
You can already cancel ES6 Promises

The gist: by having a Promise adopt the state of a forever pending one, you can suspend its then handlers chain.

const foreverPending = new Promise(function() {});

let cancel

new Promise(function(fulfill, reject) {
  cancel = function() {fulfill(foreverPending)}
  setTimeout(fulfill, 1000, 5)
@dzNavitski
dzNavitski / NonBlockingRenderLoop.js
Created December 13, 2016 13:04 — forked from bevacqua/NonBlockingRenderLoop.js
Defer secondary portions of the DOM using `requestAnimationFrame`
import { Component, PropTypes } from 'react'
import { noop } from 'lodash'
import raf from 'raf'
const cache = new Map()
export function createNonBlockingRenderLoop({ key, concurrencyLevel = 1 }) {
if (cache.has(key)) {
return cache.get(key)
}
@dzNavitski
dzNavitski / SimpleVirtualRepeater.js
Created October 3, 2016 14:29 — forked from scyrizales/SimpleVirtualRepeater.js
SimpleVirtualRepeater - This is an simple solution to handle thousands of results on an ng-repeat without sacrificing performance.
(function() {
'use strict';
angular.module('simple-virtual-repeater', [])
.directive('virtualRepeater', virtualRepeater);
virtualRepeater.$inject = ['$compile', '$timeout'];
function virtualRepeater($compile, $timeout) {
var directive = {
restrict: 'EA',
replace: 'true',
@dzNavitski
dzNavitski / SassMeister-input-HTML.html
Created September 30, 2014 08:40
Generated by SassMeister.com.
<div class="root en">
<ul class="links">
<li class="link">
<a class="link-home"><i class="icon">tag</i>HOME</a>
</li>
<li class="link">
<a class="link-about"><i class="icon">tag</i>ABOUT</a>
</li>
</ul>
@dzNavitski
dzNavitski / SassMeister-input.sass
Created January 24, 2014 22:21 — forked from scottkellum/SassMeister-input.sass
Generated by SassMeister.com.
// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.7)
// ----
=e($name)
@at-root #{&}__#{$name}
@content
=m($name)
@at-root #{&}--#{$name}
@dzNavitski
dzNavitski / WebDevwlopmant Bookmarks
Last active December 22, 2015 00:19
WebDevwlopmant Bookmarks
1. http://css3please.com/ *************** CSS3 Tools ***************
2. http://www.netmagazine.com/features/top-10-css3-techniques *************** Top 10 CSS3 Techniques ***************
3. http://html5please.com/ *************** Look up HTML5, CSS3, etc features, know if they are ready for use ***************
4. http://cssdeck.com/ *************** For inspiration ***************
5. http://perishablepress.com/margin-list-floated-image/ *************** Force Margin/Space Between List and Floated Image ***************
6. http://blog.n1dev.ru/demo/CreativeLinkEffects/ *************** Beatiful hover links ***************
7. http://demosthenes.info/blog/718/Rotating-Elements-With-Page-Scroll-In-JQuery *************** Rotating Elements With Page Scroll In JQuery ***************
8. http://www.createcss3.com/ *************** CSS3 Generator ***************
9. http://nthmaster.com/ *************** Nth child selector ***************
10. http://frontender.info/a-guide-to-flexbox/ *************** All about Flexbox *******