Сенсорные экраны стали неотъемлемой частью современных устройств, поэтому умение обрабатывать свайпы (движения пальца по экрану) — полезный навык для веб-разработчиков. Свайпы позволяют реализовать удобное листание слайдов, галерей или каруселей без кнопок и скроллов. В этой статье приведён простой пример кода на JavaScript, который определяет направление и расстояние горизонтального свайпа. Основная идея События, связанные с касаниями, в браузере называются: С помощью этих трёх событий можно вычислить, насколько далеко и в каком направлении двигался палец пользователя. Пример кода Как это работает Где это применить Итог Этот небольшой пример демонстрирует, как просто можно реализовать обработку свайпов с помощью нативного JavaScript без сторонних библиотек. […]

В этой статье разберём два основных способа вставить видео на страницу: 🧩 Часть 1. Встроенное или загруженное видео: тег <video> Если у вас есть собственное видеофайл — например, promo.mp4, — то самый правильный способ вставить его в HTML — это использовать тег <video>. Этот тег появился в HTML5 и позволяет встроить медиаконтент без плагинов вроде Flash. Простейший пример: Тут всё просто: Если не указать controls, видео просто не будет иметь интерфейса, и пользователь не сможет им управлять. 🔧 Основные атрибуты тега <video> Пример с несколькими источниками Чтобы видео корректно работало во всех браузерах, можно указать несколько форматов: Если браузер не […]

Часто переходя на различные сайты, мы сталкиваемся с тем, что нас уведомляют об использовании cookies файлов во всплывающем окне. В некоторых случаях нас просят принять или не принимать условия использования cookies файлов на сайте. Возникает закономерный вопрос — что это за куки такие и что произойдет если их принять или не принять. Давайте разбираться. Для того, чтоб разобраться с тем, что такое куки и зачем они нужно иметь представление о том, как устройство получает нужную пользователю веб страницу. Допустим, пользователь вводит в поисковую строку браузера на своем компьютере какой-то URL адрес или проще говоря ссылку (возможно кликнет по какой-то кнопке) […]

Когда ты заходишь на сайт, твой браузер отправляет запрос серверу, а сервер отвечает. Этот ответ включает не только саму страницу или данные, но и специальный HTTP-статус — код, который говорит, как именно обработан запрос. Иногда все хорошо, а иногда что-то пошло не так. Давай разберемся, что означают эти статусы и как их понимать. Группы HTTP-статусов HTTP-статусы делятся на 5 больших групп: Разберем основные коды из каждой группы. 1xx — Информационные статусы Эти коды встречаются редко, потому что они просто говорят браузеру: «Подожди, я думаю». 2xx — Всё хорошо, запрос выполнен Если ты видишь страницу и всё работает — скорее всего, […]

Для того, чтоб пользователь мог передать на сервер какие-то данные на сервер. Для этого используются формы передачи данных на сервер. Если рассматривать формы на уровне html, то для реализации различных возможностей передачи данных существует множество элементов, из которых строится форма и их атрибутов. Так же есть свои особенности css стилизации и обработки данных на стороне клиента. В этой статье я разберу все html элементы форм, их атрибуты и особенности css стилизации. Так же рассмотрим обработку данных на стороне браузера с помощью JavaScript. В результате данную статью можно использовать как справочник. Для понимания того, как работает форма и какие файлы помимо […]

Когда вы задумываетесь о размещении собственного сайта в интернете, одним из первых шагов становится выбор доменного имени. Домен — это как адрес дома в интернете: именно по нему пользователи смогут найти ваш сайт. Правильно выбранный домен — это не просто техническая необходимость, а важная часть вашей онлайн-идентичности. В этой статье мы разберем, что такое домен, как он устроен и как его выбрать так, чтобы он работал на вас. Что такое домен? Доменное имя — это уникальный адрес, который вводят в адресной строке браузера, чтобы попасть на ваш сайт. Если сравнивать интернет с огромным городом, то домен — это ваш почтовый […]

Готовое css решение для окрашивания текста в цвета градиентом и добавления обводки с пояснениями. В графических редакторах довольно легко добавить тексту такие эффекты, как градиентный цвет и обводку. Тексты с этими эффектами при грамотном подходе могут выгодно отличать дизайн от аналогов и стать его изюминкой. Это создает для дизайнеров соблазны применять данные эффекты. Но на этапе верстки реализация градиента и обводки текста может стать проблемой. Дело в том, что в css градиент задается с помощью значения, записанное в функции linear-gradient для свойств background и background-image.  Для свойства color, с помощью которого задается цвет текста linear-gradient не работает. С обводкой дела […]