Стартую фронтенд

dorisᅠ сказал(а):↑

В связке с этой штукой https://styled-system.com/ очень даже неплохо получается

Нажмите, чтобы раскрыть...

а вторая штука что дает? Я чет не очень понял

Till_Its_Gone сказал(а):↑

а вторая штука что дает? Я чет не очень понял

Нажмите, чтобы раскрыть...

Вместо того чтобы создавать styled константу:

 

const Box = styled.div`

  display: flex;

  flex-direction: column;

  margin-right: 16px;

`;

ты можешь сделать компонент Box, который будет использоваться следующим образом:

 

 

Можно еще всякие твиксы с ним проделать, например чтобы он принимал проп row или col, и тогда пример выше можно будет заменить на

 

 

 

UPD: черт, сайт стирает теги которые я пишу xd

 

dorisᅠ сказал(а):↑

Вместо того чтобы создавать styled константу:

 

const Box = styled.div`

  display: flex;

  flex-direction: column;

  margin-right: 16px;

`;

ты можешь сделать компонент Box, который будет использоваться следующим образом:

 

 

Можно еще всякие твиксы с ним проделать, например чтобы он принимал проп row или col, и тогда пример выше можно будет заменить на

 

 

 

UPD: черт, сайт стирает теги которые я пишу xd

 

Нажмите, чтобы раскрыть...

То есть это используется в больших проектах, чтобы упростить структуру кода?

sinkari сказал(а):↑

Всем привет

В этой теме буду отмечать свой прогресс в освоении профессии фронтенд-разработчика

 

Задача: в сентябре 2020 попасть на стажировку в одну из IT-компаний моего региона

Что я уже знаю

как сверстать простую страничку, как адаптировать эту страничку под экраны с разным разрешением.

знаю js на уровне function iBan(){alert("You are banned");}

2020

 

май

 

19 число

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

 

20 число

Пока что прохожу freecodecamp, думаю еще часа 2 мне хватит, чтобы закончить блок базового JS'a. Делаю не потому что это приносит пользу, а чтобы было что в резюме указывать. К вечеру планирую сесть за задачу с матрицами и дорешать наконец

 

Закончил блок на кодКемпе, потребовалось больше времени, так как случился затуп на последних задачах

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

Вот сам код: https://jsfiddle.net/8ufsgLrq/

 

21 число

Сегодня я много прокрастинировал  и смотрел видео по курсу с udemi. Код почти не писал, начал задумываться об оформлении своего гитхаба. Возможно до сна успею решить задачку с codewars .

 

22 число

Сегодня практикую верстку. Читаю про БЭМ-методологию + css grid. Затем попытаюсь сверстать на бэм и гридах какой-нибудь макет.

Вопросы местным фронтенд-аксакалам

Используете ли вы в своей работе БЭМ методологию? Аналогичный вопрос про css гриды.

Нажмите, чтобы раскрыть...

Ну шо товарищ, рассказывай как успехи, с какими сложностями сталкивался?

sinkari сказал(а):↑

То есть это используется в больших проектах, чтобы упростить структуру кода?

Нажмите, чтобы раскрыть...

Да, так значительно удобнее, чем каждый раз создовать новую константу.

Просто делаешь в одном месте компонент Box, импортиртируешь его где угодно, и юзаешь с разными свойствами.

Там так же можно компонент Text сделать, который будет принимать в себя fontSize, textAlign, fontWeight и другие свойства связанные с текстом.

Insecure сказал(а):↑

Ну шо товарищ, рассказывай как успехи, с какими сложностями сталкивался?

Нажмите, чтобы раскрыть...

Сложности пока что банальные - в голове каша, стараюсь структурировать как могу, конспектирую, но мне кажется, инфа уляжется только со временем. 

 

sinkari сказал(а):↑

Задача: в сентябре 2020 попасть на стажировку в одну из IT-компаний моего региона

Нажмите, чтобы раскрыть...

За 4 месяца стажером? За это время можно джуном стать. Удачи

sinkari сказал(а):↑

Используете ли вы в своей работе БЭМ методологию?

Нажмите, чтобы раскрыть...

Не очень ее люблю, только если еще на проекте есть люди, которые ее юзают

sinkari сказал(а):↑

Аналогичный вопрос про css гриды.

Нажмите, чтобы раскрыть...

Раз в месяц, все остальное делаю на флексах

sinkari сказал(а):↑

Сложности пока что банальные - в голове каша, стараюсь структурировать как могу, конспектирую, но мне кажется, инфа уляжется только со временем. 

 

Нажмите, чтобы раскрыть...

Каша это нормально, и она всегда будет.

Инфа уляжется только с опытом, просто нужно помнить, где что подсмотреть. 

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

Till_Its_Gone сказал(а):↑

что насчет этой штуки?

https://styled-components.com/

Нажмите, чтобы раскрыть...

А, если ты спросил, как я отношусь к нему и тебе интересно мое мнение, то мне нравится) удобная штука

Ramdesu сказал(а):↑

Ну вот, опять же, я не гуглил, но как-то хз, как можно БЭМ применять в стайледах. Единственное, что тебе нужно помнить из БЭМ, так это то, что тебе не стоит задавать маржины и прочие позишны на переиспользуемых компонентах. БЭМовский нейминг явно не стоит использовать)) Та и вряд ли получится

Нажмите, чтобы раскрыть...

я не особо чето понял, я просто спросил про либу) мне до ваших бэмов до лампы

Till_Its_Gone сказал(а):↑

я не особо чето понял, я просто спросил про либу) мне до ваших бэмов до лампы

Нажмите, чтобы раскрыть...

Дополнил сверху)

Ramdesu сказал(а):↑

В стайлед компонентах можно же точно так же пропс прокинуть, разве нет? Либу еще не смотрел

Нажмите, чтобы раскрыть...

Нет

dorisᅠ сказал(а):↑

Нет

Нажмите, чтобы раскрыть...

Ну как нет, если да? В стайледах можно пропы прокидывать и эти пропы потом можно использовать внутри темплейтной строки, в которой стили определяются. Или же если там просто ВСЕ css свойства и они автоматически применяются без определения их в темплейтной строке, то имхо это слегка туповато, потому что сначала мы пытаемся уйти от аттрибутов со стилями в HTML в пользу CSS, а потом мы уходим от CSS в пользу аттрибутов в JSX =/

Ramdesu сказал(а):↑

Ну как нет, если да? В стайледах можно пропы прокидывать и эти пропы потом можно использовать внутри темплейтной строки, в которой стили определяются. Или же если там просто ВСЕ css свойства и они автоматически применяются без определения их в темплейтной строке, то имхо это слегка туповато, потому что сначала мы пытаемся уйти от аттрибутов со стилями в HTML в пользу CSS, а потом мы уходим от CSS в пользу аттрибутов в JSX =/

Нажмите, чтобы раскрыть...

Офк ты можешь в styled компонент прокидывать проп, но только для того чтобы его использовать в самих стилях, например

const Box = styled.div`

 ${props => props.active && css`

   color: green;

  `}

`;

sinkari сказал(а):↑

Сложности пока что банальные - в голове каша, стараюсь структурировать как могу, конспектирую, но мне кажется, инфа уляжется только со временем. 

 

Нажмите, чтобы раскрыть...

Офк уляжется. Мозгу нужно время для адаптации

Ramdesu сказал(а):↑

Это просто набор договоренностей, странно искать там что-то невероятное. Просто когда ты неймишь одним способом, а я другим, то как бы и твой код норм, и мой код норм, но проблема с рандомным неймингом все равно остается. А БЭМ позволяет сделать код одинаковым и простым. К тому же, если не использовать что-то вроде БЭМ, то тебе придется самому придумывать как разграничивать непереиспользуемые классы и переиспользуемые. Если я вижу в БЭМ block__element, то я сразу понимаю, что эта штука используется только внутри block и нигде больше. Нельзя просто неймить рандомно и добиться такого эффекта

 

Нажмите, чтобы раскрыть...

БЭМ в основном не про нейминг, а именно про структуру из независимых блоков.

Ixfus сказал(а):↑

БЭМ в основном не про нейминг, а именно про структуру из независимых блоков

Нажмите, чтобы раскрыть...

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

Ixfus сказал(а):↑

БЭМ и гриды прекрасны. Если есть карточки – грид незаменим.

В микропроектах БЭМ не окупается (если делать лендинг или сайт из пары страниц)

Нажмите, чтобы раскрыть...

Гриды - фигня полная, нет смысла их использовать вообще.

Не используешь БЭМ даже на 5 строка кода - можешь ливать с профессии.

 

Meepka сказал(а):↑

Мне даже интересно увидеть твой код, как ты там вообще без БЭМ обходишься. 

 

 

Гриды - фигня полная, нет смысла их использовать вообще.

Не используешь БЭМ даже на 5 строка кода - можешь ливать с профессии.

 

Нажмите, чтобы раскрыть...

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

Ixfus сказал(а):↑

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

Нажмите, чтобы раскрыть...

Ну вот ты сделай на гридах и скажи - "вот реализуй такое на флексах". Ибо так я тебе покажу, а ты скажешь да ты не правильно понял и тд. Знаем таких. 

Meepka сказал(а):↑

Ну вот ты сделай на гридах и скажи - "вот реализуй такое на флексах". Ибо так я тебе покажу, а ты скажешь да ты не правильно понял и тд. Знаем таких. 

Нажмите, чтобы раскрыть...

grid-template-areas и твой флекс нервно курит в сторонке =)

Meepka сказал(а):↑

Ну вот ты сделай на гридах и скажи - "вот реализуй такое на флексах". Ибо так я тебе покажу, а ты скажешь да ты не правильно понял и тд. Знаем таких. 

Нажмите, чтобы раскрыть...

И без пафоса "единственно-правильности", пожалуйста.

 

что-нибудь такое https://codepen.io/Ixxy/pen/OJyGRqP

или эти примеры из MDN https://developer.mozilla.org/ru/docs/Web/CSS/grid-template-areas

 

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

Ixfus сказал(а):↑

И без пафоса "единственно-правильности", пожалуйста.

 

что-нибудь такое https://codepen.io/Ixxy/pen/OJyGRqP

или эти примеры из MDN https://developer.mozilla.org/ru/docs/Web/CSS/grid-template-areas

 

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

Нажмите, чтобы раскрыть...

https://codepen.io/grimmino/pen/bGVJwPp?editors=1100

Meepka сказал(а):↑

https://codepen.io/grimmino/pen/bGVJwPp?editors=1100

Нажмите, чтобы раскрыть...

избыточная вложенность(upd) которая доджится гридами

Siller__ сказал(а):↑

избыточная вложенность

Нажмите, чтобы раскрыть...

Смешная шутка. Оценил.