Javascript & Ajax \ Javascript

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

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

Читать далее

Javascript & Ajax \ Javascript

Тестирование производительности с помощью User Timing API

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

Читать далее

Javascript & Ajax \ Javascript

Улучшаем ссылки для печати веб-страниц с помощью JavaScript

От автора: в мире печатных стилей была устоявшаяся техника по раскрытию URL в тексте, ссылки вставлялись инлайново. Все работает, но нарушается порядок чтения. В типографике уже на протяжении минимум века есть более подходящее решение – сноска. Наша задача — создать и вставить сноску с помощью JavaScript.

Читать далее

Javascript & Ajax \ Javascript

WebGL тур по солнечной системе: Марс, часть 3

От автора: мы закончили с позиционированием 3D пространства и освещением, но теперь я хочу вернуться в конец предыдущего урока к отрендеренному изображению. В этом уроке я немного отступлю от темы и расскажу вам более подробно про threeJS объекты и материалы, после чего мы вернемся к рендерингу.

Читать далее

Javascript & Ajax \ Javascript

WebGL тур по солнечной системе: Марс, часть 2

От автора: в первой статье я показал вам основы threeJS, в частности настройку камеры и интеграцию WebGL сцены с контентом на веб-странице. В этом уроке мы спозиционируем камеру в 3D пространстве, направим ее на объект, а сам объект подсветим. Но прежде необходимо понять природу 3D пространства. Эта статья является прямым продолжением предыдущей статьи. Далее вам понадобятся знания и код из предыдущей статьи.

Читать далее

Javascript & Ajax \ Javascript

Window, Window: измерение размеров экрана с помощью JavaScript

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

Читать далее

Javascript & Ajax \ Javascript

По максимуму: использование Math.min и .max

От автора: поиск минимума и максимума в наборе чисел – обычная задача в программировании. В JavaScript для этого вполне можно использовать математические операторы или даже серию условий if, однако функция Math.max (и противоположная ей Math.min) намного эффективнее и точнее.

Читать далее

Javascript & Ajax \ Javascript

Геокодирование, используя Google Maps

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

Читать далее

Javascript & Ajax \ Javascript

Хранение данных в локальном хранилище localStorage

От автора: приветствую вас, друзья. В предыдущей статье мы с вами познакомились с плагином jQuery Cookie, который предоставляет простой интерфейс для работы с куками и, соответственно, позволяет хранить данные в куках. В этой статье мы узнаем еще об одном способе хранения данных, речь идет о локальном хранилище localStorage.

Читать далее

Javascript & Ajax \ Javascript

Создаем эффект плавного появления слов с помощью Web Animation API

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

Читать далее