WebDEV
Open in Telegram
Сообщество веб-разработчиков. На канале можно найти: видео-уроки, полезные статьи, новости из мира IT и веб-разработки. Ссылка: @Portal_v_IT Сотрудничество: @oleginc Канал на бирже: telega.in/c/webb_dev
Show more8 203
Subscribers
-124 hours
-147 days
-6330 days
Posts Archive
8 202
💡 Ошибка: беспорядок в медиазапросах
Частая ошибка — смешивать
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
8 202
🔥 Лучшее на канале за неделю
1. Amazon Web Services in Action.
2. Cssbattle — создавайте различные фигуры на CSS в каждом челлендже и улучшайте свои навыки.
3. Ошибка: блоки влияют друг на друга, одни и те же селекторы встречаются в нескольких местах в scss.
8 202
💡 Не используйте миксины, когда можно использовать миксины
Миксины очень помогают следовать принципу DRY (Don’t Repeat Yourself), их активно используют в scss для таких абстрактных задач, как сетка, но о них почему-то забывают, когда речь заходит о верстке компонент. Например, у вас есть кнопки разных цветов, у которых на ховере происходит инверсия цвета. Для инверсии можно написать миксин и сделать стили чуточку чище.
Также советуем обратить внимание на плейсхолдеры, которые, к сожалению, редко встречаются в верстке новичков.
В Jade тоже следует активнее использовать миксины. Например, для svg-спрайтов. Пример можно посмотреть здесь.
WebDEV #советы #web
8 202
📖 Amazon Web Services in Action
🖋 Andreas Wittig, Michael Wittig, 2018
Amazon Web Services in Action - это всеобъемлющее введение в вычисления, хранение данных и создание сетей в облаке AWS. Вы найдете четкое и актуальное освещение всех основных сервисов AWS, которые вам нужны, с акцентом на лучшие практики обеспечения безопасности, высокой доступности и масштабируемости.
💾 Скачать книгу
WebDEV #book #web
8 202
💡 Ошибка: блоки влияют друг на друга, одни и те же селекторы встречаются в нескольких местах в scss
▍Часть 3
Если возникает необходимость так написать, значит, что-то пошло не так на этапе именования, нужно незамедлительно вернуться к Jade и исправить атрибуты
class так, чтобы каждый блок был независимым. Если же заплатка нужна срочно и времени на изменения разметки нет, то оставьте комментарии TODO в обоих документах: в scss и в jade.
Говоря о том, что блок не знает о других блоках, хочется вкратце упомянуть об одном полезном псевдоклассе, о котором постоянно забывают новички. Представьте лейаут верхнего уровня: есть блок с основным контентом и блок aside. Для двух этих блоков указана ширина в %, но на одной странице aside нет и ширина блока с основным контентом должна быть 100%. Тут нам на помощь придет псевдокласс only-child: пример.
В случаях, когда only-child не подходит, используйте модификаторы.
WebDEV #советы #web8 202
🔥 Лучшее на канале за неделю
1. React Native за 100 секунд.
2. frontendpractice — поднимите свои навыки во фронтенде на новый уровень, воссоздавая реальные веб-сайты.
3. Ошибка: блоки влияют друг на друга, одни и те же селекторы встречаются в нескольких местах в scss: Часть 1 | Часть 2.
8 202
💡 Подборка видео за 100 секунд
▫️ D3.js за 100 секунд
▫️ Vite за 100 секунд
▫️ React Query за 100 секунд
▫️ React Native за 100 секунд
WebDEV #подборка #видео
8 202
Python теперь в телеграм!
Python — второй по популярности язык в мире. Он очень универсален: можно писать сайты, а можно искусственный интеллект. Теперь у Python есть русскоязычный канал. Это первоисточник всего, что появляется в платных курсах и остальных ресурсах. Стоит подписаться!
8 202
JavaScript теперь в телеграм!
JavaScript — самый популярный язык в мире, он используется в 95% всех сайтов, которые вообще существуют. Теперь у JS есть русскоязычный канал. Это первоисточник всего, что появляется в платных курсах и остальных ресурсов. Стоит подписаться!
8 202
💡 Ошибка: блоки влияют друг на друга, одни и те же селекторы встречаются в нескольких местах в scss
▍Часть 2
Блок — это отдельный компонент, который не знает о других блоках и их расположении.
«Блок — логически и функционально независимый компонент страницы, аналог компонента в Web Components… Независимость блоков обеспечивает возможность их повторного использования, а также удобство в разработке и поддержке проекта.» (источник)
Такой код будет ошибочным, т.к. состояние одного блока влияет на элемент в другом блоке:
.block {
&:hover .another-block__element {
color: red;
}
}
Продолжение следует...
WebDEV #советы #web8 202
⚡️ Начните знакомство с Rust-фрейморками!
Приглашаем 7 апреля в 20:00 на открытый вебинар «Rust и GUI».
📚Вместе с экспертом мы за 1,5 часа разберем подходы к реализации GUI фреймвоков, рассмотрим Rust-фреймворк iced и создадим на нем небольшое приложение.
После demo-занятия вы можете продолжить осваивать Rust на онлайн-курсе «Rust Developer».
Воспользуйтесь возможностью познакомиться с преподавателем и бесплатно протестировать обучение.
🎯 Пройдите тест и записывайтесь на вебинар – https://otus.pw/Efvw/
8 202
🔥 Мы не жизнь, мы к такому готовим 🔥
📌 Экзамен Oracle Java Programmer — это 70 сложных задач за 2,5 часа. Чтобы его сдать, нужно изучать Java не вширь, а вглубь.
Такую мощную подготовку дает онлайн-курс «Подготовка к сертификации Oracle Java Programmer (OCAJP)» от OTUS.
🚀 Преподаватели курса уже получили это почетное звание и готовы поделиться своими знаниями и опытом.
За 5 месяцев вы разберете все темы и попрактикуетесь решать задачи, как на экзамене. Обучение придаст вам уверенности в своей компетентности.
👉 Пройдите вступительный тест, чтобы оценить свой уровень подготовки и занять место в группе по спец.цене https://otus.pw/lAcS/
