Programmer Way | IT и фриланс

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

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

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

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

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

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

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

​​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. Также советую по посмотреть видео на эту тему:

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

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

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

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

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

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

​​Ошибка пути.
Всем привет, решил поделиться одним багом, а точнее рассказать про его решение. Однажды решил создать react проект с использованием TypeScript, все вроде бы прошло нормально, но при запуске самого приложение не хватало одного webpack модуля. Решил повторно его установить, но ничего не помогло. Решил загуглить, но единственное, что я нашел — это похожий вопрос без единого ответа. После долгих и мучительных поисков, оказалось, что проблема была не в самом "утерянном" модуле или, как может показаться, в неисправной установке, а в пути. Просто папка, в которую я пытался установить проект, содержала #, что привело к неисправной работе webpack

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

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

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

Я думаю, что лучше изучать темы по мере их использования и не забивать голову лишней информацией, которая пригодиться в 1/100 случаев, тем более гугл никто не отменял, но это касается только дополнительных тем, все базовые знания должны быть в голове, иначе придется каждый раз гуглить отличия split от splice. А все второстепенные темы можно учить по мере их использования, так как если ты будешь редко их использовать, то, рано или поздно, забудешь их

​​Smooth Scroll.
Небольшая библиотека для создания плавного скролла. Я часто использую её в своих проектах, если вам нужно создать кнопку для прокрутки к какому-то блоку или вверх страницы, то можете подключить эту библиотеку, инициализируете библиотеку через new SmoothScroll туда передаете нужный вам селектор, например все ссылки a[href*="#"] и объект со всеми настойками, по-умолчанию speed, это количество миллисекунд, необходимое для прокрутки на 1000 пикселей, но если вам надо, чтобы прокрутка занимала одинаковое количество времени, то установите speedAsDuration как true, еще есть большое количество типов анимации и событий, подробнее:

​​Min(), max() и clamp().
Динамика важна, как часто вам приходилось делать динамический адаптив? Иногда нам сложно манипулировать процентами или другими динамическими величинами в css. Чтобы задать некие рамки для динамических значений можно использовать функции min, max и clamp. У них уже достаточно неплохая поддержка, поэтому если вам не надо поддерживать старые браузеры, то можете смело пользоваться

Синтаксис очень простой: в функцию min через запятую передаём значения, из которых функция вернёт наименьшее, max соответственно — большее. Clamp тоже довольно полезная функция, которая создаёт уже диапазон значений

Приведу простой пример: у нас есть главный экран и фиксированная шапка, экран сделан фулскрином, но контент находиться не по центру экрана, а сдвинут с помощью padding на 30vh вниз. Если просто задать верхний отступ 30vh, то все будет отлично работать, но если высота устройства будет слишком маленькая, то контент будет налезать на шапку, удобным решением будет написать padding-top: max(30vh,100px) тогда если 30vh будет меньше 100px, то все будет отображаться корректно

Прикреплю статью с более подробным описанием работы этих css-функций, в частности и про работу clamp

​​Параллакс галерея.
Крутая анимированная галерея с использованием параллакса и различных анимаций, написано с использованием swiper, автор использует динамические величины: vh, vw, чтобы все отображалось адекватно на разных расширениях, заголовок имеет градиентный цвет, а на фоне небольшие блики текущей картинки, что добавляет атмосферности для такой галереи, видео небольшое, но в нем много полезных моментов, которые могут пригодиться в других проектах, демо:

Таймер на чистом js.
Сделал анимированный таймер, получилось создать эффект слайдера с задержкой посередине. Для кнопок решил использовать делегирование событий, чтобы можно было добавлять сколько угодно кнопок, но не прописывать постоянно событие клик на каждую. Для каждой кнопки задал специальный data-атрибут со временем выполнения таймера, например "2:30", потом это все преобразуется в массив [2,3,0], таким образом можно удобно изменять значение каждого столбца времени, демо:

​​Async await.
В прошлом посте мы разобрали примерную работу промисов, они отлично справляются со своей задачей, но существует также и более новый способ взаимодействия с асинхронным кодом — async await, под капотом используются те же промисы, но синтаксис более простой и читабельный. Прежде всего, чтобы javascript понял, что мы будем работать в асинхронной функции, нужно перед ключевым словом function написать async, теперь мы можем перед асинхронной операцией прописать await и присвоить результат в соответствующую переменную, например response, и весь следующий код будет выполняться только после того, как выполниться асинхронный код. Теперь мы можем работать с переменной response так, как будто это обычная переменная и мы пишем синхронный код, если мы хотим после этого сделать еще один запрос, то нам нужно всего лишь еще раз создать переменную и написать await перед запросом. Вот небольшое видео про работу async await:

​​Promise.
Интерфейс для обработки асинхронных операций. Promise позволяет избавляться от вложенности и выполнять код так, как если бы он был синхронным. Для создания промиса нужно внутрь new Promise() поместить функцию(executor), ее аргументы resolve и reject — колбэки. Внутри этой функции мы делаем различные асинхронные действия, по завершению которых, в зависимости от результата, вызываем один из колбэков. Если мы успешно получили результат, то вызываем resolve и передаём туда наше значение. Если произошла ошибка(сервер не ответил или ответ не совпал с тем, что мы ожидали), то мы вызываем reject с объектом ошибки

С созданием разобрались, но как нам получить результат работы нашего промиса(ответ от сервера, изменённое значение переменной), для этого мы используем метод then, который нужно вызвать у промиса и, по его завершению, мы получим доступ к данным, которые были переданы в resolve, если мы хотим обработать ошибку, то используем метод catch, куда первым аргументом передается ошибка. Если нам нужно в любом случае сделать какое-то действие, то можно использовать метод finally, он отработает в любом случае, это хорошо подходит для очистки, например остановка загрузки, так как нам не так важен результат

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

Зачастую нам не приходиться создавать promise через new Promise, этим занимаются библиотеки для работы с асинхронностью, например axios, но нужно знать то, что находиться под капотом у всех этих библиотек, чтобы грамотно с ними работать, ведь можно на каждую задачу создать по библиотеке/фреймворку и спокойно их использовать, но программистам платят не за знание определённых синтаксических конструкций, а за решения и то, насколько они верные, зависит от знания тонкостей того или иного языка или библиотеки, ну и конечно же мышления. Приложу статью, в которой будет более детально рассказано про работу с промисами, советуют прочесть

​​Createx.
Сверстал простенький многостраничник по одному марафону, открыл для себя пару новых моментов: переиспользование блоков и создания их с учетом возможности смены контента; разделение блоков по отдельным html файлам, подход неплохой, но когда слишком много секций, то становиться сложно ориентироваться, поэтому не буду внедрять к себе. Из необычного: использовал библиотеку скролла Smooth Scroll и библиотеку для создания кастомных селектов Choices.js

Сам сайт простой, я бы сказал шаблонный, но именно такие чаще всего и попадаются, если мы говорим о типичных многостраничниках, интересно было создавать независимый блок и потом просто внедрять его в разных местах, посмотреть готовый вариант и код:

​​Перенос домена.
Решил перенести свой домен с reg.ru к другому поставщику услуг, причин было несколько, одна из них — возможность продлевать хостинг и домен с одного аккаунта. Некоторые из вас тоже могут столкнуться с такой задачей, например, если другой поставщик предлагает вам лучшие условия. Поэтому решил поделиться своим опытом

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

Дальше запросите Auth-code, который нужно будет указать при запросе на перенос у нового поставщика, и в течении 5 дней домен будет перенесён, у меня это заняло где-то 3 дня, так как на тот момент reg.ru был перегружен. Как вы видите это довольно непростой процесс, но делать вы это будете не часто, хотя с первого раза у меня возникло много вопросов. Я запросил перенос не указывая Auth-code, поэтому мне пришлось обращаться в техподдержку за помощью, благо все прошло хорошо и теперь я могу оплачивать свой домен и хостинг в одном месте

​​CurrentColor.
На самом деле это очень полезное значение, позволяющее удобно контролировать смену цвета сразу у нескольких элементов. Например: вы создали псевдоэлемент линии для ссылки, у которой при ховере должен измениться цвет самого текста и линии, придётся обратится к самому элементу и элементу линии для изменения цвета, но можно заранее в :before или :after прописать background: currentColor тогда нужно будет обращаться только к родителю. Либо если внутри ссылки есть svg иконка, имеющая тот же цвет, что и у текста, то для самой иконки нам нужно написать fill: currentColor, таким образом мы сокращаем код и не повторяемся

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

1) При помощи отдельного файла, самый простой и понятный способ. Загружаете файл с форматом .svg из макета, помещаете в папку с картинками и через тег img выводите на станицу, но у этого способа есть явный недостаток — нельзя взаимодействовать с разметкой: нельзя поменять цвет, обводку, радиус и тд. Используйте этот вариант, если вам не нужно обращаться к svg, например если это какой-то элемент декора или иконка, которая статична, не имеет ховеров и не должна анимироваться 

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

3) Использование svg спрайтов. Этот способ решает проблему бессмысленного нагромождения кода, если коротко, то это одно большое svg, в котором через тег symbol вставлены другие svg. У каждого элемента есть id, с помощью которого и будет находиться нужное изображение, для этого используется еще один тег — use, где в параметре xlink:href нужно передать путь к файлу(если создали в отдельном файле) и id, пользоваться таким svg можно точно так же, как и обычным, добавлю видео с подробным объяснением svg спрайтов

4) Иконочный шрифт. Думаю здесь не надо подробностей, svg иконки используются как обычный шрифт и регулируются через свойства font-size и color. Очень удобно в использовании, но нужно подгружать дополнительный шрифт. А если вы захотите добавить еще одну иконку, то вам придется заново переустанавливать данный шрифт, будет отличным решением, когда вы уже знаете все иконки для проекта и хотите быстро менять их стили при наведении. Пользовался этим способом до недавнего времени, пока не перешел на спрайты, для спрайтов рекомендую еще настроить gulp сборку, чтобы она сама создавала файл со всеми иконками, а вы просто экспортировали их, если надо могу кинуть ссылку на подобную сборку

​​Крутой 3d слайдер.
Отличный пример кастомизации swiper.js, много различных интересных элементов, которые в совокупности создают особый эффект, очень круто проработан фон и тени, добавлен дым, освещение и мерцание, что добавляет еще больше атмосферности для слайдера, создан крутой 3d эффект для картинок, демо прикреплю к посту, видео идёт всего час, поэтому можете выделить себе время и насладиться просмотром: