Товарищи! Подкиньте хипстерской литературки по nginx, пожалуйста.

Товарищи! Подкиньте хипстерской литературки по nginx, пожалуйста.

man nginx - самая хиптерская ?

Товарищи! Подкиньте хипстерской литературки по nginx, пожалуйста.

хотя нет, загрузи исходники - там есть всё ?

Тем временем https://zeit.co/blog/next2

Привет. Столкнулся в вопросом "более правильного" переопределения свойств вложенных компонентов в cssmodules. Допустим у нас есть компоненты Sidebar и Button. Button внутри Sidebar должен быть инлайновым. Решение, которое пришло мне в голову — прокидывать класс button определенный в Sidebar.css. Button.css .Button { display: block } Sidebar.css .button { display: inline-block } Sidebar.jsx <Sidebar> <Button className={ styles.button } /> </Sidebar> Суть в том, что Button не должен быть глобальным, а перебить стили нужно. Насколько неправильно такое решение?

Я кстати после того, как столкнулся с подобной проблемой дальше продолжил путь с глоб-ым css (с обычным BEM). Чтобы легче было сдерживать волну редизайнов ) Ситуация была примерно такая же. Нужно было, чтобы кнопки по разному рисовались на разных фонах - темный и светлый. Так как это достаточно общий, так скажем, случай, то решилось это заведением глобального класса типо .is-dark. Ну и вроде как норм. А потом понадобилось, чтобы в одном конкретном компоненте SomeContainer кнопки рисовалсиь третим цветом - уникальным для этого контейнера. Решать это опять через глобальный класс мне совсем не хотелось. Варианты были такие - либо заводить специальную версию кнопок для этого компонента (SomeContainerIconButtin, SomeContainerFlatButton и т.п.) или заранее оборачивать каждый компонент в HOC, который умеет переопределять стиль по умолчанию, который берется из context-а. Т.е. этот SomeContainer бы через чайлдконтекст переопределял стили по умолчанию для потомков. Попробовал и так и так, даже декораторы для красоты прикрутил, но все то, что нагородил мне очень сильно напоминало кое-что - тех же механизмы CSS, только через JS. В итоге оставил эту ветку как экспериментальную до лучших времен )

Я кстати после того, как столкнулся с подобной проблемой дальше продолжил путь с глоб-ым css (с обычным BEM). Чтобы легче было сдерживать волну редизайнов ) Ситуация была примерно такая же. Нужно было, чтобы кнопки по разному рисовались на разных фонах - темный и светлый. Так как это достаточно общий, так скажем, случай, то решилось это заведением глобального класса типо .is-dark. Ну и вроде как норм. А потом понадобилось, чтобы в одном конкретном компоненте SomeContainer кнопки рисовалсиь третим цветом - уникальным для этого контейнера. Решать это опять через глобальный класс мне совсем не хотелось. Варианты были такие - либо заводить специальную версию кнопок для этого компонента (SomeContainerIconButtin, SomeContainerFlatButton и т.п.) или заранее оборачивать каждый компонент в HOC, который умеет переопределять стиль по умолчанию, который берется из context-а. Т.е. этот SomeContainer бы через чайлдконтекст переопределял стили по умолчанию для потомков. Попробовал и так и так, даже декораторы для красоты прикрутил, но все то, что нагородил мне очень сильно напоминало кое-что - тех же механизмы CSS, только через JS. В итоге оставил эту ветку как экспериментальную до лучших времен )

я бы style={{ color: 'uniqueColor' }} написал:)

Я кстати после того, как столкнулся с подобной проблемой дальше продолжил путь с глоб-ым css (с обычным BEM). Чтобы легче было сдерживать волну редизайнов ) Ситуация была примерно такая же. Нужно было, чтобы кнопки по разному рисовались на разных фонах - темный и светлый. Так как это достаточно общий, так скажем, случай, то решилось это заведением глобального класса типо .is-dark. Ну и вроде как норм. А потом понадобилось, чтобы в одном конкретном компоненте SomeContainer кнопки рисовалсиь третим цветом - уникальным для этого контейнера. Решать это опять через глобальный класс мне совсем не хотелось. Варианты были такие - либо заводить специальную версию кнопок для этого компонента (SomeContainerIconButtin, SomeContainerFlatButton и т.п.) или заранее оборачивать каждый компонент в HOC, который умеет переопределять стиль по умолчанию, который берется из context-а. Т.е. этот SomeContainer бы через чайлдконтекст переопределял стили по умолчанию для потомков. Попробовал и так и так, даже декораторы для красоты прикрутил, но все то, что нагородил мне очень сильно напоминало кое-что - тех же механизмы CSS, только через JS. В итоге оставил эту ветку как экспериментальную до лучших времен )

https://www.youtube.com/watch?v=1VM-vEItVeA Посмотрите как будет время. БЭМ смешивать с functional CSS - немного неправильно.

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

Так с БЭМом как раз-таки подобных проблем нет. Ты и так и так сможешь что угодно переопределить

Я кстати после того, как столкнулся с подобной проблемой дальше продолжил путь с глоб-ым css (с обычным BEM). Чтобы легче было сдерживать волну редизайнов ) Ситуация была примерно такая же. Нужно было, чтобы кнопки по разному рисовались на разных фонах - темный и светлый. Так как это достаточно общий, так скажем, случай, то решилось это заведением глобального класса типо .is-dark. Ну и вроде как норм. А потом понадобилось, чтобы в одном конкретном компоненте SomeContainer кнопки рисовалсиь третим цветом - уникальным для этого контейнера. Решать это опять через глобальный класс мне совсем не хотелось. Варианты были такие - либо заводить специальную версию кнопок для этого компонента (SomeContainerIconButtin, SomeContainerFlatButton и т.п.) или заранее оборачивать каждый компонент в HOC, который умеет переопределять стиль по умолчанию, который берется из context-а. Т.е. этот SomeContainer бы через чайлдконтекст переопределял стили по умолчанию для потомков. Попробовал и так и так, даже декораторы для красоты прикрутил, но все то, что нагородил мне очень сильно напоминало кое-что - тех же механизмы CSS, только через JS. В итоге оставил эту ветку как экспериментальную до лучших времен )

В BEM это решаеться через Mixins - блоки и модификаторы которые нужны только для модификации существующих блоков .button .button__default .mixin .mixin__mod1 .mixin__mod2 .mixin__mod3 и применять так <Button className="button button__default mixin mixin__mod3">

Я немного не про это. А про то как это решается в CSS modules

В BEM это решаеться через Mixins - блоки и модификаторы которые нужны только для модификации существующих блоков .button .button__default .mixin .mixin__mod1 .mixin__mod2 .mixin__mod3 и применять так <Button className="button button__default mixin mixin__mod3">

а у миксинов синтаксис такой же, как у блоков? Их тогда ведь можно спутать?..

а у миксинов синтаксис такой же, как у блоков? Их тогда ведь можно спутать?..

Можно - но в этом и суть. Mixin - это что-то вроде множественного наследования - мы говорим что наш DIV это на самом деле два блока

Я немного не про это. А про то как это решается в CSS modules

https://github.com/css-modules/css-modules#composition Сomposition не подходит?

Тут проблема не в том, как что-то переопределить в CSS, а в том, что надо еще переопределять свойство styles у компонента

ему же надо передать новые стили, в которых ты переопределил все как надо

В этом вопросе я за декларативность - если у кнопки 3 стиля, нужно прописать 3 стейта кнопке <Button mod="default"> <Button mod="red"> <Button mod="green"> Хотя проще конечно через callback передать extraClassNames <Button extraClassNames={ ()=> "red" }>

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

Ну как то так наверное, да, когда интерфейс закрыт (css modules), то получается, что ты либо заранее должен предусмотреть все варианты в своем наборе компонентов для всех случаев жизни посредством таких модов. Либо городить механизм для переопределения стилей из хоков и контекста. Либо создавать каждый раз кастомные версии копонентов c переопределнными стилями. А какой вариант выбирать - это наверное уже вопрос предпочтений

а есть кто-нить, кто прикручивал dnd в DraftJS ?

мой коллега

его тут нет

но он страдал

Ну вот такая же херня

а примера кода нету?

и на перекурах изливал мне боль

зареквесчу, он куда-то времено пропал

озвуч свои вопросы

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

может он мазохист? страдение ничто по сравнению с последующим насладжением? ?

может он мазохист? страдение ничто по сравнению с последующим насладжением? ?

ну до этого мне пока оч далеко)

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

все что мне удалось узнать, это то, что он написал свой плагин для dnd

меня все чаще посещают такие мысли)

/* input.css */ .input { width: 100%; } /* fieldset.css */ .fieldset :external(input from "./input.css") { width: 50%; }Так вот оно каково одно из предполагаемых решений касательно css модулей (в стадии proposal сейчас) Все это очень походит на ситуацию, когда забывают место для трубы оставить при стройке )

Как полифилы Promis добавить используя webpack, чтобы не инклюдить везде?

ProvidePlugin

Как полифилы Promis добавить используя webpack, чтобы не инклюдить везде?

Или так https://babeljs.io/docs/usage/polyfill/

Не проще import 'polyfill'?

Или так https://babeljs.io/docs/usage/polyfill/

Не

Там оч жирно

https://polyfill.io если оч хочется

Крутой сервис

Не

А ну ок)) буду знать

new webpack.ProvidePlugin({ 'ie11_polyfill': './vendor/js/ie11-polyfill.js' }),

Ну там реально бандл растёт на 120 Кб что ли

Всем привет. Народ, может кто работал со связкой material-ui + radium.js?

я просто с material-ui

Стили только инлайн использовал?

инлайн для элементов, внешние классы для позиционирования обёрток

Всем привет. Народ, может кто работал со связкой material-ui + radium.js?

А зачем радиум? :)

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

Хочу использовать псевдоклассы инлайн

Ну и медиа тоже

так в чем вопрос?

мне сильно не нравиться кастомизация стилями в самом коде

Если кто-то использовал, я бы хотел попросить примеров ибо, что-то сам не разберусь.

должно оформление быть отлично от кода

Ну тут готов с тобой поспорить)

У меня все стили в отдельных файлах лежат.

Если кто-то использовал, я бы хотел попросить примеров ибо, что-то сам не разберусь.

Лушче смотреть ветку next, она с JSS

Ок, посмотрю next. Спасибо.

А может кто подскажет либу с гридами на 4 размера устройств?

любая

ERROR: S client not available

например, Pure https://purecss.io/

flexboxgrid.com

Сейчас использую flexbox

Но мне немного не подходит

сетка строиться от макета, лучше сетку самому генерировать, например, на sass

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

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

Зря ты решил инлайн

Почему?

Почему?

Дофига лишних ограничений

Оверхед

Jss твое решение

О нет, в их касте пополнение

JSS спасёт мир

ребят

тут нубский вопрос

вот я скачал с гитхаба репозиторий

проекта на реакт нейтив

Я в компоненте пишу import './App.scss' но никогда не задумывался. Он стили ко мне прям в js файл собирает webpack?

Я в компоненте пишу import './App.scss' но никогда не задумывался. Он стили ко мне прям в js файл собирает webpack?

Зависит от лоадера

Скорее всего нет

и хочу его скомпилить. ОТкрываю андроид студио - импорчу папку соответствующую из проекта и вместо проекта открывается новый пустой почему так?

на эмуляторе то есть компилиться

https://pastebin.com/t2iinb7z

Я в компоненте пишу import './App.scss' но никогда не задумывался. Он стили ко мне прям в js файл собирает webpack?

открой свой собранный файл, да посмотри

Пока не собирает :)

Module parse failed: C:\nodeprojects\db-client\client\components\App\App.jsx Unexpected token (5:19) You may need an appropriate loader to handle this file type.

Пока так

Кто-нибудь поможет, скрины скинуть?

https://github.com/VctrySam/Pokemon

вот такой файл проекта

делаю как там сказано