Как настроить gemini на тестирование в
Safari 9 (iOS 9)
Chrome 45 (Android 6)
Chrome 45 (Android 5)
с использованием сервиса browserstack?
такого вида конфиг:
browsers:
safari:
desiredCapabilities:
os: "IOS"
os_version: "9"
browserName: "safari"
version: "9"
дает ошибку:
Cannot launch browser safari:
[init({"os":"IOS","os_version":"9","browserName":"safari","version":"9","browserstack.local":true})] The environment you requested was unavailable.
хочу покрутить с целью принять решение, внедрять или не внедрять.
По сборке я правильно понимаю что:
Уровни переопределения - это всегда энтрипоинты вебпака?
Модификаторы - возможно сделать как чанки вебпака и подгружать асинхронно (будет ли выделено как чанки если сложить там только css вроде темизации)?
Переводы - куда упадут собранные по всем сорцам переводы, в энтри или в чанк? Как не пересобирая выебпак перевести на все языки да еще и в разных уровнях переопределения?
Где взять пример накрученных переводов (обычные ключи, параметризированные, множественные)?
15 сентября в Екатеринбурге состоится очередная встреча БЭМ-сообщества — BEMup!
Мы ждем вас в уютном офисе Яндекса, где Сергей Бережной проведет мастер-класс по использованию bem-react-core — библиотеки, расширяющей возможности React.
Если вам близка идея БЭМ, приходите! Будем говорить про БЭМ, React и фронтенд в целом.
Участие, как всегда, бесплатно, но нужно зарегистрироваться! Мы просматриваем все заявки вручную, поэтому ответ с приглашением может прийти с задержкой.
Регистрация открыта!
Stay BEMed!
PS: По традиции вы можете задать вопросы заранее в комментариях к этому посту, а мы постараемся подробно ответить на них во время митапа.
UPD: Опубликовали видео с митапа
11 августа в 19:00 в питерском офисе Яндекса пройдет еще один митап по БЭМ!
Сергей Бережной проведет мастер-класс по использованию bem-react-core — библиотеки, расширяющей возможности React. Вы получите возможность изменять любые аспекты поведения компонентов без добавления лапши из if-ов в коде. В точности так, как это делается в CSS.
Вы сможете:
- Создать компонент с разным набором признаков (в том числе и с разной разметкой!).
- Дешево проводить AB-тестирование и эксперименты.
- Настраивать компонент под окружение/платформу, переиспользуя общий код.
Кроме того, мы ответим на любые ваши вопросы, связанные с БЭМ и работой фронтендера в Яндексе.
По традиции вы можете задать вопросы заранее в комментариях к этому посту, а мы постараемся подробно ответить на них во время митапа.
Участие, как всегда, бесплатно, но количество мест в зале ограничено, так что успейте зарегистрироваться! Мы просматриваем все заявки вручную, поэтому ответ с приглашением может прийти с задержкой.
Регистрация открыта!
Stay BEMed!
@tadatuta рассказал как использовать , презентация.
~Осталось не понятно, как это использовать. Покажите минимальный кейс использования bem-lib-site и расскажите где читать про остальное.~
UPD
git clone git@github.com:ilyar/bem-lib-site-test.git
cd bem-lib-site-test && npm install
npm test
open docs/index.html
Работает, хак внутри (может быть он уже не нужен).
Сборку можно посмотреть тут ilyar.github.io/bem-lib-site-test/.
UPD 1/1/17
Убрал один хак https://github.com/ilyar/bem-lib-site-test/commit/a18e4849d46ed3ec370823080b204b3e14041877, добавил автотест генерации доки:
UPD: можно попробовать https://github.com/bem/create-bem-react-app
Привет!
Хочется попробовать сделать React-компоненты с использованием методологии BEM: разделение на блок-элемент-модификатор и на уровни
common, desktop, touch.
Нашел пока вот:
- https://github.com/yummies/starter-kit – слишком молодо и много зависимостей
- https://github.com/artemshitov/react-bem – скорее всего сильно устарело
- Реактивные интерфейсы с React.js и БЭМ: мастер класс. Слава Аристов – интересно, смотрю
- https://github.com/dfilatov/bem-react – заморожено, но интересно, смотрю
Порекомендуйте пожалуйста еще источников.
Привет!
Некоторое время назад я написал несколько библиотек для совместной работы BEM + SailsJS: https://github.com/bem-under-sailsjs
Если вы хотите продолжить развитие проекта, напишите мне пожалуйста: alex.baumgertner@gmail.com или в telegram: alexbaumgertner
Спасибо!
Для тестирования понадобилось использовать зависимость, которая не нужна самому блоку. Пытаюсь подключить как-то так (deps.js):
([
{
shouldDeps : [
// ...
],
},
{
tech : 'spec.js',
shouldDeps : [
{ block : 'box' },
],
},
])
Здесь box -- именно то, что пытаюсь реквайрить в тесте:
modules.define('spec', [ 'box' ], function(provide, box) { /* ... */ });
В результате всё равно получаю Error: Module "spec": can't resolve dependence "box".
ЧДНТ?
Кажется должно быть немного быстрей чем собирать строку а потом ее вставлять в dom.
Но даже если не будет прироста в скорости, почему бы не сделать, интересно же.
Пока не сел кодить, хотел бы спросить знатоков, есть ли какие то очевидные препятствия реализации?
Допустим есть блок menu с элементами menu__item.
Как обернуть все menu__item в блок wrapper, используя bemhtml, чтобы не писать это в BEMJSON ручками.
Имеем:
{
block: 'menu',
content: [
{ elem: 'item', content: 'item 1' },
{ elem: 'item', content: 'item 2' }
]
}
Хотим:
{
block: 'menu',
content: [
{
block: 'wrapper',
content: [
{ block: 'menu', elem: 'item', content: 'item 1' },
{ block: 'menu', elem: 'item', content: 'item 2' }
]
}
]
}
Такое возможно?
Добрый день. У меня проблема. Пока читаешь "Быстрый старт" все здорово все красиво, как только начинаешь делать не складывается.
Очень сильно интересуют блоки.
Блок не должен влиять на свое окружение, т. е. блоку не следует задавать внешнюю геометрию (в виде отступов, границ, влияющих на размеры) и позиционирование.
Т.е. я не имею права пользоваться такими вещами для блока как margin, padding, border, position, float и т.д.???
Каким образом тогда их так просто и красиво меняют местами в примерах?
https://ru.bem.info/methodology/key-concepts/
раздел "Свободное перемещение".
Дают красивый пример с блоком Head block внутри которого очень легко и не принужденно двигают еще 3 блока logo, search, auth.
"Так, например, логотип и форму авторизации можно поменять местами. При этом вносить изменения в CSS или JavaScript-код блока не нужно." - сказано в примере.
Но с точки зрения HTML мы имеем слеющий код
<div class="headblock">
<div class="logoblock"></div>
<div class="searchblock"></div>
<div class="authblock"></div>
</div>
(все отлично, все красиво. Мы имеем блок в который вложены другие блоки)
А с точки зрения CSS у них как минимум у всех будут значения float а это уже противоречит методологии БЭМ, и для других проектов мы эти блоки использовать не сможем, потому что они потребуют редактирование CSS.
Как быть?
Существует страница 'index' и блок 'post' c модификатором 'type' => 'one':
// index.bemjson.js
module.exports = {
block: 'page',
content: {
block: 'post',
mods: { type: 'one' },
content: {
...
}
}
В папке desktop.blocks/post/ лежат файлы:
post.bemhtml.js,
post.bemjson.js,
post.bh.php
...
В папке desktop.blocks/post/_type/ лежат файлы:
post_type_one.bemhtml.js,
post_type_one.bemjson.js,
post_type_one.bh.php
...
При сборке проекта в бандле страницы появляется файл index.bh.php.
Код:
// index.bh.php
// file: ../../desktop.blocks/post/post.bh.php
$bh->match('post',function ($ctx) {
....
А необходимо, чтобы 'брался' шаблон desktop.blocks/post/_type/post_type_one.bh.php.
Как enb-bh-php сообщить об этом?
Есть страница:
/ index.bemjson.js /
module.exports = {
block: 'page',
...
content: [
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio'
},
content: [
{
elem: 'item',
content: 'Отдых в горах'
},
{
elem: 'item',
content: 'Отдых на море'
}
]
}
]
};
После построения, появляется блок menu ->
в нем элементы item, но у них нет uniq и не меняются модификаторы (checked, hovered), так же отсутствует класс i-bem, атрибут data-bem .
Причем у блока menu появляется class i-bem, модификаторы, uniq и т.д.
У кнопок так же все функционирует и работает, а вот menu__item не хочет работать.
В либе ошибочка?(
Имеем input[type=file] на котором событие change (сделано по БЭМ, естествен)
Хотим: загрузить данный файл с помощью AJAX еще до сабмита формы.
inputFiles._domEvents().on('change', function(e) {
console.log(e); // Есть bemTarget._val который содержит путь к файлу, но console.log(e.bemTarget._val) возвращает пустую строку
console.log(e.files); // undefined
});
// inputFiles = findChildBlock({ block: Input, modName: 'type', modVal: 'file' })
Подскажите, как это реализовать?