Programmer Way | AI

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

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

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

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

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

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

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

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

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

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

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

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