WebDEV

🔥 Лучшее на канале за неделю 1. React for the Haters in 100 Seconds. 2. Codier — здесь можно порешать сложные, но интересные задачи по фронтенду. 3. Не думать о переполнении и предельных значениях.

💡 Подборка советов по ревью верстки. Распространённые ошибки ▫️ Копипаста есть, комментариев нет: Часть 1 | Часть 2 ▫️ Ошибка: блоки влияют друг на друга, одни и те же селекторы встречаются в нескольких местах в scss: Часть 1 | Часть 2 | Часть 3 ▫️ Не используйте миксины, когда можно использовать миксины ▫️ Ошибка: беспорядок в медиазапросах: Часть 1 | Часть 2 ▫️ Ошибка: не интересоваться UX-проектированием ▫️ Ошибка: все в пикселях, даже font-size ▫️ Ошибка: не думать о переполнении и предельных значениях: Часть 1 | Часть 2 WebDEV #подборка #советы #вёрстка #html #css #web

💡 Ошибка: не думать о переполнении и предельных значениях ▍Часть 2 То же касается и изображений. Совсем не факт, что изображения будут загружаться в правильных пропорциях или что они будут обрезаться программно в процессе загрузки. Если гарантии сохранения пропорций нет, то лучше сразу в верстке сделать обертку и применить одну из двух техник: вписывание или растягивание по ширине. Пример. Можно также с надеждой смотреть в сторону object-fit, однако у этого свойства пока довольно слабая поддержка. WebDEV #советы #вёрстка #html #css #web

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

React for the Haters in 100 Seconds React — самый популярный JS-фреймворк, но некоторые веб-разработчики считают его отстойным. Давайте посмотрим на критику и ненависть в адрес React.js. 📺 YouTube WebDEV #видео #React #js

Tinkoff Invest Robot Contest — конкурс по разработке торговых роботов Задача участников — создать робота на новом API Тинькофф Инвестиций, который реализует одну из торговых стратегий на бирже. Всего в конкурсе семь номинаций: — четыре для лучших решений на языках Java, Go, Python и JavaScript; — лучший торговый робот для мобильных устройств; — самое оригинальное использование API; — и лучший интерфейс (визуализация) торговой стратегии. Победители в каждой категории получат 200 000 рублей. Решения принимают до 23 мая включительно. Зарегистрироваться и прочитать подробнее о конкурсе: https://l.tinkoff.ru/robot-contest-tinkoff-invest-api

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

Интернет знает 2 типа онлайн-встреч: одни действуют подобно сильнейшему снотворному, на других – майнятся инсайты и устанавливаются полезные знакомства. Наша относится к последним :) 28 апреля в 18:00 (по МСК) Максим Галеев, дизайн-директор продуктового направления Газпромбанка, на вебинаре «Продуктовый дизайн – от кода до продукта, которым пользуются миллионы» расскажет: • что такое дизайн-системы • чем в них занимается продуктовый дизайнер • зачем ему знания технологического стека, аналитики и agile-методов • как построить во всем этом успешную IT-карьеру Лекция пройдет в Zoom – нужна регистрация: https://vk.cc/cd3e2P

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

🔥 Лучшее на канале за неделю 1. Web Design Playground. 2. Codementor — совершенствуйтесь в программировании, работая над реальными проектами. 3. Ошибка: не интересоваться UX-проектированием.

💡 Ошибка: все в пикселях, даже font-size Советуем сделать (если вы еще нее сделали) переход с px на em и rem для таких значений, как: — размер шрифта и высота строки, — размеры иконок, — размеры кнопок, — вертикальный ритм. В рамках БЭМ для блока: rem для размера шрифта блока, em — для остальных величин блока. Для элемента есть 2 стратегии: 1) em для размера шрифта, если структура html уже утвердилась и вряд ли добавится / убавится еще один уровень вложенности, 2) rem — если в рамках блока вероятны изменения (перемещение элементов, добавление или удаление оберток и т.п.). Чтобы понять разницу между единицами изменения или выбрать между em и rem, предлагаем обратить внимание на канал DevTips, на котором в весьма непринужденной форме объясняются основы верстки. Также с псевдоэлементами и em стоит быть осторожней: «Если в IE9+для одного и того же псевдоэлемента задать размер шрифта через разные селекторы, то он просто перемножит все размеры шрифтов.» (источник) WebDEV #советы #web

27 апреля в 18.00 ФРИИ проводит встречу с выпускниками акселератора Спринт, которые расскажут про свой опыт акселерации, долгосрочные результаты программы и принимаемые меры в новых экономических условиях. Спикеры: • Кравченко Евгений, CEO проекта Flyvi — онлайн-редактора изображений и презентаций с виджетом для создания веб-сторис на любом сайте; • Окара Алексей, учредитель «Пинол» и участник 3-го отбора акселератор Спринт с проектом PINKIT — сервиса интеграции внешних сервисов с CRM-системами. О чём будем говорить: • О работе команд во время акселерации • Как добились высоких результатов • Какие антикризисные меры вводят сейчас, чтобы не сбавлять темпы Приглашаем на встречу выпускников акселератора Спринт и технологические компании, которые рассматривают участие в акселерационных программах в этом году. РЕГИСТИРУЙТЕСЬ и оставляйте свои вопросы для спикеров!

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

📖 Web Design Playground 🖋 Paul McFedries, 2019 Автор книги проведет вас по длинному пути обучения веб-разработке от написания первой строки HTML-кода до создания интересных и привлекательных веб-страниц. Поработав с данной книгой и изучив несколько проектов, разбор которых включен в нее, вы прокачаете свои навыки в веб-дизайне. 💾 Скачать книгу WebDEV #book #html #css #web

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

❓ Пишешь код на C# и хочешь вырасти до мидла или сеньора? Освой продвинутые навыки на открытом вебинаре в OTUS. 👉 Тема вебинара: «Дженерики, их реализация и ограничения». 💪 Мы рассмотрим обобщенные типы и методы, причины появления, их использование, обсудим ограничения обобщений и варианты наследования обобщенных типов. 📌 Demo-занятие пройдет в рамках онлайн-курса «C# Developer. Professional» от OTUS. Это шанс познакомиться с преподавателем и оценить качество материалов. 👉 Пройди вступительный тест, чтобы записаться на мероприятие https://otus.pw/imYCT/

🔥 Лучшее на канале за неделю 1. NestJS за 100 секунд. 2. 100dayscss — создайте за 100 дней что-нибудь прекрасное и выведите свои навыки CSS на новый уровень. 3. Ошибка: беспорядок в медиазапросах.

💡 Ошибка: беспорядок в медиазапросах ▍Часть 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

🛠 100dayscss — создайте за 100 дней что-нибудь прекрасное и выведите свои навыки CSS на новый уровень. Новые задачи каждый день! WebDEV #инструменты #css