Добрый день Хабр,

Хочу познакомить пользователей Хабра с проектом над которым работает наша небольшая команда. Axis — это CMS для создания интернет магазинов под открытой лицензией.

Репозиторий на GitHub: http://github.com/axis/axiscommerce
Сайт: http://axiscommerce.com

Новый справочный сайт HTML5Please может сильно помочь при разработке кросс-браузерных сайтов на HTML5.

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

HTML5Please идёт дальше. Кроме информации c caniuse.com, он ещё даёт практические рекомендации, каким образом лучше реализовать каждую фичу HTML и CSS. Просто вписываете в поисковую строку любую функцию — и сразу видите рекомендацию, можно её использовать или нет в данный момент, а если можно, то с какими условиями.

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

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

Ранее мы использовали для графического дизайна программное обеспечение, например, Photoshop для разработки логотипов и иконок. Но теперь мы можем спроектировать почти все, используя возможности CSS3. Разработка логотипов и иконок с использованием CSS увеличит скорость загрузки вашего сайта.

Сегодня обсудим, как создать логотип, используя основные свойства CSS3.

Есть у меня серверок (да, да, именно серверок, сервером его назвать сложно). Железо старенькое (2 гига оперативы, AMD Athlon(tm) 64 Processor 3500+, програмный RAID). Админю я его сам, без особых навыков и познаний. Когда-то давным давно (больше года назад) поставил на него Debian 5.0 Lenny (это была вторая в жизни установка linux-системы, до этого ставил только Ubuntu на рабочий ноутбук) и панель управления ISPConfig3 по мануалу. Держу на нем несколько (штук 40) сайтов друзей и клиентов, Redmine, SVN и еще немного по мелочам.
Периодически все это безобразие падает (load average > 20), и приходится на сервере раз в пару часов перегружать apache или высасывать из пальца очередную попытку оптимизации. В общем полный раздрай и разруха. И вот в одну прекрасную субботу я подумал — а почему бы не решить вопрос раз и… И вот в общем.
Под катом — история убитых выходных + предыстория. Интересна в первую очередь мне, чтобы потом легко вспомнить что именно и зачем я ставил. Может быть интересна новичкам в интересном и нелегком (ох, ...) деле серверной оптимизации постепенным(!) переводом сайтов из-под Apache c его ModRewrite под Nginx (кстати, правильно это слово читается «энжинкс»меня поправили, Сысоев на конференциях не раз говорил, что название сервера стоит читать, как «энжин-икс», спасибо bayandin и DorBer ). Возможно, будет интересна более-менее опытным товарищам, оказавшимся в тех же условиях (Debian Lenny, ISPConfig3, слабое железо, несколько хороших, не сильно хороших и разных сайтов). И более опытным может быть интересно зайти, оставить пару комментариев.

Standalone-модуль поиска нужен далеко не всем сайтам. Если на сайте пять страниц — поиск не нужен. Если сайт обновляется раз в месяц или все обновления отражаются на титульной странице — можно обойтись внешним поиском по сайту от Гугла или Яндекса. Но некоторые задачи внешний поиск решить не сможет. Эта статья о том, какие функции может выполнять встроенный модуль поиска. И часть из этих функций не имеют прямого отношения к процессу поиска.

Я не люблю CSS. Он простой и понятный. Это движущая сила Интернета, но он слишком ограниченный и им трудно управлять. Пришло время привести этот язык в порядок и сделать его более полезным, используя динамический CSS при помощи LESS.
Объясню свою позицию на примере. Почему бы вместо использования #FF9F94 для получения темно-персикового цвета просто не хранить значение этого цвета в переменной для её последующего использования? Что бы перекрасить сайт достаточно будет изменить значение переменной всего в одном месте и всё.
Другими словами: это будет очень изящно, если мы будем использовать немного программирования и логики в CSS, что бы сделать его более мощным инструментом. Хорошо, что это всё возможно с использованием LESS.

Двухфакторная аутентификация — предоставления информации от двух различных типов аутентификации информации [»]

Например, это могут быть последовательно введённые пароль и код, который выдаёт токен с кнопкой. Думаю, многие из вас такие девайсы видели, а кто-то даже их регулярно использует.



Это как если бы на дверь поставили второй замок. Ключ к первому — обычный пароль. Ко второму — действующий в течение 30 секунд одноразовый код. Попасть за дверь можно только если оба ключа окажутся правильными, а не один, как было раньше.

С некоторых пор Google сделала доступной двухфакторную аутентификацию в своих сервисах. Теперь токен переехал в ваш мобильный телефон с Android'ом! iPhone и Blackberry тоже сгодятся в такой роли. Очень удобно. Опробовав на Gmail, мне захотелось такую же штуку сделать у себя, тут-то я внезапно и нашёл libpam-google-authenticator.

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

Проще посмотреть и оценить на примерах. Справа — примеры в списке топиков, взяты из разных анонсов, на одну оценку наведена мышь, открывающая арифметику суммарной оценки. Примеры из комментариев — далее.

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

Пожалуйста, обратите внимание, что эти примеры будут корректно работать только в современных браузерах, которые поддерживают свойства CSS3.

В данном обзоре я хочу показать как можно расширить возможности компонента Progressbar плагина jQuery UI. Для начала поставим перед собой задачи, которые мы и будем решать:

• прогресс-бар должен быть динамическим, т.е. «бежать вперед» (заполняться) с течением времени
• возможность задавать параметры «бега» бара
• удобство визуального использования. К примеру отображение текущего процента заполнения прогресс-бара

Остановимся подробнее на параметрах «бега». Бар можно параметризовать различными образами: задавая время запуска, шаг и период; время финиша, шаг и период; время старта, время финиша и шаг. Я остановился на последнем, т.е. для инициализации нашего прогресс-бара достаточно указать время старта, время финиша и шаг.

Сегодня мы будем воссоздавать прогресс-бар из программы установки Adobe Flash Player средствами CSS3, используя градиенты и тени.



Под хабракатом весь код и ссылка на рабочий пример.

С помощью @font-face вы можете загружать значки (иконки) не в виде PNG или GIF, а внедрить внутрь шрифта и подгрузить пользователю через директиву @font-face. CSS3 позволяет поворачивать такие значки, добавлять тени или даже анимированные эффекты с плавным изменением цвета при наведении курсора мыши (раньше такое было возможно только на Flash).

Вот здесь инструкция по использованию набора шрифтов IconPack (.eot, .woff, .ttf, .svg) и загрузке значков с помощью псевдо-элемента :before и тега span.

<style>  
.staricon {  
  font-family: 'IconPack';  
}  
.staricon:before {  
  content: 'a';  
}  
.show {  
  display:block;  
}  
.hide {  
  display:none;  
}  
</style>  
  
<div class="staricon">  
  <span class="show">star</span>  
</div>

Как всем известно, в 2011 году указом президента РФ был отменен переход на зимнее время. Тем не менее, 30 октября на многих компьютерах часы были переведены. Мы не будем выяснять почему нужные апдейты не были вовремя скачаны установлены (нерадивость админов или невозможность этой операции). Главное сейчас привести часы в актуальное состояние. Конкретно речь пойдет об ОС FreeBSD. Кого не минула чаша сия — прошу под кат.

Привет всем. Сегодняшний пост будет коротким, но, думается мне, полезным.
Часто приходится слышать о том, как сделать «затухание» текста к низу, верху и т.д.
Есть варианты на js, есть варианты с картинкой и просто css-градиентом наложенными поверх текста.
Сегодня в голову пришел несколько другой подход к решению этой проблемы.
Его реализация проста как три копейки

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

Обычно для того, чтобы разместить такой ротатор на своем сайте достаточно установить специальный javascript-код. Если разбираться глубже, то задачей этого javascript-а является встраивание на Вашу страницу специального iframe, который уже и загружает ротатор баннеров на Вашу страницу с сайта разработчика.

Все бы ничего, но у данного подхода есть несколько недостатков:

Приветствую всех администраторов FreeBSD!

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

Задача возникла сама собой, при просмотре логов:
/var/log/exim/rejectlog
/var/log/auth.log
/var/log/apache22/httpd-error.log

в них постоянно попадала информация о неудачных попытках подобрать пароль к exim, к серверу и к веб-почте соответственно. Рано или поздно злоумышленники могут пароль подобрать, поэтому их нужно как-то остановить, например, добавив их IP-адрес в правила ipfw. А на веб-сервере еще и пытались найти несуществующие каталоги и файлы, относящиеся к администрированию, типа phpmyadmin, очевидно, чтобы проверить их на существующие уязвимости.

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

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

Представляю вашему вниманию перевод статьи под названием "Innovative Techniques To Simplify Sign-Ups and Log-Ins" от Anthony T. Перевели в компании UXDepot специально для пользователей Хабрахабра с одобрением издания Smashing Magazine.

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



Форма авторизации на сайте Basecamp

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

Да, инструменты для создания CSS спрайтов существуют. Я даже сделал один такой сервис. Но они время от времени ломаются (как сейчас, мой). Но и командная многого стоит, и imagemagick. Давайте посмотрим, как мы можем создавать CSS спрайты только из командной строки.

Создание картинки

Начнем с того, что у нас есть список отдельных файлов:

$ ls

1.png  2.gif  dot.png  phoney.gif  tw.gif

• — 1.png
• — 2.gif
• — dot.png
• — phoney.gif
• — tw.gif

Сделаем из них спрайт:

$ convert *png *gif -append result/result-sprite.png

Да, это все. Смотрим результат.