Skip to content

Instantly share code, notes, and snippets.

View pointofpresence's full-sized avatar
🏠
Working from home

ReSampled pointofpresence

🏠
Working from home
View GitHub Profile
@pointofpresence
pointofpresence / filter.svg
Created February 26, 2020 17:55 — forked from subzey/filter.svg
SVG retrowave filter
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@pointofpresence
pointofpresence / index.html
Created February 26, 2020 19:20
тень для svg
<svg xmlns="http://www.w3.org/2000/svg" width="31" height="36" viewBox="0 0 31 36"><path fill="#FFF" d="M11 21h7.451c5.247 0 9.5-4.253 9.5-9.5S23.698 2 18.451 2H6v14H2v5h4v3H2v5h4v4h5v-4h15v-5H11v-3zm0-14h7.451v-.03a4.53 4.53 0 0 1 0 9.06V16H11V7z"/></svg>
@pointofpresence
pointofpresence / 1587104328.html
Last active April 29, 2020 18:37
http://sauron.org.ua/post/823
<div role='button'></div>
@pointofpresence
pointofpresence / detect-unused-css-selectors.js
Created April 29, 2020 07:57 — forked from victor-homyakov/detect-unused-css-selectors.js
Detect unused CSS selectors. Show possible CSS duplicates. Monitor realtime CSS usage.
/* eslint-disable no-var,no-console */
// detect unused CSS selectors
(function() {
var parsedRules = parseCssRules();
console.log('Parsed CSS rules:', parsedRules);
detectDuplicateSelectors(parsedRules);
var selectorsToTrack = getSelectorsToTrack(parsedRules);
window.selectorStats = { unused: [], added: [], removed: [] };
console.log('Tracking style usage (inspect window.selectorStats for details)...');
@pointofpresence
pointofpresence / .htaccess
Last active May 2, 2020 20:34
.htaccess for react-router
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
@pointofpresence
pointofpresence / youtube_previews.py
Last active March 31, 2024 13:01
Youtube preview URLs
# Each YouTube video has four generated images. They are predictably formatted as follows:
f"https://img.youtube.com/vi/{your_youtube_video_id}/0.jpg"
f"https://img.youtube.com/vi/{your_youtube_video_id}/1.jpg"
f"https://img.youtube.com/vi/{your_youtube_video_id}/2.jpg"
f"https://img.youtube.com/vi/{your_youtube_video_id}/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:
f"https://img.youtube.com/vi/{your_youtube_video_id}/default.jpg"
@pointofpresence
pointofpresence / transientColor.txt
Last active May 23, 2020 11:22
color1 -> newcolor -> color2
newcolor.H = (color1.H + color2.H) / 2
newcolor.S = (color1.S + color2.S) / 2
newcolor.V = (color1.V + color2.V) / 2
@pointofpresence
pointofpresence / ReactJS__useState.md
Last active May 23, 2020 11:13

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

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

import React from 'react';

// создаем переменную для хранения состояния
// используя деструктуризацию массива
// синтаксис: const [stateVariable] = React.useState(defaultValue);
@pointofpresence
pointofpresence / ReactJS__useEffect.md
Created May 23, 2020 11:18

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

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

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

// выбираем цвет из массива
// и устанавливаем его в качестве фона страницы
function App() {
@pointofpresence
pointofpresence / ReactJS__useCallback.md
Created May 23, 2020 11:21

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

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

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

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