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

Паттерны проектирования

Википедия — там, в принципе, на хорошем уровне все описано и приведены примеры на разных языках.
Базовая книга – классика:
«Приемы объектно-ориентированного проектирования. Паттерны проектирования» — читал книгу давно, и раза 3. Вам того же советую. Даст возможность понимать большое количество терминов, произносимых другими разработчиками.

Рефакторинг

«Рефакторинг. Улучшение существующего кода» — вероятно, эта книга сделала революцию в написании кода. Читается быстро и интересно. Методы рефакторинга должны отложиться в голове до конца жизни. Ваш код отныне будет лучше. В книге есть упоминание про юнит тестинг.

Вот решил поделиться некоторым материалом, который сам составил в ходе экспресс-изучения SEO оптимизации и раскрутки сайтов. Просто попался видео-курс Юсуфа Губайдуллина, который продает его на promoguide.ru и решил воспользоваться случаем. Честно говоря, курс не понравился — нудно как-то рассказывается. Оценил содержание на 4 с минусом, а изложение — на 2 с плюсом. Само SEO весьма скучная вещь, но нужная, поэтому составил небольшую памятку для себя — чтобы не держать это в голове и легко вспомнить когда понадобится. Здесь два файла: первый — просто картинка, второй — в формате freemind, для тех, кто желает что-то для себя добавить.

Первым русским сайтом, который полностью интегрировался с Google Social Graph, стал www.bestpersons.ru.

Дебаггинг JS в Браузерах
Opera

• http://dev.opera.com/articles/view/opera-developer-tools/
• http://operawiki.info/WebDevToolbar

---

Mozilla(/Firefox)

• Дебаггер всея веб-программерского сообщества, лучший из всех http://www.getfirebug.com/
• https://addons.mozilla.org/en-US/firefox/addon/60
• http://www.mozilla.org/projects/venkman/

---

InternetExplorer

• IEDevToolBar неплох, если надо диагностировать баги в IE. ссылка на сайте MS. Если будет интерес, залью на файлопомойку и будет прямая ссылка.
• http://www.debugbar.com/

---

Safari

• http://webkit.org/blog/?p=41
• http://hohle.net/scrap_post.php?post=221

Из моего блога(пиар такой, если кто не понял)
Сорц — FAQ по extjs

Вы PM. Как узнать – готова ли вёрстка к реальному использованию?
Вы заказчик. Как убедиться, что работа выполнена качественно?
Как оценить качество вёрстки?

Когда я стал тим-лидом, а позже PM, передо мной стала задача проверять вёрстку наших проектов. Нужно было выработать формальные, легкопроверяемые критерии, соответствие кода которым, должно было давать некую гарантию, что не будет факапов и ни клиент, ни программеры не сказажут потом “WTF?”.

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

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

Итак что же это за список?

Краткая версия теперь доступна на html5checklist.com (github), где можно вносить pull-request'ы.

История обновлений:

• 2015/08/11: Актуализировал рекомендации по оптимизации скорости загрузки. Добавил требование поддержки Retina. Дополнил «19. Мелочи» требованием что изображения должны масштабироваться в зависимости от размера окна.
• 2015/08/10: актуализирован список исключений для CSSLint
• 2015/07/29: актуализирован пункт №13 «плохо»/«хорошо»
• 2015/04/08: добавлено требование использования препроцессоров и рекомендация использования систем сборки
• 2013/04/25: добавлены анализаторами качества кода: CSSLint и JSHint, указан сайт подбора css font stack (спасибо @fliptheweb), мелкие уточнения (работу интерактивных элементов страницы, что не пропадает фон на высоких разрешениях, не должно быть пустых презентационных блоков, при проверках контента — пробовать удалять заголовки, менять местами блоки)
• 2013/04/24: добавил пункт об минимизации каскада (БЭМ-техники, MCSS, SMACSS), необходимости вписывания в экран моб. устройства, заменил ссылку на проверочный текст отображения стандартного html на код с normalize.css, поправил пример где в рекомендации встречался длинный каскад, упомянул про Opera на Presto и новый уровень семантики — в именах классов BEM.
• 2012/04/12: отсортировал пункты проверки в порядке важности, выделил главные, дополнил статью подробностями
• 2011/12/07: дополнил согласно доклада на WSD Минск'2011.
• 2011/07/19: добавлено про повышение надёжности вёрстки благодаря html5-тэгам, про необходимость favicon/apple-touch-icon, отсутствие багов при ресайзе textarea
• 2011/06/15: добавил пояснения какие ошибки валидации допустимы, рассказал про отсутствие официальной кнопки «HTML5 Valid» и про официальное лого HTML5 на сайте.

Предисловие

Загрузка файлов всегда занимала особое место в веб-разработке.
О трудности оформления стилями <input type=file/> уже сказано немало, почитать об этом можно, например, по ссылкам раз, два, три, четыре, пять, шесть.
Но и сам процесс загрузки файлов нетривиален, есть много разных способов – и ни одного идеального.

Я уже писал о внедрении на нашем проекте Файлы@Mail.Ru silverlight-загрузчика полгода назад. На тот момент у нас подерживались iframe, flash, silverlight и обычная загрузка файлов. Но прогресс не стоит на месте, и вот уже последние бета-версии всеми горячо любимых браузеров в полной мере поддерживают html5 FileAPI (справедливости ради, стоит заметить, что, как обычно, некоторые поддерживают своеобразно, но об этом — ниже).

Пока писалась статья, Chrome 9 был объявлен stable и форсировано обновился уже на 75% установок 8 версии. Так, что празднуем поддержку File API первым стабильным браузером, ура!

Мы подумали, что не использовать такую технологию было бы преступлением против юзеров пользователей.
Подумали — и внедрили html5 загрузку в дополнение к уже существующим вариантам.
В итоге наши пользователи получили множество плюшек:
— прозрачная дозагрузка после обрыва соединения (и даже рестарта браузера!);
— очередь загрузки;
— прогресс-бар (пользователи MacOS и Safari наконец могут видеть прогресс без всяких инородных плагинов), возможность удаления файлов из очереди, если передумал.

Я продолжаю сериал, начатый постом «Экстремальный аджайл — танцуют все!», посвященный распространению полезных практик из гибких методологий разработки на всех, кто вовлечён в проект. Ведь это несправедливо, когда отличными практиками пользуются только разработчики. Вашему вниманию предлагается видео доклада с рассказом о том, как мы решаем проблемы недостатка ресурсов и непрогнозируемых сроков, что мы делаем, когда не знаем с чего начать разработку и каким будет следующий шаг. Кроме того раз и навсегда решается вопрос необходимости тщательного стратегического планирования :) Как всегда, все это не теоретизирование и пересказ книжек и статей, а реальный опыт работы над реальным проектом. В общем этот пост писался с мыслью: «Давайте поговорим о процессе разработки и проблемах, связанных с ним. Долой маркетинговый буллшит и пустые теоритезирования!».

Недавно мой знакомый попросил меня ответить на несколько вопросов по продвижению приложений для Android. Мы договорлись, что я напишу пост. За последний год у меня сложилось определенное впечатление о работе на рынке Android Market. С удовольствием поделюсь своим мнением. Надеюсь, что мой опыт будет полезен разработчикам. Буду рад, если пост породит конструктивную дискуссию.

Я думаю некоторые из веб-разработчиков сталкивались с задачей создания сайтов и сервисов под мобильные платформы. И проблема возникает в том момент, когда надо протестировать свое творение. И если найти тот или иной девайс все же не проблема, то протестировать на максимальном количеством устройств достаточно сложно. И тут на помощь приходят ОНИ — эмуляторы. В данном посте я рассмотрю вопросы установки и запуска эмуляторов следующих мобильных устройств, с целью запуска на них нужного сервиса: Win Mobile, iPhone, BlackBerry, Android, Symbian^3.

Предлагаю читателям «Хабрахабра» перевод статьи «Python Tips, Tricks, and Hacks». Статья будет полезна на начальном и среднем этапах изучения Python.

Хотите писать более лаконичный и читаемый код? Вы хотите уместить как можно больше смысла в одно выражение? Считаете, что прочитать о нескольких уловках лучше, чем провести остаток жизни за чтением документации? Вы обратились по адресу. Мы начнем с маленьких уловок, которые вы уже могли встретить, если немного работали с Python. Но я обещаю, что ближе к концу статьи вас ожидает больше безумных вещей.

Содержание

1. Маленькие уловки. Четыре типа кавычек. Правдивость различных объектов. Проверка на вхождение подстроки. Красивый вывод списка. Целочисленное деление и деление с плавающей точкой. Лямбда-функции.
2. Списки. Генераторы списков и выражения-генераторы.

О визуализация графов в вебе говорили здесь, навеяно этой статьей.

Под катом обзор JavaScript библиотек для рисования графов, диаграмм и прочей красоты.

Современные проекты всё больше и больше персонализируются. Один из последних проектов предполагал постоянное присутствие пользователя на сайте. Пользователь является диспетчером и отслеживает появление новых заказов, участвует в аукционах итп. Помимо уже стандартных SMS уведомлений итп, хотелось сделать звук, т.к. пользователи действительно постоянно находятся на проекте. Самым простым способом показался флеш. Флеш уже есть почти у всех, все смотрят ютуб, играют в фермера и так далее. И не смотря на мои антифлешевские взгляды, решил что для проигрывания звука флеш подходит лучше всего.
Однако при попытке написать флешку для проигрывания звуков я вдруг вспомнил, что не работал с флешем уже лет 5 =( и вместо того, чтобы написать свой компонент, стал искать готовые…

Люди не очень любят регистрироваться. Это же нужно (в общем случае) придумать логин и пароль, зайти в свою почту, дождаться письма, открыть его, перейти по ссылке активации аккаунта, а потом еще этот логин с паролем не забыть. Но ведь уже давно есть способ, с помощью которого все эти шаги не нужны. Более того, не нужно вообще ничего вводить с клавиатуры, 2 щелчка мышью и все, человек зарегистрирован.

вот такой странный, но ДЕЙСТВУЮЩИЙ способ :)

function clearFileInputField(Id) {
  document.getElementById(Id).innerHTML = document.getElementById(Id).innerHTML;
}

* This source code was highlighted with Source Code Highlighter.

пример работы — designformasters.info/lab/clear-file-input/index.html (спасибо Jenek )

Хочу поделиться одной полезной утилиткой, написанной на pure JavaScript, — URL. По сути это небольшой парсер URL'ов, работающий почти как window.location, но не перезагружающий страницу браузера при манипуляциях.

А заодно скажу пару слов про getters & setters в JavaScript.

UPD1: по просьбам трудящихся, вынесу сюда примеры:

// Пусть текущий URL = 'http://my.site.com/somepath/'
var u = new URL('relative/path/index.html')
u.href // my.site.com/somepath/relative/path/index.html
u.href = '/absolute/path.php?a=8#some-hash'
u.href // my.site.com/absolute/path.php?a=8#some-hash
u.hash // #some-hash
u.protocol = 'https:'
u.href // my.site.com/absolute/path.php?a=8#some-hash
u.host = 'another.site.com:8080'
u.href // another.site.com:8080/absolute/path.php?a=8#some-hash
u.port // 8080
// и так далее, и тому подобное

* This source code was highlighted with Source Code Highlighter.

Работает в FF3+ (может и в 2+, не пробовал) и в IE6+ ( и это — моё ноу-хау :-) ).
Разобрана в статье также полностью кросс-браузерная реализация, но в использовании — немного более громоздкая:

// Пусть текущий URL = 'http://my.site.com/somepath/'
var u = new URL('relative/path/index.html')
u.href() // my.site.com/somepath/relative/path/index.html
u.href('/absolute/path.php?a=8#some-hash')
u.href() // my.site.com/absolute/path.php?a=8#some-hash
// и т.д.

* This source code was highlighted with Source Code Highlighter.

Да, и я привожу свой листинг полностью, извиняйте, так надо.

Прочитав недавний топик про использование C++ и fastcgi, я наконец-то решился опубликовать свои наработки на тему Web и C++.

Существующие решения, с моей точки зрения, реализуют простые вещи сложным образом. Моей целью было устранить это досадное недоразумение, написав библиотеку, которая позволит писать эффективные кросс-платформенные веб-приложения на С++ так же легко и быстро, как и на PHP, Python, Java, и т.д.

Всем привет!

Очень часто слышу вопрос «где в интернете взять справочник по javascript»?

Большинство справочников содержат устаревшую информацию и практики программирования.
До текущего момента самое современное, чем можно было пользоваться — MDC/MSDN. А там многое только на английском.

Хочу представить новый, лично мною переведенный/написанный справочник: http://javascript.ru/manual.

Пока что основной javascript, в дальнейшем постараюсь расширить и лучше
завязать с другими тематическими статьями сайта.
Буду рад, если пригодиться.

P.S. Пожалуйста, пишите комментарии, давайте на него ссылки и рекомендуйте. Будем улучшать и дальше.

P.P.S. Оффлайн-вариант справочника также есть, в формате CHM.

Feedback > 2.0 интересный аскетичный по дизайну виджет и необычный в реализации. В нем вы найдете только самые нужные функции для сбора отзывов и предложений от посетителей вашего сайта. Ничего лишнего – все только по делу.
Рализация данного виджета по сути уникальна так как он полностью разработан на Javascript, включая работу с базой данных. Виджет обратной связи состоит из двух частей:

• Виджет обратной связи (отображается на вашем сайте)
• Виджет админ (панель администрирования)

Весь код виджета и панели администрирования предоставляется под opensource лицензией LGPL3.

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

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

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

В статье «Как учить английские слова» возникло очень оживленное обсуждение, в котором читатели привели ряд ссылок на интересные ресурсы. Теперь все они собранны в одном месте.