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

▍Часть 2

В scss есть возможность вкладывать медиазапросы в правила. Например:

.block {
    width: 100%;
    @media screen and (min-width: 768px) {
        width: 60%;
    }
}

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

.block {
    width: 100%;
}

@media screen and (min-width: 768px) {
    .block {
        width: 60%;
    }
}

Так писать медиазапросы довольно удобно, тогда один селектор будет встречаться строго в одном месте в стилях. В таком случае обязательно использовать переменные для основных брейкпоинтов. Должно быть так, чтобы по названиям переменных можно было легко определять, какой брейкпоинт соответствует устройству (по спецификации и макетам проекта), а какой был написан специально под контент.

Большое количество медиазапросов не сказывается ощутимо на производительности, но, разумеется, сказывается на весе css документа. Если у вас большой проект со сложной организацией контента, медиазапросов много, то стоит задуматься об их комбинации.

WebDEV #советы #web

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

1. NestJS за 100 секунд.

2. 100dayscss — создайте за 100 дней что-нибудь прекрасное и выведите свои навыки CSS на новый уровень.

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

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

Не часто встретишь UX-проектировщика и верстальщика в одном лице. Но верстальщикам время от времени приходится принимать решения, которые могут повлиять на взаимодействие: сделать его удобным или отвратительным, в зависимости от того, как будет сверстан компонент. Не важно, верстаете ли вы под мобильные без макета или просто добавляете кнопку, о которой забыли на этапе проектирования, вам нужно как минимум знать основы.

Для начала предлагаем обратить внимание на типичную ошибку новичка: ссылки и кнопки маленького размера, между ними мало пространства. Это ок, если взаимодействие происходит мышкой, но совершенно не годится, когда речь идет о тач-устройствах. Многократные попытки попасть по ссылке, которые в результате приводят к попаданию по соседней ссылке, очень быстро выводят пользователей из себя. Наверняка каждый из нас бывал в такой ситуации, и первое, что хочется сделать, — покинуть неудобный сайт.

WebDEV #советы #web

📖 Web Design Playground
🖋 Paul McFedries, 2019

Автор книги проведет вас по длинному пути обучения веб-разработке от написания первой строки HTML-кода до создания интересных и привлекательных веб-страниц. Поработав с данной книгой и изучив несколько проектов, разбор которых включен в нее, вы прокачаете свои навыки в веб-дизайне.

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

WebDEV #book #html #css #web

🛠 Codementor — совершенствуйтесь в программировании, работая над реальными проектами.

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

💡 Ошибка: все в пикселях, даже font-size

Советуем сделать (если вы еще нее сделали) переход с px на em и rem для таких значений, как:

— размер шрифта и высота строки,
— размеры иконок,
— размеры кнопок,
— вертикальный ритм.

В рамках БЭМ для блока: rem для размера шрифта блока, em — для остальных величин блока. Для элемента есть 2 стратегии:

1) em для размера шрифта, если структура html уже утвердилась и вряд ли добавится / убавится еще один уровень вложенности,

2) rem — если в рамках блока вероятны изменения (перемещение элементов, добавление или удаление оберток и т.п.).

Чтобы понять разницу между единицами изменения или выбрать между em и rem, предлагаем обратить внимание на канал DevTips, на котором в весьма непринужденной форме объясняются основы верстки.

Также с псевдоэлементами и em стоит быть осторожней:

«Если в IE9+для одного и того же псевдоэлемента задать размер шрифта через разные селекторы, то он просто перемножит все размеры шрифтов.» (источник)

WebDEV #советы #web

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

1. Web Design Playground.

2. Codementor — совершенствуйтесь в программировании, работая над реальными проектами.

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

WebDEV #test #js

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

💡 Ошибка: не думать о переполнении и предельных значениях

▍Часть 1

Верстая по макету, мы имеем дело с идеальной ситуацией. Так новички довольно часто забывают про угрозу переполнения, т.е. когда контент не помещается в блок или элемент и выходит за его пределы. Эту ситуацию нужно срочно исправлять, ведь верстальщик — это еще и своего рода переводчик интерфейса с языка дизайнерского на язык, понятный программистам. Поэтому очень важно в процессе верстки выявить предельные значения объема текста для кнопок, заголовков и прочих элементов с ограниченной вместимостью. Об этих предельных значениях стоит сообщить разработчикам (как минимум написать комментарий в HTML) и по возможности ограничить переполнение в css: Пример.

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

WebDEV #советы #вёрстка #html #css #web

React for the Haters in 100 Seconds

React — самый популярный JS-фреймворк, но некоторые веб-разработчики считают его отстойным. Давайте посмотрим на критику и ненависть в адрес React.js.

📺 YouTube

WebDEV #видео #React #js

🛠 Codier — здесь можно порешать сложные, но интересные задачи по фронтенду.

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

💡 Ошибка: не думать о переполнении и предельных значениях

▍Часть 2

То же касается и изображений. Совсем не факт, что изображения будут загружаться в правильных пропорциях или что они будут обрезаться программно в процессе загрузки. Если гарантии сохранения пропорций нет, то лучше сразу в верстке сделать обертку и применить одну из двух техник: вписывание или растягивание по ширине. Пример.

Можно также с надеждой смотреть в сторону object-fit, однако у этого свойства пока довольно слабая поддержка.

WebDEV #советы #вёрстка #html #css #web

💡 Подборка советов по ревью верстки. Распространённые ошибки

▫️ Копипаста есть, комментариев нет: Часть 1 | Часть 2

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

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

▫️ Ошибка: беспорядок в медиазапросах: Часть 1 | Часть 2

▫️ Ошибка: не интересоваться UX-проектированием

▫️ Ошибка: все в пикселях, даже font-size

▫️ Ошибка: не думать о переполнении и предельных значениях: Часть 1 | Часть 2

WebDEV #подборка #советы #вёрстка #html #css #web

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

1. React for the Haters in 100 Seconds.

2. Codier — здесь можно порешать сложные, но интересные задачи по фронтенду.

3. Не думать о переполнении и предельных значениях.

WebDEV #test #html

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

💡 Ошибка: уделять недостаточно внимания графике

▍Часть 1

Графику обычно делят на 3 части: иконки, изображения контента, фоновые изображения. С фоновыми изображениями у новичков обычно проблем не возникает, а вот с иконками и контентными изображениями все не так хорошо.

Сегодня стоит предпочесть svg-спрайты иконочным шрифтам, если нет требований к поддержке совсем старых версий IE. Подробное сравнение двух подходов можно прочитать тут #1 и тут #2. SVG-спрайт тоже можно кешировать, т.е. можно ссылаться на внешний файл, если набор иконок большой и повторяется от страницы к странице. Для кешируемых спрайтов есть полифил, добавляющий поддержку в IE. А в одностраничных приложениях спрайт обычно добавляется в базовый шаблон.

WebDEV #советы #вёрстка #html #css #web

📖 Web Security for Developers
🖋 Malcolm McDonald, 2020

Начинающего разработчика легко обескуражить трудностями, связанными с должной защитой веб-сайта. К счастью, инструменты, необходимые для защиты сайта, находятся в свободном доступе и, как правило, просты в использовании. Данная книга покажет вам, как ваши веб-сайты уязвимы для атак и как их защитить. В каждой главе описывается основная уязвимость системы безопасности и исследуется реальная атака, а также большое количество кода, показывающего и уязвимость, и исправление.

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

WebDEV #book #web #security

💡 Ошибка: уделять недостаточно внимания графике

▍Часть 2

Контентные изображения, например, фото товара, — главная причина большого веса сайтов. На десктопах (особенно на экранах с большой плотностью пикселя) нам нужны изображения в большом разрешении. Их вес обычно не вызывает проблем, т.к. в основном десктопы используют высокоскоростные подключения с неограниченным трафиком. Пользователи мобильных устройств же вынуждены выкачивать лишние мегабайты изображений. А если у них низкая скорость передачи данных, бывают обрывы? Получаем не очень довольных пользователей. Остается только надеяться, что они не в роуминге. Эту ситуацию легко исправить с помощью атрибута scrset у <img> или с помощью тега <picture>. Постепенно поддержка этих возможностей становится лучше, а для старых браузеров есть полифил. Для подробного ознакомления с техникой поставки разных контентных изображений для разных устройств советуем бесплатный курс «Responsive images» от Udacity.

WebDEV #советы #вёрстка #html #css #web