​​Что такое чистая функция

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

Чистая функция — это функция, обладающая сразу двумя свойствами:

1. Функция зависит только от входных параметров, на одинаковых наборах входных значений возвращается один и тот же результат вне зависимости от внешних факторов.
2. Функция не влияет на что-либо вне себя. Чистая функция не может изменять внешние переменные, управлять чем-либо извне, создавать файлы, изменять входные параметры по ссылкам и т.д.

Максимально просто, но почему-то знают не все.

Также я подготовил примеры чистых и не чистых функций. Размещаю их по ссылкам, чтобы не раздувать пост в объёме. Примеры на JavaScript, но код более чем читаемый.

Чем чистые функции так полезны и почему это хорошо? Они ведут себя предсказуемо и их легко тестировать. Чистые функции поддаются тестированию проще других, не мутируют, не вызывают непоняток. Поэтому они так ценятся и в без того проблемном JavaScript. И в других языках, конечно.

На этом всё. Спасибо за прочтение ❤️

#javascript #theory

​​Какие типы данных есть в JavaScript

В любом языке базовым вопросом будет назвать типы данных и JavaScript тут не исключение. Разберем один из самых частых вопросов на собеседовании.

Итак, в JavaScript есть 6 типов:
- number
- string
- boolean
- null
- undefined
- object

Первые 5 являются примитивами, а object является сложным типом данных. Также ES6 принёс в язык типы BigInt и Symbol.
Из особенностей:

typeof null // 'object'
typeof [] // 'object'
typeof (() => {}) // 'function'
typeof function() {} // 'function'
typeof NaN // 'number'

const a = new Set()
const b = new Map()

typeof a // 'object'
typeof b // 'object'

1. typeof null === 'object' — это официальная ошибка, которая сохраняется ради обратной совместимости кода. На самом деле null — это отдельный примитив.
2. Массив не является отдельным типом данных. Это объект
3. Так же, как массив, Map, Set, WeakMap, WeakSet — это объекты.
4. Хоть функция и обрабатывается оператором typeof как 'function', на самом деле, функция — это тоже объект. Почему так мы разберём чуть позже, но вообще функции называют объектами первого класса. Так что на самом деле функция — это тоже объект.
5. typeof NaN === 'number'. Вот такой прикол вам оставили разработчики, да. Not A Number — это инстанс Number. Для проверки NaN есть специальная глобальная функция isNaN().

Тот ответ, что я описал — это максимально точный и развёрнутый ответ. Не стоит приплетать что-то еще. И на этом всё. Спасибо за прочтение и интерес, это правда важно для меня.

#javascript #theory

​​Методы управления контекстом вызова

Ранее мы разбирали что такое this и там я пообещал рассказать о методах call, apply и bind. Этот пост как раз об этом.

Итак, все эти 3 метода созданы для управления контекстом вызова функции. Давайте рассмотрим пример:

const person = {
  name: "Deins",
  greet(greeting = 'Hi') {
    console.log(`${greeting}, ${this.name}`)
  }
}

const channel = {
  name: "progway"
}

// Hi, Denis
person.greet()

// Hello, progway
person.greet.call(channel, 'Hello')

// Привет, Денис
person.greet.apply({name: 'Денис'}, ['Привет'] ) 

const greetMax = 
  person.greet.bind({name: "Макс"}, 'Привет')

// Привет, Макс
greetMax()

Без кода всё равно не разобраться.

У объекта person есть метод greet, который за контекст вызова берёт как раз объект person. Но если мы хотим применить к этому методу другой контекст, например созданный заранее объект channel или новый произвольный объект, то необходимо использовать вышеописанные 3 метода.

call, apply — применяют новый контекст к функции, принимая новый контекст первым параметром, а далее вызывают функцию с указанными аргументами.

call принимает аргументы функции через запятую, а apply принимает их списком. Это основное отличие между этими двумя методами.

bind — так же применяет контекст и через запятую принимает параметры для вызова, НО

Самым важным отличием является то, что методы apply и call сразу же вызывают функцию и возвращают её результат, а метод bind создает новую функцию относительно аргументов и контекста, но не вызывает её. Такую функцию мы можем сохранить в переменную и вызвать позже.

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

И на этом пока всё. Спасибо за прочтение, это важно для меня.

#javascript #theory

​​Специфичность CSS

Не самый простой для многих вопрос, который для некоторых разработчиков даже Middle уровня будет фатальным. Но не для нас 🙂

Итак, специфичность указывает на то, какой стиль будет применён к элементу. На это влияет три показателя:
— Место определения селектора
— Вес селектора
— Директива !important

Разберем их по порядку:
• Специфичность выше, если свойство объявлено ниже. То есть в примерах

body {
 color: black;
 color: red;
}

div {
 width: 100px;
}

div {
 width: 400px;
}

Элемент body будет иметь правило color: red;, а элемент div будет иметь правило width: 400px;, так как эти свойства объявлены ниже и "перезаписали" вышеописанные свойства.

• Вес селектора — это величина, которую считают по разному. Есть как минимум два способа, но тут главное понять принцип. Я расскажу только об одном из них.

Каждый тип селектора имеет свой вес:
Тег — 1
Класс — 10
ID — 100
Inline — 1000

Посчитаем вес селектора на примере:

div = 1 
div.className = 1 + 10 == 11 
#id .className = 100 + 10 == 110
div > span = 1 + 1 == 2 

К элементу применяются свойства от селектора, который имеет самый высокий вес. Если вес селекторов одинаковый, то применяется тот селектор, что описан позже.

• Но если в селекторе с меньшим весом или объявленном выше к свойству применить директиву !important, то в таком случаем специфичность такого правила будет максимальной и применится то правило, что помечено директивой.
Запись выглядит так:

div {
 color: red !important;
}

div {
 color: blue;
}

В примере к элементу div будет применено правило color: red;.
Использование этой директивы является плохим тоном и оправдано только в самых крайних случаях.

Спасибо за прочтение. Это важно для меня.

#web #theory

​​Есть ли в JavaScript перегрузка функций?

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

Перегрузка функций — или по другому «полиморфизм функций» — это понятие, которое встречается в языках программирования. Если язык поддерживает перегрузку функций, то у разработчика появляется возможность определить две функции с разной логикой, но с одинаковым именем. При вызове интерпретатор сам выберет нужную:

function foo(x, y) {
  ...
}

function foo(x, y, z ) {
  ...
}

foo(x, y)    // вызовется первая функция
foo(x, y, z) // вызовется вторая функция

Перегрузки функций в JavaScript нет. При интерпретации кода выше, интерпретатор переопределит значение по ссылке foo и при вызове функции с разным количеством аргументов мы будем вызывать одну и ту же функцию, только:

foo(1, 2)
// x = 1
// y = 2
// z = undefined

foo(1, 2, 3)
// x = 1
// y = 2
// z = 3

Может быть только одна функция с именем foo, которая вызывается с любыми аргументами. А уже внутри она может посмотреть, с чем вызвана и по-разному отработать.

Для более удобной реализации логики в функциях с динамичным количеством аргументов в JavaScript реализован доступ к «лишним» аргументам через псевдомассив arguments. О нём и пойдёт речь в следующем посте.

Ну а пока он ещё не вышел, вы можете сделать доброе дело и порекомендовать мой канал своим друзьям, товарищам, коллегам. Моей благодарности не будет предела.

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

#javascript #theory

​​Лишние аргументы и arguments

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

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

function foo() {
 console.log(arguments)
}

foo(1,2,3)
// { '0': 1, '1': 2, '2': 3 }

Да и вообще, почему я пишу, что это псевдомассив, если в результате мы видим, что arguments — объект? На самом деле это объект, подобный массиву. Это обычный объект, у которого реализован геттер length и к которому можно применять некоторые другие операторы итерируемых сущностей. Но у arguments нет других методов массива, например shift или push.

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

function sum() {
  return [...arguments].reduce((acc, cur) => acc + cur, 0)
}

Как вы можете заметить, я применяю Spread оператор к arguments, потому что у этого псевдомассива нет метода reduce. Таким образом получается функция, которая соответствует задаче.

sum(1,2,3,4,5) // 15
sum(1,2,3,4,5,6,7,8,9) // 45
sum(10, 20) // 30
sum() // 0 

Есть ещё миллионы примеров применения arguments, но об этом в другой раз. А пока что у меня всё. Спасибо за прочтение и интерес.

#javascript #theory

​​Различия блочных и строчных элементов

Простой вопрос с собеседования, в котором путается много новичков. Предлагаю расставить всё по местам.

Итак, все элементы в HTML делятся на две основные группы: блочные и строчные.

Блочные элементы - это та группа элементов, которые при размещении занимают всю доступную ширину. Блочные элементы всегда становятся друг под другом.

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

Также тип элемента можно изменять при помощи стилей. Если блочному элементу необходимо задать поведение строчного, то достаточно для него указать правило display: inline. Для обратной ситуации по аналогии указывается display: block.

Также существует что-то среднее между блочным и строчным элементом. Для этого необходимо задать правило display: inline-block.

Пример блочных элементов: <div>, <p>, <ul>, <h1>

Пример строчных элементов: <a>, <span>, <strong>, <img>

Из интересного, в более старых версиях HTML было так, что в блочные элементы можно было вкладывать как блочные, так и строчные элементы. А в строчные можно было вложить только строчные. Сейчас такого нет. В HTML5 порядок вложения тегов ни на что не влияет. В новой спецификации используется категориальное деление тегов. Об этом в других постах.

И на этом всё. Достаточно просто, но почему-то вызывает много путаницы. Да и для повторения лишним не будет. Спасибо за прочтение, это важно для меня ❤️

#web #theory

​​Зачем нужен DOCTYPE в HTML

Вроде бы все знают, что в начале каждого HTML документа необходимо указывать магический тег <!DOCTYPE html>, но мало кто может объяснить зачем это нужно делать. Все делают, вот и я делаю тоже. В этом посте расскажу зачем.

Этот тег - отдельная структура в языках разметки, которая называется Document Type Definition или аббревиатура DTD. Похожие определяющие тип документа теги или свойства встречаются, например, в SVG или XML:

<?xml version="1.0" encoding="UTF-8"?>

<svg 
 xmlns="http://www.w3.org/2000/svg" 
 xmlns:xlink="http://www.w3.org/1999/xlink"
>

И этот тег как раз определяет версию документа. Думаю так же многие знают, что актуальная сейчас версия — HTML5. Чтобы сказать браузеру, что мы используем именно эту версию языка HTML, в начале документа мы указываем тег, который соответствует этой версии, то есть:

<!DOCTYPE html>

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

И на этом у меня всё. Спасибо за прочтение, это важно для меня.

#web #theory

​​Понятия URL, URI и URN

Когда речь заходит о локации документов и адресации, в голову всегда приходит такое понятие, как URL. Это так называемая ссылка для получения документа. Но на самом деле это лишь часть общей теории о локации документов, и сейчас мы разберём эту тему подробнее.

Итак, в адресации существует 3 понятия:
URI - Uniform Resource Identifier - общий идентификатор ресурса.
URL - Uniform Resource Locator - подмножество URI, которое указывает на адрес к ресурсу и механизм обращения к ресурсу.
URN - Uniform Resource Name - имя ресурса, которое записывается по определенному шаблону и является частью URI, но не гарантирует доступность этого ресурса.

На примере это выглядит так:

URI: https://github.com/grnbows/markdown-github-blog#usage
URL: https://github.com/grnbows/markdown-github-blog
URN: github.com/grnbows/markdown-github-blog#usage

https:// в данном случае называется механизмом обращения к ресурсу, #usage — самим ресурсом, в всё что между — это путём до ресурса.

И механизмом обращения может быть конечно-же не только https:// или http://. Также механизмом обращения будет, например ftp://, smb://, file:// и т.д.

И так же важно знать, что:
URL - это всегда URI
А URI - не всегда URL

Это связано с тем, что в URL не входит ресурс, как #usage в примере.

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

#web #theory

​​Что такое cookies

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

cookies — это способ хранить данные на стороне клиента. Сервер присваивает к ответу на запрос некоторую key-value структуру данных, которая сохраняется на стороне клиента. А после клиент при каждом обращении к этому серверу будет отправлять эти самые cookies в составе каждого запроса. Таким образом, cookies — это данные, которые постоянно летают от пользователя к серверу и обратно.

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

Также cookies бывают разных уровней:
— Сессионные cookies — удаляются после закрытия браузера
— Постоянные cookies — удаляются через какой-то установленный промежуток времени и не удаляются при закрытии браузера
— Сторонние cookies — куки, которые не привязаны к домену
— Супер cookie — доступны на уровне доменной зоны ( .ru, например )
— Зомби cookie — кукисы, которые сложно или невозможно удалить ( их восстанавливают через JavaScript даже после удаления )

Когда использовать куки? Тогда, когда какая-то информация на сервере нам нужна постоянно. Когда актуальность и скорость в приоритете. Но стоит учитывать, что максимальный размер вообще всех cookies - 4093 байта или почти 4 КБайта. Это очень маленький размер.

Тот же localstorage, например, позволяет хранить данные размером до 10 Мегабайт.

Также учитывайте и то, что для хранения cookies у пользователя необходимо запрашивать разрешение. На всё остальное разрешение нам не нужно, делаем что хотим.

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

#web #theory

​​Как запретить изменение объекта

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

Для объяснения введём объект для примеров:

const obj = {
 name: "progway",
 type: "channel",
 subscribers: 435
}

Чтобы запретить изменения объекта существует два метода — Object.freeze и Object.seal. Они оба запрещают изменять объект, но только по разному.

Object.seal запрещает добавлять в объект новые свойства. Если мы попытаемся добавить в объект новое поле, например avatar, которое будет URL-ом до аватарки канала, то мы это сделать не сможем. Но изменять свойства объекта получится:

Object.seal(obj)
obj.avatar = '...url'
obj.subscribers = 999

После выполнения этого кода получим объект:

{
 name: "progway",
 type: "channel",
 subscribers: 999
}

Свойство avatar просто не будет добавлено. При этом в strict режиме мы получим TypeError. Об этом режиме расскажу в следующих постах, но это важно знать уже сейчас.

Object.freeze действует на объект так же, как и Object.seal, но при этом не позволяет изменять уже записанные свойства. Состояние полностью замораживается и не может быть изменено:

Object.freeze(obj)
obj.avatar = '...url'
obj.subscribers = 9999

После выполнения получим объект:

{
 name: "progway",
 type: "channel",
 subscribers: 435
}

Все манипуляции с объектом проигнорируются, в strict режиме так же получаем TypeError.

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

const obj = {
 name: "progway",
 type: "channel",
 avatar: {
    url: "...url",
    extension: "jpeg"
  }
}

Object.freeze(obj)
obj.avatar.extension = "png"

После выполнения кода получим:

{
 name: "progway",
 type: "channel",
 avatar: {
    url: "...url",
    extension: "png"
  }
}

То есть проблем с изменениями нет.

И часто функцию deepFreeze просят написать на собеседованиях. Всвязи с этим запускаю ещё один опрос ниже, информацию о нём можете прочитать следующим постом.

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

#theory #web

Хоть где-то ваш голос важен

В посте выше я сказал, что хочу провести новый опрос, вот в чём суть:
В этом канале я часто разбираю теоретические вопросы с собеседования, но так же на этих самых собеседованиях встречаются задачи. Идея заключается в том, чтобы ввести и разборы задач с собеседования, которые будут выходить время от времени под новым хештегом #task. Думаю, что это будет полезно многим и мы немного разбавим теорию практикой, что очень полезно. А вы что думаете?

​​Что такое timestamp

Без введения, timestamp — это unix-значение, равное количеству миллисекунд, прошедших с 1 января 1970 года по всемирному координированному времени (по Гринвичу).

Это очень важное значение в программировании, которое позволяет отслеживать и сортировать датированную информацию динамически. И работает это потому что timestamp — это обычно большое положительное число, как способ представления времени, которое легко поддаётся обработке операторами сравнения. Чем больше число, тем больше миллисекунд прошло с начала 1970 года и, следовательно, тем позже это время.

Практически все операции со временем производятся с преобразованием в timestamp. Это воспринимается просто, если привыкнуть.

В JavaScript timestamp можно получить при помощи метода глобального класса Date. Запись выглядит так:

const timestamp = Date.now() // 1627142678295

Метод now является статическим, так что использовать его можно без оператора new у класса. В timestamp-e из комментария зашифровано время написания поста, так что можете посмотреть когда это было. Кто узнает, тот молодец.

И, соответственно, timestamp можно преобразовать в дата-строку. Делается это вот так:

const date = new Date(timestamp)
date.toLocaleDateString("ru-RU") // "24.07.2021"
date.toLocaleDateString("en-US") // "7/24/2021"

Форматов времени больше чем эти два, что я показал. Их все можно посмотреть на MDN.

На этом у меня всё, спасибо за прочтение. Это важно для меня ❤️

#web #theory

​​Структура HTTP запроса

Сегодня с вами поговорим о структуре HTTP запроса, разберёмся из чего он состоит.

Итак, HTTP запрос состоит из нескольких частей:

— Строка запроса
Method — Метод запроса — это описание действия, которое должен выполнить запрос
URL — Адрес запроса — строка, указывающая на расположение ресурса в сети
Версия HTTP протокола — например, HTTP/1.1

— Headers — Заголовки
Набор полей, которые описывают сопутствующую запросу информацию. Например это User-Agent, Authentification, Cookie и так далее

— Body — Тело сообщения
Если строка запроса и заголовки есть всегда, то тело — необязательный параметр. В теле запроса мы можем передавать данные в самых разных форматах.

Более подробно о методах запроса мы поговорим позже, в отдельном посте.

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

И на этом всё. Как вы можете заметить, это было достаточно просто. Советую выучить эту информацию, она очень часто встречается на собеседовании. Спасибо за прочтение, это важно для меня.

#web #theory

​​Блокировка ввода/вывода для самых маленьких

Я думаю, многие встречали это: I/O. Практически у всех начинающих разработчиков эта конструкция вызывает шок и подёргивание правого глаза. Но на самом деле это очень просто, сейчас объясню.

Эта мифическая запись, на самом деле, — просто сокращение записи Input/Output. И, казалось бы, тайна раскрыта, расходимся. И всё конечно очень просто, но не на столько.

Почему это понятие важно? Почему так часто встречается?

Практически во всех языках программирования существует такое понятие, как блокировка ввода/вывода, или I/O Block. И на самом деле, существует два вида операций — блокирующие и неблокирующие. Такое разделение нужно для избежания ошибок в ходе работы компьютера.

В неблокирующих операциях всё одновременно сложно и просто. Мы можем выполнять любые действия, но у них нет гарантированной последовательности. Для максимально бытового примера возьмём моё утро:

Я просыпаюсь и хочу позавтракать. Иду на кухню и ставлю кипятиться свой чайник. Для меня эта операция неблокирующая. Я не буду как истукан стоять и смотреть на чайник, пока он даст мне результат запроса — горячую воду. Пока чайник занят делом, я приведу себя в порядок, например, схожу почистить зубы и умоюсь. Это ещё ряд операций. После этого я вернусь на кухню и увижу, что чайник всё еще работает. Тогда я возьму свою кружку, приготовлю заварник и рано или поздно услышу характерный щелчок кнопки чайника. Этим звуком он оповестил меня, что результат готов. Операция закончена.

На уровне ОС всё так же: допустим, что нам нужно прочитать файл. Программа сделает неблокирующий запрос в ОС и скажет «дай мне файл вот по этому адресу». Но вместо ожидания результат она пойдет и посчитает мне факториал. После этого снова обратится к ОС и спросит «результат уже готов?». ОС ответит, что нет, а моя программа не обидится и сделает ещё некоторые операции. Тогда ОС либо оповестит мою программу о готовом результате, или моя программа сама спросит это, не важно. Суть в другом.

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

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

И эти концепции опускаются куда ниже уровня современных языков программирования или быта. Мы опустимся на уровень ОС и управления потоками.

С блокирующим вводом-выводом вы просите ОС «усыпить» ваш поток и «разбудить» его только после того, как данные из файла будут доступны для чтения.

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

И неблокирующие операции, конечно, позволяют выполнять некоторые действия быстрее, но проблема с ними заключается в том, что работать с ними на самом деле не удобно. Всё только в теории круто, а на практике куча нюансов. Для примера возьмём Python и рассмотрим код:

number = input('Введите число: ')

print(int(number) * 2)

Мы запрашиваем у пользователя число и как результат выводим его же, умноженное на два. Если бы input не был блокирующей операцией, а он такой является, то программа пошла бы и уже что-то вывела. Но зачем? Что в таком случае будет в number, если пользователь еще ничего не ввёл? Как много вопросов, но так мало ответов...

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

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

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

#theory

​​Что такое CRUD endpoint

Без вступления скажу, что этот вопрос очень важен для работы с апи. Без этого понятия вы работать не сможете. Точнее, работать то сможете, но вот собеседование можете не пройти 🙂

Это комплексное понятие. Два разных понятия объединяются и создают новое более расширенное. Давайте разберёмся по порядку:

Что такое CRUD?

Это цикл в обработке данных. Данный акроним состоит из 4 слов, которые собой характеризуют полный цикл обработки информации: Create, Read, Update, Remove. Если что-то поддерживает сразу 4 эти операции, то это что-то называется CRUD-полным или же просто поддерживающим цикл CRUD.

Что такое endpoint?

Endpoint — это понятие в разработке API, дословно «конечная точка». Каждая точка взаимодействия с API называется конечной. Для примера возьмём типичный endpoint REST-API для получения списка пользователей:

(GET) /users

Этот путь и называется enpoint.

Так что же такое CRUD-endpoint?

Это endpoint, поддерживающий цикл CRUD 🙂
Например, вышеописанный путь /users не является CRUD-полным. Этот путь в описанной спецификации поддерживает только HTTP метод GET, который можно отнести к операции Read. Остальные 3 операции нам недоступны.

Пример CRUD-полного endpoint'a:

(POST)      - /users - Create 
(GET)       - /users - Read 
(PUT/PATCH) - /users - Update or replace/modify
(DELETE)    - /users - Delete

Подробнее в официальной документации. Такое расширение нашего endpoint'a также имеет название CRUD endpoint.

На этом у меня всё. Спасибо за прочтение, это важно для меня.

#theory #useful

​​Теперь не только в Telegram

К сожалению или счастью, следуем трендам. Теперь @prog_way_blog доступен в TikTok'е и некоторые посты будут дублироваться там в видео-формате. Основной поток постов не изменится и всё так же продолжит выходить в прежнем формате на лучшей площадке мира — в Telegram.

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

Аккаунт доступен по ссылке

Я надеюсь, что этот старт поможет мне расширить аудиторию канала, так что ваша активность под видосиками очень кстати. Всем неравнодушным — спасибо за поддержку.

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

#blog

​​Что такое DTO

Часто бывает так, что в базе данных хранятся пользователи нашего сайта. Для них в базе данных много полей и связей. А для отображения на фронтенде нам нужны всего лишь, например, его имя, уровень и аватар. Нам что теперь, отправить всю базу данных на фронт? Сейчас разберёмся как решить эту проблему.

Самым правильным способом тут является, как мне кажется, генерация DTO.

DTO — Data Transfer Object — объект, который деструктуризирует базу данных и создаёт новый объект на её основе для передачи данных.

Для простоты примера представим, что в качестве базы данных используется MongoDB, чтобы данные о пользователе хранились в JSON'е. Далее рассмотрим такой псевдокод:

// класс-конструктор DTO. Обычно отдельным файлом
// в папке dto или dtos
class UserDTO {
 constructor(user) {
  this.name = user.name
  this.level = user.stats.level
  this.avatar = user.media.avatar
 }
}

// псевдозапрос к базе данных
const user = database.getUser()
// генерация DTO
const userDto = new UserDTO(user)

// отправляем ответ
res.status(200).json(userDto)

Код максимально простой, зато сколько пользы. Теперь эту DTO можно задокументировать, а лучше создать отдельный тип в TypeScript'e и развернуть его на весь проект. При изменении типа, линтер сразу покажет ошибки.

1. В ответе только нужные данные
2. Ответ от сервера быстрее приходит и меньше весит

Максимально полезный концепт, всем советую. И на этом у меня всё. Спасибо за прочтение, это важно для меня.

#useful #theory #data