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

Безусловно в этом списке вы обязательно найдёте уже знакомые расширения, однако огромный пласт полезных расширений всегда остаётся в стороне. Так что приготовьтесь установить ещё парочку расширений! :)

Встроенные инструменты разработки в Firefox

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

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



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

В то время как Ajax стал мейнстримом, пользовательские интерфейсы по-прежнему не могут похвастаться мгновенной отзывчивостью к действиям пользователя. Причина в том, что многие разработчики привыкли мыслить в терминологии «запрос/ответ» и думают, что UI должен работать параллельно с фронтэндом, дожидаясь ответа от сервера на каждый запрос. Но почему бы не обновлять интерфейс раньше, чем пришёл ответ?

Проблема довольно острая, потому что быстродействие является критически важной характеристикой UI. Например, по оценке Amazon, задержка загрузки страницы всего лишь в 0,1 секунды приводит к снижению оборота магазина на 1%. По оценке Google, задержка в 0,5 секунды уменьшает количество поисковых запросов на 20%.

Ruby/JavaScript-разработчик Алекс Маккоу (Alex MacCaw) из компании Twitter предлагает логичное решение проблемы: распространить принципы Ajax не только на фронтэнд, но и на пользовательский интерфейс. Он разработал соответствующий фремйворк для того, что называется AUI (асинхронный интерфейс пользователя).

В чём проблема?

Бывали ли у вас случаи, когда во время долгого заполнения нудной формы или написания красноречивого и пылкого комментария *внезапно* крашился браузер? Или вы закрывали вкладку, в которой работаете, или отключалось электропитание (а ИБП, по известному закону, нет)? Если нет — то вам повезло, но страховки от подобных происшествий ни у кого нет.

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

Однажды мне потребовался WYSIWYG редактор, я помнил как он выглядит, его функции, но не помнил названия. Через 45 минут я все же его нашел… Тогда я поставил перед собой задачу помочь многим, в том числе и себе: сделать сводный список всех чуть более известных WYSIWYG редакторов.

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



К таким библиотекам я отношу визуализацию графиков, чартов, графов, таблиц, отчетов, инфографик и т.д.

В свое время я написал несколько статей на тему визуализации данных в вебе (их можно поискать на хабре по ключевой фразе «Визуализация данных в вебе»).

Но с тех пор появилось много новых инструментов, мы получили HTML5 и т.д., поэтому вопрос опять стоит достаточно остро. Я решил собрать информацию о всех JavaScript инструментах, с помощью которых можно визуализировать данные в вебе (в первую очередь для себя, но потом решил, что, возможно, будет интересно это и другим). Я уже начал собирать информацию в виде списка инструментов с примерами в одном месте для того, чтобы не бегать по разным сайтам в поисках демок и описания функционала. Есть уже около 10 библиотек.

Сегодня я хочу развеять миф о том, что юзабилити – это дорого и сложно, а также представить вам новый сервис по краудсорсингу юзабилити-тестирования: usertest.ru.



Многие компании, проводящие юзабилити-тестирование, пишут о процессе, как о чем-то требующем особенных знаний, неподвластных простому смертному. Люди, проводящие тесты, называются не иначе как «эксперты». Много внимания уделяется специальному оборудованию (запись лица пользователя, отслеживание движения зрачков), как будто тестировать можно только в лабораториях. Неудивительно, что и ценники на подобные услуги измеряются в десятках и сотнях тысяч. Я уже чувствую, как в меня летят камни, грабли и факелы юзабилити-профессионалов, но если вы не Амазон, такие затраты вам ни к чему, даже несмотря на обоснование высоких цен через расчеты ROI (тут, тут или просто гугл). Почти такой же эффект можно получить с гораздо меньшим бюджетом.

Представьте, что вы, загрузив тележку супермаркета, очень спешите к кассе. Девушка-кассир вежливо спрашивает — а есть ли у вас накопительная карточка их магазина? Карточка есть, но… вы ее забыли в машине. В ответ вам предлагается — либо сходить за карточкой, либо оформить новую, заполнив анкету. А без этого ничего вам продавать не будут. Ваша реакция?

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



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

С давних пор я пользовался небольшой сетевой утилитой Internet Maniac (весит 100 кб). Чаще всего в ней я пользовался функцией «Connect», с помощью которой можно создать TCP-соединение с сервером (обычно с веб-сервером), отправить запрос и увидеть ответ сервера. Такое можно повторить и с помощью консольного telnet, но в Internet Maniac это делать удобнее. Другие функции программы: host lookup (определение IP и/или имена хоста), listen (простейший TCP-сервер), сканер портов, ping, whois, проверка почты и др.

Программа давно не обновляется, я пытался найти ей замену, но нормальную бесплатную так и не нашёл. В итоге решил сделать собственный более продвинутый аналог на Java.

Однажды поиски движка для интернет магазина завели меня на рессурс www.practicalecommerce.com
Где я прочел такую фразу: — Есть больше чем 350 движков онлайн-шоппинга. И каждую неделю мы обсуждаем один, беря интервью и у разработчика движка и у клиента…

Неужели так много? Подумал я. Да, на некоторых российских рессурсах зарегистрировано более 540 CMS. Но не все из них магазины, а большинство это самописные движки студий. А если брать только коробочные, то наберется всего около 30. Так где же сотни? И, что самое важное, не пропустил ли я самый лучший движок? Который где-то лежит, и ждет именно меня. И я решил найти эти самые сотни.
Достиг ли я своей цели, читайте дальше…

14 мая Microsoft обновили набор образов для тестирования сайтов в Internet Explorer.

Теперь под Windows XP остался только IE6.
IE7 есть под Windows Vista.
Также добавили образы Windows 7 c IE8 и IE9.

Разрешение экрана в наши дни колеблется от 320px (iPhone) до 2560px (большие мониторы) или даже выше. Пользователи больше не просматривают сайты только на настольных компьютерах. Теперь пользователи используют мобильные телефоны, небольшие ноутбуки, планшетные устройства, такие как iPad или Playbook для доступа в интернет. Поэтому, традиционный дизайн с фиксированной шириной больше не работает. Дизайн должен быть адаптивным. Структура должна автоматически изменяться с учетом всех разрешений дисплеев. Эта статья покажет вам как создавать кросс-браузерный адаптивный дизайн при помощи HTML5 и CSS3 media queries.

Представляю вашему вниманию перевод статьи под названием "Fundamental Guidelines Of E-Commerce Checkout Design" от Christian Holst. Перевели в компании UXDepot специально для пользователей Хабрахабра с одобрением издания Smashing Magazine.

Грустная статистика систем электронной коммерции — согласно последним исследованиям, по крайней мере 59,8% потенциальных покупателей покидают сайт на этапе оформления заказа и его оплаты (у разных исследований разные показатели — от 59,8% у MarketingSherpa до 83% у SeeWhy).

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

Что делать когда:

• Достался хард-кодный проект непокрытый тестами;
• код желает лучшего, а времени на рефакторинг нет;
• внесение правок в одном месте нарушает работу логики в другом;
• для покрытия *Unit тестами, проще переписать проект;
• бизнес логика размыта по коду и даже по шаблонам.

Забить и оправдываться, что такой код не должен жить?

С такими ситуациями очень часто сталкивался и меня это не устраивало. При поиске подходящего метода/инструмента тестирования я наткнулся на Selenium. И применяю его уже более 3-х лет.

В Киеве 9-го апреля прошла конференция DevPoint, посвященная web — разработке. Организатором данного мероприятия была компания Uniweb. В рамках ее, решил поделиться впечатлением про Selenium.

Все началось с того, что к существующему сайту понадобилось добавить русскую локализацию. После того как я изучал в течение нескольких дней эту тему и наступил множественные грабли, я в конце-концов получил рабочий сайт. А теперь хочу поделиться рецептом многоязычной локализации.
Проверено и отработано на PHP 5.3.3 (Linux)/PHP 5.3.1 (Windows) + Smarty 3.0.7. В данном случае для существующего сайта на английском создавалась русскоязычная версия.
Я не провожу ликбеза на тему «как это работает» (он есть на phpclub), но предлагаю простую инструкцию и описание возможных проблем, с которыми я сталкивался во время реализации.

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

Большинство примеров кода не привязаны к какому-либо конкретному языку программирования, но для наглядности я буду использовать PHP.

Итак, поехали.

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

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

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

Да, это он в 1998 году продал свою компанию Viaweb интернет-гиганту Yahoo, которая впоследствии назвала этот продукт Yahoo Store. Да, это он основал венчурный фонд Y Combinator. Да, это его журнал BusinessWeek включил в список 25 наиболее влиятельных людей в Сети за 2008.

Хотите читать по-настоящему интересные аналитические статьи? Вам однозначно к Полу. Я настоятельно рекомендую прочитать его заметки. Особенно если вы it-шник. Особенно если вы собираетесь открывать свой бизнес.

Добрый день.
Недавно одни из наших заказчиков выразили желание получать дополнительную информацию о посетителях своего сайта, конкретнее — о людях, заполнивших контактную форму. Это крупная европейская компания и им хотелось бы «фильтровать» своих потенциальных клиентов. Поясню на примере — допустим, решают они организовать выставку своего оборудования в Венгрии и им нужно решить, кто из венгров, оставлявших им свои контакты, скорее всего стоящий клиент, а кто «мимо проходил».
Основными показателями «надежности» клиента для нас стали: число посещений сайта, время проведенное на сайте, количество просмотренных страниц. Всю эту информацию мы получили из Google Analytics Cookies.

Что же из себя представляют печеньки от Google?

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

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