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

Хорошо, но тогда почему нельзя просто залезть в чужие куки и посмотреть пароль? Дело в том, что сервер заранее кодирует важные данные и просто так не получиться залезть в DevTools и посмотреть там пароль, потому что только сервер может его раскодировать 

Каждая кука имеет определённое время жизни, оно может отличаться в зависимости от сервера и когда время жизни истечёт кука соответсвенно удалиться, но если поставить галочку «запомнить меня» при регистрации, то время жизни куки увеличиться и вам не придётся постоянно авторизовываться

Если немного подзабыли про куки, то можно послушать небольшой ликбез:

​​Rest API.
У каждой программы есть свой интерфейс, через который осуществляется работа с данной программой. Это нужно для сокрытия лишних деталей, о который пользователю лучше не догадываться. И по сути, любая библиотека — это та же программа, в которой есть свои объекты, интерфейсом которых является то, какие методы и свойства у него доступны из вне

Сервер является программой, интерфейсом(API) которого является набор url адресов, но просто знать адреса, чтобы отправить запрос, будет недостаточно, надо еще знать тип запроса, параметры, которые нужно передать и response, который вернет нам сервер

Rest API — это некая рекомендация/договоренность для упорядочивания запросов на сервер, правила, по которым стоит взаимодействовать с сервером, в Rest API используются такие CRUD методы: get(получить данные), post(отправить данные), put,patch(обновить данные) и delete соответсвенно удалить

Подробнее можно посмотреть в видео ниже:

Как использовать wp термины правильно.
У кого-то посты равны страницам, кто-то не знает о постах, знает только о записях, а у кого-то архив – это, «где документы лежат». Эта статья направлена на искоренение подобных ошибок, чтобы внутри WordPress сообщества стало проще общаться. Есть так же видео, для тех, кому этот формат больше заходит

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

Ну и раз уж я заговорил про верстку, то стоит отметить, что у меня появился второй монитор! Он стоит у меня уже месяц, но я так и не успел об этом вам рассказать…

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

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

Диспачить можно только объекты, у которых есть хотя бы один ключ — type, а redux thunk является функцией, но тут нам на помощь приходит middleware, именно тут определяется: передан обычный экшен или же функция. Если mw увидит функцию, то он сначала исполнит все асинхронные операции, а потом будет диспачить обычные экшены

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

Нашёл небольшую статью по санкам:

​​Socket.io.
Библиотека для взаимодействия сервера и клиента в реальном времени. Благодаря сокетам мы можем создать непрерывное соединение, в отличие от обычных запросов на сервер, сокеты не ожидают респонса от сервера, тем самым они работают значительно быстрее тех же Ajax запросов

Socket.io работает на безе WebSocket API и делает взаимодействие с ним намного проще. Сокеты создают определённое соединение, которое будет неразрывно до тех пор, пока пользователь не закроет вкладку, это позволяет серверу быстро оповещать клиентов о новых сообщениях, курсах валют и тп

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

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

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

​​Классовые компоненты и хуки.
Начиная с версии 16.8 в реакте появились хуки, которые упрощают работу, оптимизируют ваше приложение и избавляют вас от прописывания лишних обёрток, но классы никуда не деваются, они все ещё остаются неотъемлемой частью реакта. Вот 3 причины почему стоит использовать хуки:

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

•Не нужно лишних обёрток. Архитектура становиться проще, а вложенность — меньше. Это позволяет лучше поддерживать приложение и ориентироваться в коде

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

​​Математика и программирование.
Я уже рассказывал в одном из постов, что я смотрю открытые собеседования. Придумал я одну задачку, решил ее в одну строку и решил скинуть автору канала, звучала она примерно так: «Реализовать функцию plus, которая будет возвращать сумму чисел от 1 до заданого значения» 

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

​​Расширяемость.
Когда вы пишите простой проект, это не выглядит так важно, но если ваш проект начнёт развиваться, то простота и структурированность кода вам точно помогут, вот пару советов для долгосрочных проектов:
•не повторяйтесь, выносите логику по разным файлам, делегируйте ее отдельным частям приложения
•не плодите костыли и условия, иногда это оправданно, но если у вас гора из условий, то значит на каком-то этапе у вас что-то прошло не так 
•не пишите сложный код, не стоит все упрощать, лучше немного больше написать, но потом спокойно поддерживать

Когда я хочу добавить какую-то фичу себе на сайт или исправить баги(благо их достаточно), то у меня уходит очень много времени именно на понимание кода и определения зависимостей, ведь я делал сайт именно для прокачки своих навыков, и если бы я его начал писать сейчас, то некоторые моменты сделал бы по-другому(убрал бы JQuery)

​​Замыкание.
Если по-простому, то это функция, имеющая доступ к переменным родительской функции. Это позволяет нам как бы «замкнуть» нужные переменные, доступ к которым будет иметь только возвращённая функция, это происходит потому, что у каждой функции есть своя область видимости. Поэтому даже после выполнения родительской функции, переменные будут доступны дочерней 

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

function counter(){
 let count = 0;
 return function(){
  return count++;
 };
}
const firstCounter = counter();

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

Так же советую почитать статью про замыкания:

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

PS: всех с 8 марта! :)

​​Firebase.
Если вы не хотите или не умеете писать бэкенд, то вы можете воспользоваться этим сервисом, вкратце это облачное хранилище, позволяющее хранить и взаимодействовать с данными в json формате. Сервис бесплатный и покрывает большенство потребностей, но есть и платная версия

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

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

Существует call stack, который отвечает за выполнение кода, когда туда попадает какой-то асинхронный колбэк, то он передаётся Web API, который производит нужные операции и помещает коллбэк в очередь коллбэков (callback queue). Отдельно стоит отметить event loop — это цикл, который следит за стеком вызовов, и если он пуст, то он помещает туда коллбэк из очереди и он выполняется. Для закрепления советую посмотреть небольшое видео:

​​Анимация в React.
Порой мы хотим сделать плавный переход на другую страницу или анимировано скрыть/показать компонент, для этого обычно используют такую библиотеку, которая называется React transition group, она позволяет контролировать ход анимации, благодаря навешиванию определенных классов на компонент, с ее помощью можно делать красивые переходы или микро-анимации

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

​​Интересный случай.
Всем привет! Верстаю сейчас интересный сайт, скоро напишу большую статью, а пока решил поделиться одним полезным видео. Все чаще я начинаю замечать элементы(обычно это изображения), выходящие за пределы контейнера, когда она занимает 50% от ширины вопросов не возникает, но если вдруг ширина отличается, то возникает ряд трудностей, о них подробно можно посмотреть в видео:

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

https://teletype.in/@programmerway/big-order

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

PS: Обновил превью, дизайнер: @shyngys_n

​​Регулярные выражения.
Что можно легко нагулить, но трудно написать? Да, те самые регулярки, до этого я считал их сложными и непонятными, да и зачем их учить, если легче нагуглить, так или иначе, это все равно часть джаваскрипта, которую желательно знать(но не обязательно)

Регулярки чаще всего используют для форматирования строк и фильтрации их значений, например нам нужно задавать цвет в шестнадцатеричном формате через инпут, который должен принимать цифры от 0 до 9 и буквы от a до f, для этого мы можем легко использовать регулярку, рекомендую видео, в котором автор простым языком обьясняет основные возможности regex:

​​Lazy loading.
Иногда нам нужно оптимизировать загрузку сайта, его вес или просто не загружать то, до чего пользователь может так и не дойти, для этого существует ленивая загрузка, и это не только картинки или инконки, но и карты, видео, тексты, и даже целые блоки при скролле (кстати, это называется бесконечный скролл) В уроке автор создаёт такую загрузку: