Статьи с тегом #vanilla-js

Под «ванильным» JavaScript подразумевается чистый код, не использующий для работы сторонние фреймворки или библиотеки, например, JQuery. В англоязычной среде его принято называть «vanilla (pure) js».

Не секрет, что для выполнения несложных задач вовсе не обязательно подключать огромные сторонние скрипты в ущерб скорости загрузки документа. Кроме того, постепенно, с развитием ECMAScript и «уходом в небытие» старых браузеров, для которых, тем не менее, существуют различные полифиллы, реализовать определенные функции и придать элементам на странице необходимую интерактивность порой становится значительно проще и даже быстрее именно на чистом JS, что можно наблюдать на многих популярных интернет-ресурсах. Однако при выборе того или иного подхода всегда следует руководствоваться принципом целесообразности.

Событие swipe (CustomEvent)

Swipe является привычным для пользователей жестом и универсальным для разработчиков решением по обеспечению различных взаимодействий с интерфейсами. Для этого создано немало библиотек наподобие Hammer.JS или ZingTouch, позволяющих использовать свайпы не только на устройствах с сенсорным экраном, но и на обычных компьютерах при помощи мыши. Однако свайп, совмещающий разные методы ввода, может быть без труда реализован и без сторонних скриптов: речь пойдет о добавлении к элементам и дальнейшем прослушивании кастомного события swipe на чистом JavaScript.

Оптимизация сайта под AdBlock

Сегодня AdBlock является главной проблемой индустрии интернет-рекламы. Число пользователей, блокирующих рекламный контент, постепенно растёт, а прибыль владельцев сайтов снижается. Многочисленные подписки позволяют обладателям расширений значительно увеличить список нежелательных элементов, добавив к нему не только рекламу, но и, например, установленные на странице социальные виджеты или скрипты сбора статистики, что серьезно повышает приватность просмотра и осложняет вовлечение посетителей в процесс интеграции сайта с социальными сетями. Рано или поздно разработчики сталкиваются с вопросом: как проверить наличие AdBlock и минимизировать наносимый им «ущерб»?

Всплывающие уведомления (CSS3 & JS)

Существует множество способов оперативно уведомить пользователя и сфокусировать его внимание на важном контенте, начиная от обычных алертов в JavaScript и заканчивая модальными окнами. Вниманию читателя представляются простые, удобные и красивые всплывающие уведомления на CSS3 и JS (именуемые в англоязычной среде «CSS alerts»), которые фиксируются в верхней части экрана и могут быть использованы для отображения различных состояний — ошибки, успешного действия, информации или предупреждения. Алерты полностью адаптивны и работают во всех современных браузерах.

Lazy-load: ленивая загрузка

Асинхронная загрузка изображений и фреймов позволяет существенно увеличить скорость отображения веб-страницы и сэкономить трафик пользователей, показывая те или иные элементы лишь при наступлении определенных разработчиком событий. Так называемый lazy-load пользуется популярностью на сайтах, где преобладает большой по весу медиа-контент, состоящий, например, из множества картинок. Несмотря на кажущуюся сложность, реализовать собственный скрипт «ленивой» загрузки элементов средствами «vanilla» JS достаточно просто.

Эмуляция текстового поля input

Современный front end порой требует решения ряда нетривиальных задач, подходы к которым редко освещаются в тематических ресурсах. В частности, одна из таких дилемм, с которой можно столкнуться в процессе разработки, например, веб-чата, — это создание однострочного поля ввода (input) с возможностью вставки смайлов emoji.