Плагин Chosen создан для оформления красивых и удобных выпадающих списков с помощью jQuery и Prototype. Для установки плагина достаточно просто скачать файлы и прописать одну строчку:

$(".chzn-select").chosen()

(версия для jQuery)

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

Поскольку Chosen заменяет стандартный элемент HTML, то не нужно беспокоиться, как он работает с браузерами без поддержки JavaScript. Также не нужно ничего менять в бэкенде: формы сабмиттятся как обычно, изменения только в пользовательском интерфейсе.

Некоторые форки:
Chosen для MooTools
Модуль Chosen для Drupal 7

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

Создатели проекта The Noun Project поставили целью собрать пиктограммы для всех объектов в мире. Коллекцию по мере сил пополняют десятки дизайнеров из разных стран. Все иконки публикуются в формате SVG, под лицензией Creative Commons Attribution 3.0 (CC BY) или Public Domain, разбиты на тематические категории, есть поиск на русском языке.

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

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

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

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

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

Почему это глупо

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



Это скриншот из презентации «Beyond the mobile web by yiibu» (очень рекомендую).

Во-вторых, если вы не facebook или yandex, скорее всего, вы не потянете создание и поддержку разных версий сайта для каждого устройства. Да и это не имеет особого смысла. Потому что ситуация становится похожа на реалии пятнадцатилетней давности. Тогда делали сайт «под браузер», а сейчас автор предлагает делать сайт «под устройство».

Как сделать один сайт для всех устройств

По мотивам топика Chosen: сделай выпадающие списки более дружественными.

Довольно симпатичный виджет, иногда даже может быть полезен (допустим когда есть определенные требования к дизайну). Но в данный момент виджет не позволят добавлять позиции динамически, что возмутило товарища alexsrdk, да и меня тоже :) Сейчас попробуем это дело исправить.

В минувшую субботу я имел честь читать доклад о MVVM и KnockoutJS на .NET Saturday в Днепорпетровске.
Доклад был достаточно тепло встречен публикой и у многих появились интересные вопросы,
которые не были раскрыты во время самого доклада.
Собственно говоря, я решил написать публичные ответы на некоторые из них на Хабре.

Сегодня я отвечу на вопрос о template-binding. «Как быть, если мне надо отобразить не все записи, а только подходящие определённым условиям».

Ответ находится под хабракатом.

В продолжение темы о красивой и удобной JS визуализации (http://habrahabr.ru/blogs/javascript/124899/) хочу рассказать вам о WYSIWYG редакторе, на который сегодня случайно наткнулся.

Вы наверное часто используете различные WYSIWYG редакторы в ваших проектах. Я их тоже часто использую, так уж получается, что они очень нравятся секретаршам и т.д. нашим пользователям.

Таких редакторов существуют десятки, но все они мне почему-то не нравилисись: то выглядит уж очень топорно, то работает совершенно криво. В конце концов я остановился на TinyMCE. Он хоть и ужасен на вид, но рабоет стабильно.

И вот сегодня я совершенно случано наткнулся на редактор, который мне полностью подходит:

• работает стабильно
• выглядит очень стильно
• написан на jQuery

Имя этому чуду – Imperavi.
Попробуйте сами и думаю, что вам понравится.

Скриншот:


UPD
Более новая версия редактора: http://imperavi.ru/redactor/.

Однажды, nickivanov нарисовал миниатюры для кучи разных флагов и выложил их в свободный доступ. А недавно, artpolikarpov собрал их в один спрайт и написал к нему удобный css, который позволяет легко отобразить любой флаг просто указанием нужного класса.

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

И был бы этот топик топиком-ссылкой, да по необъяснимым причинам не разрешает Хабр в топиках-ссылках указывать авторов, заслуживающих похвал. Так что вот они ссылки:
Описание: artpolikarpov.ru/projects/flags
Архив с флагами: artpolikarpov.ru/projects/flags/flags.zip

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

По-умолчанию эта функция в Google Analytics отключена. Для ее включения достаточно добавить одну строчку в код GA. Это вызов функции _trackPageLoadTime();, который нужно разместить после функции _trackPageview();

Вариант для асинхронного кода GA:
_gaq.push(['_trackPageview']);
_gaq.push(['_trackPageLoadTime']);

Вариант для стандартного кода GA:
pageTracker._trackPageview();
pageTracker._trackPageLoadTime();

После обновления кода отслеживания GA данные будут поступать в отчет «Содержание -> Скорость загрузки сайта». (! Данный отчет есть только в новом интерфейсе Google Analytics!) Отчет содержит список страниц сайта, отсортированный по среднему времени загрузки в секундах от большего к меньшему.

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

Более подробно об этой функции можно почитать в справке Google Analytics: http://www.google.com/support/analyticshelp/bin/answer.py?hlrm=en&answer=1205784&topic=112071

Summary: Возникла задача — создать высоконагруженное веб-приложение при крайне ограниченных ресурсах сервера.
В качестве хранилища данных был выбран Fusion Tables от Google.
Что описано в статье: работа с Fusion Tables из
а) Javascript — только выборка данных;
б) PHP (Zend Framework) — выборка, добавление и обновление;
в) пользовательский интерфейс от Google — создание таблиц и представлений.
Чего нет в статье:
а) нагрузочного тестирования;
б) подробного описания приложения — упор делается именно на использование Fusion Tables в своих PHP+Js проектах.

У компании Google есть большое количество различных продуктов. — без банальностей.
Только ленивый веб-программист не использовал в своих проектах карты от Google. Просто вставляется, красиво выглядит, не грузит собственный сервер, удобный, хорошо документированный (по крайней мере для v.2) API, высокая по крайней мере, не низкая скорость работы — плюсы есть. «Возможно, FT тоже будет приятным» — подумал я. Правда, не проверял. И вот результат.

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

Ниже список встретившихся нам особенностей и способы их разрешения (как то упорядочить их мне не удалось, поэтому всё идет единым списком)

Прошло несколько дней с публикации анонса о появлении на свет jQuickForm (если в двух словах, то jQuickForm это сборка jQuery + HTML_QuickForm2).
Была получено масса положительных отзывов, в т.ч. в личку, много посетителей сайта проекта сказали «LikeIt», а это говорит о том, работа нужная и своевременная.
Итак, сегодня я хочу сказать о том, что на данный момент практически все явные и потайные возможности jQuickForm описаны, а это ни много, ни мало:

Элементы

InputText, InputPassword, Date (выбор даты, состоящий из нескольких элементов типа select), DatePicker (jQueryUI), Slider (jQueryUI — «ползунок»), SliderRange (jQueryUI — диапазон значений), Select, Buttons, Textarea, Page (элемент для построения многостраничного мастера), Static (элемент формы для вставки произвольного HTML), jWysiwyg (простейший редактор), Autocomplete One Array (автокомплит с единственным значением и инициализацией при помощи передачи массива), Autocomplete One Remote (то же самое, но источник — аякс-скрипт), Autocomplete Multiple Array (автокомплит с множеством значений через запятую, используется, например, для формирования списка веб2.0 меток, источник — массив), Autocomplete Multiple Remote (тоже самое с удаленным источником), File Upload (обычный элемент загрузки файлов), и, по заявкам телезрителей — File MultiUpload

Привет хабр, думаю у некоторых из вас возникала потребность стянуть что нибудь нужное с какова нибудь сайта. Но писать тонны функций, чтобы вытащить фразу, это очень муторно, долго и не продуктивно.
Представляю вашему вниманию phpQuery. Это php вариант известного javascript фраемворка — jQuery.
Автор постарался на славу и портировал почти всё что нам нужно.

• Selectors
• Attributes
  
• Traversing
  
• Manipulation
  
• Ajax
• Events
• Utilities
• Plugin ports

Давайте посмотрим что она умеет.

Чтобы ускорить и стандартизировать процесс расчета стоимости разработки сайтов, мы, несколько лет назад, внедрили простую excel-табличку, которой пользуемся до сих пор. Возможно, она и вам послужит на пользу. Вот краткое описание процесса расчета:

Любой проект по разработке — это время команды, которое мы продаем. Значит, менеджеру, который делает предложение клиенту, нужно получить часы с разбивкой по видам деятельности и этапам, потом перевести их в деньги. Для этого мы делаем табличку (готовый пример ниже), в которой:

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

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

Я рассмотрю простой пример, как можно достичь эмуляции многопоточности в PHP.

Рекомендация первая: забудьте про блочную верстку. Весь лэйаут должен быть на таблицах. При этом, без крайней необходимости — их тоже лучше не использовать. Также следует выкинуть из головы представления о семантике, сокращенных css-правилах, валидации, плавающих блоках — и прочее. Самый распространенный в РФ почтовый сервис на данный момент (mail.ru) вообще не понимает стили (css). Любые тэги/атрибуты style заменяются на xstyle и не работают. Вообще все.

Так что, фактически, при вёрстке html для почтовой рассылки надо мысленно переместиться в 90-ые годы прошлого века и смело использовать все распространенные приёмы того времени.

Для тех, кто с ними не знаком (как я был) — напомню:

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



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

#1: Текст главной страницы

Надеюсь, не нужно объяснять, насколько важен для web-сайта хороший текст. Особенно, если сайт коммерческий. Но, в то же время, тексты 90% сайтов web-студий СНГ бесполезны. Почему я так считаю?

Давайте посмотрим на вопрос со стороны заказчика и будем предельно откровенны. Сколько студий «уже 10 лет на рынке web-разработки»? Сотни. В скольких студиях «работают только квалифицированные специалисты»? Во всех. У какой студии «самая качественная и расширяемая CMS»? У каждой.

Это не попытка создать список всех существующих инструментов для CSS разработки. Только некоторые, наиболее полезные были отобраны и размещены в соответствующих категориях.


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

Вторая версия статьи, расширенная и дополненая.

Большая часть готовилась для моего выступления на «РИТ: Клиентские технологии», куда я, к сожалению, не доехал.

 



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

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