WEB-анимация достаточно специфичная область и не каждый разработчик с ней сталкивается. Если не рассматривать создание сложной «мультипликации», то современная анимация на сайтах выполняется с помощью CSS. Возможности здесь большие, поэтому сейчас доступно множество самых разных библиотек, предлагающих готовые css-классы.

У такого подхода есть несколько ограничений. Поскольку сама анимация жестко прописывается в виде класса, то для изменений требуется новая sass-компиляция или новый css-класс. Если, скажем, мы описываем анимацию цвета, то для 10 вариантов потребуется как минимум 10 новых классов. Аналогичная ситуация с размерами, отступами и т.д. То есть анимация в виде css-классов больше рассчитана на какие-то «фиксированные»/«типовые» эффекты.

Я уже много писал про Alpine.js как замену jQuery. Но у jQuery есть специальный метод .animate(), с помощью которого можно создать анимацию. Она довольно ограниченная, но для многих задач её хватает. В Alpine.js такого нет, поэтому я нашёл отдельную библиотеку Anime.js, с помощью которой можно создавать совершенно потрясающие вещи.

Читать ➝

Думаю, что с проблемой загрузки js-скриптов сталкивался каждый вебмастер. В современных браузерах доступны варианты — обычной загрузки в HEAD, поздней (lazy) в BODY, а также async и defer. Масла в огонь подлил Гугл, который понижает рейтинг страниц, где используются загружаемые js-скрипты, мотивируя это тем, что браузер вынужден ждать их полной загрузки и отработки, прежде чем отрендерить страницу.

Но на самом деле, проблема ещё глубже, поскольку затрагивает вопрос не только последовательности загрузки, но и порядка выполнения скриптов. Я покажу это на примере Alpine.js и jQuery.

Читать ➝

В последнее время всё больше шума вокруг js-фреймворков React, Angular и Vue. Порой складывается впечатление, что без этих библиотек веб-разработка уже не существует и единственный верный путь - бросать «никому не нужный» PHP, и срочно изучать реакт, поскольку он сейчас самый якобы востребованный на рынке. :-)

Бум вокруг JS в общем-то понятен — это язык имеет довольно низкий порог вхождения, поэтому появляется всё больше «специалистов», которые прошли курсы по JavaScript, хотя полноценно не осилили ни HTML, ни CSS, а PHP для таких — просто ругательство. Почему я обращаю внимание на этот момент? Всё из-за того, что в этом шуме-буме, на самом деле есть несколько интересных и полезных вещей, на которые стоило бы обратить внимание веб-разработчику. Но из-за таких горе-специалистов докопаться до сути несколько проблематично. Лично я считаю себя достаточно «продвинутым» программистом с хорошим знанием многих технологий, включая и JavaScript, но даже для меня оказалось не таким простым занятием понять реальное назначение современных js-фреймворков.

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

Реализация AJAX довольно сложна с технической точки зрения. На самом деле происходит работа API XMLHttpRequest, который и выполняет всю работу. Чтобы упростить код, используются функции-«обертки», которые освобождают нас от сложного программирования XMLHttpRequest. В jQuery для этого используются функци ajax, а также её «модификация» post. При этом, если jQuery не нужна, то в Сети можно найти другие библиотеки, реализующие функционал AJAX, например Selector (которая вообще выступает как легковесная замена jQuery).

Не зависимо от используемой библиотеки, основные принципы отправки даных с помощью Аякса будут едиными. Я буду всё показывать на примере jQuery. В конце статьи вы найдете ссылку на zip-архив со всеми примерами.

Читать ➝

Недавно, в процессе создания лендинга, столкнулся с проблемой — нужно было разместить «аккордион». Это даже не плагин, а просто набор функций jQuery. Постепенно код усложнялся и в какой-то момент я понял, что нужно его оформить отдельным плагином. Это упрощает его поддержку и можно дорабатывать по необходимости.

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

Поэтому я решил написать своё руководство, рассчитанное на неподготовленного читателя.

Читать ➝