Настя Котова // Frontend & Node.js

Особенность клавиатурного управления в Safari

Основной способ обеспечения доступности в браузере — это возможность управления с помощью клавиатуры. Это позволяет пользователям без использования мыши беспрепятственно переходить по интерактивным элементам сайта, таким как кнопки и ссылки. Так, в большинстве браузеров для перемещения по элементам используется клавиша Tab, а для обратного перемещения — сочетание Shift + Tab.

Однако особое внимание стоит уделить Safari: в этом браузере по умолчанию не работает переход между кнопками и ссылками с помощью клавиши Tab. Вместо этого нужно использовать сочетание Option + Tab для переключения фокуса. Если же вы хотите использовать стандартный метод с Tab, необходимо включить эту функцию в расширенных настройках браузера.

Как сделать свой контент интерактивным?

contenteditable — это атрибут HTML, который можно добавить к любому элементу, чтобы сделать его редактируемым. Когда этот атрибут установлен, пользователь может кликнуть по элементу и начать вносить изменения в текстовое содержимое.

export const EditableRow: FC = () => {
  return (
    <p className="EditableRow" contentEditable="true">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
      nibh euismod tincidunt ut laoreet dolore magna aliquam erat.
    </p>
  );
};

Часто это свойство используют для реализации собственных текстовых редакторов или какого-то специфичного интерфейсного решения, связанного с редактированием. Но, конечно, не стоит забывать, что для обычных форм с заполнением данных лучше всего подходят нативные теги input и textarea.

Как проверить поддержку css-свойства в браузере?

В одном из предыдущих постов мы обсуждали достаточно специфичные значения свойства text-wrap, который на данный момент поддерживаются не всеми браузерами. Но как убедиться в момент, что текущий браузер поддерживает ту или иную опцию?

@supports — это правило CSS, которое позволяет проверять, поддерживает ли браузер определённое свойство или его значение. Если свойство поддерживается, то стили, вложенные в @supports, применяются.

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

Таким образом, с помощью директивы @support вы можете не только проверять доступность свойств прямо в CSS, но и использовать фоллбеки при необходимости.

Если вдруг вам нужно полностью избавиться от специфических стилей элемента, и вернуть его к исходным настройкам браузера, all: initial; сделает это за вас. Это может быть полезно, когда вы работаете с внешними библиотеками и хотите избежать нежелательных стилей.

Читайте подробнее в документации

Все вы знаете свойство text-wrap, с помощью которого можно указать, переносить текст в контейнере или нет. Однако у этого свойства есть два интересных параметра: balance и pretty.

Параметр balance помогает сбалансировать строки текста так, чтобы обеспечить равномерное распределение слов по строкам. Сравните отображение с text-wrap: wrap и text-wrap: balance. Однако, это свойство работает только для коротких текстов (меньше 6 или 10 строк, в зависимости от браузера).

Параметр pretty наоборот предназначен для длинных текстовых блоков, где хорошая типографика важнее производительности. Он делает множество улучшений, связанных с переносами, в частности предотвращает появление одиноких слов в конце абзаца. Сравните отображение с text-wrap: wrap и text-wrap: pretty для длинного текста.

Таким образом, значение balance можно использовать для заголовков, а значение pretty для основного текста. Однако, стоит учитывать, что сейчас данные возможности поддерживаются не всеми браузерами. Подробнее про поддержку можно посмотреть на MDN.

Удобное свойство inset в CSS!

Это сокращённое свойство, которое объединяет в себе определения для четырех других свойств: top, right, bottom и left.

Оно позволяет задавать отступы элемента от соответствующих сторон его родительского элемента одним коротким выражением.

А также можно использовать сокращенные варианты, как у свойств margin и padding. Например, если указать у абсолютно позиционированного элемента inset: 0, то этот элемент растянется по контейнеру.

Слышали ли вы что-нибудь о таком хуке React, как useLayoutEffect?

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

Что такое useLayoutEffect

Фронтенд-разработчикам полезно иметь набитый глаз в UI, чтобы делать удобные и красивые интерфейсы даже без дизайна.

https://cantunsee.space/ — это интересный квиз, в котором можно потренироваться искать проблемы в дизайне. Попробуйте и вы, это помогает расти как профи!

🔥 Мы пробуем новые форматы!

Это первый наш подкаст, ждем ваш фидбек в комментариях!

Таймкоды:
00:00 - Заменит ли GPT разработчиков
10:36 - Как можно использовать GPT уже сейчас, чтобы быть эффективным
18:20 - Страх всего нового - худший враг разработчика
22:50 - Что нужно знать, чтобы всегда оставаться нужным в профессии

#подкаст

Вы когда-нибудь замечали, что при использовании якорей или скроллинга с JavaScript, контент может "прилипать" к верхней части окна, находясь под фиксированной шапкой или меню?

Свойство scroll-padding позволяет задать отступы внутри элемента, влияющие на прокрутку его содержимого.

📖 Пример:

.Container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.FixedHeader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background: #2d0094;
}

.Content {
  overflow-y: auto;
  scroll-padding-top: 50px;
}

Подробнее в документации

Вы когда-нибудь задумывались, чем отличаются Babel и Webpack, в чем преимущества Vite, почему все говорят о Turbopack и при чем здесь Rust?
Во множестве доступных ныне инструментов легко запутаться, но я постаралась разобраться и описала все в новой статье.

Погружаемся в мир сборщиков

А если у вас еще остались вопросы или появились новые после прочтения (лично у меня точно есть парочка!), пишите их в комментарии 💬

Полезный метод в JavaScript: Array.at() 🚀

Раньше, чтобы получить элемент по индексу, мы использовали традиционный способ:

const arr = [10, 20, 30, 40, 50];
console.log(arr[0]); // 10
console.log(arr[arr.length - 1]); // 50

Но с методом at() всё стало еще проще и удобнее!

const arr = [10, 20, 30, 40, 50];
console.log(arr.at(0)); // 10
console.log(arr.at(-1)); // 50, элемент с конца массива

Этот метод является частью нового стандарта ECMAScript и поддерживается в современных браузерах.

UI-библиотеки значительно упрощают работу фронтенд-разрабочиков, предоставляя готовые инструменты для разработки красивых и функциональных интерфейсов. Сегодня мы хотели бы поделиться подборкой различных UI-китов для самых популярных в данный момент фреймворков, в которой разобрали их плюсы, минусы и тонкости применения

Смотреть подборку ⬇️

Продолжаем разбирать задачи с LeetCode!)

https://youtu.be/X0Q5hp80TEY

📚 Библиотека react-use – это популярная коллекция различных удобных хуков для React. Она включает как базовые, так и более сложные хуки, которые могут существенно ускорить разработку и уменьшить количество кода в вашем проекте.

Несколько интересных хуков оттуда:

- Хуки для работы с состоянием: useToggle, useCounter и т.д.
- Хуки для сайд-эффектов: useDebounce, useThrottle, useTimeout, useInterval и т.д.
- Хуки для событий: useMouse, useScroll, useResize и т.д.

Библиотека предоставляет много готовых и протестированных решений, а также активно поддерживается и развивается.

Подробнее познакомиться с react-use и его возможностями можно здесь.

А какие удобные библиотеки используете вы? Делитесь в комментариях! 💬

Очень удобное свойство для flex-box: gap

Изначально это свойство было введено для grid-контейнеров, но также поддерживается в flex-контейнерах. Оно позволяет задать отступы между элементами без необходимости использования дополнительных отступов (margin).

В случае использования margin, запись выглядит многословнее. Кроме того, этот вариант плохо работает, когда появляется несколько строк.

Свойство gap же отлично справляется с этим! При желании вы можете задать разные отступы для строк и столбцов, используя свойства row-gap и column-gap соответственно

В чем разница между Stateless и Stateful?

Stateless (от англ. “без состояния”) - это системы, которые не хранят состояние между вызовами. В любой момент времени каждый запрос обрабатывается независимо от других запросов. Сервер не запоминает предыдущие взаимодействия с клиентом.

Примеры:
- RESTful API, где каждый запрос содержит всю информацию, необходимую для его обработки.
- DNS-запросы, которые обрабатываются независимо друг от друга.

Stateful (от англ. “с состоянием”) - это системы, которые хранят состояние между вызовами. В этой модели сервер должен помнить предыдущее взаимодействие с клиентом и поддерживать контекст.

Примеры:
- Сессии в веб-приложениях, где пользователи сохраняют свое состояние на сервере через сессионные ID, например, куки.
- GPT-чат, где AI запоминает контекст предыдущих сообщений и может дополнять его.

Статистика по популярности фронтенд-фреймворков за 2023 год:
https://2023.stateofjs.com/en-US/libraries/front-end-frameworks/