Искренне о важном​

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

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

С момента выхода последнего поста, я чуть ли не каждый день думал о канале и об утерянных возможностях, связанных с ним. Но, в своё оправдание скажу, что я просто выгорел. Мне не хватило мотивации продолжать, потому что в какой-то момент моя жизнь превратилась в 16-ти часовую работу семь дней в неделю и я был готов жертвовать чем угодно. Мне оказалось слишком тяжело совмещать постоянную работу, образование, пет-проекты, менторинг, учёбу в ВУЗе и кучу других активностей, поэтому канал попал под горячую руку с целью сохранить всё остальное. Так расставились приоритеты.

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

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

И всё же, я не зря терял время. У меня появился новый опыт и куча новых знаний. Контента накопилось столько, что уже сейчас заготовленных постов должно хватить как минимум на 2 месяца. Подход к каналу я кардинально изменил и оптимизировал настолько, насколько сейчас способен. Даже удалось делегировать какие-то активности и теперь над этим каналом буду стараться не я один, чему я несказанно рад. На конечном контенте это не должно сказаться, зато времени от написания поста до его публикации должно проходить гораздо меньше.

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

#blog

Что такое полифилы и зачем они нужны

Одна из главных проблем web-разработки — скорость поддержки инструментов. И речь не об обновлении фреймворков или библиотек, а об обновлении браузеров.

Достаточно долгое время многим разработчикам в кошмарах снился прекрасный и ужасный Internet Explorer, что в последнее время, к слову, закончилось (зато теперь у нас есть Safari).

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

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

Так ли всё ужасно? Не совсем.

Есть автоматизированные инструменты поддержки, и относительно длительное время существует прекрасный концепт полифилов.

Полифил — это код, который, используя старые возможности языка, эмулирует новые, перезаписывая прототип.

Пример полифила для метода some:

if (!Array.prototype.some) {
  Array.prototype.some = function(callback) {
    for (var i = 0; i < this.length; i++) {
      if (callback(this[i], i, this)) {
        return true;
      }
    }
    return false;
  };
}

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

Автоматически полифилы можно добавить в свой код при использовании разных инструментов сборки, например Babel.

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

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

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

#web #theory #javascript

Аутентификация и авторизация

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

Аутентификация — процесс, который позволяет системе идентифицировать пользователя. Обычно это ввод пары логина и пароля, номер телефона и код доступа из смс, отпечатки пальцев, лица и так далее. Это способ определить, что с системой работает не аноним, а конкретный Иван Иванов.

Авторизация — процесс, который всегда идёт после аутентификации, и определяет роли и права доступа для пользователя. Например, в одном приложении может быть разный набор функций для обычных пользователей, менеджеров, администраторов. Процесс авторизации определяет имеет ли Иван Иванов доступ к функциям администратора на основе его роли.

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

И на этом, кстати, всё. Это достаточно простое понятие 🙂

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

#useful #web #theory

Big O notation

Каждый алгоритм можно оценить по времени и по памяти. При этом, не совсем понятно, как объективно составить эту оценку. Для решения этого вопроса существует O notation.

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

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

Рассмотрим примеры некоторых оценок по сложности:

— Константная сложность O(1)
Константная сложность по времени гласит «Вне зависимости от объема данных, скорость выполнения неизменна»

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

— Линейная сложность O(n)
Алгоритм линейной сложности по времени — такой алгоритм, время выполнения которого прямо пропорционально объёму данных. Например, это метод reduce

[1, 2, 3, 4].reduce((acc, cur) => acc + cur, 0)

— Квадратная скорость O(n^2)
То есть время выполнения есть квадрат объёма данных. Это может быть тот же reduce, но примененный уже не для массива, а для матрицы, то есть это работа цикла внутри другого цикла.

matrix.reduce((acc, cur) => 
 acc + cur.reduce((acc, cur) => acc + cur, 0), 0)

Этот код найдет сумму всех элементов матрицы.

Если же говорить об оценке по времени, то оценки могут быть такими же по величине, что и по сложности, то есть O(1), O(n)…

Рассмотрим пример, где сложность алгоритма по памяти — O(n):

const countElements = (arr) => {
 const counts = {}
 
 for (let i = 0; i < arr.length; i++) {
  const key = arr[i] 
  if (counts[key]) {
   counts[key] += 1
  } else {
   counts[key] = 1
  }
 }

 return counts
}

В этом коде размер объекта counts может расти прямо пропорционально длине массива, потому что каждого из элементов массива может быть представлен в единственном экземпляре. Размер входных параметров при оценке по памяти не учитывается.

Также стоит помнить, что при оценке алгоритма мы отбрасываем константы. То есть алгоритм сложностью O(3n) на самом деле равняется O(n), и так далее.

Оценок гораздо больше тех, о которых я могу рассказать в рамках одного поста. Подробнее о видах оценок можно посмотреть тут.

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

#theory #useful

Что такое AJAX​

До появления этой технологии, все обновления на странице могли быть видны только после её перезагрузки в браузере. Зачастую просто из-за того, что динамики на сайтах было мало, и все страницы сайта хранились на сервере и отдавались как обычная статика. Но со временем web-приложения становились всё более интерактивными и динамичными.

AJAX — Asynchronous JavaScript and XML — технология, которая решает проблему частой перезагрузки страницы, позволяет выполнять все запросы и реагировать на них асинхронно из JavaScript кода.

Самым явным примером приложений, которые стали в принципе возможными, после внедрения AJAX — сервисы гугла.

Благодаря асинхронным запросам у нас есть, например, Google Maps или Gmail, работу которых без асинхронных обработчиков представить крайне сложно. Пользователь может увидеть обновленные данные сразу же после своего действия и выполнения запроса, что даёт лучший пользовательский опыт и расширяет возможности web-приложений.

В современном мире часто используют fetch или что-то вроде axios, но изначально AJAX стал возможен из-за реализации в языке объекта XMLHttpRequest. Типичный запрос выглядит вот так:

// создаем запрос
var xhr = new XMLHttpRequest();

// инициализируем
xhr.open("GET", "https://...", true);

// обрабатываем ответ
xhr.onload = function() {
  if (xhr.status === 200) {
    var data = JSON.parse(xhr.responseText);
    console.log(data);
  }
};

// отправляем
xhr.send();

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

#web #theory

Что такое PWA?​

PWA — Progressive Web Application — это веб-приложение, которое использует современные веб-технологии для создания приложения, которое может работать как настольное приложение. Оно может быть установлено на устройство пользователя и иметь доступ к некоторым функциям устройства.

PWA приложения имеют возможность:
— Работать в офлайн режиме
— Работать в фоновом режиме
— Отправлять нативные уведомления на устройство
— Получать доступ в геолокации, камере, микрофону, контактам, файловой системе устройства, различным сенсорам (таким, как, например, гироскоп)

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

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

#web #theory

Что такое SPA?

SPA — Single Page Application — это такое приложение, весь контент которого может быть доступен с единственной его страницы. В рамках одной страницы пользователь взаимодействует с динамически обновляемым контентом без перезагрузки страницы. JavaScript просто меняет вёрстку, из-за чего создаётся ощущение переходов.

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

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

Также в рамках SPA можно создавать более сложные и многоуровневые интерфейсы, что в современных реалиях применяется очень активно. Почти все современные web-приложения так или иначе являются SPA приложениями. Как пример, Figma, GitHub, Spotify, Slack, Trello, VK, YouTube и другие.

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

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

#web #theory

HTTP и HTTPS​

HTTP и HTTPS — это протоколы передачи данных в сети. Основная разница между ними заключается в безопасности.

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

HTTPS же обеспечивает шифрование данных, используя протоколы безопасности, такие как SSL и TLS.

По сути, HTTPS — это ровно тот же HTTP, который поверх ещё и зашифрован при использовании дополнительных протоколов шифрования. В HTTPS все данные шифруются перед отправкой и расшифровываются только на стороне получателя.

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

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

#web #theory

В общих словах о Serverless Environment

Serverless Environment (он же Serverless Architecture) — это подход, в котором разработка программного обеспечения концентрируется вокруг бизнес-логики приложения. Разработчикам больше не нужно заниматься логикой менеджмента инфраструктуры, а можно сконцентрироваться на написании функциональности, максимально прямо направленной на пользователя и бизнес. Управление же инфраструктурой возьмёт на себя облачный провайдер.

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

Подобные услуги предлагает множество облачных провайдеров, но самые популярные из них — AWS Lambda, Azure Functions и Google Cloud Functions. В СНГ регионе же, самыми крупными провайдерами будут Yandex Cloud и Selectel.

Никто за упоминания не заплатил, а жаль..)

#web #useful #theory #principles

Адаптивная и отзывчивая вёрстка

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

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

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

Создаются опорные точки при помощи запросов в CSS, выглядит это примерно так:

.block {
 display: grid;
}

@media (max-width: 768px) {
  /* стили для экранов шириной до 768px */
 .block {
  grid-template-columns: 1fr;
 }
}

@media (min-width: 768px) and (max-width: 1024px) {
  /* для ширины экрана от 768px до 1024px */
 .block {
  grid-template-columns: repeat(1, 3fr);
 }
}

@media (min-width: 1024px) {
  /* для ширины экрана более 1024px */
 .block {
  grid-template-columns: repeat(1, 6fr);
 }
}

При отзывчивой вёрстке существует лишь один макет, например, только для мобильных устройств или только для компьютеров, а всё остальное строится отзывчиво относительно изначального макета. Есть даже специальные названия для подходов к разработке, например, Mobile First Design или же Desktop First Design. Особенность такой вёрстки заключается в полной адаптивности под любые устройства и плавность переходов между ними, хотя целевой платформой является что-то одно — либо смартфон, либо компьютер.

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

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

#web #theory #mobile #design #useful

Модель OSI без задротства

Без задротства, потому что углубленно информация о модели OSI вряд ли понадобится вообще хоть кому-то в Front-End’e, тем более джунам. Но всё же, как и со всем остальным — знать точно полезно.

Модель OSI — Open Systems Interconnection — модель, которая создана для всеобщего упрощения и стандартизации обмена данными между различными компьютерами и системами.

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

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

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

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

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

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

Модель OSI — это супер интересно и полезно, но для большинства собеседований углубленные знания темы не актуальны, а жаль. Хотя, если вам интересно погрузиться в тему и на это есть время, то крайне рекомендую, отличное чтиво)

#web #data #theory

Коротко о том что такое SEO

SEO — Search Engine Optimization — свойство web-ресурса, которое описывает его оптимизацию для выдачи в поиске при запросе поисковыми роботами поисковых систем, типа Google или Yandex. Слишком много слова поиск.

Чем лучше SEO, тем чаще сайт будет появляться в выдаче. Чем чаще он будет появляться, тем больше посетителей. Посетители = деньги. Поэтому это важно.

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

И из этого стоит сделать вывод, что SEO сейчас — это свойство web-ресурса, которое определяет его доступность извне.

Описываются такие параметры ресурса в основном в мета-тегах, но стоит помнить, что семантическая верстка — тоже часть SEO, так как используемые теги напрямую влияют на выдачу.

Вот основные примеры как это может выглядеть:

<meta name="description" content="описание вашей страницы">
<meta name="keywords" content="ключевые слова">
<meta name="author" content="имя автора">

А ещё говорить «SEO оптимизация» — это масло масленное, признак непрофессионализма. Слово «Optimization» уже включено в аббревиатуру, не говорите так. Таких душнил, как я, это триггерит 🙂

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

#web #useful #theory

Что такое SSL и TLS​

Не так давно я разбирал разницу между HTTP и HTTPS и в этом посте были затронуты SSL и TLS, но я так и не раскрыл до конца что это такое. Исправляюсь.

SSL и TLS — это протоколы шифрования данных транспортного уровня по модели OSI. Оба этих протокола выполняют одну и ту же функцию — обеспечение безопасности передачи данных между клиентом и сервером в сети.

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

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

Клиент получает сертификат сервера и генерирует свой случайный ключ шифрования и отправляет его обратно также в зашифрованном виде.

публичный ключ сервера + сегенерированный ключ = ключ, отправляемый обратно

Таким образом, клиент и сервер обмениваются ключами и и устанавливают защищённое соединение между друг другом.

Весь этот процесс имеет специальное название — «рукопожатие», или же «handshake».

SSL и TLS используются до сих пор. По сути, SSL — это более простая и старая технология, которую рекомендуется заменять на TLS во всех возможных случаях. Но, не смотря на все рекомендации, все ещё достаточно много проектов используют SSL.

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

#web #theory

TypeScript или JavaScript: что приоритетнее?​

Есть много адептов и хейтеров TypeScript, в этом вопросе всё не так однозначно, просто выскажу своё мнение.

Я тащу TypeScript в любой проект, где у меня есть такая возможность, и категорически против использования чистого JavaScript без типов. Однако, есть случаи, где это просто необходимо, и использование TS только усложняет вашу жизнь.

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

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

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

Мой вывод заключается в том, что если TypeScript и ужасен, как об этом некоторые говорят, то чистый JavaScript для меня ещё страшнее. Я себя, по крайней мере на данный момент, больше отношу к адептам TS, нежели к его противникам.

Если говорить с точки зрения рынка, то современную фронтенд разработку без TypeScript мне представить не получается. За последние годы, навык разработчиков «Знание TypeScript» перешёл из категории «Желательно» в категорию «Обязательно» и очень плотно там закрепился. Прогнозов на обратный процесс пока точно не будет. Есть ощущение, что TypeScript с нами на очень долго.

Поэтому если вы хотите быть максимально конкурентноспособным на рынке, то стоит признать, что TypeScript — стандарт. Если вы начинающий разработчик, то придётся смириться с тем, что TypeScript придётся выучить.

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

#web #typescript #javascript

Именованный и неименованный экспорт​

Начнем с того, что экспорт бывает разный — именованный и неименованный.

Именованный экспорт — это использование ключевого слова export перед каждой сущностью или при использовании «паттерна» export list, когда все экспортируемые сущности перечисляются в одном месте файла:

// именованный экспорт
export const a = 1

// export list
const c = 3
const d = 4
const f = 5

export {
 c,
 d,
 f
}

Стандартный же экспорт — это экспорт с использованием конструкции export default:

// стандартный экспорт
const b = 2
export default b

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

import { 
 Status, 
 getUser, 
 render as renderFunction
} from './file'

Стандартный импорт:

import React from 'react'

А также их комбинация:

import React, { useState, useMemo } from 'react'

Но что насчет проблематики? Почему разработчики каждый раз сталкиваются с вопросом какой лучше экспорт выбрать?

Чтобы понять это, рассмотрим следующий пример:

import Angular from 'react' // абсолютно валидно

import { Status as UserStatus } from './file'

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

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

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

Мой вывод: я стараюсь сократить использование export default до минимума, предпочитая именованный экспорт и импорт. Использовать export default валидно только для интеграции вашего кода с уже готовыми решениями, например, это может быть React.lazy и React.memo, которые работают только с export default по умолчанию. У меня есть удобный хак как это обойти, но это тема для отдельного поста.

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

#web #javascript #react #patterns

Обратная связь

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

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

У меня нет цели что-либо навязать или продать, я готов рассмотреть любое ваше обращение полностью бесплатно. Не стоит думать, что это какая-то гениальная замануха на деньги — это не так)

Спасибо за ваш интерес к проекту. Будем на связи!

Личка — @denisputnov

JSON Web Token​

Методов авторизации и аутентификации есть много, но в последнее время большинство из них основывается на JWT.

JSON Web Token — это созданная в определенном формате base64 строка. JWT считается одним из самых безопасных и удобных форматов для передачи токенов и небольшого набора пользовательских данных с запросом.

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

Каждый токен доступа состоит из трёх основных частей:

— Заголовок, в котором определяется информация о самом токене

— Полезная нагрузка — JSON объект, куда записываются все данные, необходимые для авторизации

— Подпись — ключ, который, пусть и не позволит зашифровать сам токен, зато дает возможность валидировать токен на изменения.

Части токена разделяются точками.

eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJwcm9nd2F5IiwiaWF0IjoxNjg4MDMzMzI1LCJleHAiOjE3MTk1NjkzMjUsImF1ZCI6Ind3dy5wcm9nd2F5LmNvbSIsInN1YiI6InByb2d3YXkiLCJuYW1lIjoiRGVuaXMiLCJzdXJuYW1lIjoiUHV0bm92IiwiZW1haWwiOiJwcm9nd2F5QGVtYWlsLmNvbSIsInJvbGUiOiJBRE1JTiJ9.BTdcnNwZBfAHEmZEwf2P7s724Q1sZ60N2dHVRXhGtHI

Вот так это может выглядеть.

В этом токене в качестве полезной нагрузки использовался такой объект:

{
 "name": "Denis",
 "surname": "Putnov",
 "email": "[email protected]",
 "role": "ADMIN"
}

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

Да и вообще, чем меньше данных о пользователе, тем лучше.

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

#data #theory #useful

Делегирование событий​

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

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

При использовании делегирования мы сможем использовать лишь один статичный слушатель:

<ul>
  <li>Купить молоко</li>
  <li>Сходить в спортзал</li>
  <li>Закончить отчет</li>
  <li>Починить кран</li>
  <li>Позвонить другу</li>
</ul>

И вот же пример кода с обработкой таких событий:

const todoList = document.querySelector('ul');

function handleTodoClick(event) {
  const target = event.target;
  if (target.tagName === 'li') {
    target.classList.toggle('done');
  }
}

todoList.addEventListener('click', handleTodoClick);

Этот код добавляет слушатель событий к родительскому элементу списка ul вместо каждого отдельного элемента списка li. Когда пользователь кликает на элемент списка, событие всплывает от li до ul. Без использования делегирования, нам пришлось бы вешать всё новые и новые обработчики событий для каждого элемента списка.

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

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

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

#javascript #web #useful

Как остановить выполнение интервала​

Я думаю, что большинство уже знают что такое setInterval. Если же вдруг нет, то:

setInterval — глобальная функция JavaScript, которая позволяет запускать какой-либо код раз в некоторое время. Например, каждые 300 миллисекунд.

Выглядит это следующим образом:

setInterval(() => {
 console.log('Привет, мир!')
}, 300)

Этот console.log будет выполняться бесконечно каждые 300 миллисекунд. Но что же делать в том случае, когда подобное цикличное выполнение нужно остановить? Этот вопрос может поставить кандидата в неудобную ситуацию, хотя, на самом деле — всё просто.

Вызов функции setInterval возвращает идентификатор интервала, через который можно его остановить при помощи функции clearInterval. Выглядит это так:

const interval = setInterval(() => {
 console.log('Привет, мир!')
}, 300)

clearInterval(interval)

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

#javascript #theory #web

Синтаксис async/await

В продолжение к посту о Promise, крайне актуально разобрать ещё один метод работы с асинхронным кодом, а именно — синтаксис async/await.

Ничего страшного и сложного, это такой же способ обработки асинхронных операций, только синтаксически он выглядит иначе.

По сути, async/await — это синтаксический сахар над промисами, который позволяет делать код более читаемым. Этот синтаксис не приносит ничего нового, а лишь упрощает работу с промисами.

Для того, чтобы разобраться, предлагаю пример запроса на сервер:

const data = fetch(`https:/some.api.com/users`)
 .then(response => {
  return response.json()
 })
 .then(users => {
  return users.map(...)
 })

Перепишем то же самое с использованием нового синтаксиса. Причём, обратите внимание, что ключевое слово await работает только в функциях, объявленных с помощью ключевого слова async, поэтому обернём запрос данных в функцию:

const getData = async () => {
 const response = await fetch('...')
 const users = await response.json()
 return users.map(...)
}

const data = getData()

Есть определённое ощущение, что код менее перегружен и выглядит проще, не так ли?

Причём важно помнить, что можно использовать обычные методы then, catch и другие даже в синтаксисе async/await, то есть следующий код абсолютно валидный:

const getData = async () => {
  // можем вызвать then у fetch, т.к.
  // fetch - это тоже промис
 const users = await fetch('...').then(res => res.json())
 return users.map(...)
}

const data = getData()

Крайне советую использовать обновлённый синтаксис, поскольку такой код проще рефакторить и читать, но и не забывайте о обычных промисах. Ну пожалуйста 🥲

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

#web #theory #javascript