Skip to content

Instantly share code, notes, and snippets.

Avatar
🏠
Working from home

ReSampled pointofpresence

🏠
Working from home
View GitHub Profile
@pointofpresence
pointofpresence / README.md
Created Mar 30, 2021 — forked from nitaku/README.md
Three.js isometric SVG
View README.md

An example showing an isometric rendering in SVG, thanks to three.js.

The example is inspired by this post on using three.js to generate illustrations for scientific papers.

@pointofpresence
pointofpresence / tsconfig.json
Created Mar 12, 2021 — forked from KRostyslav/tsconfig.json
tsconfig.json с комментариями.
View tsconfig.json
// Файл "tsconfig.json":
// - устанавливает корневой каталог проекта TypeScript;
// - выполняет настройку параметров компиляции;
// - устанавливает файлы проекта.
// Присутствие файла "tsconfig.json" в папке указывает TypeScript, что это корневая папка проекта.
// Внутри "tsconfig.json" указываются настройки компилятора TypeScript и корневые файлы проекта.
// Программа компилятора "tsc" ищет файл "tsconfig.json" сначала в папке, где она расположена, затем поднимается выше и ищет в родительских папках согласно их вложенности друг в друга.
// Команда "tsc --project C:\path\to\my\project\folder" берет файл "tsconfig.json" из папки, расположенной по данному пути.
// Файл "tsconfig.json" может быть полностью пустым, тогда компилятор скомпилирует все файлы с настройками заданными по умолчанию.
// Опции компилятора, перечисленные в командной строке перезаписывают собой опции, заданные в файле "tsconfig.json".
View index.md.txt
Go to [Playlist](#Playlist)
# <a name="Playlist"></a> Playlist
Some text here
@pointofpresence
pointofpresence / memoize.js
Last active Jan 11, 2021
Created with Copy to Gist
View memoize.js
// Приведенная ниже функция memoize() сохраняет результаты каждого вызова принимаемой функции в виде [ключ:значение].
// Функция, генерирующая ключ исходя из параметров
const generateKey = args => (
args.map(x => `${x.toString()}:${typeof(x)}`).join('|') // Результат: "x1:number|x2:number|..."
);
// Принимает функцию в качестве параметра
const memoize = fn => {
const cache = {};
View pseudo_rules_order.css
/* WORKS */
a:hover{ color: red; }
a:active{ color: green; }
/* NOT WORKS */
a:active{ color: green; }
a:hover{ color: red; }
@pointofpresence
pointofpresence / 1590912706.txt
Created May 31, 2020
Created with Copy to Gist
View 1590912706.txt
A lot of the solutions don't work inline. This is a cleaned-up solution offered by @AlekseyBykov using Google App Scripts to add a custom menu action:
Create a new script (Tools > Script Editor)
Copy the following code into the editor:
// Add new menu item
function onOpen() {
DocumentApp.getUi()
.createMenu('Styles')
.addItem('Format Code', 'formatCode')
.addToUi();
View ReactJS__hooksRules.md

Правила хуков

В React есть два базовых правила использования хуков, которые обязательно нужно соблюдать:

  • Хуки можно вызывать только из верхнего уровня вашего компонента. Не следует обращаться к ним из блоков условий, циклов или вложенных функций.
  • Хуки можно вызывать только из функциональных компонентов. Внутри обычных JS-функций или классовых компонентов их использовать не следует.
function checkAuth() {
  // Нарушено второе правило! 
@pointofpresence
pointofpresence / ReactJS__userHooks.md
Created May 23, 2020
Создание пользовательских хуков
View ReactJS__userHooks.md

Создание пользовательских хуков

Хуки создаются для того, чтобы можно было разделять одинаковое поведение между разными компонентами. Они работают гораздо очевиднее, чем компоненты высшего порядка или рендер-пропсы, которые нам приходилось использовать раньше.

React позволяет создавать кастомные хуки – и это очень здорово!

// создаем хук для получения данных из API
function useAPI(endpoint) {
  const [value, setValue] = React.useState([]);
View ReactJS__useReducer.md

Редьюсеры и хук useReducer

Редьюсеры (или редукторы) – это простые чистые (предсказуемые) функции, которые получают в качестве аргументов предыдущее состояние объекта и объект действия (action), а возвращают обновленное состояние. Другими словами, редьюсеры применяют к состоянию некоторое действие.

function reducer(state, action) {
  // действия редьюсера зависят от типа действия (экшена)
  switch (action.type) {
    // если action.type равен 'LOGIN'
    case "LOGIN":
View ReactJS__useContext.md

Контекст и хук useContext

В React существует проблема передачи свойств целевым компонентам. Обычно мы поднимаем данные по дереву компонентов, чтобы хранить их в одном месте. Но затем их приходится спускать вниз по цепочке пропсов для вывода на страницу. Иногда несколько уровней компонентов просто передают вниз ненужные им данные. чтобы они достигли цели.

function App() {
  // храним данные пользователя в App
  // но выводим в Header
  const [user] = React.useState({ name: "Fred" });