Семантическое версионирование

Способ создавать человекочитаемые наглядные номера версий для любого продукта. Для версионирования используется единый шаблон:

<major>.<minor>.<patch>-<preRelease>

1. Мажорные версии (major): Увеличиваются, когда вносятся несовместимые изменения API.
2. Минорные версии (minor): Увеличиваются, когда добавляются новые функции, сохраняя обратную совместимость.
3. Патч-версии (patch): Увеличиваются, когда выпускаются исправления ошибок, сохраняя обратную и прямую совместимость.
4. Предрелизные версии (preRelease): Можно добавлять к номеру версии суффиксы, чтобы обозначить предварительные версии (например, alpha, beta, rc).

Примеры:

1.0.0
1.2.3
2.0.0
1.5.0-alpha.1
1.5.0-rc.2
4.2.1-snapshot.4
5.18.2-test.1

Кстати, обычно суффиксы встречаются такие:
1. dev — версия, которая может содержать изменения, находящиеся в процессе разработки, и не является полностью стабильной
2. alpha — первая версия программного продукта, которая обычно имеет ограниченный набор функций и может содержать много ошибок
3. beta — версия, которая следует за альфа-версией и обычно уже более стабильна. В бета-версию могут быть добавлены новые функции, но она все еще может содержать некоторые ошибки
4. release-candidate (rc) — версия, которая считается готовой к выпуску, но перед официальным релизом требует дополнительного тестирования и обратной связи от пользователей
5. preview — версия, которая предварительно показывает новые функции или изменения, которые будут включены в будущую версию
6. test — версия, которая используется для тестирования новых функций или исправлений перед их включением в основную ветку разработки

Спасибо за прочтение, это важно для меня ❤️

@prog_way_blog — чат — #theory #useful

Что такое мемоизация​

Мемоизация — техника оптимизации кода, сокращающая время его исполнения.

Представим, что у нас есть функция foo, которая выполняется 10 секунд. Нам нужно вызвать эту функцию 3 раза подряд с одними и теми же аргументами. Несложно посчитать, что такой код будет выполняться 30 секунд. Но мы можем применить мемоизацию:
1. Вызовем функцию, подождём 10 секунд и сохраним результат её выполнения в кэш
2. Вызовем функцию ещё раз с теми же аргументами. Вместо того, чтобы исполнять тяжелый код, обратимся к кэшу и проверим нет ли там нужного для нас результат вычислений
3. Если нужный результат есть, вернём его. Если нет, см. шаг 1

Любую ли функцию можно мемоизировать? Конечно же нет. Мемоизировать можно только чистые функции. О том, что это такое, я писал отдельный пост.

Также стоит учитывать, что со временем жизни программы кэш может очень сильно разрастись. Из-за этого сама программа может занимать очень много памяти. Решением может быть несколько подходов:
1. Установить время жизни для каждого из значение кэша
2. Подход LRU (Last Recently Used), когда мы удаляем из кэша значения, которые дольше всего не запрашивались. Такой подход позволяет сохранять в кэше только самые часто используемые данные.
3. Ограничение размера кэша, то есть, когда кэш достигает порогового значения по количеству записей или памяти, старые записи удаляются для освобождения места под новые
4. Просто удалять весь кэш по какому-то таймауту

Сложность тут в том, что нам необходимо реализовать собственный кэш с поддержкой всех необходимых апи для того, что мы описали выше. В JavaScript, например, LRU кэша из коробки, то есть его придётся написать самостоятельно. Самая примитивная же форма кэша для мемоизации, которая и используется чаще всего — Map или же обычный объект.

Если нет желания писать свой велосипед, что прекрасно, можно использовать готовые реализации, например, из библиотеки lodash — вот исходники функции

В следующем посте рассмотрим реализацию примитивной мемоизации в коде.

Спасибо за прочтение, это важно для меня ❤️

@prog_way_blog — чат — #theory #javascript #patterns #data

+true;
!'progway';
!!true

@prog_way_blog — чат — #quiz

Реализация мемоизации в JavaScript

О том, что такое мемоизация, я рассказывал в прошлом посте.

На самом деле, всё это довольно просто. Попробуем написать функцию-обёртку memoize, с помощью которой можно мемоизировать любую другую функцию. Начнём как всегда с интерфейса:

function memoize(func) {
    // ...
}

Наша функция-обёртка будет принимать только целевую функцию, которую мы хотим мемоизировать. В качестве кэша будем использовать Map:

const cache = new Map();

И далее просто воспользуемся замыканием, чтобы ограничить доступ к созданному кэшу только для целевой функции. Для этого вернем из memoize новую функцию:

return function(...args) {
  // ключ сериализуем в строку, чтобы
  // не было проблем с аргументами
  // объектами, массивами и т.д.
    const key = JSON.stringify(args);
    
    // проверяем есть ли результат в кэше
    if (!cache.has(key)) {
      // если нет, то сохраняем в кэш
      // значение вызова функции
        cache.set(key, func(...args));
    }
    
    // и возвращаем значение из кэша
    return cache.get(key);
};

Полный код функции:

function memoize(func) {
    const cache = new Map();
    
    return function(...args) {
        const key = JSON.stringify(args);
        
        if (!cache.has(key)) {
            cache.set(key, func(...args));
        }
        
        return cache.get(key);
    };
}

Я осознанно не использовал TypeScript, так как он сильно визуально усложняет эту функцию и объяснений получается много. Натыкайте 🔥 на пост и я разберу как правильно типизировать такую функцию

@prog_way_blog — чат — #theory #code #javascript #data

const car = {
  size: 'small'
};

const box = {
  type: 'mailbox',
  small: true
};

@prog_way_blog — чат — #quiz

Как типизировать функцию мемоизации

В прошлом посте я разбирал реализацию функции мемоизации на JavaScript и упомянул, что типов там нет осознанно. В этом посте мы отдельно разберём типизацию такой функции, это будет полный разбор для самых маленьких.

Шпаргалка по используемым в посте utility-типам:

Parameters<T> - возвращает тип аргументов функции T
ReturnType<T> - возвращает тип возвращаемых значений функции T

const foo = (a: number , b: number) => 5

type Args = Parameters<typeof foo> 
// [a: number, b: number]

type Return = ReturnType<typeof foo>
// number

Итак, наша функция принимает в себя другую функцию. Сразу же типизируем это:

function memoize(func: (...args: any[]) => any) {
    // ...
}

Далее было бы неплохо типизировать возвращаемую функцию. Для этого мы можем использовать следующую конструкцию: (...args: Parameters<оригинальная функция>) => ReturnType<оригинальная функция>. И вот мы сталкиваемся с проблемой, что для корректной типизации возвращаемой функции нам необходимы типы Parameters и ReturnType, которые обязательно принимают дженерик. В качестве дженерика выступает тип оригинальной функции. Для удобства вынесем тип оригинальной функции в дженерик функции memoize:

function memoize<T extends (...args: any[]) => any>(func: T) {
 // ...
}

И итоговый интерфейс функции у нас сильно растянется, но будет таким:

type AnyFunction = (...args: any[]) => any;
type MemoizedFunction<T extends AnyFunction> = 
 (...args: Parameters<T>) => ReturnType<T>

function memoize<T extends AnyFunction>(func: T): MemoizedFunction {
 // ...
}

Ребята, стараюсь максимально упростить. Если плохо понимаете дженерики, постарайтесь более внимательно вчитываться в код.

Далее типизация кэша, тут всё просто:

const cache = new Map<string, ReturnType<T>>();

По типизации, ключ — строка, а значение — тот тип, который возвращает оригинальная функция.

Далее рассмотрим итоговый код:

type AnyFunction = (...args: any[]) => any;
type MemoizedFunction<T extends AnyFunction> = 
 (...args: Parameters<T>) => ReturnType<T>

function memoize<T extends AnyFunction>(func: T): MemoizedFunction {
 const cache = new Map<string, ReturnType<T>>();
 
  return function(...args: Parameters<T>): ReturnType<T> {
      const key = JSON.stringify(args);
      
      if (!cache.has(key)) {
          cache.set(key, func(...args));
      }
      
      return cache.get(key)!;
  };
}

Надеюсь вышло понятно. Если что, любые вопросы можем обсудить в комментариях.

Спасибо за прочтение, это важно для меня ❤️

@prog_way_blog — чат — #code #typescript

Обработка сочетания клавиш в JavaScript

Чтобы обработать сочетание клавиш, необходимо подписаться на событие keydown. В большинстве случаев вы будете подписываться на document, если сочетание клавиш глобальное по всему приложению.

Для примера возьмём сложное сочетание клавиш: command(alt) + shift + U

document.addEventListener('keydown', function(event) {
  if (event.metaKey && event.shiftKey && event.key === 'U') {
    // че-то делаем на нажатие
  }
});

Но тут стоит учитывать, что metaKey в разных браузерах работает по разному, в том числе могут быть проблемы в Safari. Самым безопасным вариантом будет следующий код:

document.addEventListener('keydown', function(event) {
  const isApple = /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform);
  
  if ((isApple && event.metaKey && event.shiftKey && event.key === 'U') ||
      (!isApple && event.altKey && event.shiftKey && event.key === 'U')) {
    // че-то делаем на нажатие
  }
});

Спасибо за прочтение, это важно для меня ❤️

@prog_way_blog — чат — #theory #code #javascript

Что такое структурная типизация

Структурная типизация — это подход в языках программирования, который позволяет сократить количество возможных ошибок с типами, а также приведения типов, и сопоставлять не сами типы, а их структуры. Антонимом для структурной типизации является понятие номинальная типизация. Сразу же рассмотрим пример и сравним оба варианта:

У нас есть два типа Fireman и Programmer, а также функция, принимающая объект типа Fireman:

type Fireman = {
 name: string
}

type Programmer = {
 name: string
}

const fireman: Fireman = {
 name: "Alex"
}

const programmer: Programmer = {
 name: "Denis"
}

const foo = (person: Fireman) => { ... }

Номинальная типизация:

foo(fireman) // OK
foo(programmer) // Error

Но почему во втором случае ошибка? Потому что разные типы: функция ожидает на вход Fireman, а получает Programmer. Сравнение происходит только по самому типу.

А вот пример со структурной типизацией:

foo(fireman) // OK
foo(programmer) // OK

В этом случае всё отработает корректно, но только потому что Programmer и Fireman абсолютно идентичны по своей структуре.

Также будет работать и в случае, если один из типов будет являться подмножеством другого:

type Fireman = {
 name: string;
}

type Programmer = {
 name: string;
 age: number
}

const fireman: Fireman = ...
const programmer: Programmer = ...

const foo = (person: Fireman) => { ... }

foo(fireman) // OK
foo(programmer) // OK

Даже тут ошибки нет, а всё потому что тип Fireman полностью включен в тип Programmer и при вызове функции объект типа Programmer полностью удовлетворяет типу ожидаемой структуры, а следовательно и ошибки не будет. Для языка не важно, что у Programmer есть какие-то дополнительные поля. Главное, чтобы присутствовали все из типа Fireman и имели такой же тип.

В этом и заключается весь смысл структурной типизации.

Спасибо за прочтение, это важно для меня ❤️

#web #theory #typescript

let a = { name: 'progway' };
let b;

b = a;
a.name = 'denis';
console.log(b.name);

@prog_way_blog — чат — #quiz

В чем заключается разница между интерфейсом и типом?

Для меня большое удивление, что я до сих пор не смог найти нормального материала, где был бы описан этот вопрос. В этом после я планирую исправить эту несправедливость.

Тип — обозначается ключевым словом type — представляет собой либо описание структуры (объекта, функции…), либо набор других типов или структур:

// набор типов
type Identifier = string | boolean;

// описание структуры
type Person = {
 name: string;
 age: number;
}

// набор типов или структур
type Foo = Person | string;

Интерфейс — обозначается ключевым словом inderface — может описывать только структуры:

interface Props {
 title: string;
 visible?: boolean;
}

Особенности типов:
1. Только типами можно создать типы-объединения (они же union type):

type Identifier = string | number
type Animal = Dog | Cat

2. Только типами можно создавать кортежи, фиксируя тип элемента массива по индексу и длину массива:

type Cortage = [string, number, boolean]

3. Только с помощью типов можно создавать псевдонимы (они же alias):

type Name = string
type Author = Name

4. Типами проще и красивее создавать описание функций:

type Foo = (a: string) => number

interface Foo {
 (a: string): number
}

Особенности интерфейсов:
1. Только интерфейсы имеют перегрузку типов:

interface Person {
 name: string
}

interface Person {
 age: number
}

const kate: Person = {
 name: "Екатерина",
 age: 24
}

2. Только интерфейсы могут быть имплементированы:

interface Person {}

class Fireman implements Person {}

В основном, между интерфейсом и типом больше схожестей, чем отличий. Выше я перечислил основные различия между этими двумя сущностями, которого хватит для ответа на любом собеседовании.

Спасибо за прочтение, это важно для меня ❤️

#web #theory #typescript

Сужение типов и уточняющие тайпгарды​

Часто в TypeScript коде можно столкнуться с тем, что типы недостаточно точны. Это бывает в случаях, когда мы определяем типы, например, через union — string | number и других подобных случаях. Рассмотрим пример:

const value: string | number = ...

parseInt(value) // ошибка

В таком случае мы получим TypeError , а всё потому что переменная value имеет более общий тип, чем тот, что ожидает parseInt — эта функция ожидает первым аргументом на вход только строку. В таком случае нам может помочь сужение типов, которое нам дают дополнительные проверки — тайпгарды.

Тайпгарды — Type Guards — это языковые конструкции, проверки, которые позволяют определить или уточнить тип переменной средствами JavaScript. Тайпгарды бывают двух видов — уточняющие и определяющие.

Уточняющие тайпгарды — проверки, которые позволяют вывести более узкий тип из общего типа, например вывести string из типа string | number | boolean | null.

Определяющие же тайпгарды — проверки, которые позволяют вывести узкий тип из неизвестного типа, который в идеальном мире обозначается типом unknown

Есть несколько способов сузить тип:

1. Через оператор typeof

const value: string | number = ...

if (typeof value === 'string') {
  // ошибки не будет, т.к.
 // тип value в этом условии
 // строго равняется "string"
 parseInt(value)
}

2. Через ключевое слово in или метод hasOwnProperty

const value: any[] | number = ...

if ("map" in value) {
 // value === array
 value.map(...)
}

const animal = Cat | Dog = ...

if (animal.hasOwnProperty('meow')) {
 // animal === Cat
 animal.meow()
}

3. Через ключевое слово instanceof

const person: Fireman | Programmer = ...

// при условии что Programmer - класс
// а person - инстанс класса
if (person instanceof Programmer) {
 person.code()
}

4. Через встроенные в язык функции проверки типа

const value: any[] | number = ...

if (Array.isArray(value)) {
 value.map(...)
}

5. Через existed check, например, для null и undefined

const user: User | null = ...

if (user) {
 console.log(user.name)
}

Также подобные проверки можно выносить в отдельные функции, которые обычно именуются по следующему шаблону — is + <название типа или интерфейса> , например, для типа User будет логично создать тайпгард isUser, вот небольшой пример:

type Account = User | Admin | Manager

const isUser = (account: Account): account is User => {
 return account.type === "user"
}

В данном случае мы используем предикат для пользователя. Вообще, предикат — это базовый математический термин, но если кто-то не знал изи подзабыл, также напоминаю:

В нашем контексте, предикат — уникальное определяющее свойство сущности, относительно которого можно быть точно уверенным в её идентичности.

Если более просто, то мы знаем, что если account.type === “user” , то перед нами ни что иное как User. В этом случае тип аккаунта является предикатом, на основе которого можно делать выводы о типе аккаунта без дополнительных проверок.

И всё это касается лишь уточняющих тайпгардов, пост об определяющих тайпгардах выйдет позже.

Спасибо за прочтение, это важно для меня ❤️

@prog_way_blog — чат — #theory #code #typescript

let x = 5;
let y = new Number(5);
let z = 5;

console.log(x == y);
console.log(x === y);
console.log(y === z);

@prog_way_blog — чат — #quiz

Что такое Fullscreen API

Fullscreen API — это интерфейс для работы с полноэкранным режимом в веб-браузерах, который позволяет элементам HTML-страницы разворачиваться на весь экран.

Яркий пример использования Fullscreen API — это видеоплееры. Когда вы нажимаете кнопку для просмотра видео на весь экран, используется именно этот API. Но его возможности далеко не ограничиваются видео: он может быть применен к любым элементам страницы, будь то изображения, модалки и любые другие блоки страницы.

Пример использования следующий:

// получаем элемент, который хотим открыть на весь экран
const element = document.getElementById('target');

// открыть элемент на весь экран
element.requestFullscreen()

// получить элемент, который открыть в полноэкранном режиме
document.fullscreenElement

// выйти из полноэкранного режима
document.exitFullsreen()

Также методы requestFullscreen и exitFullscreen являются промисами, что позволяет проще работать с ними и обрабатывать ошибки их вызова.

И ещё важно знать, что из полноэкранного режима можно выйти по нажатию клавиши ESC по умолчанию, а также некоторые браузеры дают собственные сочетания клавиш. Чтобы обработать и такой случай, можно отслеживать отдельное событие:

document.addEventListener('fullscreenchange', () => {
 // как-то обрабатываем изменение состояния
 
 // можно завязаться на
 // document.fullscreenElement
})

Спасибо за прочтение, это важно для меня ❤️

@prog_way_blog — чат — #theory #code #javascript #web #useful