WebDEV

💡 Ошибка: Pixel Perfect? Не, не слышал О Pixel Perfect часто забывают (кстати, не только новички). С одной стороны, верстальщик почти всегда действует, опираясь на макет, с другой — немножко от этого макета отступает. В процессе работы над проектом какие-то компоненты могут меняться местами, от каких-то отказываются, появляются новые и т.п. Размеры элементов могут немного меняться в зависимости от контента (см. переполнение и предельные значения). В конце концов, дизайнер может допустить ошибку при выравнивании элементов по сетке. Все это — адекватные причины, чтобы локально отказаться от pixel perfect и верстать «по ситуации». В идеале каждое отступление от макета должно быть задокументировано. В случаях, когда нет причин отклоняться от макета, стоит четко ему следовать (помочь в этом может, например, расширение для Chrome — Pixel Perfect). WebDEV #советы #вёрстка #html #css #web

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

🔥 Лучшее на канале за неделю 1. Web Security for Developers. 2. Ace Front End предлагает практические задачи на написание кода с подробным объяснением идеального решения для собеседования. 3. Ошибка: уделять недостаточно внимания графике.

🛠 Ace Front End предлагает практические задачи на написание кода с подробным объяснением идеального решения для собеседования. WebDEV #инструменты #frontend

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

🚀MongoDB — самая популярная NoSQL-база данных. Её используют многие крупные компании, работающие с большими данными: Google, Twitter, Forbes и другие. MongoDB присущи кроссплатформенность, высокая скорость разработки, простота по сравнению с SQL и легкая масштабируемость. Знание этой БД выделит вас среди коллег и повысит вашу ценность на рынке труда. Освоить систему поможет онлайн-курс «MongoDB» от OTUS. 👉🏻ПРОЙТИ ТЕСТ ПО MONGO: https://otus.pw/P27d/ 📌Хотите протестировать учебный процесс заранее? Регистрируйтесь на бесплатный вебинар «Варианты установки MongoDB» — СЕГОДНЯ, 5 мая в 20:00 мск: https://otus.pw/RQhY/

📖 Web Security for Developers 🖋 Malcolm McDonald, 2020 Начинающего разработчика легко обескуражить трудностями, связанными с должной защитой веб-сайта. К счастью, инструменты, необходимые для защиты сайта, находятся в свободном доступе и, как правило, просты в использовании. Данная книга покажет вам, как ваши веб-сайты уязвимы для атак и как их защитить. В каждой главе описывается основная уязвимость системы безопасности и исследуется реальная атака, а также большое количество кода, показывающего и уязвимость, и исправление. 💾 Скачать книгу WebDEV #book #web #security

Хотите научиться делать один из самых популярных элементов анимации? 🤔 ⚡️Приглашаем 11 мая в 20:00 мск на открытый урок «Анимация модального окна сайта: основы и полезные фишки» в OTUS. Вместе с Марией Коршуновой, экспертом с опытом более 10 лет в сфере веб-разработки, мы потренируемся в анимации модального окна его открытия и закрытия, чтобы сделать элемент отличным от большинства сайтов. Урок дает возможность предварительно попробовать новый онлайн-курс «Веб-анимации». 👉🏻Регистрация на вебинар: https://otus.pw/5GS6/

💡 Ошибка: уделять недостаточно внимания графике ▍Часть 1 Графику обычно делят на 3 части: иконки, изображения контента, фоновые изображения. С фоновыми изображениями у новичков обычно проблем не возникает, а вот с иконками и контентными изображениями все не так хорошо. Сегодня стоит предпочесть svg-спрайты иконочным шрифтам, если нет требований к поддержке совсем старых версий IE. Подробное сравнение двух подходов можно прочитать тут #1 и тут #2. SVG-спрайт тоже можно кешировать, т.е. можно ссылаться на внешний файл, если набор иконок большой и повторяется от страницы к странице. Для кешируемых спрайтов есть полифил, добавляющий поддержку в IE. А в одностраничных приложениях спрайт обычно добавляется в базовый шаблон. WebDEV #советы #вёрстка #html #css #web

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

🔥 Лучшее на канале за неделю 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