💡 Ошибка: копипаста есть, комментариев нет

▍Часть 2

Например:

<!-- TODO: change content attribute  -->
<meta name="apple-mobile-web-app-title" content="AMC Walking Dead">
<!--  -->

Начинающие верстальщики иногда пренебрегают тем, чтобы потратить несколько минут и переработать найденное решение. Так в scss появляются вендорные префиксы, когда в сборку включен автопрефиксер, мусорные свойства и даже переопределения в рамках одного правила:

.block {
    font-size: 1.2 rem;
    …
    font-size: 18px;
}

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

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

WebDEV #советы #web

🔥 Лучшее на канале за неделю

1. Professional JavaScript for Web Developers.

2. Devchallenges — участвуйте в крутых испытаниях и развивайте свои навыки, создавая веб-сайты.

3. Ошибка: копипаста есть, комментариев нет.

WebDEV #test #typescript

Выберите правильный вариант 👇🏼

💡 Ошибка: блоки влияют друг на друга, одни и те же селекторы встречаются в нескольких местах в scss

Великая сила амперсанда в Sass позволяет писать стили по БЭМ и делать это еще нагляднее. Такой код:

.block {
    font-size: 1.2rem;
    &--dark {
        background: #000;
    }
    &__element {
        text-aling: center;
        &--big {
            width: 100%;
        }
        .ie9 & {
            &::before {
                content: 'hello ie'
            }
        }
    }
}

Будет скомпилирован в:

.block {
    font-size: 1.2rem;
}

.block--dark {
    background: #000;
}

.block__element {
    text-aling: center;
}

.block__element--big {
    width: 100%;
}

.ie9 .block__element::before {
    content: "hello ie";
}

Когда есть такой удобный инструмент, даже речи быть не может о повторе и переопределении стилей для одного блока. Если селектор .block уже написан в каком-то документе, то в другом документе его быть не должно.

Продолжение следует...

WebDEV #советы #web

🛠 frontendpractice — поднимите свои навыки во фронтенде на новый уровень, воссоздавая реальные веб-сайты.

WebDEV #инструменты #frontend

💡 Ошибка: блоки влияют друг на друга, одни и те же селекторы встречаются в нескольких местах в scss

▍Часть 2

Блок — это отдельный компонент, который не знает о других блоках и их расположении.

«Блок — логически и функционально независимый компонент страницы, аналог компонента в Web Components… Независимость блоков обеспечивает возможность их повторного использования, а также удобство в разработке и поддержке проекта.» (источник)

Такой код будет ошибочным, т.к. состояние одного блока влияет на элемент в другом блоке:

.block {
    &:hover .another-block__element {
        color: red;
    }
}

Продолжение следует...

WebDEV #советы #web

🛠 Happy Hues — палитры отобранных цветов, которые будут уместны в определённом контексте.

WebDEV #инструменты

💡 Подборка видео за 100 секунд

▫️ D3.js за 100 секунд

▫️ Vite за 100 секунд

▫️ React Query за 100 секунд

▫️ React Native за 100 секунд

WebDEV #подборка #видео

🔥 Лучшее на канале за неделю

1. React Native за 100 секунд.

2. frontendpractice — поднимите свои навыки во фронтенде на новый уровень, воссоздавая реальные веб-сайты.

3. Ошибка: блоки влияют друг на друга, одни и те же селекторы встречаются в нескольких местах в scss: Часть 1 | Часть 2.

WebDEV #test #html

Выберите правильный вариант 👇🏼

💡 Ошибка: блоки влияют друг на друга, одни и те же селекторы встречаются в нескольких местах в scss

▍Часть 3

Если возникает необходимость так написать, значит, что-то пошло не так на этапе именования, нужно незамедлительно вернуться к Jade и исправить атрибуты class так, чтобы каждый блок был независимым. Если же заплатка нужна срочно и времени на изменения разметки нет, то оставьте комментарии TODO в обоих документах: в scss и в jade.

Говоря о том, что блок не знает о других блоках, хочется вкратце упомянуть об одном полезном псевдоклассе, о котором постоянно забывают новички. Представьте лейаут верхнего уровня: есть блок с основным контентом и блок aside. Для двух этих блоков указана ширина в %, но на одной странице aside нет и ширина блока с основным контентом должна быть 100%. Тут нам на помощь придет псевдокласс only-child: пример.

В случаях, когда only-child не подходит, используйте модификаторы.

WebDEV #советы #web

📖 Amazon Web Services in Action
🖋 Andreas Wittig, Michael Wittig, 2018

Amazon Web Services in Action - это всеобъемлющее введение в вычисления, хранение данных и создание сетей в облаке AWS. Вы найдете четкое и актуальное освещение всех основных сервисов AWS, которые вам нужны, с акцентом на лучшие практики обеспечения безопасности, высокой доступности и масштабируемости.

💾 Скачать книгу

WebDEV #book #web

🛠 Cssbattle — создавайте различные фигуры на CSS в каждом челлендже и улучшайте свои навыки.

WebDEV #инструменты #css

💡 Не используйте миксины, когда можно использовать миксины

Миксины очень помогают следовать принципу DRY (Don’t Repeat Yourself), их активно используют в scss для таких абстрактных задач, как сетка, но о них почему-то забывают, когда речь заходит о верстке компонент. Например, у вас есть кнопки разных цветов, у которых на ховере происходит инверсия цвета. Для инверсии можно написать миксин и сделать стили чуточку чище.

Также советуем обратить внимание на плейсхолдеры, которые, к сожалению, редко встречаются в верстке новичков.

В Jade тоже следует активнее использовать миксины. Например, для svg-спрайтов. Пример можно посмотреть здесь.

WebDEV #советы #web

🔥 Лучшее на канале за неделю

1. Amazon Web Services in Action.

2. Cssbattle — создавайте различные фигуры на CSS в каждом челлендже и улучшайте свои навыки.

3. Ошибка: блоки влияют друг на друга, одни и те же селекторы встречаются в нескольких местах в scss.

WebDEV #test #js

Выберите правильный вариант 👇🏼

💡 Ошибка: беспорядок в медиазапросах

Частая ошибка — смешивать mobile-first и desktop-first подходы. Сейчас, когда IE8 перестал фигурировать в спеках, можно смело переходить на mobile-first. Если макеты готовы только для десктопа, попробуйте повлиять на дизайнера, ссылаясь, например, на эту книгу. В любом случае, будете вы использовать min-width или max-width, используйте что-то одно. Иначе в какой-то момент станет тяжело отслеживать логику изменения стилей, а значит, проблематично поддерживать верстку.

Кроме того, не стоит писать медиазапросы по хардкоду, используйте как минимум переменные для брейкпоинтов. Т.е. вместо:

@media (min-width: 1024px)

должно получиться:

$laptop-landscape: 1024px;

@media (min-width: $laptop-landscape)

Переменные для брейкпоинтов стоит хранить в отдельном документе или в layout.scss. Можно пойти дальше, прочитать эту статью и выбрать один из предложенных подходов (или написать свой).

Продолжение следует...

WebDEV #советы #web

NestJS за 100 секунд

Nest — это прогрессивная платформа для создания серверных приложений и API-интерфейсов с помощью Node.js.

📺 YouTube

WebDEV #видео #NestJS #js