justify-content: space-between приводит к неожиданному отображению разметки

Когда только появился Flexbox многие были воодушевлены свойством justify-content, которое позволяет просто расположить равномерно элементы сетки с помощью значений space-between или space-around. И конечно многие стали пользоваться этим. Но есть проблема.

Когда мы используем эти значения, то не задумываемся, что количество элементов может измениться. Например, если я добавлю еще 2 элемента в сетку из 4 колонок, то они будут отображаться по бокам родителя, в случае space-between, а не в начале строки, как ожидает пользователь.

Поэтому в этой ситуации лучше использовать margin , если нужна поддержка IE11, или column-gap для установки расстояние между элементами.

Не делайте так

 .grid {
   display: flex;
   justify-content: space-between; /* or space-around */
 }

 .item {
   width: 30%;
 }

Можно сделать так
.grid {
display: flex;
column-gap: 5%;
}

.item {
width: 30%;
}

Законы UX-дизайна

Рассмотрены законы UX-дизайна, основанные на психологии поведения пользователей, которые дизайнеры могут использовать на практике для создания интуитивно понятных, ориентированных на человека продуктов и услуг.
Описаны законы Якоба (о привычном интерфейсе), Фиттса (о времени достижения цели), Хика (о времени, необходимом для принятия решения), Миллера (о кратковременной памяти пользователя), Постела (о балансе консервативного и либерального), Теслера (о степени сложности системы) и эффект фон Ресторффа (о самом запоминающемся объекте). Обсуждается правило «на пике и в конце», связанное с особенностью выработки суждений. Также рассмотрен эффект восприятия эстетически приятного дизайна как наиболее удобного в использовании.

👉 @frontendInterview

Mutate My Strings

Вам даны две строки. Преобразуйте первую строку во вторую по одной букве, верните каждый промежуточный результат.

Пример:
stringOne = 'bubble gum';
stringTwo = 'turtle ham';

Result:
bubble gum
tubble gum
turble gum
turtle gum
turtle hum
turtle ham

👉 @frontendInterview

image-set()

CSS-функция image-set() позволяет перечислить несколько фоновых изображений с условиями, по которым браузер решит, какое из них наиболее подходящее для загрузки в данный момент.

Похож по принципу работы на тег <picture>
div {
background-image: image-set(
url("[email protected]") type("image/webp") 1x,
url("[email protected]") type("image/webp") 2x,
url("[email protected]") type("image/png") 1x,
url("[email protected]") type("image/png") 2x
);
}

На сайт могут заходить с разных устройств. У многих дисплеи с повышенной плотностью пикселей и им нужно показывать картинку хорошего качества. А на телефонах лучше показывать небольшие файлы ради ускорения загрузки страницы. Нужно как-то давать разным клиентам разные версии изображений. Раньше для этого использовали медиавыражения, а теперь есть простые и удобные решения, которые позволяют через запятую указать все версии изображений. Конечно, есть тег <picture>, но если изображение декоративное, будет правильнее установить его как фон элемента

👉 @frontendInterview

Счётчик символов в поле ввода

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

👉 @frontendInterview

🔥 Здесь собраны актуальные вопросы к собеседованиям на позицию Frontend Разработчика. Каждый вопрос имеет уровень сложности, короткий и полный ответ, а также ссылки на ресурсы для изучения.

Канал ведут опытные Frontend Разработчики, которые будут еженедельно проводить публичные собеседования среди подписчиков.

«Коллеги, пришлите сроки!» — повторял джун-аналитик в течение месяца…

Если коллеги вас не слышат, игнорируют ваши просьбы — вот кое-что, что вам поможет. Один джун-аналитик столкнулся с такой проблемой, а потом поборол.

Небольшие лайфхаки собраны в короткой статье:

👉 @frontendInterview

Джун вливается в рабочий процесс.

👉 @frontendInterview

CSS Функция local() экономит трафик пользователя

При оптимизации скорости загрузки страницы, кроме изображений, ещё значительным пунктом являются шрифты. Поскольку они весят много. И каково было моё удивление, когда я узнал о существовании функции local().


В чём суть. С помощью функции мы можем проверить, установлен ли нестандартный шрифт на устройстве пользователя. Если установлен, то не загружать его по сети. Для этого её нужно использовать при объявлении правила @font-face. Например, я подключаю шрифт Cherry Bomb One.

 @font-face {
   font-family: 'Cherry Bomb One';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src: local("CherryBombOne Regular"),
        local("CherryBombOne-Regular"),    
        url("CherryBombOne-Regular.woff2") format('woff2');
 }

В этом случае браузеры загрузят его только когда шрифт CherryBombOne Regular не установлен на устройстве пользователя. Очень простой трюк, но суперполезный.

👉 @frontendInterview

Современный учебник jаvascript в 3 книгах

Часть 1. Язык jаvascript
Часть 2. Браузер. Документ, события, интерфейсы
Часть 3. Дополнительные статьи

Автор: Илья Кантор

С помощью этого учебника вы можете изучить jаvascript, начиная с нуля и заканчивая продвинутыми концепциями вроде ООП. Мы будем использовать браузер в качестве окружения, но основное внимание будет уделяться именно самому языку jаvascript. Давайте посмотрим, что такого особенного в jаvascript, чего можно достичь с его помощью, и какие другие технологии хорошо с ним работают.

👉 @frontendInterview

saleHotdogs

Функция принимает 1 параметр: n, n - это количество хот-догов, которые купит клиент, за покупку нескольких штук предусмотрены скидки. Сколько денег потратит клиент, чтобы купить указанное количество хот-догов?
n < 5 $100
n >= 5 и n < 10 $95
n >= 10 $90

Пример:
saleHotdogs( 1 ) => 100
saleHotdogs( 5 ) => 475
saleHotdogs( 10 ) => 900

👉 @frontendInterview

Object.groupBy()

Статический метод groupBy() группирует элементы итерируемого объекта, опираясь на переданную колбэк-функцию. Она должна возвращать название группы, в которую стоит положить текущий элемент. groupBy() вызовет функцию для каждого элемента и вернёт новый объект, в котором каждое свойство — группа с массивом входящих в неё элементов.

Пример
const colors = [
{ value: '50% 0.2 12', name: 'oklch' },
{ value: '198, 35, 109', name: 'rgb' },
{ value: '55% 0.2 0', name: 'oklch' },
]

const groupedColors = Object.groupBy(colors, (color, index) => {
return color.name === 'oklch' ? 'easyToUnderstand' : 'notEasyToUnderstand'
})

console.log(groupedColors)
/*
{
easyToUnderstand: [
{ value: '50% 0.2 12', name: 'oklch' },
{ value: '55% 0.2 0', name: 'oklch' }
],
notEasyToUnderstand: [
{ value: '198, 35, 109', name: 'rgb' }
]
}
*/

👉 @frontendInterview

👉 @frontendInterview

Разноцветный текст

Вам необходимо покрасить текст в разные цвета, например, в радужный градиент. Но как это сделать, если свойство color может принимать только один цвет?

Готовое решение
h1 {
background-image:
linear-gradient(250deg,
#833AB4 0%,
#FD1D1D 50%,
#FCB045 100%
);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}

Подробное объяснение того, как это работает в рецепте.

👉 @frontendInterview

Как оформлять резюме и проходить интервью

В этой статье фронтенд-разработчик в «Северстали» и выпускник курсов даёт полезные советы по прохождению собеседований. Будет полезно прочитать не только начинающим разработчикам, но и всем, кто собирается сменить работу.

👉 @frontendInterview