401
Мысли, полезные материалы и просто вещи, что мне интересны из мира IT Посты максимум каждый день, и то если мне есть о чём рассказать По всем вопросам: @grnbows github: github.com/grnbows
Разница for..in и for..of
В JavaScript есть много способов перебрать итерабельные объекты, и циклы for..in и for..of — способы, достойные внимания.
Эти циклы — это что-то очень похожее на обычный for, что удивительным назвать сложно. Я бы назвал это некоторой надстройкой, сейчас объясню почему.
Для начала рассмотрим код:
const arr = [10,20]
for (let key in arr) {
console.log(key)
}
for (let value of arr) {
console.log(value)
}
for..in перебирает сущность по его перечисляемым свойствам. В массиве такими свойствами являются индексы элементов, а в объекте, например, — ключи объекта."0" и "1"for..of перебирает только те сущности, где реализован внутренний итератор, обычно возвращающий значения объекта. Тут мы не будем углубляться о том что это такое, разберёмся позже. Скорее важно понимать, что цикл применим только к итерируемым объектам. Обычный объект итерируемым не является."0"
"1"
10
20
Мутабельные и иммутабельные данные
Сегодня разберемся что такое мутабельность данных на примере JavaScript, изучим нюансы и рассмотрим примеры.
Данные называются мутабельными, если после создания они могут менять своё состояние. Соответственно, иммутабельные данные своего состояния менять не могут.
В JavaScript как пример мутабельных данных возьмём массив, а иммутабельных — строку.
const mutableArray = [1,2,3]
const immutableStroke = "progway"
mutableArray.push(4)
// [1,2,3,4]
immutableStroke[0] = "A"
// "progway"
typeof [] // "object"
Основные структуры данных: Очередь
Очередь — это структура данных, которая подчиняется принципу FIFO, что расшифровывается как «First In First Out», то есть первым будет доступен тот элемент, который положен в очередь первым.
Бытовой пример очереди примитивен. Очередь в данных — это сама честная очередь, например, из больницы, где первым в кабинет врача попадёт тот, кто и пришёл первым, пока остальные ждут. Все мы конечно знаем что такое очереди в больницах, но почему бы не помечтать?
Так же как и для стека, в JavaScript очередь может быть реализована через нативные методы массива: push и shift. Первый добавляет элемент в конец, а второй из начала удаляет и возвращает. Выглядеть это будет примерно так:
const queue = []
queue.push(1)
queue.push(2)
queue.shift() // 1
queue.shift() // 2
queue.shift() // undefined
class Queue {
constructor() {
this.queue = []
}
enqueue(value) {
this.queue.push(value)
}
dequeue() {
return this.queue.shift()
}
}
const queue = new Queue()
queue.enqueue(1)
queue.enqueue(2)
queue.dequeue() // 1
queue.dequeue() // 2
queue.dequeue() // undefined
enqueue — вставить элемент в очередьdequeue — удалить элемент из очереди и получить его
Что такое lazy load
С ростом веб приложений всё более актуальной стала проблема загрузки страницы. Объём текста, картинок, скриптов и других частей страницы стал очень быстро увеличиваться. Вместе со скоростью загрузки страницы.
Одним из решений стала стратегия ленивой загрузки. HTML документ читается сверху вниз и когда натыкается на какой-либо ресурс, операция загрузки этого ресурса является блокирующей. Lazy load же декларирует ресурс как «неблокирующий», что позволяет полностью сформировать документ без загрузки подобных ресурсов. Загрузка становится асинхронной.
На практике это чаще всего применяется к изображениям, как с самым тяжелым частям страницы. В итоге получается, что картинки догружаются уже после загрузки страницы постепенно. Также подобные изображения не загружаются, например, пока пользователь не доскроллил до них. Таким образом мы оптимизируем потребление ресурсов сети.
В вёрстке чаще всего это задаётся через свойство load:
<img src="image.jpg" loading="lazy" alt="..." />
Как проверить есть ли свойство в объекте
Отличный вопрос с собеседований, который ещё и на практике помогает. И в JavaScript есть два способа определить есть ли у объекта свойство, о них сегодня и поговорим.
1. Специальный метод hasOwnProperty
2. Оператор in
Запись выглядит так:
const obj = {
name: "Denis",
age: 20
}
obj.hasOwnProperty("name") // true
"age" in obj // true
boolean значение, которое укажет на присутствие свойства в объекте. hasOwnProperty рассматривает конкретный объект, а оператор in рассматривает объект и его цепочку прототипов. Таким образом:obj.hasOwnProperty("toString") // false
"toString" in obj // true
Что такое BFF
В мире разработки чуть ли не каждый день возникают новые архитектурные подходы, особенно во FrontEnd'e. Один из относительно новых затрагивает и BackEnd.
BackEnd for FrontEnd, или BFF — это архитектурное направление, которое подразумевает создание отдельного интерфейса взаимодействия для каждого из FrontEnd'ов. Вместо создания одного общего API разработчики ограничивают зоны ответственности и появляются отдельные интерфейсы для каждого из клиентов.
На примере телеграм, у нас есть:
— Веб версия
— Десктопные клиенты
— Мобильные приложения
— Sticker API
— Bot API
— и так далее
И BFF, как часть микросервисного мышления гласит, что один интерфейс-монолит — это неудобно. Зачем делать огромный API, если мы можем сделать несколько поменьше, дабы увеличить скорость работы, поставить зоны ответственности и сделать систему более динамичной, уменьшив связность?
При соблюдении BFF, у Telegram будет несколько интерфейсов API:
— Bot API
— Sticker API
— Mobile API
— Web API
При том допускается разделение Mobile и Web API на, например:
— Chat API
— Channel API
— Audio Call API
— Video Call API
— и так далее
Этих интерфейсов может быть достаточно много для такого большого сервиса. Подробнее можно почитать в разборе Сэма Ньюмана, автора книги «Building Microservices» в издательстве O'REILLY.
На этом у меня всё. Спасибо за прочтение, это правда важно для меня.
#web #theory #patterns #principles
О важности вёрстки
Этот пункт часто упускают, стараясь углубиться во что угодно, кроме него самого. Разработчики учат JavaScript фреймворки, сборщики, шаблонизаторы и метаязыки, но не знают о существовании тега time и скринридеров 🙂 Почему же вёрстка — это так важно?
Во-первых, это, конечно же, доступность для бо́льшего круга пользователей. Скринридеры позволяют людям с ограниченными возможностями пользоваться сайтами, а значит делать заказы и приносить бизнесу и вам деньги. Но важно тут то, что скринридеров помогают только при наличии качественной вёрстки, с использованием правильных тегов и настроенной семантикой уровня свойств типа aria-label. В ином случае, незрячий, который захочет принести вам свои деньги, не сможет этого сделать. Это не выгодно никому из вас.
Во-вторых, качественная верстка грузится и обрабатывается быстрее. DOM-Api — это узкое горлышко в вебе, которое замедляет работу всего JavaScript. Чем больше уровней вложенности и тегов в вашем DOM дереве, тем медленнее работает сайт.
В третьих, качественная вёрстка стоит дороже. Тут без лишних комментариев.
И грустно, что в интернете особо нет качественных источников с обзорами, например, юзкейсов семантических тегов. Но, на самом деле, лучший способ обучения — это практика. Вы не изучите теги, не поймете разницу между отзывчивостью и адаптивность, не сможете вырасти как специалист, если просто не будете верстать. Практика и гугл — это лучший способ чему-то научиться.
Удобнее всего верстать с расчетом на наполнение своего портфолио. Мы либо делаем пет-проекты, либо верстаем макеты. Их не сложно найти в интернетах, но легче всего искать что-то в телеграм каналах. У моего знакомого есть подобный канал, его я и могу порекомендовать. Там каждый день новые макеты, а ещё есть сортировка по категории, сложности, другим параметрам и это очень удобно.
Ссылочка: @uniquetemplates
Верстайте. Практика — это лучшее, что может быть в этом деле. Ну и лекции Макеева, конечно.
На этом у меня всё. Спасибо за прочтение, это важно для меня.
#web #useful
Теперь не только в Telegram
К сожалению или счастью, следуем трендам. Теперь @prog_way_blog доступен в TikTok'е и некоторые посты будут дублироваться там в видео-формате. Основной поток постов не изменится и всё так же продолжит выходить в прежнем формате на лучшей площадке мира — в Telegram.
Об аккаунте в TikTok я рассказываю тут для интересующихся, чтобы дать этому аккаунту какой-то старт. Далее вы о нём вряд ли услышите. Всех, кто иногда заходит полистать видосики, прошу поддержать меня там.
Аккаунт доступен по ссылке
Я надеюсь, что этот старт поможет мне расширить аудиторию канала, так что ваша активность под видосиками очень кстати. Всем неравнодушным — спасибо за поддержку.
И всем без исключения спасибо, что находите мой канал интересным и остаётесь в нём. И так же спасибо за прочтение, это очень важно для меня ❤️
#blog
Блокировка ввода/вывода для самых маленьких
Я думаю, многие встречали это: I/O. Практически у всех начинающих разработчиков эта конструкция вызывает шок и подёргивание правого глаза. Но на самом деле это очень просто, сейчас объясню.
Эта мифическая запись, на самом деле, — просто сокращение записи Input/Output. И, казалось бы, тайна раскрыта, расходимся. И всё конечно очень просто, но не на столько.
Почему это понятие важно? Почему так часто встречается?
Практически во всех языках программирования существует такое понятие, как блокировка ввода/вывода, или I/O Block. И на самом деле, существует два вида операций — блокирующие и неблокирующие. Такое разделение нужно для избежания ошибок в ходе работы компьютера.
В неблокирующих операциях всё одновременно сложно и просто. Мы можем выполнять любые действия, но у них нет гарантированной последовательности. Для максимально бытового примера возьмём моё утро:
Я просыпаюсь и хочу позавтракать. Иду на кухню и ставлю кипятиться свой чайник. Для меня эта операция неблокирующая. Я не буду как истукан стоять и смотреть на чайник, пока он даст мне результат запроса — горячую воду. Пока чайник занят делом, я приведу себя в порядок, например, схожу почистить зубы и умоюсь. Это ещё ряд операций. После этого я вернусь на кухню и увижу, что чайник всё еще работает. Тогда я возьму свою кружку, приготовлю заварник и рано или поздно услышу характерный щелчок кнопки чайника. Этим звуком он оповестил меня, что результат готов. Операция закончена.
На уровне ОС всё так же: допустим, что нам нужно прочитать файл. Программа сделает неблокирующий запрос в ОС и скажет «дай мне файл вот по этому адресу». Но вместо ожидания результат она пойдет и посчитает мне факториал. После этого снова обратится к ОС и спросит «результат уже готов?». ОС ответит, что нет, а моя программа не обидится и сделает ещё некоторые операции. Тогда ОС либо оповестит мою программу о готовом результате, или моя программа сама спросит это, не важно. Суть в другом.
Вместо того, чтобы ждать, мы сделали ещё кучу всего полезного. В итоге вся последовательность действий заняла меньше времени, чем если бы эти действия выполнялись синхронно.
Если бы моё утро было синхронным, то я бы пришёл на кухню, включил чайник и завис. Всё, я больше ничего не могу делать. Я смотрю на чайник и жду пока он закончит. Только потом сделал бы всё остальное.
И эти концепции опускаются куда ниже уровня современных языков программирования или быта. Мы опустимся на уровень ОС и управления потоками.
С блокирующим вводом-выводом вы просите ОС «усыпить» ваш поток и «разбудить» его только после того, как данные из файла будут доступны для чтения.
То есть блокирующий ввод-вывод называется так, потому что поток, который его использует, блокируется и переходит в режим ожидания, пока ввод-вывод не будет завершён.
И неблокирующие операции, конечно, позволяют выполнять некоторые действия быстрее, но проблема с ними заключается в том, что работать с ними на самом деле не удобно. Всё только в теории круто, а на практике куча нюансов. Для примера возьмём Python и рассмотрим код:
number = input('Введите число: ')
print(int(number) * 2)
input не был блокирующей операцией, а он такой является, то программа пошла бы и уже что-то вывела. Но зачем? Что в таком случае будет в number, если пользователь еще ничего не ввёл? Как много вопросов, но так мало ответов...
Что такое timestamp
Без введения, timestamp — это unix-значение, равное количеству миллисекунд, прошедших с 1 января 1970 года по всемирному координированному времени (по Гринвичу).
Это очень важное значение в программировании, которое позволяет отслеживать и сортировать датированную информацию динамически. И работает это потому что timestamp — это обычно большое положительное число, как способ представления времени, которое легко поддаётся обработке операторами сравнения. Чем больше число, тем больше миллисекунд прошло с начала 1970 года и, следовательно, тем позже это время.
Практически все операции со временем производятся с преобразованием в timestamp. Это воспринимается просто, если привыкнуть.
В JavaScript timestamp можно получить при помощи метода глобального класса Date. Запись выглядит так:
const timestamp = Date.now() // 1627142678295
now является статическим, так что использовать его можно без оператора new у класса. В timestamp-e из комментария зашифровано время написания поста, так что можете посмотреть когда это было. Кто узнает, тот молодец. const date = new Date(timestamp)
date.toLocaleDateString("ru-RU") // "24.07.2021"
date.toLocaleDateString("en-US") // "7/24/2021"
Как запретить изменение объекта
Итак, этот вопрос встречается на собеседованиях довольно часто в разных формулировках. В этом посте постараюсь дать максимально обширный ответ на этот вопрос.
Для объяснения введём объект для примеров:
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 просят написать на собеседованиях. Всвязи с этим запускаю ещё один опрос ниже, информацию о нём можете прочитать следующим постом.
Понятия 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:// и т.д.#usage в примере.
Различия блочных и строчных элементов
Простой вопрос с собеседования, в котором путается много новичков. Предлагаю расставить всё по местам.
Итак, все элементы в HTML делятся на две основные группы: блочные и строчные.
Блочные элементы - это та группа элементов, которые при размещении занимают всю доступную ширину. Блочные элементы всегда становятся друг под другом.
Строчные элементы - это группа элементов, ширина которых соответствует ширине контента внутри них. В отличии от блочных элементов, они располагаются в строку, если для этого хватает места.
Также тип элемента можно изменять при помощи стилей. Если блочному элементу необходимо задать поведение строчного, то достаточно для него указать правило display: inline. Для обратной ситуации по аналогии указывается display: block.
Также существует что-то среднее между блочным и строчным элементом. Для этого необходимо задать правило display: inline-block.
Пример блочных элементов: <div>, <p>, <ul>, <h1>
Пример строчных элементов: <a>, <span>, <strong>, <img>
Из интересного, в более старых версиях HTML было так, что в блочные элементы можно было вкладывать как блочные, так и строчные элементы. А в строчные можно было вложить только строчные. Сейчас такого нет. В HTML5 порядок вложения тегов ни на что не влияет. В новой спецификации используется категориальное деление тегов. Об этом в других постах.
И на этом всё. Достаточно просто, но почему-то вызывает много путаницы. Да и для повторения лишним не будет. Спасибо за прочтение, это важно для меня ❤️
#web #theory
Есть ли в JavaScript перегрузка функций?
Достаточно интересный вопрос, на который без дополнительных наводящих вопросов от интервьюера мало кто ответит. Чтобы ответить, есть ли перегрузка функций в JavaScript, необходимо узнать что это вообще такое.
Перегрузка функций — или по другому «полиморфизм функций» — это понятие, которое встречается в языках программирования. Если язык поддерживает перегрузку функций, то у разработчика появляется возможность определить две функции с разной логикой, но с одинаковым именем. При вызове интерпретатор сам выберет нужную:
function foo(x, y) {
...
}
function foo(x, y, z ) {
...
}
foo(x, y) // вызовется первая функция
foo(x, y, z) // вызовется вторая функция
foo и при вызове функции с разным количеством аргументов мы будем вызывать одну и ту же функцию, только:foo(1, 2)
// x = 1
// y = 2
// z = undefined
foo(1, 2, 3)
// x = 1
// y = 2
// z = 3
foo, которая вызывается с любыми аргументами. А уже внутри она может посмотреть, с чем вызвана и по-разному отработать. arguments. О нём и пойдёт речь в следующем посте.
Методы управления контекстом вызова
Ранее мы разбирали что такое 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
Вопрос, который встречается чуть ли не на каждом втором собеседовании. Пора разобраться с этим.
Итак, в JavaScript есть несколько операторов сравнения: больше, меньше... и всё это не особо интересно. Внимание стоит уделить типам, а именно операторам == и ===.
И разница в этих двух операторах довольно примитивная, сначала рассмотрим пример:
"1" === 1 // false
2 == "2" // true
"2" и число 2 могут быть равны. И работает это итеративно. При использовании двойного равенства, интерпретатор JavaScript старается привести данные к одному типу. Если привести не получается, то последним действием итерации сравнения, грубо говоря, используется оператор ===. false, если типы сравниваемых значений разные.== и === есть операторы != и !==, суть та же.
Способы создания объекта
Тоже очень популярный вопрос с собеседований по JavaScript, который показывает ваши познания в своеобразном мире объектов. Итак, существует 4 разных метода:
1. Литеральная нотация
const obj = {}
function CatFunc(name) {
this.name = name
}
Cat.prototype.run = function() {
console.log("run")
}
class CatClass {
constructor(name) {
this.name = name
}
run() {
console.log("run")
}
}
const barsik = new CatFunc("Барсик")
const tom = new CatClass("Том")
const obj = new Object()
const obj = Object.create(Object.prototype)
Что такое прогрессивный рендеринг
Довольно старая и интересная концепция в вебе, которую очень любят интервьюеры.
Прогрессивный рендеринг — это все методы оптимизации загрузки страницы, когда мы стараемся показать пользователю контент как можно быстрее. Особенно это актуально для устройств с медленным интернетом, то есть для мобильных устройств.
И прогрессивный рендеринг — это не одна технология, а их комплекс. Чаще всего на собеседовании от вас ждут такие способы, как ленивая загрузка, разбиение приложения на мелкие файлы или SSR.
Подробнее я разбирал некоторые из этих способов оптимизации ранее, так что не вижу смысла повторяться. На каждый разобранный способ есть ссылка.
Спасибо за прочтение, это важно для меня.
#web #theory
Что такое SSR
Иногда бывает так, что веб приложение разрастается на столько, что начинает грузиться неоправданно долго. Эта одни из причин использовать SSR. О том что это такое и зачем ещё это нужно сегодня и поговорим.
SSR — Server-Side Rendering — это технология рендеринга страницы на сервере. Таким образом наше, например React приложение, полностью генерирует весь HTML на сервере, отправляя клиенту все компоненты приложения полностью готовыми.
К плюсам SSR можно отнести:
1. Улучшение воспринимаемой скорости загрузки страницы
2. Гарантия правильной индексации поисковыми ботами
3. Пререндеринг контента для ссылок в социальных сетях. Появляется красивый предварительный просмотр с заголовком страницы, описанием и изображением
4. Полная разгрузка пользователя
К минусам:
1. Размер отправляемого файла с сервера больше, сам файл сложнее.
2. Высокая нагрузка на сервер
3. Полная перезагрузка страницы при смене рута
Из всего этого можно сделать вывод, что SSR идеально подходит для статических сайтов с большим количеством контента или для тех сайтов, где важна индексация каждой его странице в поиске. Не смотря на то, что Google сделал заявление, что приложения с Client-Side Rendering индексируются так же хорошо, вопрос всё ещё находится в довольно подвешенном состоянии. Полное сравнение CSR и SSR можно посмотреть тут.
На этом у меня всё. Спасибо за прочтение, это важно для меня.
#web #useful #theory
Где хранить данные на клиенте
Web-приложения сейчас — это уже давно не обычные странички для отображения текста. Сейчас почти каждое приложение обладает авторизацией, собственным состоянием и часто манипулирует с данными. Сохраняет их, обрабатывает и выдаёт пользователю какой-то результат. Сегодня поговорим о том, как и где можно сохранить данные на клиенте.
Мне известно 4 способа: LocalStorage, SessionStorage, IndexedDB и Cookies. И я ранее уже делал посты с более подробным объяснение что такое LocalStorage, SessionStorage и Cookies. В этом посте мы разберемся не в том что это такое, а в каких ситуациях и что использовать.
Итак, если с LocalStorage, SessionStorage и Cookies всё плюс минус понятно после прочтения моих прошлых постов, то с IndexedDB появляется проблема: я ни разу не видел IndexedDB на практике 🤔 Информации в интернете тоже не особо много, так что тут мы затронем этот способ только косвенно. Также не будем трогать штуки типа MobX, Redux и так далее. Остановимся только на нативных инструментах.
Для вас я приготовил характеристическую таблицу-сравнение этих способов. Ознакомиться с ней можно по ссылке. Таблица, как говорили в СССР про квартиру — маленькая, зато своя.
Далее же в посте я разберу частые примеры:
1. Аутентификация — cookies.
Аутентификация, по большей части, работа серверная. Сервер должен решать авторизован ли пользователь, получая какие-то исходные данные, и понимать, отдавать информацию или нет. Cookies отправляются на сервер с каждым запросом без исключения, поэтому часто в cookies сидит httpOnly токен авторизации. LocalStorage тут лучше не использовать из-за того, что это менее безопасно и сервер не имеет доступа к LocalStorage, что важно для скорости и отказоустойчивости.
2. Сохранение корзины пользователя — cookies или LocalStorage.
Если нам не важно что в корзине у пользователя, то LocalStorage - наш вариант, потому что это никак не нагружает соединение и позволяет сохранять DTO без последствий. На безопасность наплевать. Если злоумышленник получит JSON корзины, то что? Cookies тоже жизнеспособный вариант, но корзина нужна далеко не на всех страницах сайта, так что трафик будет излишне нагружен. Если необходимо сохранить корзину на сервере, то лучше создать для этого отдельный CRUD-endpoint и использовать REST Api.
3. Метрики — cookies. Нужны всегда и нужны на сервере.
4. Сохранить данные формы — LocalStorage или SessionStorage. На сервере нам это не нужно.
5. Фильтры на сайте — cookies или SessionStorage.
Для фильтров жизненный цикл сессии — идеален. LocalStorage хранит эти данные слишком долго. Сессия же хранит файлы столько, сколько нужно, не нагружая соединение. Ну и так же фильтры не нужны на всех страницах.
В итоге, панацеи нет. Есть несколько вариантов и под каждую из ситуаций просто нужно выбрать свой. И на этом у меня всё. Спасибо за прочтение, это важно для меня.
#web #theory #useful #data
Основные структуры данных: Стек
Стек — это структура данных, которая подчиняется принципу LIFO, что расшифровывается как «Last In First Out». Суть заключается в расшифровке принципа: первым будет доступен тот элемент, который положен последним.
На бытовом примере, стек — это принглс. Мы можем достать только ту чипсину, что вверху, возле крышки. При этом та, что в коробке оказалось первой и сейчас лежит внизу, в наших руках окажется последней. Мы, конечно, можем перевернуть коробку и высыпать всё, но допустим, что не можем и нам нужно доставать чипсы по одной.
В JavaScript реализация стека максимально простая. Как вы наверное знаете, у массива есть методы push и pop. Первый добавляет элемент в конец, а второй с конца удаляет и возвращает. То есть стек уже как будто бы существует в JavaScript нативно и выглядеть это будет так:
const stack = []
stack.push(1)
stack.push(2)
stack.pop() // 2
stack.pop() // 1
stack.pop() // undefined
class Stack {
constructor() {
this.stack = []
}
add(value) {
this.stack.push(value)
}
get() {
return this.stack.pop()
}
}
const stack = new Stack()
stack.add(1)
stack.add(2)
console.log(stack.get()) // 2
console.log(stack.get()) // 1
console.log(stack.get()) // undefined
Что такое 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)
Что такое CRUD endpoint
Без вступления скажу, что этот вопрос очень важен для работы с апи. Без этого понятия вы работать не сможете. Точнее, работать то сможете, но вот собеседование можете не пройти 🙂
Это комплексное понятие. Два разных понятия объединяются и создают новое более расширенное. Давайте разберёмся по порядку:
Что такое CRUD?
Это цикл в обработке данных. Данный акроним состоит из 4 слов, которые собой характеризуют полный цикл обработки информации: Create, Read, Update, Remove. Если что-то поддерживает сразу 4 эти операции, то это что-то называется CRUD-полным или же просто поддерживающим цикл CRUD.
Что такое endpoint?
Endpoint — это понятие в разработке API, дословно «конечная точка». Каждая точка взаимодействия с API называется конечной. Для примера возьмём типичный endpoint REST-API для получения списка пользователей:
(GET) /users
/users не является CRUD-полным. Этот путь в описанной спецификации поддерживает только HTTP метод GET, который можно отнести к операции Read. Остальные 3 операции нам недоступны.(POST) - /users - Create
(GET) - /users - Read
(PUT/PATCH) - /users - Update or replace/modify
(DELETE) - /users - Delete
Структура HTTP запроса
Сегодня с вами поговорим о структуре HTTP запроса, разберёмся из чего он состоит.
Итак, HTTP запрос состоит из нескольких частей:
— Строка запроса
Method — Метод запроса — это описание действия, которое должен выполнить запрос
URL — Адрес запроса — строка, указывающая на расположение ресурса в сети
Версия HTTP протокола — например, HTTP/1.1
— Headers — Заголовки
Набор полей, которые описывают сопутствующую запросу информацию. Например это User-Agent, Authentification, Cookie и так далее
— Body — Тело сообщения
Если строка запроса и заголовки есть всегда, то тело — необязательный параметр. В теле запроса мы можем передавать данные в самых разных форматах.
Более подробно о методах запроса мы поговорим позже, в отдельном посте.
Если соединить все составляющие в единый текст, то мы получим типовое сообщение, которыми клиент и сервер общаются по протоколу HTTP.
И на этом всё. Как вы можете заметить, это было достаточно просто. Советую выучить эту информацию, она очень часто встречается на собеседовании. Спасибо за прочтение, это важно для меня.
#web #theory
Хоть где-то ваш голос важен
В посте выше я сказал, что хочу провести новый опрос, вот в чём суть:
В этом канале я часто разбираю теоретические вопросы с собеседования, но так же на этих самых собеседованиях встречаются задачи. Идея заключается в том, чтобы ввести и разборы задач с собеседования, которые будут выходить время от времени под новым хештегом #task. Думаю, что это будет полезно многим и мы немного разбавим теорию практикой, что очень полезно. А вы что думаете?
Что такое cookies
Эти окошки с уведомлением об использовании cookies на сайте лично мне уже надоели 🙂Предлагаю хотя бы разобраться что это такое.
cookies — это способ хранить данные на стороне клиента. Сервер присваивает к ответу на запрос некоторую key-value структуру данных, которая сохраняется на стороне клиента. А после клиент при каждом обращении к этому серверу будет отправлять эти самые cookies в составе каждого запроса. Таким образом, cookies — это данные, которые постоянно летают от пользователя к серверу и обратно.
Эта концепция очень востребована в вебе, так как позволяет реализовать большой блок функционала на сайте, например:
— Аутентификация
— Отслеживание разных статусов пользователя
— Локальные настройки пользователя
— Отслеживание действий и предпочтений пользователя
— и т.д.
Также cookies бывают разных уровней:
— Сессионные cookies — удаляются после закрытия браузера
— Постоянные cookies — удаляются через какой-то установленный промежуток времени и не удаляются при закрытии браузера
— Сторонние cookies — куки, которые не привязаны к домену
— Супер cookie — доступны на уровне доменной зоны ( .ru, например )
— Зомби cookie — кукисы, которые сложно или невозможно удалить ( их восстанавливают через JavaScript даже после удаления )
Когда использовать куки? Тогда, когда какая-то информация на сервере нам нужна постоянно. Когда актуальность и скорость в приоритете. Но стоит учитывать, что максимальный размер вообще всех cookies - 4093 байта или почти 4 КБайта. Это очень маленький размер.
Тот же localstorage, например, позволяет хранить данные размером до 10 Мегабайт.
Также учитывайте и то, что для хранения cookies у пользователя необходимо запрашивать разрешение. На всё остальное разрешение нам не нужно, делаем что хотим.
Скоро напишу пост о всех доступных способах хранения информации на клиенте, это очень популярный вопрос на собеседовании. Ну и пока на этом у меня всё. Спасибо за прочтение, это важно для меня.
#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"
>
<!DOCTYPE html>
Лишние аргументы и 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)
}
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, но об этом в другой раз. А пока что у меня всё. Спасибо за прочтение и интерес.
Специфичность CSS
Не самый простой для многих вопрос, который для некоторых разработчиков даже Middle уровня будет фатальным. Но не для нас 🙂
Итак, специфичность указывает на то, какой стиль будет применён к элементу. На это влияет три показателя:
— Место определения селектора
— Вес селектора
— Директива !important
Разберем их по порядку:
• Специфичность выше, если свойство объявлено ниже. То есть в примерах
body {
color: black;
color: red;
}
div {
width: 100px;
}
div {
width: 400px;
}
body будет иметь правило color: red;, а элемент div будет иметь правило width: 400px;, так как эти свойства объявлены ниже и "перезаписали" вышеописанные свойства.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;.
Какие типы данных есть в 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'
typeof null === 'object' — это официальная ошибка, которая сохраняется ради обратной совместимости кода. На самом деле null — это отдельный примитив.Map, Set, WeakMap, WeakSet — это объекты.typeof как 'function', на самом деле, функция — это тоже объект. Почему так мы разберём чуть позже, но вообще функции называют объектами первого класса. Так что на самом деле функция — это тоже объект.typeof NaN === 'number'. Вот такой прикол вам оставили разработчики, да. Not A Number — это инстанс Number. Для проверки NaN есть специальная глобальная функция isNaN().