• Оптимизация рендеринга веб-страницы

      image

      Из-за давления бизнеса, мы стремимся сделать всё быстрее. От этого страдает планирование и многие вещи не учитываются. Например, легко забыть о производительности и через какое-то время столкнуться с тем, что на более слабых машинах и планшетах обилие движущихся элементов страшно тормозит и дёргается в конвульсиях. Посмотрим, что можно сделать, если вы столкнулись с такой проблемой или хотели бы её избежать.
      Читать дальше →
    • UX-команда MailChimp: Креативность и дорожные карты [7-я часть книги]

      • Translation


      [TL;DR]

      [ 1-я часть книги ]
      [ 2-я часть книги ]
      [ 3-я часть книги ]
      [ 4-я часть книги ]
      [ 5-я часть книги ]
      [ 6-я часть книги ]
      [ 8-я часть книги ]

      Креативность и фронт-энд


      Джейсон Биэрд

      В UX Newsletter мы часто писали о нашей библиотеке шаблонов и о том, как она помогает нам проводить быстрые итерации и обеспечивать согласованность работы MailChimp. Разработка на основе существующих паттернов немного похожа на игру с Lego: когда вы начинаете работу, вы точно знаете, как те или иные элементы должны связываться между собой – но иногда оказывается полезным нарушить паттерн и создать необычное решение. Я бы хотел поделиться несколькими примерами того, как такой подход был реализован в MailChimp.
      Читать дальше →
    • Изучаем Javascript перебирая косточки Backbone.js

        В этом посте любитель javascript тряхнет костями, доставая что-нибудь полезно-интересное из исходника Backbone.

        Тут не будет рассматриваться вопрос применения библиотеки, это на Хабре уже давно сделали, а будет простой конспект-шпаргалка по js с примерами, в роли примеров — сам Backbone.
        Читать дальше →
        • +20
        • 35.5k
        • 9
      • Как мы тестируем CSS-регрессии с Gemini. Доклад на BEMup в Яндексе

          Всем привет! Меня зовут Сергей Татаринцев. В Яндексе я работаю в группе разработки общих интерфейсов. Наша группа занимается созданием интерфейсных библиотек, используемых во многих сервисах, — в том числе в Поиске. Мы поддерживаем четыре библиотеки, которые в общей сложности включают в себя 62 блока.

          Если посчитать все десктопные и мобильные браузеры всех версий, то получается, что у нас в поддержке их более 15. Около года назад их все мы тестировали вручную. Тестировщик просто брал и прокликивал все это во всех браузерах и смотрел, не поехало ли что-нибудь, работает ли так, как было задумано. Это приводило к тому, что процесс релиза очень затягивался. Вплоть до того что разработка и тестирование занимали приблизительно одинаковое время. Многие баги ускользали от глаз тестировщика или обнаруживались через достаточно продолжительное время.



          Мы решили, что дальше так жить нельзя и решили процесс тестирования как-то автоматизировать. Начали мы с инструментов статического анализа. Для проверки стиля кода у нас используется инструмент jscs, написанный нашим коллегой Маратом Дулиным. Для статического анализа кода применяется всем известный JSHint. А для отлова регрессий в JS мы пишем юнит-тесты. Это в какой-то мере помогло справиться с проблемой: анализаторы отлавливали совсем уж глупые ошибки, а тесты позволили проверять функциональность блока. А вот с регрессиями в CSS был пробел. Тестирование внешнего вида по-прежнему проводилось руками и глазами тестировщика. Мы стали искать инструменты, которые помогали бы нам в автоматизации.
          Читать дальше →
        • Шпаргалка для сравнения классов Twitter Bootstrap и Zurb Foundation

          • Translation


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

          Эта короткая статья является по сути шпаргалкой, призванной помочь разработчикам начать работать с Foundation после работы с Bootstrap. Мы сравним основные классы для обоих фреймворков. По большей части, оба фреймворка имеют набор основных компонентов (сетка, кнопки, формы, таблицы), под катом представлена таблица сравнения классов для этих компонентов.
          Читать дальше →
        • 5 практических примеров для изучения фреймворка React

          • Translation
          • Tutorial
          Перевод статьи «5 Practical Examples For Learning The React Framework», Martin Angelov

          Вы вероятно слышали о популярном JavaScript фреймворке от Facebook – React. Он используется на многих популярных веб-сайтах, в том числе в Facebook и Instagram. В этой статье вы увидите 5 практических примеров, построенных при помощи React, которые помогут вам начать работать с этим фреймворком.
          Читать дальше →
        • Видео лекций всего курса первой Школы разработки интерфейсов Яндекса

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

          За долгое время работы в Яндексе нам удалось систематизировать все наши знания и огромный опыт в создании фронтенда веб-сервисов. Результатом этого осмысления и длительной работы стала первая Школа разработки интерфейсов, занятие которой шли в московском офисе Яндекса. Вся практическая часть обучения проходила в реальных проектах Яндекса. Теоретическая же состояла из лекций, которые читали ведущие разработчики интерфейсов Яндекса: Сергей veged Бережной, Михаил mishanga Трошев, Алексей doochik Андросов, Михаил azproduction Давыдов и другие.

          Выпускники первой Школы разработки интерфейсов Яндекса

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

          Читать дальше →
        • 3 способа разработки

          • Translation

          Разработка, Направленная на Создание Мусора


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

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

          Это работает так:
          Читать дальше →
        • Почему изучать TDD трудно и что с этим делать. Часть 2

          • Translation
          Продолжение. Начало здесь.

          Как все это использовать?


          Хороший вопрос. Мы остановились на том, что TDD помогает четко определить границы текущей задачи, дает простой способ одновременной работы с мелкими деталями, относящимися к проблеме, и предоставляет быструю обратную связь с кодом, сообщая, насколько удачно получившееся решение. Именно эти факты помогут нам преодолеть трудности в изучении этой техники.
          Читать дальше →
          • +16
          • 18.1k
          • 6
        • Оформление кода, оптимизация процесса проверки качества кода

          • Translation

          JavaScript, the winning style



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

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

          В отличие от Питона у которого есть единый свод правил «Style Guide for Python Code», у языка JavaScript такого нет. Однако на выбор есть целых 6 популярных гайдов:



          Помимо гайдов, не стоит так же забывать об автоматических анализаторах кода, таких, например, как JSLint и JSHint. И в них уже заложены свои настройки. Вопрос в том, какой же все-таки максимально правильный способ писать код на JavaScript, который был бы актуален и максимально соответствовал бы большинству рекомендаций? Давайте попробуем объединить большинство рекомендаций в этой статье и подумаем как можно оптимизировать процесс проверки качества кода.
          Читать дальше →
        • HTML5 в мобильной разработке — что выбрать?


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

            Устоявшиеся мнения о преимуществах кросс-платформенной разработки с использованием HTML5 или Native SDK:

            HTML5
            • Лёгкое вхождение для веб-разработчиков
            • Дешево в разработке
            • Большое покрытие (браузер сейчас есть везде)
            • Единая база кода

            При помощи таких средств как, например, Cordova, на HTML5 можно создавать гибридные приложения (которые размещены не в интернете, а в нативном контейнере). Такие приложения совмещают перечисленные выше плюсы и посредством плагинов позволяют выйти за пределы браузера, осуществляя тесную интеграцию с возможностями устройств. Гибридные приложения можно публиковать и распространять через AppStore, Google Play и другие магазины приложений.

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

            Естественно, это базовые утверждения, которые каждый может дополнить исходя из своего опыта. Так стоит ли выбирать HTML5 для разработки вашего приложения? Ответ не может быть однозначным — он зависит от множества факторов, которые мы и рассмотрим.

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

              Идеальная вёрсткаВы 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, даже если вы ничего не понимаете в вёрстке.
            • Использование Selenium WebDriver для автоматического тестирования веб-интерфейса Яндекс.Почты

              • Tutorial
              Без качественного тестирования невозможно разрабатывать и поддерживать крупный веб-сервис. На ранних этапах его развития часто можно обходиться только ручным тестированием по заданному тест-плану, но с появлением новых фич и увеличением количества тест-кейсов довольствоваться только им становится все сложнее и сложнее. В этой статье мы расскажем о том, как автоматизируем функциональное тестирование веб-интерфейса Яндекс.Почты с помощью Selenium WebDriver и Node.js.

              Selenium
              Читать дальше →
            • Пишем расширение для google chrome

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

              В этой статье будет рассмотрено:
              • Как составлять манифест v.2
              • Как работать с удаленными ресурсами
              • Как работать с cookies
              • Как работать с local storage
              • Как работать с уведомлениями

              Читать дальше →
            • jQuery изнутри — введение

              • Tutorial
              По работе мне несколько раз приходилось участвовать в собеседовании кандидатов на должность клиент-сайдера у нас в компании, смотреть на их познания в Javascript. Удивительно что никто из них не знал толком как же работает jQuery изнутри, даже те, кто отметил свои знания jQuery уровнем «отлично», увы.

              У jQuery очень низкий порог вхождения, о нем часто пишут и используют всюду, где только можно (и даже там, где, в общем-то, не нужно), поэтому некоторые даже не смотрят на чистый Javascript. Зачем, мол, его знать, когда есть jQuery, а по нему — тонны примеров и готовых плагинов? Даже на Хабре видел статью про рисование на Canvas, где автор подключил jQuery и использовал его только один раз — для того, чтобы получить доступ к Canvas по его идентификатору. И не считал это чем-то ненормальным.

              Извините, отвлекся. Суть поста и следующих частей серии в том, чтобы рассказать о том, как же работает библиотека изнутри и что же в ней происходит по мере выполнения каких-то методов.
              Готов и хочу читать дальше
              • +129
              • 97.8k
              • 80
            • Кто использует Node.js: Trello (Часть 2)

              • Translation
              Это продолжение перевода «The Trello Tech Stack».

              Часть 1
              • CoffeeScript
              • Клиент
                * Backbone.js
                * HTML5 History API
                * Mustache
              • Pushing and Polling
                * Socket.io and WebSockets
                * AJAX запросы

              Часть 2
              • Сервер
                * node.js
                * HAProxy
                * Redis
                * MongoDB
              • Итак, нравится ли нам это?

              Читать дальше →
            • CoffeeScript: Подробное руководство по циклам

              • Tutorial
              CoffeeScript: Подробное руководство по циклам

              Как известно, CoffeeScript предлагает несколько иной набор управляющих конструкций, нежели JavaScript.



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



              Читать дальше →
            • Как работает оператор delete

              Пару недель назад мне попалась на глаза книга Стояна Стефанова (Stoyan Stefanov) Объектно-ориентированный Javascript. У книги был настолько высокий рейтинг на Амазоне (12 обзоров на 5 звезд), что я решил просмотреть, нет ли в ней чего-нибудь что можно было бы порекомендовать другим. Мне очень понравилось, как все описывается в разделе про функции, с которого я начал; поток примеров выстроен таким приятным и прогрессивным образом, что даже начинающие очень легко освоят его. Однако практически сразу я наткнулся на интересное заблуждение, описываемое на протяжении целой главы — удаление функций. Есть и другие ошибки (такие как разница между объявлением функции и оператором function), но сейчас мы не будем их обсуждать.

              Книга утверждает, что «функции работают как обычные переменные — их можно скопировать в другую переменную или даже удалить». И приводится следующий пример:

              >>> var sum = function(a, b) {return a + b;}
              >>> var add = sum;
              >>> delete sum
              true
              >>> typeof sum;
              "undefined"

              Если не обращать внимания на пару отсутствующих точек с запятой, что еще не так с этим куском кода? Конечно, проблема в том, что удаление переменной sum не должно было пройти успешно; выражение с оператором delete не должно разрешаться в true и typeof sum не должно вернуть «undefined». Все потому, что в яваскрипте нельзя удалять переменные. По крайней мере, те, которые определены таким образом.

              Так что же происходит в этом примере? Опечатка? Диверсия? Скорее всего нет. На самом деле весь этот отрывок кода скопирован из Файрбага, который Стоян, должно быть, использовал для тестирования по-быстрому. Почти похоже что у Файрбага какие-то свои правила по поводу удаления. Это Файрбаг сбил Стояна с толку! Так что же на самом деле здесь происходит?
              Узнать скорей!
            • Четыре паттерна вызова функций в JavaScript

              • Translation
              Язык JavaScript был представлен как язык функционального программирования. Причина заключается в том, что функции в JS не просто разделяют логику на операционные блоки, функции являются объектами первого класса, способными создавать другие объекты. Подобная зависимость от функций одновременно является как сильной стороной, так и настоящим проклятием этого языка. Сильная сторона заключается в том, что язык, обладая подобными особенностями, становится легковесным и быстрым (каким JavaScript изначально и видели его создатели). Однако если вы не знаете что делаете — однозначно ждите беды.

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

              Итак, существует четыре пути вызова функций:

              • Вызов метода — Method Invocation
              • Вызов функции — Function Invocation
              • Вызов конструктора — Constructor Invocation
              • Вызов apply и call — Apply And Call Invocation

              Читать дальше →
            • Понимание ООП в JavaScript [Часть 1]

              • Translation
              • Tutorial
              — Прототипное наследование — это прекрасно
              JavaScript — это объектно-ориентированный (ОО) язык, уходящий корнями в язык Self, несмотря на то, что внешне он выглядит как Java. Это обстоятельство делает язык действительно мощным благодаря некоторым приятным особенностям.

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

              К счастью, в ECMAScript 5 появилось множество вещей, которые позволили поставить язык на правильный путь (некоторые из них раскрыты в этой статье). Также будет рассказано о недостатках дизайна JavaScript и будет произведено небольшое сравнение с классической моделью прототипного ОО (включая его достоинства и недостатки).
              Читать дальше →