Рейтинг на CSS и JavaScript

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

Читать статью целиком »

PCL's JSiD 2.1 Public Release

PCL's JSiD - программа для определения чем зашифрован или обработан код JavaScript. Поиск выполняется в основном по сигнатурам, а в некоторых случаях эвристически, так что теоретически возможны неточности в идентификации. Скрипты также можно передавать через командную строку и drag'n'drop. Широко распространенных протекторов для JavaScript очень немного, а большинство упаковщиков и обфускаторов однотипные, поэтому PCL's JSiD определяет пока только следующие алгоритмы.

Читать статью целиком »

Предзагрузка изображений с помощью CSS

При размещении на web-странице "тяжелых" изображений, которые в дальнейшем должны будут без задержек сразу открываться, часто используют технологию предзагрузки. Она заключается в том, что изображение открывается браузером в фоновом режиме, но не отображается сразу, а только кэшируется. Затем, при обращении к изображению, оно извлекается из локального кэша и мгновенно отображается, так как не требуется повторной загрузки данных из сети. Обычно прелоадеры изображений делают на JavaScript и вешают на событие onload или на DOMContentLoaded, или же просто размещают скрипт в начале страницы. Сам скрипт сводится к созданию нужного количества объектов Image и назначению им свойства src со ссылками на предзагружаемые изображение. Что-то наподобие такого:Но можно обойтись вообще без скриптов, сделав предзагрузку изображений на чистом CSS. Делается это путем добавления псевдоэлемента :after к тегу body. В свойствах псевдоэлемента перечисляются ссылки на все картинки, которые должны быть предварительно загружены, а сам псевдоэлемент скрывается через display:none.Способ протестирован во всех современных браузерах, все работает как надо. Большим плюсом прелоадера на CSS является то, что он будет работать даже в том случае, если у пользователя отключены скрипты в браузере.

Обработка событий датчиков и геолокация на JavaScript

В одной из предыдущих статей мы рассмотрели обработку на JavaScript сенсорных экранов мобильных устройств. Сегодня продолжим тему взаимодействия web-страниц и приложений с мобильными устройствами и рассмотрим работу с различными датчиками, которые установлены в современных девайсах. Это датчики положения, перемещения, освещенности и приближения, а также модуль геопозиционирования.

Читать статью целиком »

Проверка стойкости пароля с помощью подсчета энтропии

Каждому пользователю интернета приходилось регистрироваться на каких-нибудь сайтах или сервисах, и одна из обязательных составляющих любой регистрации - придумывание пароля. Есть даже официальные рекомендации по составлению паролей, не говоря уже о многочисленных статьях на эту тему. Многие сервисы при регистрации пользователя проверяют наличие определенных групп символов в пароле, в результате складывается ситуация, как в верхней половине приведенного здесь комикса. А вот как определить, действительно ли тот или иной пароль является сложным?

Читать статью целиком »