• Реактивный фронтенд. История о том, как мы снова всё переписали
    0
    Styled-components, я люблю тебя! СSS in JS – one love! Мой внутренний верстальщик ликует:


    1. Как решаете вопрос с поддержкой подсветки?
    2. Как с читаемостью когда CSS кода нужно много в JS?
  • Реактивный фронтенд. История о том, как мы снова всё переписали
    0
    Но мы не раскатываем на внешних пользователей код на Koa2: у фреймворка нет достаточной поддержки, зато есть открытые уязвимости.

    1. Какие уязвимости не позволили koa2 использовать в prod?
    2. Пробовали ли вы внести свой вклад в koa2?
  • Реактивный фронтенд. История о том, как мы снова всё переписали
    0
    1) Где был компонентный подход к разработке, когда появился BEM (2008 год)?

    2) Мы (не Яндекс) тоже написали свой feature-starter-kit вместо create-react-app — наши задачи не влезали в готовый инструмент для широкого использования и поэтому ограниченого по функциональности.
  • Реактивный фронтенд. История о том, как мы снова всё переписали
    0
    BEM — хороший пример Соглашения по конфигурации, когда js/css/шаблоны находятся в предсказуемых местах. Соглашение позволяют легко войти в другой проект, созданный по таким же соглашением с минимальным количеством «WAT».
    Также, по моему, это выглядит довольно странно:
    tag()('button')


    Тело шаблона — это отдельный вызов функции, которая ожидает аргумент.

    Можно использовать сокращенный синтаксис, который выглядит привычнее:
    block('link')({ tag: 'button' });


    Посмотрите пример
  • 8 ключевых решений в разработке на React
    +1
    Достаточно вольный перевод (либо автор, Cory House, отредактировал свою статью):

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


    Оригинал:
    I’m a fan of Redux, but I often use plain React since it’s simpler. In my current role, we’ve shipped about a dozen React apps, and decided Redux was worth it for two. I prefer shipping many, small, autonomous apps over a single large app.


    Скорее всего имелось ввиду, что из 12 проектов для 2 Redux был обоснованным выбором. Не указывается, остальные 10 не нуждались в усложнении или еще по каким причинам Redux для них не подходил.
  • Почему нужно перестать использовать Git rebase
    0
    Так и сделали. Но не хватает возможности полноценный проект собрать и функционально/вручную прогнать.
    Хотя полный проект может и не надо собирать по PR, достаточно сделать такую сборку по кнопке и собирать только релизы.

    По flow: делаем rebase в ветках PR, а в GitHub есть возможность «Squash and Merge» — классная штука, github.com/blog/2141-squash-your-commits.
  • Почему нужно перестать использовать Git rebase
    0
    отдельная ветка, на которой вы всё так же запускаете тесты, и если что-то поломалось, то сначала выясняете в чём проблема, исправляете её

    Еще один довод поднять staging со сборкой на каждый PR. У нас такого пока нет, страдаем.
  • Почему мы выбрали новый Angular
    0
    тормозящих геттеров из стейта (через reselect)

    Возможно, тормозит неоптимально написанный геттер — сам сталкивался с такой проблемой, когда плохо декомпозировал Селекторы и не работала мемоизация.
    Идея в том, что при повторном вызове селектора с неизменившимися параметрами результат будет выдан из кеша без повторного вычисления.
  • Зачем использовать статические типы в JavaScript? (Преимущества и недостатки)
    0
    Мой доклад на NodeJS SPB: «Нужен ли мне TypeScript» как раз по теме статьи.

    Видео: https://youtu.be/Yxsf06JSGCE?t=3h9m49s ((с 3:09:49)
    Презентация: https://easy-deep-learning.github.io/types-sugar-in-javascript/

    Если кратко: есть более полезные практики, которые имеет смысл внедрить ДО «статической» типизации:
    • покрытия тестами
    • соглашение по стилю кода, особенно наименованию переменных
    • jsDoc — Совершенные редакторы могут проверять код по jsdoc. При этом, на мой взгляд, код не загрязняется визуально «типизацией» (кавычки, потому что «типизация» в JS — только сахар.
  • Расстановка полей и отступов в CSS
    0
    Супер, спасибо!
  • Расстановка полей и отступов в CSS
    0
    Наглядное и простое изложение, спасибо! С переводом терминоголоией margin и padding не везло раньше, было много путаницы.

    +100500:
    В боксовой модели (box model) поля — это расстояние между контентом (content) и границей блока (border). А отступы это расстояние между границей блока и границей соседнего или родительского элемента.
  • Дайджест интересных материалов из мира веб-разработки и IT за последнюю неделю №198 (7 — 14 февраля 2016)
    +2
    Здорово, что мой доклад попал в дайджест.

    Буду рад вопросам и предложениям:

  • БЭМ-методология: с чего всё начиналось и зачем это всё нужно
    0
    Если интересно посмотреть на БЭМ + Sailsjs (как Rails только на javascript), у меня есть
  • Сайт с нуля на полном стеке БЭМ-технологий. Методология Яндекса
  • Как выглядит рабочий день IT-инженера, если ты девушка
    +47
    Эх, почему до сих пор работодатели даже крупных компаний экономят на стульях?
  • Тысяча и одна gif
    0
    Герой DOOM!
  • Верстка для самых маленьких. Верстаем страницу по БЭМу
    0
    Да, к сожалению, порог входа выше, чем «писать html».
  • Книга «How Google Tests Software» теперь на русском!
    +1
    Дружище, я купил две и одну из них послал тебе по почте :)
    А по теме – да, не удобно сделано, хочется СМС-кой мочь оплатить. И электронными деньгами.

    Текущая ситуация:



  • Электронные деньги в России ограничат
    +3
    СССР стал свехдержавой в результате нечеловеческого перераспределения человеческих ресурсов (простите за тавтологию). Репрессии, экспроприация, раскулачивание, изъятия ресурса из деревни (к чему это привело можно увидеть сейчас в любой деревне). Потом стали продавать нефть, но даже выгодная конъюнктура рынка не спасла от дефицита 70-80. Посмотрите разрешенные (пока) советские фильмы, «Служебный роман,» «Гараж» и тд.)
  • Электронные деньги в России ограничат
    +5
    Нефть в цене не растет, экономика в застое – надо увеличить налогооблагаемую базу!
  • Электронные деньги в России ограничат
    +6
    Курс пляшет в отношении фиатных валют, потому что не ясно будущее биткоина в свете вот таких государственных ограничений.
    Если завтра наше правительство объявит, что передача друг другу долларов незаконна, обменники должны прекратить работу, вывоз баксов за границу наличкой запрещен, а валютные вклады принудительно конвертируются по курсу в рублевые

    Кстати, вполне вероятное развитие событий в ближайшие пару лет.
  • В чем проблема «проблемы БЭМ'а»?
    0
    Вот только почему вы не обращаете внимания что я пишу именно про синтаксис, что он избыточен, неудобен, не нагляден

    Тут дело вкуса, я не использую препроцессоры, другие используют. Спор не конструктивный.

    не типизирует входы/выходы и не даёт нам никаких статических гарантий.

    Поясните пожалуйста, я не очень понял, если приведете пример, буду вдвойне благодарен.

    Плохо ли использовать js функции в коде шаблонизатора? Безусловно плохо, вы превращаете декларитивный стиль, ради которого вся эта шумиха с БЭМом и затевалась, в обычные императивные js подпрограммы.

    BEMJSON — это данные (шаблонизатор — BEMHTML), и в конкретном примере я показал возможность прототипирования контента страницы. Естественно, это не продакшен код.

    Я бы начал с синтаксиса, потом переписал бы декларацию стилей из css прямо в BEMJSON через миксины a la SASS/compass

    BEMJSON про струтуру блока, за оформление отвечает старый добрый CSS блока, не нужно смешивать структуру и оформление — это как раз хорошее, что есть в HTML+CSS. Или я вас не так понял?

    Спасибо за подробные комментарии!
  • В чем проблема «проблемы БЭМ'а»?
    0
    В haml на мой взгляд избавились от тегов, вроде как избыточность пропала, но и код стал менее удобочитаемый, и все равно описывается html-реализация страницы.

    В BEMJSON вы можете выполнить произвольный js, например, для прототипирования:

    {
      block: 'b-foo',
      content: [
        {
          elem: 'bar'
        },
        {
          elem: 'container',
          content: (function() {
          
                       var contentVariants = ['Hello World', 'Hello Mars', 'Hello, Futurama'];
                       return contentVariants[Math.floor(Math.random() * contentVariants.length)];
             }())
        }
      ]
    }
    


    И главное — BEMJSON он не про HTML, он про более высокий уровень абстракции — блоки.
  • В чем проблема «проблемы БЭМ'а»?
    0
    Мне вот прямо хочется взять и дать ссылку на мой cornerJS

    Лучше давайте
    через ~3 года 95% браузеров как минимум с полифиллом будут поддерживать технологию

    и
    полифилл
    приложите пожалуйста.
  • В чем проблема «проблемы БЭМ'а»?
    0
    Покажите пожалуйста примеры избыточности BEMJSON. Я сравнивал с XML, последний явно избыточней.
    haml лишь подслащивает HTML. Альтернативы?
  • В чем проблема «проблемы БЭМ'а»?
    0
    Потому что единственная и первоочередная задача БЭМа — это инкапсуляция классов.

    Вы забываете, что фронтенд — это еще и javascript. Без методологии в любом более-менее сложном проекте код быстро превращается в лапшу.
    С помощью i-bem вы инкапсулируете логику работы в блоке. У вас не только css независимый, но и javascript имеет модульную расширяемую структуру, органично отражающую общую концепцию BEM.
  • В чем проблема «проблемы БЭМ'а»?
    0
    Буду благодарен, если сообщите подробнее OS и версию браузера, я проверил, у меня бага не повторяется (Mac OS 10.8):

    image
  • В чем проблема «проблемы БЭМ'а»?
    0
    Вы же пытаетесь — на случайно взятых примерах что-то доказать.

    Примеры не случайные.
  • В чем проблема «проблемы БЭМ'а»?
    0
    Верстаю по БЭМу и забываю. Нет нужды помнить все эти nav > ul > li.

    Вот вы, никогда не видели верстку и тут видите такой код:

    <div class="user-thumb">
       <div class="user-thumb__name"></div>
    </div>
    


    Сложно понять, где будет имя пользователя?
  • В чем проблема «проблемы БЭМ'а»?
    0
    В студии не один верстальщик, www.spbgaz.com/ — делал не я.
  • В чем проблема «проблемы БЭМ'а»?
    0
    У вас тут postimg.org/image/bbf8tmi4d/ js не отключен случаем?
  • В чем проблема «проблемы БЭМ'а»?
    0
    Я не горжусь, я рассказываю как мне удобнее и привожу примеры реального кода, а не суждений и мнений.

    И никого не заставляю все бросить и пересесть на BEMJSON.

    Суть моих комментариев в том, что многие разработчики критикуют не БЭМ, а свое представление о нем.

    Посмотрите все посты про БЭМ выше — там про css. Я же говорю, что методология гораздо шире и вообще не про именование.
  • В чем проблема «проблемы БЭМ'а»?
    0
    Я работаю в команде (распределенная по нескольким городам, я в Великом Новгороде, программист в Питере) и для меня удобство всех участников стоит не на последнем месте.

    А вы работаете по принципу «наверстал и забыл»?
  • В чем проблема «проблемы БЭМ'а»?
    +2
    Проекты на полном стеке BEM (прототипирование BEMJSON + BEMHTML + js на i-bem.js):

    nautilusdent.ru/
    hunterboat.ru/ (исходники github.com/alexbaumgertner/hunter-boat)
    planetasid.ru/ (исходники github.com/alexbaumgertner/planeta-sid)
    krechi-sila.narod.ru/ (исходники могу выложить сегодня)
    zapravka-gaza.ru/ (+ вестка не по BEM от верстальщика, принявшего проект)

    Особо рады сервер-сайд программисты, когда видят верстку, в которой сразу ясно какие данные где отображаются (код www.nautilusdent.ru/):

    <div class="person">
      <div class="person__photo-wrap">
        <img class="person__photo" src="/images/com_fwgallery/files/975/team1.png" alt="Александр Поболь">
      </div>
      <div class="person__title">
        Александр Поболь
      </div>
      <div class="person__description">
        Генеральный директор. Техник высшей категории. Награждён почётными грамотами и дипломами, отмечен грамотой министра здравоохранения. 
        <br>
        Опыт работы с 1984 г.
      </div>
      <div class="person__link-to-all">
        <a class="b-link" href="http://nautilusdent.ru/pobol-aleksandr.html">
          Все работы
        </a>
      </div>
    </div>
    
  • В чем проблема «проблемы БЭМ'а»?
    0
    Я и не спорю, что каждый разработчик выбирает тот инструмент, который выбирает.

    Про БЭМ ходит много легенд, многие, думая что он про именование css-классов немного ошибаются.

    А препроцессоры лично я не употребляю по причине habrahabr.ru/post/203838/#comment_7035398
  • В чем проблема «проблемы БЭМ'а»?
    0
    Я не хочу доказать, что БЭМ или неБЭМ это круто.

    Я хочу оптимальным образом решать свои задачи — разрабатывать интерфейс так, чтобы не было мучительно больно.
    bem-tools + BEMJSON, BEMHTML, i-bem.js решили мою задачу.

    Очень рекомендую завтра (29 ноября) посмотреть трансляцию доклада Димы Кушникова tech.yandex.ru/events/bemup/spb-bemup/talks/1415/
  • В чем проблема «проблемы БЭМ'а»?
    –6
    Посмотрите, вот большой проект на BEM ( BEMJSON, BEMHTML, i-bem.js)

    github.com/alexbaumgertner/hunter-boat

    И при этом это не в Яндексе или еще где, а в небольшой студии.
  • Верстка для самых маленьких. Верстаем страницу по БЭМу
    0
    Развернутая структура выглядит немного многословной, но зато наглядно.
    А BEMHTML согласен, на непривычный взгляд странно выглядит.
  • Верстка для самых маленьких. Верстаем страницу по БЭМу
    0
    Вот так можно лаконично описать этот блок в BEMJSON:

        ({
            block: 'menu',
            content: [
                {
                    elem: 'item',
                    content: {
                        elem: 'link',
                        content: 'test',
                        url: '#'
                    }
                },
                {
                    elem: 'item',
                    mods: { active: true },
                    content: {
                        elem: 'link',
                        content: 'test',
                        url: '#'
                    }
                },
                {
                    elem: 'item',
                    content: {
                        elem: 'link',
                        content: 'test',
                        url: '#'
                    }
                },
                {
                    elem: 'item',
                    content: {
                        elem: 'link',
                        content: 'test',
                        url: '#'
                    }
                }
            ]
    
        })
    


    И, согласно разделению логики представления и данных, сделать соответствующий BEMHTML-шаблон:
    (Понятие предиката в BEMHTML-шаблоне похоже по смыслу на селектор в CSS htmlbook.ru/test/selector)

    
    /**
    * Общий шаблон для блока 'menu'
    */
    block('menu')(
    
        tag()('ul'),
    
        elem('item')(
    
            tag()('li')
        ),
    
        elem('link')(
    
            tag()('a'),
    
            attrs()(
                {
                    href: this.ctx.url
                }
            )
        )
    )
    
    
    /** Шаблон для блока 'menu'  с учетом модификатора "активный" у вложенного элемента :
     *
     * "если блок содержит элемент 'item' с модификатором 'active',
     * то установить у блока свойство '_active_item'
     *
     * @predicate block('menu').elem('item').elemMod('active', true)
     *
     */
    block('menu').elem('item').elemMod('active', true)(
        /* в моде def (не путать с модификатором, мода -- правило генерации html)
         * applyNext:
         * установить свойство шаблона для блока _active_item равное true и
         * применить следующий шаблон
         *
          * */
        def()(
                applyNext({_active_item: true}
            )
        )
    )
    
    /** Шаблон для блока 'menu' с установленным свойством '_active_item':
     * для блока со свойством '_active_item' элемент 'link' генерировать через тег 'span'
     *
     * @predicate block('menu').match(this._active_item).elem('link').tag()
     */
    block('menu').match(this._active_item).elem('link').tag()('span')
    
    
  • Верстка для самых маленьких. Верстаем страницу по БЭМу
    0
    Вряд ли там вручную css пишется, есть же BEMJSON+BEMHTML ru.bem.info/libs/bem-core/1.0.0/bemhtml/rationale/
    И модификаторы являются индикаторами состояния, то есть css-класс button_disabled_yes не навешивается руками — это происходит в js-фреймворке i-bem ru.bem.info/libs/bem-core/1.0.0/i-bem.js/bem-js-main-terms/