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

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

Говоря о шаблонных сайтах, мы нередко слышим, что такие проекты не живут дольше нескольких месяцев. Потенциальные клиенты, услышав слово «шаблонный», не хотят продолжать разговор и делают обиженные лица. Студии, которые делают «шаблонные» решения – часто лишены должного уважения в профессиональном сообществе. И, наконец, сайты, которые дешевле 20 000 руб часто называют, простите, «говносайтами». Вы тоже так думаете? Давайте разберемся насколько это действительно так и восстановим мировой баланс (если он существует).

В статье «12 тыс рублей за сайт. Есть ли бизнес за МКАДом?» я писал про наш подход к разработке сайтов на базе разработанной внутри компании технологии. На момент написания той статьи, мы выпускали «под ключ» 24 сайта в месяц. Это больше чем один сайт в день силами команды из 8 человек.

После рассказа на хабре о нашей технологии количество заявок на разработку сайтов выросло в несколько раз. Только за март 2012 было выставлено около 60-ти коммерческих предложений и, большая часть из них превращалась в договора.

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

В один прекрасный день я задался вопросом — как выводить деньги из Paypal в Россию? Есть фишка — прямой вывод денег из Paypal для тех, кто не имеет счёта в Америке закрыт, т.е. не имея bank account в Америке, вы никак не сможете вывести деньги напрямую.

Однако мне было действительно жалко терять большой процент на комиссиях обменников (бешеные накрутки), поэтому я искал выход.

Ниже привожу инструкцию из 8 пунктов.

Вчера, 29 апреля в Тель-Авиве прошла первая израильская Хабравстреча. Да, это свершилось! Мы вылезли из кустов, подвалов и серверных комнат, и попробовали познакомиться друг с другом. Изначально планировалось, что мероприятие пройдет в Holon Institute of Technology, но в процессе организации было решено перенести встречу в Co-Working офис TECHLOFT, что в сердце Тель Авива. Люди стали подтягиваться к 19:00. Поскольку большинство видели друг друга впервые, перед проведением докладов было выделено полчаса на знакомства и networking.

Несмотря на то, что на Хабре о своем желании участия в мероприятии заявило порядка 50 пользователей, на встрече собралось больше 100 человек. Для гостей любезно были предоставлены «погрызайки» и напитки, но не прошло и 20 минут, как совсем не жадный, а очень даже щедрый читатель Хабра — Кирилл (shtonibudtakoe) решил угостить всех пришедших пивом и другими алкогольными напитками. Кстати, несмотря на свою щедрость Кирилл до сих пор не может писать на Хабре, поэтому, если кто-то из вас располагает свободным инвайтом и хочет отблагодарить его, то сделайте доброе дело — подарите инвайт человеку.

Общей темой встречи было создание старт-апов. В общей сложности было проведено четыре доклада:
1. David Paluy aka dpaluy, поделился информацией о том как завоевать внимание со стороны бизнес-ангелов и VC. Что необходимо успеть сделать за 2 минуты встречи, которые даются начинающим предпринимателям. Как можно подготовиться к этому более основательно и кто в этом может помочь. Презентацию автора можно найти здесь.

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

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

Envision.js библиотека для создания быстрых динамических и интерактивных визуализаций данных на HTML5.


Возможности:

1) Визуализация в реальном времени.
2) Временная шкала
3) Визуализация валют ( как на яндексе прям )
4) Поддержка Ajax в интерактиве.
5) Можно побаловаться фракталами.

Конечно вы видели этот эффект, когда вставляешь в фейсбуке или вконтакте ссылку, и в посте тут же начинает подгружаться какой-то контент с сайта, на который ведет ссылка. И я видел, но даже не представлял, насколько это легко можно сделать с oEmbed'ом.

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

Каждый из нас, хоть раз при разработке мобильных версий сайта, задумывался о том, как можно ускорить процесс разработки, дебаггинга и быстрого просмотра изменений. Кто-то поднимал для этого локальный сервер, кто-то ставил эмуляторы, чтобы лишний раз не тянуться к телефону для просмотра, кто-то делал и более костыльные решения. Ребята из Adobe Lab позаботились о нас и выпустили сегодня прекрасное приложения для этих нужд. Барабанная дробь, встречайте — Adobe Shadow!

Adobe Shadow — это совершенно новый инструмент помогающий front-end разработчикам и дизайнерам максимально увеличить эффективность и скорость разработки мобильных версий сайтов за счет оптимизации процесса просмотра изменений и дебаггинга на мобильных устройствах. Shadow работает независимо от других продуктов от Adobe и пока совершенно бесплатен!

Здравствуйте, уважаемое хабрасообщество! Как-то раз был на хабре интересный материал про генерацию doc-файлов средствами PHP. К сожалению, больше на хабре ничего на эту тему я не нашел. На тот момент я разработал собственное решение.
Оно состояло в том, чтобы генерировать .docx файлы. Аргументы были следующие:

• На дворе 2012 год, а этот формат появился аж в 2007-м
• Генерить .docx несомненно проще, чем .doc, поскольку .docx = .zip, а .doc — бинарный файл
• Костыль с генерацией HTML и переименованием в doc не подойдет для более-менее уважающих себя проектов
• С помощью приведенного ниже метода мы с легкостью сгенерируем Excel, и вообще всё что угодно.

Подробности под катом.

Веб-дизайнеры любят стилизировать стандартные элементы форм. Потом эти элементы приходиться реализовывать нам — верстальщикам.

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

Естественно, после всего этого я решил изобрести свой велосипед.

Пример разработан без дополнительных картинок с помощью CSS3. Демо-страница с песочницей здесь.

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

1. Отображайте нажатия кнопок и кнопкоподобных ссылок

Мой излюбленный совет. Когда стиль кнопки задаётся в CSS, или когда для отображения необычной кнопки используется рисунок (либо как фон, либо как элемент <img />), то кнопка не реагирует на нажатие во всех или в некоторых браузерах (зависит от ситуации). Вот какой простой уловкою вы можете дать знать посетителю сайта, что он и впрямь нажал на нечто нажимаемое:

.mybutton:active {
   position: relative;
   top: 1px;
   left: 1px;
}

Этим кодом кнопка смещается на 1 пиксел направо и на 1 пиксел вниз, когда её нажимают. Испробуйте: выглядит весьма убедительно.

Есть другие, не менее быстрые варианты: придать границе свойство inset, указать свойству text-indent значение 1px, изменить направление градиентного фона (что можно сделать быстро, если для этого не придётся прибегнуть ко графическому редактору, то есть если где-то ещё на сайте используется готовый перевёрнутый градиент), или комбинация нескольких из них.

2. Плавные переходы (CSS3 transitions)

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

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

Данный обзор инструментов идет в продолжение первых двух статей (см часть 1 и часть 2)

Сейчас мы разберем такие важные вопросы как:

• Присвоение региона сайту
• Формирование особых сниппетов
• Обзор самых важных слов сайта
• Анализ мета-описаний страниц сайта
• Проблемы индексации

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

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

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

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

Вы 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 на сайте.

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

Статья затронет весь цикл разработки приложения. Вместе мы напишем простенькую игру “Крестики-Нолики” с одним экраном (в ОС Android это называется Activity).

Отсутствие опыта разработки на языке Java не должно стать препятствием в освоении Android. Так, в примерах не будут использоваться специфичные для Java конструкции (или они будет минимизированы на столько, на сколько это возможно). Если Вы пишете, например, на PHP и знакомы с основополагающими принципами в разработке ПО, эта статья будет вам наиболее полезна. В свою очередь так как, я не являюсь экспертом по разработке на Java, можно предположить, что исходный код не претендует на лейбл “лучшие практики разработки на Java”.

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

Перевод статьи молодого греческого программиста «Why I bill hourly»

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

Я люблю сравнивать разработку программного обеспечения с возведением здания, начиная с пустого земельного участка. Процесс выглядит примерно так:

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

Любой инженер-строитель шарахнется от такого предложения, программисты же в своей жажде заключить сделку прикинут смету, удвоят ее, добавят 30% и будут надеяться на лучшее. Как отвечаю на такой вопрос я?

В догонку к посту про макет бизнес модели, не менее полезный «самый короткий в мире маркетинговый план» (так его назвал автор, Келли Одел).

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

Планирование, постановка задачи, контроль — вот одни из важных принципов на которых строится управление проектами и web проектами в частности. А в процессе руководства удаленными командами и организации взаимодействия между ними, без использования систем постановки и контроля задач не обойтись.
В данном посте я хочу рассказать о самой популярной системе багтрекинга BugZilla и успешном ее внедрении и эксплуатации в веб-студии «Твинс». Почему-то на хабре БагЗиллу всегда упоминают вскольз. Но никто и никогда подробно не ней не останавливался. А зря…

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