• Чек-лист вёрстки. Что можно отдавать клиенту, а что надо переделывать

      Идеальная вёрсткаВы 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 на сайте.


      Далее с примерами - как проверить html, даже если вы ничего не понимаете в вёрстке.
    • Как сверстать веб-страницу. Часть 1

      Уважаемый читатель, этой статьей я открываю цикл статей, посвященных вёрстке.
      В первой части будет описано, как это сделать с помощью стандартных средств на чистом HTML и CSS. В последующих частях рассмотрим как сделать тоже самое, но с помощью современных фреймворков и CMS.

      Часть 1. Верстка стандартными средствами


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

      Итак, давайте приступим. В качестве нашего подопытного мы возьмем бесплатный psd шаблон Corporate Blue от студии Pcklaboratory.
      Читать дальше →
    • Разработка приложений в VK mini apps

      • Tutorial
      Почему надо смотреть в сторону разработки приложений для работы в VK? У меня за спиной много лет фронтенд-разработки для массовых сервисов, и то, что сейчас предлагает разработчику социальная сеть «ВКонтакте» — быстрый и эффективный способ построить еще один канал коммуникации с действительно большой аудиторией. Ниже расскажу, в чем идея VK mini apps, какие технологии использовать при разработке приложения и на что стоит обратить внимание.

      image

      Первоначальная публикация статьи в блоге Mail.ru Cloud Solutions: https://mcs.mail.ru/blog/razrabotka-prilozhenij-v-vk-mini-apps

      Читать дальше →
    • Golden canon grid: страшилка для фронтендеров


        Большая часть людей, так или иначе причастных к верстке сайтов, проходят через… Назовем это “путь бутстрапа”. Это такая философская позиция, когда у тебя есть 12 колонок и ничего больше. Ты берешь элементы, кладешь их в определенные колонки и все у тебя хорошо. Можно выключить мозг, погрузиться в нирвану и руки будут сами расставлять элементы. Красота… Но тут появляется современный дизайнер, который рисует что-то, что ну совсем не сходится с этой замечательной концепцией. Колонок явно больше, они все разной ширины, да еще и по высоте что-то нужно выравнивать. Жуть. А встречается такое все чаще, особенно если сделать шаг в сторону от магазинов или админок. Сегодня мы поговорим о том, что же это за чудо такое там используется и как его можно готовить в современном CSS. Кода будет совсем немного, в основном – размышления и картинки.

        Читать дальше →
      • Как выстроить процессы и перестать издеваться над командой

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

          Недавно я выступал на конференции Saint TeamLead Conf 2019, в докладе я рассказал о том, как смог найти ряд проблем в рабочем процессе и потом постепенно поборол их. Здесь я постараюсь описать наиболее ценные практики, которые мне помогли не только наладить рабочий процесс, но и перестать издеваться над разработчиками. У сотрудников изменилось отношение к компании в целом и рабочему процессу.
          Читать дальше →
        • Неформальные отношения в команде: зачем и как ими управлять



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

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

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

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

            В последние десять лет я занимаюсь тем, что руковожу командами разработки, семь из них — в Badoo. Эта статья написана по мотивам моего  выступления на Saint TeamLead Conf 2019: в ней я попытаюсь объяснить, как и зачем нужно работать над неформальными отношениями в коллективе. 
            Читать дальше →
          • Пуля

              Пуля – это такая система оплаты труда. Ничего сверхъестественного, идея лежит на поверхности, результаты не заставляют себя долго ждать. Название придумал не я, а собственник компании, где эта система внедрялась. Вот прям так выслушал аргументы и особенности, и сказал: «Это – Пуля!».

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

              Принцип Пули очень прост: платить людям долю от прибыли. Не всем, а только тем, кто стоит в цепочке создания ценности. Банально, просто и скучно. Вся фишка не в самой системе, не в дележе прибыли, а в… Ну, сами узнаете.

              На высшую истину не претендую. Название «Пуля» — не претензия на оригинальность или уникальность. Просто так удобнее обсуждать, когда одним словом называется. Внедрение Пули делал сам и видел, как это делают другие. Ничего не продаю. Просто рассказываю. Без программиста во внедрении не обойтись. Поэтому, как говорится, извините, что обращаюсь к вам.
              Читать дальше →
            • Как проходят алгоритмические секции на собеседованиях в Яндекс

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


                Так что мы подготовили для вас следующие материалы:


                • Специальный контест, содержащий задачи, похожие на те, что мы даём на интервью.
                • Этот пост. В нём рассказывается, почему нужно проводить такие секции, а также разбираются все задачи контеста.
                • Два видео, в которых разбираются задачи из контеста: в первом — задача попроще, во втором — две задачи посложнее. Из этих видео вы узнаете о типичных ошибках, допускаемых и при прохождении алгоритмических секций, и при написании продакшен-кода.


                Читать дальше →
              • Шпаргалка по аббревиатурам C++ и не только. Часть 2: «и не только»

                • Tutorial
                Это вторая и последняя часть моей шпаргалки по аббревиатурам, которые стоит знать C++ разработчику. С++ здесь упомянут только потому, что шпаргалку я составил в первую очередь для себя, а я как раз-таки C++ разработчик.

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


                Читать дальше →
                • +14
                • 4.7k
                • 2
              • Видя деньги

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

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

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

                  Итак, концепция номер один: видя деньги.
                  Читать дальше →
                • Как писать меньше кода и получать больше толку

                  • Translation


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

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

                  И вдобавок ко всей этой чехарде, код пишется программистами. Чем его больше, тем больше требуется программистов. С увеличением числа программистов растут и затраты на коммуникацию между ними, что еще дополнительно вносит лепту в копилку расходов на разработку и сопровождение кода.
                  Читать дальше →
                  • +19
                  • 11.1k
                  • 6
                • Кругом враги. Как параноику планировать свою работу

                    Казалось бы, что сложного может быть в планировании своей работы? Берёшь листок бумаги, записываешь на нём задачи, делаешь — всё просто. Но в реальности планирование почему-то не работает «из коробки».



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

                    Сейчас расскажу, почему так происходит. А главное — какие из «250 способов все успевать» работают и за счет каких механизмов нашего мозга.
                    Читать дальше →
                  • Неприятные ошибки при написании юнит тестов

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

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

                      Читать дальше →
                    • Лечение «механического» Scrum. Часть 1. Работа PO

                        Я больше 10 лет работаю с / в / для agile в сфере web-разработки. Из них больше всего пришлось иметь дело с самым популярным agile фреймворком — scrum (по данным VersionOne). Хочу поделиться с вами накопленными наблюдениями и выводами.


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


                        • До scrum: «разработка» как младенец — она целеустремленна, но не умеет нормально ходить, а очень хочет научиться, чтобы добираться до цели.
                        • Внедрение: приходит учитель (scrum тренинги, курсы, agile coach и т.п.) и показывает, как ходить. Малыш счастлив, он двигается шагами! Топ-топ-топ. У нас спринты — мы ходим!
                        • После внедрения: терпеливые стейкхолдеры говорят: «Окей, погнали к цели», на что получают «не давите на команду, мы ходим!». Разработка выписывает интересные траектории и получает удовольствие от процесса, но цель забыта.
                        • Scrum-но: дальше пилюля правды от бизнеса, scrum «мутирует» и позволяет бизнесу получать какой-никакой продукт от разработки. И, к сожалению, формально ставится галочка «мы работаем по scrum», а реальный потенциал команды разработки так и не раскрыт, да и кругом говорят «scrum ненастоящий».


                        Читать дальше →
                      • Оценка требований в Scrum

                          Я расскажу о оценке работ(estimation) в скрам. Её рекомендуется проводить дважды — сначала в story points, на уровне user stories, а потом — в часах, на уровне заданий в текущей итерации. Так же я попытаюсь объяснить, почему это делается дважды.
                          Читать дальше →
                        • 11 шагов к хорошему интернет-магазину. Доставка

                            Почти год назад я начал публиковать серию статей о том, как сделать интернет-магазин хорошим и для покупателя, и для продавца. Некоторые (хорошие) семейные обстоятельства сильно сократили мое свободное время прошлой весной, и поэтому продолжение, которое некоторые терпеливые читатели искренне ждали, появляется только сейчас. Сегодня — восьмой шаг из одиннадцати. Доставка. Один из самых главных, ибо на нем можно больно споткнуться (как буквально, так и фигурально выражаясь).

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

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

                            Доброе отношение приятно и котенку
                            Доброе отношение приятно и котенку. Фото с murlika.msk.ru
                            Читать дальше →
                          • Как запустить доставку для миллионов пользователей

                              Привет! Меня зовут Денис. Я руководитель направления SafeDeal в Авито. Мы разрабатываем сервисы «Доставка» и «Краткосрочная аренда» и делаем их использование удобным, понятным и безопасным. В марте этого года мы запустили сервис доставки товаров между частными пользователями. Казалось бы, что здесь такого и зачем посвящать этому целую статью? Доставка есть у всех интернет-магазинов, многие покупатели ей пользуются и больших трудностей с этим сервисом не возникает.


                              Да, это так. Проблем нет, если продавец — юридическое лицо, представитель компании. Но когда к этому процессу с обеих сторон подключаются частные покупатели и продавцы, появляется ряд интересных задач и проблем, которые нужно решать. С учетом того, что Авито ежемесячно посещает более 34 миллионов пользователей, мы понимали, что передачу товара от продавца к покупателю с помощью нашего сервиса нужно сделать максимально простой. В статье я расскажу о предпосылках запуска доставки между частными пользователями на Авито, о проблемах, с которыми мы сталкивались, и том, как мы их решили благодаря договоренностям с нашими партнерами и вниманию к деталям. И покажу немного внутренностей сервиса: его механику и архитектуру.


                              Как мы доставляем
                            • Google Drive. Отчет с данными из таблицы. Создание простенькой БД. Часть 1

                              Думаю все знают про Google Drive (Google Docs), и многие наверное знают про Google Apps Script, если кто не знает можете почитать, вкратце это API для документов Google. Представляю еще один способ как использовать Google Spreadsheet (Таблицы) и Google Doc (Документ), для формирования документов с данными из таблицы.
                              Читать дальше →
                            • Руководство по аутентификации в Node.js без passport.js и сторонних сервисов

                              • Translation
                              Автор статьи, перевод которой мы сегодня публикуем, говорит, что сейчас можно наблюдать рост популярности таких сервисов аутентификации, как Google Firebase Authentication, AWS Cognito и Auth0. Индустриальным стандартом стали универсальные решения наподобие passport.js. Но, учитывая сложившуюся ситуацию, обычным явлением стало то, что разработчики никогда в полной мере не понимают того, какие именно механизмы принимают участие в работе систем аутентификации.

                              Этот материал посвящён проблеме организации аутентификации пользователей в среде Node.js. В нём на практическом примере рассмотрена организация регистрации пользователей в системе и организация их входа в систему. Здесь будут подняты такие вопросы, как работа с технологией JWT и имперсонация пользователей.



                              Кроме того, обратите внимание на этот GitHub-репозиторий, в котором содержится код Node.js-проекта, некоторые примеры из которого приведены в этой статье. Этот репозиторий вы можете использовать в качестве основы для собственных экспериментов.
                              Читать дальше →
                              • +25
                              • 12.2k
                              • 8
                            • Будь как Мунк, или пару слов о техническом долге

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

                                image
                                Читать дальше →