Skip to content

Instantly share code, notes, and snippets.

Avatar
🏠
Working from home

ReSampled pointofpresence

🏠
Working from home
View GitHub Profile
@pointofpresence
pointofpresence / transientColor.txt
Last active May 23, 2020
color1 -> newcolor -> color2
View transientColor.txt
newcolor.H = (color1.H + color2.H) / 2
newcolor.S = (color1.S + color2.S) / 2
newcolor.V = (color1.V + color2.V) / 2
View ReactJS__useCallback.md

Производительность и хук useCallback

Хук useCallback используется для улучшения производительности компонентов за счет мемоизации функций обратного вызова.

При частом обновлении постоянное пересоздание обработчиков – это дорогое удовольствие. useCallback позволяет изменять их только в случае реальной необходимости – когда изменяются связанные с ними зависимости.

// В таймере мы постоянно пересчитываем дату 
// при этом компонент каждый раз рендерится заново
// инкрементный счетчик при этом не увеличивается,
View ReactJS__useEffect.md

Побочные эффекты и хук useEffect

Хук useEffect позволяет выполнять из функционального компонента действия, которые вызывают побочные эффекты, например, получение данных с сервера, установка слушателей событий или взаимодействие с DOM-деревом.

Этот хук принимает функцию обратного вызова (эффект-функцию), которая будет вызываться при каждом перерендере, включая первый рендер компонента. Она запускается после монтирования компонента в документ.

// выбираем цвет из массива
// и устанавливаем его в качестве фона страницы
function App() {
View ReactJS__useState.md

Состояние компонента и useState

С помощью хука useState можно создать локальное состояние внутри функционального компонента. Раньше это было доступно только компонентам-классам.

import React from 'react';

// создаем переменную для хранения состояния
// используя деструктуризацию массива
// синтаксис: const [stateVariable] = React.useState(defaultValue);
@pointofpresence
pointofpresence / 1578641093.js
Last active May 19, 2020
"static" properties
View 1578641093.js
function PositionError(code, message) {
this.code = code;
this.message = message;
}
PositionError.PERMISSION_DENIED = 1;
PositionError.POSITION_UNAVAILABLE = 2;
PositionError.TIMEOUT = 3;
PositionError.prototype = new Error();
@pointofpresence
pointofpresence / getCurrentPosition.js
Last active May 19, 2020
Created with Copy to Gist
View getCurrentPosition.js
var options = {
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
};
function success(pos) {
var crd = pos.coords;
console.log('Your current position is:');
View loadJSONFIle.php
<?php
$json = json_decode(file_get_contents($file), true);
View disableSubmitButton.html
<input type="text" name="phone">
<button disabled>pew</button>
const checkLength = function() {
if (phoneField.value.length > 5) {
button.removeAttribute('disabled')
} else {
button.setAttribute('disabled', true)
}
}
View currentFilePath.php
$debug_files = debug_backtrace();
$caller_file = count($debug_files) ? $debug_files[count($debug_files) - 1]['file'] : __FILE__;
View youtubePreviews.txt
Each YouTube video has four generated images. They are predictably formatted as follows:
https://img.youtube.com/vi/<insert-youtube-video-id-here>/0.jpg
https://img.youtube.com/vi/<insert-youtube-video-id-here>/1.jpg
https://img.youtube.com/vi/<insert-youtube-video-id-here>/2.jpg
https://img.youtube.com/vi/<insert-youtube-video-id-here>/3.jpg
The first one in the list is a full size image and others are thumbnail images. The default thumbnail image (i.e., one of 1.jpg, 2.jpg, 3.jpg) is:
https://img.youtube.com/vi/<insert-youtube-video-id-here>/default.jpg