• HTML-импорт — include для веба: часть 2

    • Translation
    • Tutorial
    Перевод статьи «HTML Imports #include for the web», Eric Bidelman.

    Ссылка на первую часть перевода.

    Предоставление веб-компонентов


    HTML-импорт упрощает загрузку и повторное использование кода. В частности, это хороший способ распространения веб-компонентов. Это касается как простых HTML , так и полноценных кастомных элементов с теневым DOM [1, 2, 3]. Когда эти технологии работают вместе, импорт становится инструментом для подключения веб-компонентов.
    Читать дальше →
    • +21
    • 23.4k
    • 9
  • Как создавать сайты, готовые к локализации

    • Translation


    Локализовать можно любой сайт – по крайней мере, мы в Alconost еще не отказали в этом ни одному клиенту. Тем не менее, результат локализации может сильно зависеть не только от наших переводчиков, а и от ваших веб-дизайнеров. Почему? Ответ на этот вопрос и еще много полезных идей – в переводе статьи опытного проджект-менеджера по локализации Роберта Ханта.
    Читать дальше →
  • Ошибки при проверке внутренних платежей Android-iOS и их решение

      Disclaimer. Этот пост написан на основе доклада на SQADays’15. Вы можете также посмотреть видео выступления или полистать презентацию. Обращаю внимание, что доклад был начального уровня, то есть пост будет интересен в основном менеджерам и начинающим тестировщикам. А также на то, что автор — ненастоящий сварщик и местами делает довольно грубые округления.

      Меня зовут Алёна, и я релиз-менеджер. Отдел компании i-Free, в котором я работаю, в основном занимается приложениями под iOS и Android. Ещё мы поддерживаем Tizen, Windows Phone, альтернативные сторы, но в данном посте речь пойдёт об Apple iOS Appstore и Google Play.
      В обоих маркетах, помимо платных и бесплатных приложений, есть возможность проводить внутренние платежи — ин-аппы (In-App Purchases).

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

      Читать дальше →
      • +25
      • 14.9k
      • 5
    • Как правильно показывать клиенту интерактивный прототип сайта в первый раз

      • Tutorial
      Возьмём понятный всем пример. Интернет-магазин. Вот вы встретились с клиентом в первый раз, обсудили, что должен и не должен делать их будущий проект. После этого сформировали список функциональных требований и сопроводили его предварительной картой сайта. Всё это дело будет потом помещено в приложение номер один к договору на проектирование, но сегодня речь не об этом. Давайте для начала взглянем на карту сайта, которая у нас получилась.
      Читать дальше →
    • SEO в разработке eCommerce проектов (20 правил для разработчика)

      • Tutorial
      В последний год мы написали много статей по UX / UI проектированию eCommerce проектов и не только. Концепция проекта и интерфейсы – это, безусловно, очень важно, однако есть еще несколько крайне важных вещей, которые нужно учесть. Не важно, кто их будет учитывать: UX / UI Designer, SEO Specialist, Web Developer, Project Manager или кто-то еще, важно на каком этапе жизни проекта. А сделать это нужно задолго до запуска проекта, на этапе разработки.

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

      1. Robots.txt. Файл для правил индексации поисковыми системами. Создать и положить в корень сайта. В идеале индексация должна быть открыта всем поисковым системам и всему сайту (за исключением закрытых разделов, таких, как личный кабинет).
      2. Файл Sitemap.xml. Карта сайта для поисковых систем. Создать и положить в корень сайта. Сделать автогенерацию с заранее заданным весом страниц разбитым по типам информации (например, страница товара 8, страница категории 9, страница статьи 7 и т.д.). Загрузить файл в поисковые системы.
      3. Карта сайта. Кроме Sitemap.xml еще желательно сделать отдельную страницу на сайте, дать ссылку на неё в нижней части сайта и также поместить ссылки на основные страницы. На одной странице не должно быть больше 300 ссылок. Если на сайте больше страниц, то проблему можно решить через пагинацию внизу страницы «Карта сайта».

      Читать дальше →
    • Проектирование интернет-магазина: личный кабинет, корзина, доставка-оплата, рассылка и другое

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

      Прошлые статьи серии можно найти тут:


      «Серьезное проектирование серьезного магазина. Часть 1. Исследования»
      «Серьезное проектирование серьезного магазина. Часть 2. Модули интернет-магазина»
      «Серьезное проектирование серьезного магазина. Часть 3. Карточка товара и не только»
      «Серьезное проектирование серьезного магазина. Часть 4. Субституты, комплементы, сравнение и другие инструменты увеличения конверсии»

      Регистрация / личный кабинет


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

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

      Рис. 1. Личный кабинет.

      image

      Читать дальше →
    • Создание лендингов: как улучшить дизайн landing page, повысив при этом конверсию?

      Лендинг — двигатель продаж? Далеко не всегда это так, бывает, что продукт настолько тяжело понять, исходя из информации на landing page, что продажи падают: посадочная страница отталкивает потенциальных клиентов. Мы продолжаем публиковать материалы, которые могут быть полезны молодому бизнесу для повышения конверсии. Из данной статьи Peep Laja, дополненной примерами, можно узнать, как добавить дополнительную информацию «не для всех» на продающую страницу не создавая помех массовому посетителю, и правда ли уродливые лендинги продают лучше, чем страницы с хорошим дизайном. Статья написана от первого лица.
      Читать дальше →
      • +6
      • 19.2k
      • 5
    • Веб-картография и SVG-эффекты

        Последнее время SVG всё чаще используется в front-end, тут и там известные разработчики пишут хорошие статьи в своих блогах. В общем, SVG, кажется, наконец-то начинает занимать заслуженные позиции в стеке технологий современного веб-разработчика. Так что сегодня предлагаю поговорить о том, как можно использовать SVG в веб-картографии. Мы рассмотрим, как можно использовать возможности SVG и перекочевавшие из него в CSS свойства для достижения различных визуальных эффектов. Использовать будем Leaflet и иногда D3, но ничто не мешает использовать и другие библиотеки. Фильтры, паттерны и другие эффекты ждут вас под катом.

        Solar terminator
        Читать дальше →
        • +34
        • 16.4k
        • 9
      • SVG, Iconfonts vs PNG

        image

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

        Признаться, я был немного удивлен реакцией на такие мысли в 2014-м то году. По этому случаю рассмотрим более детально существующие техники работы с иконками.

        На текущий момент все более-менее просто. Мы можем верстать иконки с помощью SVG, создавать иконочные шрифты, ну и никуда не делась старая добрая техника с применением растра, в частности PNG. Правда добавились некоторые нюансы с появлением кучи HDPI устройств с совершенно разной плотностью пикселей.
        Читать дальше →
      • Landing page, которая работает

        • Translation


        Знания о том, как сделать хорошую landing page помогут увеличить количество желаемых действий, совершаемых пользователями на Вашем сайте. В статье приводится обзор элементов дизайна хорошей landing page.
        Читать дальше →
      • Собеседование на должность JavaScript разработчика



          Недавно прочитал неплохой пост на тему поиска работы QA и подумал, что похожий пост был бы полезен для JavaScript разработчиков. В конечном счёте, веб движется вперед семимильными шагами, и соискателей на позицию JavaScript программиста хоть отбавляй (разумеется, хороших всегда меньше).
          Читать дальше →
        • Подборка полезных CSS рецептов, или чем мы занимаемся на голых пятницах

          • Tutorial


          В нашем отделе веб-разработки есть хорошая традиция. Каждые 2 недели у нас проходят «голые пятницы» — это мини-конференции, на которых мы делимся интересными и полезными знаниями, накопенными в процессе работы. Сегодня таких знаний у нас накопилось довольно много, и мы решили начать постепенно делиться ими с общественностью в лице Хабрасообщества.

          Итак, представляем вашему вниманию сборку интересных и (надеемся) малоизвестных HTML и CSS-рецептов. Будем рады, если каждый из вас узнает что-то новое!
          Вперед!
          • +101
          • 89.7k
          • 75
        • We Are the Dwarves! — отечественный тактический экшн на Kickstarter

            Note: Автор поста не имеет никакого отношения к разработчикам игры. Он просто разместил объяву.

            Киевская студия Whale Rock Games начала кампанию на Kickstarter для сбора средств на разработку игры «We Are the Dwarves!».


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

            В зависимости от стиля игрока, персонажи могут либо вступить в открытый бой, либо спрятаться от врагов. У животных есть настоящие «чувства». Они могут услышать вас, увидеть, или отследить по запаху.
            Читать дальше →
          • Google Web Starter Kit: конструктор мобильных сайтов



              Google Web Starter Kit — конструктор и шаблоны для быстрой разработки отзывчивых мобильных сайтов, которые хорошо работают на любой платформе и почти в любом браузере (кроме самых старых). Такие сайты везде выглядят, как нативные приложения.

              Основные особенности:
              • HTML-шаблоны, оптимизированные для мобильного применения;
              • отзывчивый макет для разных мобильных устройств
              • руководство по стилю визуальных компонентов;
              • поддержка Guilp.js (по умолчанию), Node.js, Ruby и Sass.
              Читать дальше →
            • Типичные ошибки API платежных систем

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

                Читать дальше →
              • Пример веб-производительности

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

                • влияние задержки и пропускной способности на веб-производительность;
                • ограничения, которые протокол TCP накладывает на HTTP;
                • особенности и недостатки самого протокола HTTP;
                • тенденции развития веб-приложений и требования к производительности;
                • ограничения браузеров и возможность оптимизации.

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


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

                Хожу по job interview. Где-то скучно, где-то весело. Где-то интересно. На одном из таких меня попросили написать функцию, которая умеет складывать два числа. Я написал:

                  it ('should add two numbers', function () {
                    var add = function (a,b) {
                      return a + b;
                    };
                
                    assert.equal(add(2,3), 5);
                  });
                


                А если, говорят, сигнатура функции должна быть типа такой: add(num1)(num2)? Не вопрос, говорю. Думая, что хитрый буржуин хочет проверить, знаю ли я про то, что можно возвращать функции из функций, пишу вот такое:

                  it ('should be called like add(num1)(num2)', function () {
                    var add = function (a) {
                      return function (b) {
                        return a + b;
                      };
                    };
                
                    assert.equal(add(2)(3), 5);
                  });
                


                Читать дальше →
              • То, что вам никто не говорил о z-index в статье «То, что вам никто не говорил о z-index»

                  image
                  Почти два года назад вышла статья «What no one told you about z-index» (и её перевод на Хабре «То, что вам никто не говорил о z-index»), авторы которой рассказывают о малоизвестной (76% проголосовавших пользователей Хабра слышат об этом впервые), но документированной возможности создания нового контекста наложения указав opacity меньше единицы.

                  Но несмотря на название статьи, авторы не рассказали вам ещё кое о чём.

                  Предполагается, что вы знакомы с понятием контекста наложения (англ. stacking context).
                  Элементы с общими родителями, перемещающиеся на передний или задний план вместе известны как контекст наложения. Понимание контекста наложения является ключом к пониманию z-index и порядка наложения элементов.

                  Каждый контекст наложения имеет свой корневой элемент в HTML структуре. В момент формирования нового контекста на элементе, все дочерние элементы так же попадают в этот контекст и занимают своё место в порядке наложения. Если элемент располагается в самом низу одного контекста наложения, то никаким мыслимым и немыслимым образом не получится отобразить его над другим элементом в соседнем контексте наложения, располагающимся выше по иерархии, даже с установленным z-index равным миллиону.
                  — Из статьи «То, что вам никто не говорил о z-index». Для понимания темы настоятельно рекомендую к ознакомлению либо её, либо классический труд на MDN.

                  Новый контекст наложения формируется в случаях:

                  • Корневой элемент () всегда содержит корневой контекст наложения. Любой элемент на странице, не участвующий в локальном контексте наложения (сформированном любым из последующих вариантов), участвует в корневом контексте наложения.
                    Элемент с position отличным от static и значением z-index отличным от auto. Кроме одного исключения для position: fixed, но я это вынес в отдельный пункт.
                    Элемент имеет значение opacity меньше, чем 1.
                  Нужно больше контекстов наложения!