bashbunni

# I'll be doing another one for Linux, but this one will give you 
# a pop up notification and sound alert (using the built-in sounds for macOS)

# Requires https://github.com/caarlos0/timer to be installed

# Mac setup for pomo
alias work="timer 60m && terminal-notifier -message 'Pomodoro'\
        -title 'Work Timer is up! Take a Break 😊'\
        -appIcon '~/Pictures/pumpkin.png'\
        -sound Crystal"

nikolay-borzov

const Button = forwardRef<CoralButton, ButtonProps>((props, ref) => {
  const { children, onClick, title, ...coralButtonProps } = props;

  const buttonRef = useRef<CoralButton>(null);

  useLayoutEffect(() => {
    if (ref) {
      if (isFunction(ref)) {
        ref(buttonRef.current);
      } else {

gaearon

If you use server rendering, keep in mind that neither useLayoutEffect nor useEffect can run until the JavaScript is downloaded.

You might see a warning if you try to useLayoutEffect on the server. Here's two common ways to fix it.

Option 1: Convert to useEffect

If this effect isn't important for first render (i.e. if the UI still looks valid before it runs), then useEffect instead.

function MyComponent() {

afterburn

Element.prototype._getBoundingClientRect = Element.prototype.getBoundingClientRect
Element.prototype.getBoundingClientRect = function () {
  const rect = Element.prototype._getBoundingClientRect.call(this)
  rect.x = rect.left
  rect.y = rect.top
  return rect
}

jonathantneal

export default scope => {
	// match the filter on autofilled elements in Firefox
	const mozFilterMatch = /^grayscale\(.+\) brightness\((1)?.*\) contrast\(.+\) invert\(.+\) sepia\(.+\) saturate\(.+\)$/

	scope.addEventListener('animationstart', onAnimationStart)
	scope.addEventListener('input', onInput)
	scope.addEventListener('transitionstart', onTransitionStart)

	function onAnimationStart(event) {
		// detect autofills in Chrome and Safari by:

KRostyslav

// Файл "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".

zhaiduo

Sublime Text 3 configuration

subl config

ln -s /Applications/Sublime\ Text.app/Contents/SharedSupport/bin/subl /usr/local/bin/subl

Custom color schemes

zmts

Про токены, JSON Web Tokens (JWT), аутентификацию и авторизацию. Token-Based Authentication

Last major update: 25.08.2020

• Что такое авторизация/аутентификация
• Где хранить токены
• Как ставить куки ?
• Процесс логина
• Процесс рефреш токенов
• Кража токенов/Механизм контроля токенов

gre

// more minimal version of https://github.com/olahol/scrollparent.js/blob/master/scrollparent.js
const regex = /(auto|scroll)/;

const style = (node, prop) =>
  getComputedStyle(node, null).getPropertyValue(prop);

const scroll = (node) =>
  regex.test(
    style(node, "overflow") +
    style(node, "overflow-y") +

xem

Conventions

• A = [xA, yA] is a point on the 2D plane. Same for B, C, ...
• lengths are in any unit (ex: pixels)
• code snippets are in JavaScript

Degrees to radians

angleRad = angleDeg * Math.PI / 180;