Skip to content

Instantly share code, notes, and snippets.

View SmolinPavel's full-sized avatar
:octocat:
Playing with octocat

Pavel Smolin SmolinPavel

:octocat:
Playing with octocat
119 followers · 24 following
View GitHub Profile
@SmolinPavel
SmolinPavel / performance-battle.html
Created March 27, 2019 07:56
Measuring performance (spead vs Array.forEach)
<html>
<head>
<title>JS Sandbox</title>
</head>
<body>
<script>
const object = {
test: "test",
paul: "paul",
morning: { test: "test", paul: "paul" }
@SmolinPavel
SmolinPavel / Legacy.js
Created April 1, 2019 20:53
Example of using the React legacy Context API
import React, { Component } from 'react';
import PropTypes from 'prop-types';
class Legacy extends Component {
render() {
const { name } = this.props;
const { api } = this.context;
return (
<div>
<h1>Hello, {name}</h1>
@SmolinPavel
SmolinPavel / New.js
Created April 1, 2019 21:23
Example of using React new Context API
import React, { Component, createContext } from 'react';
import PropTypes from 'prop-types';
const ExampleContext = createContext({ api: 'lorem ipsum' });
class New extends Component {
static contextType = ExampleContext;
render() {
const { name } = this.props;
@SmolinPavel
SmolinPavel / Problem.js
Created April 2, 2019 19:03
This is an example when we can't access this.context as the Context component has been upgraded to use the new API while the Legacy component is relying on the old one.
import React, { Component, createContext } from 'react';
import PropTypes from 'prop-types';
const ExampleContext = createContext({ api: 'lorem ipsum' });
/*
* This is an example when we can't access this.context as the Context component
* has been upgraded to use the new API while the Legacy component is relying on the old one.
*/
class Legacy extends Component {
@SmolinPavel
SmolinPavel / Solution.js
Last active April 2, 2019 19:21
Mix of the legacy and new context API
import React, { Component, createContext } from 'react';
import PropTypes from 'prop-types';
const ExampleContext = createContext({ api: 'lorem ipsum' });
class New extends Component {
static contextType = ExampleContext;
render() {
const { name } = this.props;
const { api } = this.context;
@SmolinPavel
SmolinPavel / Live css edit
Created July 8, 2019 13:05
<html>
<head>
<style>
body style {
display: block;
}
</style>
</head>
<body>
<style contenteditable>
@SmolinPavel
SmolinPavel / Axios exmaple
Created July 26, 2019 14:27
import axios from 'axios';
import { LANGUAGE_NAME, REFRESH_TOKEN_IN_STORE, TOKEN_NAME_IN_STORE } from '../constants/api';
import { getBrowserLang, setTokens } from './GlobalHelper';
import { logoutDispatch } from './StoreHelper';
import LocalStorageHelper from './LocalStorageHelper';
import { BACKEND_ROUTES } from '../constants/routes';
export const API_REQUEST_AUTH_USER_LOGIN_URL = '/users/login';
export const API_REQUEST_AUTH_USER_LOGIN_SOCIAL_URL = '/login/social';
@SmolinPavel
SmolinPavel / queue.js
Created May 19, 2021 15:52
JS console.log quest (micro/macro task queues)
// what will be the output to the console?
console.log(1);
setTimeout(() => {
console.log(2);
setTimeout(() => console.log(3), 200);
}, 200);
new Promise(() => console.log(4));
@SmolinPavel
SmolinPavel / closure.js
Created May 21, 2021 16:25
Closure task. What will be the output?
var length = 10;
function fn() {
console.log(this.length);
}
var obj = {
length: 5,
method: function (fn) {
fn();
arguments[0]();
},
@SmolinPavel
SmolinPavel / async-await.js
Created May 28, 2021 18:38
Compare Promise.all calls with .then vs async/await
/*
PROMISE/THEN approach
*/
const userIds = [1, 2, 3];
const requests = userIds.map((userId) =>
fetch(`https://jsonplaceholder.typicode.com/users/${userId}`),
);
Promise.all(requests)