​​Mustache.js.
Решил немного переделать попапы у себя на сайте, раньше они создавались отдельно для каждого элемента работ и затем, при загрузке новых блоков, их приходилось создавать уже для новых элементов. А еще повторно навешивать обработчик события на них, так как когда скрипт проходился по массиву элементов, то там было одно количество, а после загрузки на странице появились еще элементы, но скрипт уже отработал и не знает, что надо открыть попап по клике на подгрузившийся блок

Убрал обработчик с блоков и поставил его на body, чтобы потом просто отлавливать клик по элементу и по кнопке закрытия попапа сразу. Попапы для каждого блока тоже убрал. Теперь каждый раз по клике на блок работы создается новый попап, куда подставляются значения из объекта, который я создал для каждого блока и поместил в data атрибут, это позволило неплохо оптимизировать сайт и теперь вместо 20 блоков всего лишь 1

Блок попапа я поместил в тег template, он не рендерится в DOM дереве и служит для взаимодействия с js, это нужно было для того, чтобы для разных языков были разные попапы. Я, конечно, мог поместить верстку попапа в js, но тогда менять текст кнопок для каждого языка было бы затруднительно, а подключать react по мелочи тоже не хотелось. Поэтому решил для более удобного взаимодействия с template использовать библиотеку Mustache.js, она позволяет легко вставлять данные в свой шаблон и удобно работать с объектами. Эта библиотека отлично подходит для того, чтобы быстро получить готовый html, основанный на каких либо данных, тоже самое можно было бы сделать и через нативный js, через тот же insertAdjacentHTML, но мне было быстрее и удобнее использовать мustache, кому интересно почитать про библиотеку, оставлю статью ниже

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

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

​​Chart.js.
Chart.js — это большая библиотека для создания графиков, гистограмм, радарных диаграмм и тд. Библиотека имеет большой функционал и огромные возможности кастомизации. Есть обширная документация, но, как по мне, в ней мало примеров кода, которые можно сразу скопировать и посмотреть наглядно. Поэтому когда я разбирался с данной библиотекой, то больше искал ответы на stackoverflow или на официальном ютуб канале Chart.js, ниже приведу ссылку на то, что получилось у меня сделать и небольшое видео про данную библиотеку

​​LocalStorage и sessionStorage.
Хранилища текстовой информации в браузере. LocalStorage можно сравнить с cookies, но он не отправляется на сервер, а находиться в браузере, соотвественно там можно хранить больше информации(до 5мб). Эта возможность есть только у браузерного api, поэтому не получится обратиться к своему localStorage где-то на сервере

Основное отличия localStorage от sessionStorage можно понять с названия: sessionStorage активен пока активна текущая сессия(вкладка браузера), а localStorage сохраняет данные даже при закрытие браузера, поэтому чаще используют именно localStorage

Давайте попробуем создать переключатель темы на сайте:
1) Создадим ключ через localStorage.setItem("theme”, ”light”), если ещё не был создан
2) Затем при клике на кнопку будем получать текущее значение localStorage.getItem(“theme”) и если оно равно строке “light”, то обращаемся к localStorage.theme = “dark”, если нет, то наоборот ставим значение light

Хотя localStorage хранит только строки, мы всегда можем передать туда json, только не забывайте при получение объекта из localStorage делать JSON.parse. Также советую по посмотреть видео на эту тему:

​​Sinauw.
Всем привет! Давно не выходили посты, постараюсь исправиться, думаю нас ждет еще много интересного, буду стараться обо всем рассказывать. На днях закончил верстку лендинга, где было очень много js, на главном экране можно выбрать подходящий курс из предложенных или написать свой, при этом они не могут повторяться + добавил удаление. Также пришлось повозиться с ховерами для карточек курсов, если устройство тачскрин, то показывается просто кнопка, а если есть курсор, то кнопка изначально скрыта и при наведении показывается. Есть плавный скролл к якорю по нажатию на ссылки меню. Еще сделал кастомный видео плеер, он не совсем идеальный, но в целом работает так, как мне надо. В последнем блоке добавил офигенную анимацию сменны оттенка, кому интересно, оставлю ссылку на видео, откуда взял код, анимация реально крутая и делает сайт намного дороже

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

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

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

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

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

PS: С последним днем лета:)