Skip to content

Instantly share code, notes, and snippets.

View vldvel's full-sized avatar

Vlad vldvel

  • Amsterdam
View GitHub Profile
@vldvel
vldvel / setInterval-in-componentdidMount.js
Last active October 10, 2020 16:54
setInterval in componentdidMount
class NewMessages extends Rect.Component {
updateInterval;
componentDidMount() {
this.updateInterval = setInterval(() => {
this.props.getNewMessages();
}, 500);
}
componentWillUnmount() {
@vldvel
vldvel / PullToUpdate.js
Created December 17, 2018 08:56
Using Swiper.js
import * as React from 'react';
import { Loader } from 'path-to-loader';
import { Swiper } from 'path-to-swiper';
class PullToUpdate extends React.PureComponent {
state = {
translate: 0
};
rootNode = null;
@vldvel
vldvel / Swiper.js
Created December 17, 2018 08:38
Swiper stateless component for react
import * as React from 'react';
class Swiper extends React.PureComponent {
startPointX = 0;
startPointY = 0;
direction = null;
clicked = false;
onMoveStart = ({ event, x, y }) => {
const { onMoveStart } = this.props;
@vldvel
vldvel / JavaScript.composition.js
Created April 20, 2018 07:55
JavaScript composition
users
.filter(({ active }) => active)
.map(({ age }) => (age + 100) % 27)
.reduce((p, c) => c > 20 ? p.concat(c) : p, []);
@vldvel
vldvel / lodash-composition.js
Created April 20, 2018 07:50
lodash-composition
reduce(map(filter(users, ({ active }) => active), ({ age }) => (age + 100) % 27), (p, c) => c > 20 ? p.concat(c) : p, []);
@vldvel
vldvel / find.lodash.js
Created April 20, 2018 07:03
find lodash
/**
* Main function
*/
function find(collection, predicate, fromIndex) {
let iteratee
const iterable = Object(collection)
if (!isArrayLike(collection)) {
collection = keys(collection)
iteratee = (key) => predicate(iterable[key], key, iterable)
@vldvel
vldvel / reduce-vs-reduce.js
Last active April 20, 2018 07:30
lodash reduce vs native reduce
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const timerDateReduceLodash = new Date();
console.log('lodash reduce', reduce(numbers, (sum, n) => sum + n, 0));
console.log('lodash time', new Date() - timerDateReduceLodash);
const timerDateReduceJS = new Date();
console.log('native reduce', numbers.reduce((sum, n) => sum + n, 0));
console.log('native time', new Date() - timerDateReduceJS);
@vldvel
vldvel / find-vs-find.js
Last active April 20, 2018 07:29
lodash find vs native find
const users = [
{ 'user': 'barney', 'age': 36, 'active': true },
{ 'user': 'fred', 'age': 40, 'active': false },
{ 'user': 'pebbles', 'age': 1, 'active': true }
];
const timerDateFindLodash = new Date();
console.log('lodash find', find(users, ({ age }) => age < 40));
console.log('lodash time', new Date() - timerDateFindLodash);
@vldvel
vldvel / MutationObserver-disconnect-takeRecords.js
Created March 28, 2018 07:01
MutationObserver disconnect takeRecords
// stop observing
observer.disconnect();
// empties observer instance and returns records
observer.takeRecords(); // -> MutationRecords
@vldvel
vldvel / MutationObserver-TooLong.js
Last active March 28, 2018 06:58
MutationObserver Too Long Example
// target element that we will observe
const target = document.querySelector('div');
// config object
const config = {
characterData: true,
characterDataOldValue: true,
childList: true,
subtree: true
};