• Разделяем интерфейсы для юнит-тестирования

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


      Читать дальше →
    • 19 принципов разработки по БЭМ, или что должен знать каждый разработчик библиотек

        БЭМ набирает популярность и становится актуальнее — например, недавно Google выпустил новую библиотеку блоков под названием Material Design Lite, реализованную по БЭМ-методологии. Команда БЭМ тоже не сидела без дела — мы выпустили новую версию библиотеки bem-components, на базе которой построены сайты и проекты не только Яндекса, но и других разработчиков.

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

        image

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

        Если вы хотите узнать на примерах, как мы пришли к нашим принципам разработки, добро пожаловать под кат.
        Читать дальше →
      • Дайджест интересных материалов из мира веб-разработки и IT за последнюю неделю №164 (8 — 14 июня 2015)

          Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы, интересные материалы и IT-новости


          Читать дальше →
          • +17
          • 26.6k
          • 2
        • PushAll — платформа для рассылки мгновенных уведомлений



            Основная идея


            PushAll предоставляет платформу для рассылки мгновенных уведомлений в браузер пользователя или в его мобильное устройство, что позволяет ему получать отфильтрованную свежую информацию из интересующих его источников. Интерфейс сайта позволяет пользователю подписаться на новый канал всего в 2 клика, а унифицированное приложение дает возможность получать уведомления с множества источников. Это куда проще, чем скачивать для каждого сайта отдельное приложение. Вместе с этим компании и разработчики могут экономить время и деньги на разработке и поддержке своего приложения.

            Сама система позволяет легко подписываться и отписываться от тех или иных каналов. Что исключает возможность внезапного спама, как это происходит в случае с такими методами уведомлений как SMS и E-mail.
            Читать дальше →
          • Делаем веб-формы удобнее для заполнения

            • Translation
            Привет, Хабр! Сегодня для работы в Интернете все чаще используются мобильные устройства, а не компьютеры. При этом, на многих сайтах есть формы для ввода данных, позволяющие совершить покупку или подписаться на рассылку. Как результат, пользователям приходится много раз вводить на разных сайтах такие сведения о себе, как имя, номер телефона и адрес. Удобство веб-форм имеет огромное значение, потому что при работе с ними всегда вероятны ошибки, в результате чего многие пользователи вовсе отказываются от заполнения. Три года назад мы представили функцию автозаполнения в браузере Chrome, которая упрощает ввод данных в формы. Теперь Chrome полностью поддерживает в формах атрибут autocomplete в соответствии с современным стандартом WHATWG HTML. Благодаря этому веб-мастера и разработчики могут помечать поля атрибутами, например name и street-address (имя и адрес), не изменяя интерфейс или другой код сайта. Те, кто реализовал эти возможности, отмечают, что их формы стали заполняться чаще.

            автозаполнение форм на смартфоне

            Например, если пометить поле для ввода электронного адреса, то код будет выглядеть так:

            <input type="text" name="customerEmail" autocomplete="email"/>
            

            Больше кода под катом!
          • Аквапоника своими руками с применением микроконтроллера

            • Tutorial
            image

            Всем привет. Как-то на просторах Интернета мне попался интересный американский проект. Суть проекта в том, что можно выращивать различные агрокультуры, используя не почву, а, так сказать, симбиоз рыб с растениями. Получается замкнутый цикл. Вы кормите и выращиваете рыб, их продукты жизнедеятельности, растворённые в воде, являются питательной средой для растений. А эти растения, получая питательные вещества для роста из воды, очищают её. Весь процесс повторяется по кругу. Данный метод называется «аквапоника».
            Читать дальше →
          • TARS, сделай уровень frontend-рутины 0%

              image

              Frontend с каждым днём становится сложнее. Задачи — объёмнее, пользовательский интерфейс — насыщеннее, HTML, CSS и Javascript — огромнее, а сон фронтендера — короче и беспокойнее. Необходимо грамотно структурировать код, выполнять множество рутинных задач (компиляция css- и js-препроцессоров, сборка спрайтов, подготовка и оптимизация изображений, минификация файлов и др). Если вы работаете в команде — это автоматически увеличивает сложность разработки. Чтобы решить эти проблемы, я создал TARS — сборщик html-вёрстки, основанный на gulpjs.
              Уменьшить рутину
            • Стартовал конкурс мобильных приложений «Golden App»

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



                Работы оценит независимое жюри из представителей мобильных разработчиков (например, Redmadrobot и e-Legion), крупных брендов (например, MailRu Group и Rambler Digital Solutions) и сервисов (например, GetShopApp). Мы откроем оценочные листы по каждой работе, чтобы конкурс был прозрачным и честным. И, конечно, проведём зажигательную вечеринку на Церемонии награждения в конце мая. Организаторами «Золотого Приложения» в 2015 году выступают РАЭК, Ruward и Apps4All.

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

                • Translation
                У хорошего интерфейса пользователя высокая конверсия и его просто использовать. То есть, он хорош и для бизнеса, и для использующих его людей. Вот список опробованных нами идей.

                1 Один столбец вместо нескольких


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

                image
                Читать дальше →
              • Что нужно знать, чтобы хорошо рисовать?

                • Translation
                • Tutorial


                Давид Ревуа — прекрасный художник, работающий со свободным программным обеспечением, постоянный член сообществ Krita Foundation и Blender Institute, концепт-художник анимационных проектов Gooseberry Open Movie Project, Mango Open Movie Project (Tears of Steel) и Durian Open Movie Project (Sintel). В этой статье он делится с начинающими художниками списком знаний, которые необходимо приобрести, чтобы работы получались реалистичными. Он обращает внимание, что для рисования «в цифре» следует обзавестись теми же навыками, что и в традиционной технике. Итак, приобщимся к его опыту.
                Читать дальше →
              • BabelFish — полиглот в мире JavaScript

                  BabelFish


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

                  Например, в REG.RU на сегодня в словарях более 15000 фраз, из которых порядка 200 используют склонение, и более 2000 используют подстановку переменных. Каждый день добавляется не менее 10 фраз. И это при том, что мы пока только начали локализацию сайта и впереди планы на новые языки.

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

                  DON'T PANIC.

                  Недавно был опубликован пакет BabelFish 1.0, предназначенный для интернационализации JavaScript-приложений.

                  Идеи, лежащие в его основе, настолько пришлись нам по душе, что мы даже перенесли их на Perl в виде CPAN-модуля Locale::Babelfish, и используем это для Perl-приложений. Но вернёмся к JavaScript-реализации.
                  Читать дальше →
                • JavaScript выходит за пределы Web в 2014 году

                  Перевод статьи Патрика Катанзарити, оригинал можно найти здесь.

                  JavaScript, эволюционируя, шагнул далеко вперёд от своей изначальной роли в DHTML сайтах 90х гг. Он быстро занимает лидирующую позицию как кандидат на роль универсального языка для Интернета Вещей (Internet of Things). И хотя ещё слишком рано рассуждать о том, одержит ли JavaScript победу в этом состязании, я верю, что ему определённо отведена важная роль в постоянно растущем пространстве Интернета Вещей.

                  В прошлом году я написал обзор о технологиях, которые могут всерьёз заинтересовать JavaScript разработчиков – JavaScript Beyond the Web. С тех пор появилось много новых устройств и возможностей, поэтому я хочу написать обзор об изменениях, произошедших в мире JavaScript и среди взаимосвязанных устройств в течение 2014 года.

                  Перечень устройств, способных взаимодействовать посредством JavaScript, растёт с каждым месяцем. У нас появились как официальные JavaScript API, выпущенные производителями устройства, так и продукты усилий сообщества, ориентированные на то, чтобы возможности JavaScript стали доступными и для других.
                  Читать дальше →
                • Для чего blender фотографу?

                  Существуют ли эмуляторы фотостудий? Таким вопросом однажды задался мой товарищ, изучая цены на аренду осветителей и вспоминая первые эксперименты с настольными лампами и листами ватмана. Хороший студийный свет стоит дорого, требует затемненное помещение и специальные фоны. В виртуальном мире эксперименты со светом не ограничены ничем, а результат можно повторить в реальности имея готовую схему. Мы отыскали несколько приложений. Платное и даже онлайн. Но руки чесались сделать что-то своё. Выделил пару выходных на благодатное дело и смоделировал виртуальную студию с пресетами освещения и «фотомоделью» Сюзанной — маскотом свободного 3Д редактора blender.



                  Читать дальше →
                • Running Lean. Пересказ одной из лучших книг о стартапах

                  • Tutorial
                  Cover
                  Ниже — вольный пересказ книги Running Lean, автор — Ash Maurya. Рейтинг Амазона — 4.8 из 5. Книга, насколько я знаю, на русский язык еще не переведена.

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

                  Допускаю, что нарушаю чьи-то права: пересказ лицензии не требует, но иллюстрации взяты из книги. Автору я писал в попытке прояснить этот вопрос, но ответа не получил.

                  Блог автора кгиги: practicetrumpstheory.com.

                  Структура пересказа

                  • Введение в процесс Running Lean
                    • Три важнейших методологии
                    • Roadmap
                  • Описание процесса Running Lean
                    • Составьте «План А»
                      • Определите кто клиенты
                      • Создайте бизнес-модели
                      • Ранжируйте бизнес-модели
                    • Протестируйте и измените план
                      • Подготовьтесь к проведению экспериментов
                      • Категории рисков и четыре фазы тестирования плана
                        • Фаза 1. Поймите проблему
                        • Фаза 2. Найдите решение
                        • Фаза 3. Валидируйте качественно
                        • Фаза 4. Верифицируйте количественно
                  • Три стадии стартапа
                    • Соотношение трех стадий стартапа и четырех фаз тестирования плана
                    • Держите правильный фокус
                    • Привлекайте финансирование вовремя
                    • Масштабируйте правильно
                  Читать дальше →
                • Подборка интересных CSS рецептов «Голые пятницы #3»

                  • Tutorial
                  голые пятницы

                  Здравствуй, дорогой читатель хабра!
                  Сегодня мы поговорим о градиентных границах, режимах наложения, о том, как рациональнее сверстать стандартную иконку меню. А так же откроем для себя заново старое css-свойство visibility и рассмотрим новое медиа-выражение @Supports.
                  Читать дальше →
                • Семь принципов создания современных веб-приложений

                  • Translation
                  • Tutorial
                  Эта статья основана на моей презентации с конференции BrazilJS в августе 2014 года. Она базируется на идеях, о которых я писал в блоге недавно, в основном, в связи с UX и производительностью.

                  Я хочу представить 7 действенных принципов для веб-сайтов, которые хотят применить JavaScript для управления UI. Эти принципы являются результатом моей работы как веб-дизайнера, но также как давнего пользователя WWW.

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

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

                  • Должен ли JavaScript использоваться как замена функциям браузера: история, навигация, рендеринг?
                  • Умирает ли бэкенд? Нужно ли вообще рендерить HTML?
                  • Правда ли, что будущее за приложениями на одной странице (Single Page Applications, SPA)?
                  • Должен ли JS генерировать страницы на веб-сайте и рендерить страницы в веб-приложениях?
                  • Нужно ли использовать техники вроде PJAX или TurboLinks?
                  • Каково точное отличие между веб-сайтом и веб-приложением? Должно ли остаться что-то одно?
                  Читать дальше →
                • Как мы делаем контент. Практическая диалектика

                    Через неделю нашему блогу Хреновина.net исполнится 9 месяцев. За это время мы набрали уже неплохую популярность и регулярно получаем отзывы-благодарности за интересный контент. Что греха таить, то, что мы делаем, нам и самим нравится. И мы были бы рады, если бы подобного рода контента в Сети было побольше. Сегодня мы хотим поделиться некоторыми приёмами изготовления интересных постов.
                    Читать дальше →
                  • Что нужно знать организатору мастер-классов?

                      Поскольку сейчас стало модно быть организатором разного рода семинаров, конференций и мастер-классов, но для многих это занятие новое и организацией они занимаются впервые, чтобы уменьшить количество набитых шишек, я попросила организатора фото-фестиваля «Альтернативы» Алексея Попова поделиться опытом и написать для хабралюдей небольшое техническое руководство по организации и проведению мастер-классов (кому интересно, могут почитать и хабратопик о фестивале).


                      Здравствуйте, уважаемые хабрапользователи!

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

                      Эта статья — скорее обобщенный алгоритм по проведению мастер-классов, семинаров, открытых лекций и других подобных мероприятий, расчитанных на аудиторию от 30 до 300 человек.

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

                      Основные этапы организации:
                      1. Привлечение и оповещение аудитории
                      2. Изучение места
                      3. Составление списка необходимого
                      4. Предварительная подготовка места проведения
                      5. Проведение мероприятия
                      6. Сбор отзывов и анализ
                      7. Послесловие и подведение итогов

                      Читайте подробнее
                    • Как написать отличную статью и завоевать умы


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

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

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

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