Javascript & Ajax \ Javascript

Создаем горизонтальный таймлайн с помощью CSS и JavaScript

От автора: в предыдущем посте я рассказал вам, как создать адаптивный вертикальный таймлайн с нуля. Сегодня я покажу вам процесс создания горизонтального таймлайна. Как обычно, чтобы понять, что мы будем создавать, взгляните на демо ниже (см. большую версию).

Продолжить чтение

Javascript & Ajax \ Javascript

Работа с API VK (Вконтакте) через JavaScript. Урок 2. Отправка сообщений и детальное отображение друга

От автора: в этом уроке мы разберем, как с помощью VK API получать отдельного пользователя и его данные, а также, как отправить сообщение отдельному пользователю через javascript.

Продолжить чтение

Javascript & Ajax \ Javascript

Работа с API VK (Вконтакте) через JavaScript. Урок 1. Вывод списка друзей

От автора: в этом уроке мы с вами разберем, как с помощью javascript можно работать с api vk (Вконтакте) и рассмотрим некоторые особенности, которые нужно учесть при реализации данной задачи.

Продолжить чтение

Javascript & Ajax \ Javascript

Изучите Webpack за 15 минут

От автора: инструменты сборки стали неотъемлемой частью веб-разработки в основном из-за сложности JS-приложений. Сборщики позволяют запаковывать, компилировать и организовывать множество файлов и библиотек, необходимых в современных веб-проектах. В этом уроке мы расскажем вам про webpack, мощный open-source сборщик и препроцессор, умеющий выполнять большое количество разных задач. Мы научим вас писать модули, собирать код, а также использовать некоторые плагины загрузки. Урок написан для людей, абсолютно не знакомых с webpack. Однако рекомендуется иметь малейшие знания JS.

Продолжить чтение

Javascript & Ajax \ Javascript

JavaScript. Как получить список событий на элементе в браузере

От автора: в этом уроке я бы хотел затронуть такую тему, которая часто вызывает вопросы — как получить список событий на элементе в браузере, так как нативно такой функции не существует.

Продолжить чтение

Javascript & Ajax \ Javascript

Как создать диспетчера на чистом JavaScript

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

Продолжить чтение

Javascript & Ajax \ Javascript

Запрет на JavaScript-хотлинкинг с помощью .htaccess

От автора: почти десять (!) лет назад я написал статью о запрете хотлинкинга изображений. Все мы имеем право защищать изображения, размещенные на нашем сайте, так как это может сильно его замедлить. Мне нравится эта статья, там показано, как запрошенное изображение можно заменить на любое другое.

Продолжить чтение

Javascript & Ajax \ Javascript

Как создать «прилипающее» во время прокрутки страницы видео

От автора: если вы заходили последнее время на медиа сайты (сервисы стрминига, новостные сайты, Facebook и т.д.), то могли заметить один тренд, связанный с плеерами. Если прокрутить страницу вниз, плеер уменьшается в размере и прилипает к вьюпорту, а не скрывается.

Продолжить чтение

Javascript & Ajax \ Javascript

Эффекты стека при наведении курсора мыши

От автора: сегодня мы хотим поделиться с вами небольшой подборкой hover эффектов. Концепция взята с сайта Merci-Michel. Из-за «текучести» эффект смотрится очень красиво. Основная идея – показывать стек слоев за основным превью. Слои должны принимать главный цвет на изображении. После этого все быстро анимируется. Мы для анимации воспользуемся библиотекой anime.js.

Продолжить чтение

Javascript & Ajax \ Javascript

Панели инструментов, клавиатуры и вьюпорты

От автора: во всех мобильных браузерах есть два вьюпорта. Вьюпорт макета ограничивается вашими стилями (width: 100% означает 100% вьюпорта макета), а визуальный вьюпорт описывает только видимую область страницы. В качестве напоминалки можно использовать эту визуализацию. В сегодняшней статье мы узнаем, что случается, когда эти вьюпорты меняют размер. Также мы изучим событие resize.

Продолжить чтение