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

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

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

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

1. Web Security for Developers.

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

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

WebDEV #test #html

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

💡 Ошибка: Pixel Perfect? Не, не слышал

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

В случаях, когда нет причин отклоняться от макета, стоит четко ему следовать (помочь в этом может, например, расширение для Chrome — Pixel Perfect).

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

💡 Инициализация массивов

Инициализировать массив — значит сказать программе, что перед ней массив и с ним необходимо поработать.

Инициализация пустого массива

 a = []; // Инициализировать пустой массив

Инициализация массива со значениями

 a = [1, 2, 3]; // Инициализировать массив с числами 1, 2, 3

Вариант аналогичный var a = [1, 2, 3]

 a = Array.of(1, 2, 3); // Аналогично инициализации массива var a = [1, 2, 3];

Инициализировать массив из шести элементов и заполнить его единицами

 a = Array(6).fill(1); // инициализировать массив из шести элементов и заполнить его единицами

WebDEV #советы #coding #js

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

1. Инициализация массивов.

2. Exercism помогает достичь свободного владения 55 языками программирования.

3. Ошибка: Pixel Perfect? Не, не слышал.