Представляю вашему вниманию подбору фреймворков, темплейтов, jquery-плагинов и иконок для создания интерфейсов в стиле Windows 8.
Дмитрий Вавилов @Synergyxread-only
Пользователь
Metro User Interface: Описание и примеры Веб Дизайна
6 мин
Новый интерфейс в стиле Metro является ключевой особенностью мобильной ОС Windows Phone 7. Но не только её одной: уже сейчас ясно, что этот пользовательский интерфейс, будет используется Microsoft во всех продуктах, в том числе и во флагманской Windows 8. Таким образом, интерфейс Metro так или иначе будет существовать в течение длительного времени, и это стоит того, чтобы познакомиться с ним поближе.
В этой статье мы остановимся на интерфейсе: принципы его работы, сетка, структура и основные элементы.
Самые необычные Дата Центры: Дата Центры, как искусство
4 мин
Recovery Mode
Уже давно никого не удивишь сверхсовременными центрами обработки данных (ЦОД), которых в мире насчитывается великое множество. Надежность, масштабируемость, приспособляемость – основные параметры, на которые ориентировались инженеры при проектировании Дата Центров. До недавнего времени…
В наши дни стало появляться все больше и больше Дата Центров, которые без преувеличения можно назвать настоящими произведениями искусства. Причин этому, на мой взгляд, несколько, начиная от желания завлечь клиента за счет необычности объекта (получить преимущества в маркетинге) и заканчивая банальным желанием сэкономить, но при этом сделать что-то полезное, например, сохранить объект архитектуры.
Никогда не думали о серверной в часовне? А вот в Барселоне испанцы не только думали, но и построили. В 2005 году серверная площадью около 120 кв. м. успешно начала функционировать в бывшей часовне Torre Girona, где разместили один из самых мощных суперкомпьютеров Европы, производительностью около 94 терафлопс.
В наши дни стало появляться все больше и больше Дата Центров, которые без преувеличения можно назвать настоящими произведениями искусства. Причин этому, на мой взгляд, несколько, начиная от желания завлечь клиента за счет необычности объекта (получить преимущества в маркетинге) и заканчивая банальным желанием сэкономить, но при этом сделать что-то полезное, например, сохранить объект архитектуры.
Серверная в часовне
Никогда не думали о серверной в часовне? А вот в Барселоне испанцы не только думали, но и построили. В 2005 году серверная площадью около 120 кв. м. успешно начала функционировать в бывшей часовне Torre Girona, где разместили один из самых мощных суперкомпьютеров Европы, производительностью около 94 терафлопс.
Защита от SQL-инъекций в PHP и MySQL
26 мин
Recovery Mode
К своему удивлению, я не нашёл на Хабре исчерпывающей статьи на тему защиты от инъекций. Поэтому решил написать свою.
Ещё только начав интересоваться темой защиты от инъекций, я всегда хотел сформулировать набор правил, который был бы одновременно исчерпывающим и компактным. Со временем мне это удалось:
Всего два пункта.
Разумеется, практическая реализация этих правил нуждается в более подробном освещении.
Но у этого списка есть большое достоинство — он точный и исчерпывающий. В отличие от укоренившихся в массовом сознании правил «прогонять пользовательский ввод через mysql_real_escape_string» или «всегда использовать подготовленные выражения», мой набор правил не является катастрофическим заблуждением (как первое) или неполным (как второе).
Но вперёд, читатель — перейдём уже к подробному разбору.
Несколько пространный дисклеймер, не имеющий прямого отношения к вопросу
Давайте признаем факт: количество статей (и комментариев) на тему защиты от SQL-инъекций, появившихся на Хабре в последнее время, говорит нам о том, что поляна далеко не так хорошо истоптана, как полагают некоторые. Причём повторение одних и тех же ошибок наводит на мысль, что некоторые заблуждения слишком устойчивы, и требуется не просто перечисление стандартных техник, а подробное объяснение — как они работают и в каких случаях должны применяться (а в каких — нет).
Статья получилась довольно длинной — в ней собраны результаты исследований за несколько лет — но самую важную информацию я постараюсь компактно изложить в самом начале, а более подробные рассуждения и иллюстрации, а так же различные курьёзы и любопытные факты привести в конце. Также я постараюсь окончательно развеять множественные заблуждения и суеверия, связанные с темой защиты от инъекций.
Я не буду пытаться изображать полиглота и писать рекомендации для всех БД и языков разом. Достаточное количество опыта у меня есть только в веб-разработке, на связке PHP/MySQL. Поэтому все практические примеры и рекомендации будут даваться для этих технологий. Тем не менее, изложенные ниже теоретические принципы применимы, разумеется, для любых других языков и СУБД.
Сразу отвечу на стандартное замечание про ORM, Active record и прочие query builders: во-первых, все эти прекрасные инструменты рождаются не по мановению волшебной палочки из пены морской, а пишутся программистами, используя всё тот же грешный SQL. Во-вторых, будем реалистами: перечисленные технологии — хорошо, но на практике сырой SQL постоянно встречается нам в работе — будь то legacy code или развесистый JOIN, который транслировать в ORM — себе дороже. Так что не будем прятать голову в песок и делать вид, что проблемы нет.
Хоть я и постарался подробно осветить все нюансы, но, вполне возможно, некоторые из моих выводов могут показаться неочевидными. Я вполне допускаю, что мой контекст и контексты читателей могут различаться. И вещи, которые кажутся мне сами собой разумеющимися, не являются таковыми для некоторых читателей. В этом случае буду рад вопросам и уточнениям, которые помогут мне исправить статью, сделав её более понятной и информативной.
Статья получилась довольно длинной — в ней собраны результаты исследований за несколько лет — но самую важную информацию я постараюсь компактно изложить в самом начале, а более подробные рассуждения и иллюстрации, а так же различные курьёзы и любопытные факты привести в конце. Также я постараюсь окончательно развеять множественные заблуждения и суеверия, связанные с темой защиты от инъекций.
Я не буду пытаться изображать полиглота и писать рекомендации для всех БД и языков разом. Достаточное количество опыта у меня есть только в веб-разработке, на связке PHP/MySQL. Поэтому все практические примеры и рекомендации будут даваться для этих технологий. Тем не менее, изложенные ниже теоретические принципы применимы, разумеется, для любых других языков и СУБД.
Сразу отвечу на стандартное замечание про ORM, Active record и прочие query builders: во-первых, все эти прекрасные инструменты рождаются не по мановению волшебной палочки из пены морской, а пишутся программистами, используя всё тот же грешный SQL. Во-вторых, будем реалистами: перечисленные технологии — хорошо, но на практике сырой SQL постоянно встречается нам в работе — будь то legacy code или развесистый JOIN, который транслировать в ORM — себе дороже. Так что не будем прятать голову в песок и делать вид, что проблемы нет.
Хоть я и постарался подробно осветить все нюансы, но, вполне возможно, некоторые из моих выводов могут показаться неочевидными. Я вполне допускаю, что мой контекст и контексты читателей могут различаться. И вещи, которые кажутся мне сами собой разумеющимися, не являются таковыми для некоторых читателей. В этом случае буду рад вопросам и уточнениям, которые помогут мне исправить статью, сделав её более понятной и информативной.
Ещё только начав интересоваться темой защиты от инъекций, я всегда хотел сформулировать набор правил, который был бы одновременно исчерпывающим и компактным. Со временем мне это удалось:
Правила, соблюдение которых гарантирует нас от инъекций
- данные подставляем в запрос только через плейсхолдеры
- идентификаторы и ключевые слова подставляем только из белого списка, прописанного в нашем коде.
Всего два пункта.
Разумеется, практическая реализация этих правил нуждается в более подробном освещении.
Но у этого списка есть большое достоинство — он точный и исчерпывающий. В отличие от укоренившихся в массовом сознании правил «прогонять пользовательский ввод через mysql_real_escape_string» или «всегда использовать подготовленные выражения», мой набор правил не является катастрофическим заблуждением (как первое) или неполным (как второе).
Но вперёд, читатель — перейдём уже к подробному разбору.
jQuery CoreUISelect — плагин для стилизации селекта
1 мин
На Хабре уже проскальзывали обзоры плагинов для стилизации селекта (раз и два)
Возможно буду заброшен помидорами за изобретение очередного велосипеда, но все текущие реализации меня не устраивали. Да, отличный плагин chosen, но в нем чрезмерное количество ненужного мне функционала. ikSelect, да, почти то что надо, но мне не понравилась генерируемая разметка.
Итак, задача — сделать плагин сблэкджеком и ш… для стилизации селекта, который по максимуму повторяет поведение стандартного. А это навигация с клавиатуры, автоподгонка ширины дропдауна, поддержка optgroup, автокомплит и самое главное полная кастомизация, включая скроллбар*.
Возможно буду заброшен помидорами за изобретение очередного велосипеда, но все текущие реализации меня не устраивали. Да, отличный плагин chosen, но в нем чрезмерное количество ненужного мне функционала. ikSelect, да, почти то что надо, но мне не понравилась генерируемая разметка.
Итак, задача — сделать плагин с
Как сделать группу инпутов удобной
2 мин
Когда я работал над сервисом заметок jotsky.com, еще до работы в Островке, надо было сделать ввод телефонного номера из двух инпутов. Примерно такой:
Я сделал навигацию с помощью стрелочек. Сделал, чтобы по мере заполнения фокус переключался к следующем инпуту. А вот сделать правильную вставку из буфера обмена у меня никак не получалось.
Я сделал навигацию с помощью стрелочек. Сделал, чтобы по мере заполнения фокус переключался к следующем инпуту. А вот сделать правильную вставку из буфера обмена у меня никак не получалось.
Все на https, безопасно и дешево
2 мин
Краткое введение
В наши дни все понимают насколько простой задачей является угон незащищенной http сессии.
И останавливать от повсеместного внедрения может только цена на покупку сертификата, www.startssl.com решает эту проблему, раздавая бесплатные сертификаты (Class 1). Verified (Class 2) стоят копейки.
Защита ajax-приложения от Cross Site Request атак (CSRF)
2 мин
Совсем недавно у меня появилась задача защитить web-приложение полностью построенное на ajax от CSRF-атак.
Каков же механизм такой атаки? Суть заключается в выполнении запроса с другого сайта под авторизационными данными пользователя. Например, у нас есть действие удаления своего аккаунта example.com/login/dropme. Если защиты от CSRF атаки нет, мы можем на нужном нам сайте разместить тег:
Сразу после того как пользователь зайдет на приготовленную нами страницу и подгрузит содержимое img, его аккаунт на example.com будет удален. О защите от этого я расскажу под катом.
Каков же механизм такой атаки? Суть заключается в выполнении запроса с другого сайта под авторизационными данными пользователя. Например, у нас есть действие удаления своего аккаунта example.com/login/dropme. Если защиты от CSRF атаки нет, мы можем на нужном нам сайте разместить тег:
<img src="http://example.com/login/dropme">
Сразу после того как пользователь зайдет на приготовленную нами страницу и подгрузит содержимое img, его аккаунт на example.com будет удален. О защите от этого я расскажу под катом.
Пишем свой API для сайта с использованием Apache, PHP и MySQL
9 мин
С чего все началось
Разрабатывая проект, я столкнулся с необходимостью организации клиент-серверного взаимодействия приложений на платформах iOS и Android с моим сайтом на котором хранилась вся информация — собственно БД на mysql, картинки, файлы и другой контент.
Задачи которые нужно было решать — достаточно простые:
регистрация/авторизация пользователя;
отправка/получение неких данных (например список товаров).
И тут-то мне захотелось написать свой API для взаимодействия с серверной стороной — большей своей частью для практического интереса.
Входные данные
В своем распоряжении я имел:
Сервер — Apache, PHP 5.0, MySQL 5.0
Клиент — Android, iOS устройства, любой браузер
Я решил, что для запросов к серверу и ответов от него буду использовать JSON формат данных — за его простоту и нативную поддержку в PHP и Android. Здесь меня огорчила iOS — у нее нет нативной поддержки JSON (тут пришлось использовать стороннюю разработку).
Очевидные 3 правила безопасности
2 мин
Правило №1. Делайте все авторизационные куки HttpOnly
Куки с флагом HttpOnly не видны браузерному коду, а отправляются только на сервер. На практике у вас почти никогда нет необходимости получать их содержимое со стороны клиента (если такая необходимость почему-то у вас возникла — пересмотрите архитектуру авторизации, скорее всего, там что-то не так). А вот злоумышленнику, нашедшему XSS — а XSS так или иначе когда-нибудь где-нибудь найдется — отсутствие HttpOnly на авторизационных куках доставит много радости.
Один конфиг Nginx для работы с кучей разных сайтов
3 мин
Если вам приходилось настраивать Nginx под нужды веб-студии, сеошников или киберсквоттеров ;), то уже наверняка знаете про символ подчёркивания в качестве server_name. Тем не менее несколько других небесполезных приёмчиков из моего примера почерпнуть можно.
Чтоб создать новый сайт на сервере с такой конфигурацией, достаточно создать директорию с именем сайта и залить в неё содержимое. А конфигурационный файл остаётся единственным и неизменным.
Конфиг делает следующее:
1. Отрезает «www» от адреса, дабы сервер нашел директорию с сайтом невзирая на эти буквы в URL.
2. Выдаёт отдельную страничку при запросе несуществующего сайта.
3. Делает стандартный редирект на index.php в корне сайта при запросе несуществующего пути.
4. Перенаправляет запрос на php-fpm при вызове .php файлов.
5. Добавляет возможность обработки .htm(l) файлов как PHP.
Чтоб создать новый сайт на сервере с такой конфигурацией, достаточно создать директорию с именем сайта и залить в неё содержимое. А конфигурационный файл остаётся единственным и неизменным.
Конфиг делает следующее:
1. Отрезает «www» от адреса, дабы сервер нашел директорию с сайтом невзирая на эти буквы в URL.
2. Выдаёт отдельную страничку при запросе несуществующего сайта.
3. Делает стандартный редирект на index.php в корне сайта при запросе несуществующего пути.
4. Перенаправляет запрос на php-fpm при вызове .php файлов.
5. Добавляет возможность обработки .htm(l) файлов как PHP.
Затухающие полоски на CSS3 без изображений
2 мин
Туториал
Хочу поделиться с вами моим способом создания затухающих полосок без использования изображений. Дальше под катом описан метод создания таких элементов с комментариями и примером.
Как НЕ нужно проводить конкурсы на своём сайте
2 мин
Так вот, они в преддверии 14 февраля решили сделать интересный конкурс. Условия очень простые: вы загружаете фотографию себя и своей второй половинки, а потом другие пользователи, принимающие участие в конкурсе, для каждого молодого человека подбирают девушку из 5 предложенных. Тем, кого угадают наибольшее количество раз приз — 2 Kindle Touch. А тому, кто угадает 20 пар в любой день — тоже Kindle Touch, но уже один.
Page Visibility API и Visibility.js
7 мин
Page Visibility API — новое API в JavaScript, которое позволяет узнать, видит ли пользователь ваш сайт или же он, например, открыл другой таб.
Каким образом это API может сделать наш Веб дружелюбнее и уютнее? Ну самое очевидное:
- Сделать сайт более дружелюбным к пользователю, «поднять юзабилити». Например, отключать слайдшоу или ставить видео на паузу, когда вы переключаетесь в другой таб (например, вы смотрите видео на YouTube и вам приходит срочное эл. письмо).
- Не потреблять лишних ресурсов. Выключать лишнюю логику, когда она не нужна, так как пользователь не видит сайт. Например, в фоновом табе отключать сложные JS-рассчёты или реже проверять новые сообщения по AJAX.
- Считать более точную статистику. Например, не засчитывать пользователей, которые открыли ваш сайт в новом табе и закрыли его не просматривая.
- Поддерживать новую технологию пререндеринга из Google Chrome, когда браузеру заранее загружает и рендерит указанную страницу, чтобы открыть её мгновенно. Например, в поиске Google первый результат выдачи будет отмечен на прередеринг.
- Сделать эмулятор кота Шрёдингера (на иллюстрации), который отобразит живого или мёртвого кота только тогда, когда пользователь откроет загруженный в фоне таб.
Чтобы сделать работу с Page Visibility API более удобной, я (во славу Злых марсиан) разработал библиотеку Visibility.js. Она позволяет забыть о вендорных префиксах и добавляет «сахара» высокоуровневых функций, чтобы писать короткий чистый код (например,
Visibility.every — аналог setInterval, но работает только, если сайт в открытом табе).Милый пример видео-проигрывателя, который останавливает видео, когда страница становится невидимой (открывать в Google Chrome 13).
Изображения без width/height
1 мин
Хорошим тоном считается всегда указывать для изображений, которые мы используем на странице, их длину и ширину. Часто такие картинки, если мы не укажем их размеры, могут во время загрузки раскачивать нашу верстку.
Чтобы во время разработки было более наглядно, где мы пропустили картинки без указания размеров, ребята из 37Signals предложили небольшой, но чрезвычайно полезный сниппет:
Теперь все картинки, для которых мы не указали размеров — будут подсвечены красной рамкой, и пропустить их будет гораздо труднее.
Оригинал статьи
Чтобы во время разработки было более наглядно, где мы пропустили картинки без указания размеров, ребята из 37Signals предложили небольшой, но чрезвычайно полезный сниппет:
img:not([width]):not([height]) {
border: 2px solid red !important;
}
Теперь все картинки, для которых мы не указали размеров — будут подсвечены красной рамкой, и пропустить их будет гораздо труднее.
Оригинал статьи
Бриф разработчика глазами заказчика
3 мин
Вы довольны своим брифом на разработку сайтов? Он даёт ответы на все ваши вопросы, в нём всё привычно и знакомо и, кажется, лучше не придумаешь. Но вы же понимаете, важно, чтобы заказчик был доволен. Иногда стоит критически взглянуть на свой бриф: действительно ли он понятен заказчику и адекватен его потребностям и возможностям?
Мы спросили заказчиков, размещающих тендеры на нашем портале, что им нравится, а что раздражает в брифах разработчиков.
Мы спросили заказчиков, размещающих тендеры на нашем портале, что им нравится, а что раздражает в брифах разработчиков.
SMS и SIP шлюз — Мультифон, Asterisk, Kannel
5 мин
Туториал
В данной статье дается описание того, каким образом можно объединить достоинства Asterisk как PBX или IVR, Kannel как SMS-шлюза используя один телефонный номер.
Для этого я использовал Freebsd 8.2 на сервере, модем Huawei E171, но можно использовать любой модем МТС или Мегафон производства huawei (так же было проверено на модеме E1551), сим-карту Мегафона. В качестве софтфонов использовались Telephone и SJphone.
Для этого я использовал Freebsd 8.2 на сервере, модем Huawei E171, но можно использовать любой модем МТС или Мегафон производства huawei (так же было проверено на модеме E1551), сим-карту Мегафона. В качестве софтфонов использовались Telephone и SJphone.
Защита идентификатора сессий в PHP
3 мин
Безопасность веб-сайтов основывается на управлении сессиями. Когда пользователь подключается к безопасному сайту, он предоставляет учетные данные, как правило, в форме имени пользователя и пароля. Веб-сервер не имеет представления о том, какой пользователь уже вошел в систему и как он переходит от страницы к странице. Механизм сессий позволяет пользователям не вводить пароль каждый раз, когда они хотят выполнить новое действие или перейти к новой странице.
В сущности, управление сессией гарантирует, что в настоящее время соединен тот пользователь, который проходил авторизацию. Но, к сожалению, сессии стали очевидной мишенью для хакеров, поскольку они могут позволить получить доступ к веб-серверу без необходимости проверки подлинности.
После аутентификации пользователя, веб-сервер предоставляет ему идентификатор сессии. Этот идентификатор хранится в браузере и подставляется всякий раз, когда нужна проверка подлинности. Это позволяет избежать повторяющихся процессов ввода логина/пароля. Все это происходит в фоновом режиме и не доставляет дискомфорта пользователю. Представьте, если бы вы вводили имя и пароль каждый раз, когда просматривали новую страницу!
В данной статье я постараюсь изложить все известные мне способы защиты идентификатора сессии в PHP.
Итак, поехали.
В сущности, управление сессией гарантирует, что в настоящее время соединен тот пользователь, который проходил авторизацию. Но, к сожалению, сессии стали очевидной мишенью для хакеров, поскольку они могут позволить получить доступ к веб-серверу без необходимости проверки подлинности.
После аутентификации пользователя, веб-сервер предоставляет ему идентификатор сессии. Этот идентификатор хранится в браузере и подставляется всякий раз, когда нужна проверка подлинности. Это позволяет избежать повторяющихся процессов ввода логина/пароля. Все это происходит в фоновом режиме и не доставляет дискомфорта пользователю. Представьте, если бы вы вводили имя и пароль каждый раз, когда просматривали новую страницу!
В данной статье я постараюсь изложить все известные мне способы защиты идентификатора сессии в PHP.
Итак, поехали.
Пишем своё первое приложение на Android
10 мин
Предисловие
Цель данного поста — с одной стороны поделиться своим успешным опытом старта разработки приложений на платформе Android и с другой стороны поспособствовать развитию рынка софта для этой замечательной и бурно растущей платформы за счёт (без ложной скромности скажу) возможно Вас, прочитавших данный пост. В сети, конечно, можно найти материалы на тему разработки приложения «чуть сложнее, чем helloworld», но как правило они разрозненные и в них не описываются различные мелкие подводные камешки. В данном посте мы рассмотрим полный цикл разработки приложения, начиная с чистого компьютера до готового apk-файла. Под катом скрины.
Будущее трёхмерных интерфейсов. Навигация
1 мин
Студенты Массачуссетского Технологического Института представили свою разработку интерфейса навигации в будущем.
Известная под названием AIDA 2.0, представляет из себя концепт интерактивной системы навигации подсказывающей маршрут движения, учитывающий привычные дороги, необходимость заправки и прочие моменты вождения. AIDA 2.0 также включает отображение показателей приборов и 3х-мерное отображение карты прямо перед водителем, что добавляет наглядности.
Известная под названием AIDA 2.0, представляет из себя концепт интерактивной системы навигации подсказывающей маршрут движения, учитывающий привычные дороги, необходимость заправки и прочие моменты вождения. AIDA 2.0 также включает отображение показателей приборов и 3х-мерное отображение карты прямо перед водителем, что добавляет наглядности.