Page Visibility API — новое API в JavaScript, которое позволяет узнать, видит ли пользователь ваш сайт или же он, например, открыл другой таб.

Каким образом это API может сделать наш Веб дружелюбнее и уютнее? Ну самое очевидное:

• Сделать сайт более дружелюбным к пользователю, «поднять юзабилити». Например, отключать слайдшоу или ставить видео на паузу, когда вы переключаетесь в другой таб (например, вы смотрите видео на YouTube и вам приходит срочное эл. письмо).
• Не потреблять лишних ресурсов. Выключать лишнюю логику, когда она не нужна, так как пользователь не видит сайт. Например, в фоновом табе отключать сложные JS-рассчёты или реже проверять новые сообщения по AJAX.
• Считать более точную статистику. Например, не засчитывать пользователей, которые открыли ваш сайт в новом табе и закрыли его не просматривая.
• Поддерживать новую технологию пререндеринга из Google Chrome, когда браузеру заранее загружает и рендерит указанную страницу, чтобы открыть её мгновенно. Например, в поиске Google первый результат выдачи будет отмечен на прередеринг.
• Сделать эмулятор кота Шрёдингера (на иллюстрации), который отобразит живого или мёртвого кота только тогда, когда пользователь откроет загруженный в фоне таб.

Чтобы сделать работу с Page Visibility API более удобной, я (во славу Злых марсиан) разработал библиотеку Visibility.js. Она позволяет забыть о вендорных префиксах и добавляет «сахара» высокоуровневых функций, чтобы писать короткий чистый код (например, Visibility.every — аналог setInterval, но работает только, если сайт в открытом табе).

Милый пример видео-проигрывателя, который останавливает видео, когда страница становится невидимой (открывать в Google Chrome 13).

Вступление

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

Meny

Meny — трехмерное меню, которое помимо своей визуальной притягательности еще и экономит место на экране. При наведении (или свайпе на тачскрине, что важно), меню «выезжает» с отличным эффектом.

В поисках готового велосипеда для решения задачи мониторинга за изменениями в ФС с поддержкой linux+freebsd наткнулся на приятную python либу watchdog (github, packages.python.org). Которая помимо интересных мне ОС поддерживает также MacOS (есть своя специфика) и Windows.
Тем, кому данный вопрос интересен и кого не отпугнет индийское происхождение автора, прошу

На Хабре уже проскальзывали обзоры плагинов для стилизации селекта (раз и два)

Возможно буду заброшен помидорами за изобретение очередного велосипеда, но все текущие реализации меня не устраивали. Да, отличный плагин chosen, но в нем чрезмерное количество ненужного мне функционала. ikSelect, да, почти то что надо, но мне не понравилась генерируемая разметка.



Итак, задача — сделать плагин с блэкджеком и ш… для стилизации селекта, который по максимуму повторяет поведение стандартного. А это навигация с клавиатуры, автоподгонка ширины дропдауна, поддержка optgroup, автокомплит и самое главное полная кастомизация, включая скроллбар*.

Библиотека для работы HTML5 History API

Изначально этот проект был задуман добавить поддержку HTML5 History API в старые HTML4 браузеры. Первые версии библиотеки были нацелены именно на эти потребности, но с учетом прошедшего времени и пожеланий многоуважаемых разработчиков использующих эту библиотеку, она выросла до уровня того, что выполняет некие промежуточные действия по добавлению/исправлению того функционала что описаны в спецификациях по интерфейсу History.

На сегодняшний день библиотеку я могу смело назвать, на мой взгляд, полноценно законченной. Конечно же, ошибкам в работе библиотеки думаю, место будет, тестировалась библиотека мною в разных условиях и браузерах, но как вы понимаете, все не уловишь, да что-то упустишь. И так давайте приступим к описанию возможностей и тонкостей библиотеки.

Один из самых популярных трендов современного веб-дизайна является эффект Parallax. В этом туториале я покажу вам, как создать подобный эффект на вашем веб-сайте, используя воображение и Stellar.js.



Скачать исходники | Демо

В последнее время часто поднимаются вопросы о возможности обработки и защиты персональных данных в «облаках» в соответствии с ФЗ №152 «О персональных данных». Всё это зачастую напоминает обсуждение мифов, поэтому рискну изложить свой взгляд на проблему защиты ИСПДн в облаках и попробую ответить на основные вопросы.

Примерный список вопросов таков:

• Можно ли, в принципе, размещать информационные системы персональных данных (ИСПДн) в «облаке» с учетом требований регулирующих органов по защите информации?
• Какими свойствами должно обладать «облако», чтобы его можно было использовать для построения информационных систем персональных данных (ИСПДн)?
• Что необходимо учесть оператору ПДн, решившему перенести свои информационные ресурсы в «облако»?
• Возможно ли аттестовать ИСПДн, размещенную в публичном «облаке»?
• Какие задачи по обеспечению ИБ возлагаются на облачного провайдера?
• Какие существуют гарантии того, что конкурент, размещенный в том же «облаке» по соседству, надежно отделен и не сможет атаковать, находясь внутри «облака»?
• От чего зависит ИСПДн какого класса можно построить в конкретном «облаке»?

Вместо вступления

Всем доброго времени суток!

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

К сожалению, одного только CSS частенько не достаточно, чтобы с легкостью оформить тот или иной элемент формы. Наверное поэтому многие используют штуки вроде Uniform для своих форм. Лично я всегда стараюсь сократить количество Javascript, используемого в подобных целях, поэтому хочу рассказать о совершенно нативном HTML+CSS методе кастомизации радио-кнопок и чекбоксов.

Уверен, что на большая часть специалистов на Хабре, применяют схожие методы, для тех же, кто использует js-библиотеки, вроде Uniform, надеюсь будет полезной эта статья.

Поехали!

Итак, сразу поставим цель: оформить чекбоксы и радио-кнопки, чтобы внешне они были похожи на js-магию Uniform, но сделать это максимально простым, нативным по отношению в HTML и CSS способом, а также избежать применения лишних тегов, сохраняя семантику. Как-то так.

В этом посте хочу познакомить читателей с замечательным плагином для системы мониторинга Cacti — Weatnermap. Лично для себя, из всего разнообразия полезных дополнений к Cacti, считаю Weathermap наиболее полезным. С его помощью администратор способен создавать сетевые карты (физические, логические или просто отдельных участком и/или узлов), основное предназначение которых визуализировать загрузку сетевых интерфейсов (хотя таким образом возможно визуализировать любой график).

Расскажу как установить плагин, произвести настройку, разберем конфигурацию карты.

В последнее время, как мне кажется, пластиковые рудники на грани истощения. Чем больше и тяжелее монитор, тем меньше и тоньше подставка. Так 23'' монитор Samsung постигла участь одуванчика. Случайно наткнулся, в одной из местных news групп, на способ восстановления пластика при помощи пищевой соды. Под катом ремонт стойки монитора.

От переводчика

С удовольствием ознакомился с этими рекомендациями и теперь предлагаю вам перевод.

Введение

Это руководство описывает правила для оформления и форматирования HTML и CSS кода. Его цель — повысить качество кода и облегчить совместную работу и поддержку инфраструктуры.

Это относится к рабочим версиям файлов использующих HTML, CSS и GSS

Разрешается использовать любые инструменты для минификации компиляции или обфускации кода, при условии, что общее качество кода будет сохранено.

Если вам приходилось настраивать Nginx под нужды веб-студии, сеошников или киберсквоттеров ;), то уже наверняка знаете про символ подчёркивания в качестве server_name. Тем не менее несколько других небесполезных приёмчиков из моего примера почерпнуть можно.

Чтоб создать новый сайт на сервере с такой конфигурацией, достаточно создать директорию с именем сайта и залить в неё содержимое. А конфигурационный файл остаётся единственным и неизменным.

Конфиг делает следующее:
1. Отрезает «www» от адреса, дабы сервер нашел директорию с сайтом невзирая на эти буквы в URL.
2. Выдаёт отдельную страничку при запросе несуществующего сайта.
3. Делает стандартный редирект на index.php в корне сайта при запросе несуществующего пути.
4. Перенаправляет запрос на php-fpm при вызове .php файлов.
5. Добавляет возможность обработки .htm(l) файлов как PHP.

Материал предназначен в основном для начинающих веб-программистов.

Введение.

Часто ко мне обращаются клиенты, у которых установлены самописные CMS или модули, написанные начинающими веб-программистами, которые не понимают, что нужно для защиты данных и зачастую копируют функции фильтрации, не задумываясь о том как они работают и что именно нужно с ними делать.

Здесь я постараюсь описать как можно подробнее частые ошибки при фильтрации данных в PHP скрипте и дать простые советы как правильно выполнить фильтрацию данных.

В сети много статей по поводу фильтрации данных, но они как правильно не полные и без подробные примеров.

Привет, Хабр!

Сегодня я бы хотел познакомить начинающих вебмастеров с разнообразными изящными способами использования буферизации вывода в php. Опытные вебмастера для себя здесь врят ли найдут что-то полезное. Хотя — кто знает?

Как вы все знаете, буферизацией вывода в php управляет набор функций, начинающихся на «ob_». Самая главная из них — ob_start. При запуске она собирает последующий вывод, то есть всевозможные print(), echo и прочее, что потом отдастся посетителю в форме html-странички. И если перед тем, как выводить, мы запустили буферизацию, то с этой, почти готовой уже, страничкой, можно будет напоследок что-нибудь сотворить.

=========

Обновление от 24.03.13
Neatbeans 5.3 бесплатная IDE подходящая для верстки умеет на лету отображать набранный html в хроме через свой плагин.
Тоже самое умеет webstorm.
Куча костылей описанных ниже уже не нужны!

=========
Я хочу подвести итог инструментов-расширений Firefox для веб-разработки, благодаря которым у нас есть время на что-то более важное, чем верстка. Я поделюсь своими инструментами, а вы предлагайте свои.

Я считаю, что предложенные мною плагины жизненно необходимы почти любому веб-разработчику и веб-дизайнеру. Посадите дизайнера и версталу рядом, пусть они выпьют друг из друга все соки, а потом снимите с них скриншот общие наручники и попросите рассказать чего им так не хватает.

Со многими вы знакомы, а что есть еще, или вы твердо убеждены, что у вас всего пара рук?

Начнем с самого известного:

1.

Говорят, если бы капитан мочевидность был веб-разработчиком, он бы всем советовал ставить Firebug. Это Джастин Бибер в мире попсы, это почти половина самого firefox.
В представлениях не нуждается, самая дописанная и навороченная панель разработчика FireBug есть только в Firefox.

Доброго времени суток!

Несколько дней назад Shaida создал пост под названием +1 расширение для Google Chrome, где каждый мог посоветовать расширение, которое ему когда-либо пригодилось. Пора пользователям огнелиса дать свой ответ. Итак, я начну!

Решение Рутокен WEB позволяет реализовать строгую аутентификацию для web-ресурсов, используя электронную подпись по ГОСТ Р 34-10.2001. Более подробно про алгоритмы можно прочитать в этой статье. Здесь покажем как сделан действующий вариант использования Рутокен WEB на сайтах под управлением Asp.net и приведем инструкцию по сборке.

Сделать так, чтобы все работало, действительно просто.

UPD. Для краткого введения в адаптивный дизайн рекомендую прочитать статью «Как сделать один сайт для всех устройств (Responsive Web Design)».

Перевод крайне ценной статьи «Responsive Web Design Techniques, Tools and Design Strategies» популярного интернет-издания для разработчиков Smashing Magazine.

Еще в январе мы опубликовали статью об адаптивном дизайне «Responsive Web Design: What It Is and How To Use It» (Адаптивный веб-дизайн: Что это такое и как им пользоваться). Адаптивный веб-дизайн продолжает привлекать к себе много внимания, но, учитывая, насколько он отличается от традиционных методов разработки сайтов, он может показаться заоблачно сложным для тех дизайнеров и разработчиков, которые его не пробовали.

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

Техники Responsive web design

1. CSS Transitions and Media Queries
CSS Transitions и Media Queries

Elliot Jay Stocks подробно рассказывает о методе сочетания CSS Media Queries и CSS transitions. Основная идея в следующем: разрабатывая адаптивный сайт с помощью Media Queries, вы постоянно изменяете ширину вашего браузера, чтобы посмотреть, как сайт ведет себя при этом. Но каждый раз, когда отрабатывает один из ваших Media Queries, виден жесткий переход между стилями (первый, например, для десктопов, второй — для планшетов). Почему бы не использовать CSS transitions для сглаживания этих жестких переходов с помощью анимации?

В последнее время, сайты с parallax scrolling эффектом стали появляться повсюду. Я не хотел это пропускать, поэтому я создал демонстрационную страницу с parallax scrolling эффектом с помощью jQuery и CSS.

На Хабре уже упоминалась данная тулза, но как-то в контексте других тем.

What is Fiddler?
Fiddler is a Web Debugging Proxy which logs all HTTP(S) traffic between your computer and the Internet. Fiddler allows you to inspect traffic, set breakpoints, and «fiddle» with incoming or outgoing data. Fiddler includes a powerful event-based scripting subsystem, and can be extended using any .NET language.

Fiddler is freeware and can debug traffic from virtually any application that supports a proxy, including Internet Explorer, Google Chrome, Apple Safari, Mozilla Firefox, Opera, and thousands more. You can also debug traffic from popular devices like Windows Phone, iPod/iPad, and others.

To debug applications you've written in Java, .NET, or using WinHTTP, see this page.

Итак Fiddler — прокси, который работает с трафиком между вашим компьютером и удаленным сервером, и позволяет просматривать и менять его.