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

Все вы знаете свойство 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/ — это интересный квиз, в котором можно потренироваться искать проблемы в дизайне. Попробуйте и вы, это помогает расти как профи!

Вы когда-нибудь замечали, что при использовании якорей или скроллинга с 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/

Обрезка нескольких строк с троеточием на чистом CSS! Все мы знаем, что с помощью свойства text-overflow: ellipsis; можно добавить троеточие к одной строчке, которая выходит за пределы контейнера. Но также с помощью свойства -webkit-line-clamp мы можем обрезать несколько строк текста! Для его использования нужно также установить два нестандартных свойства: display: -webkit-box; и -webkit-box-orient: vertical; Обратите внимание, что без добавления overflow: hidden; содержимое не будет обрезано, но многоточие все равно будет отображаться после указанного количества строк.

Сегодня я расскажу о том, как работают JWT-токены, а также что такое access и refresh токены, и как с помощью них организовывается процесс аутентификации и авторизации в современных приложениях Читать статью

Что проверяется в этом условии? 🤡 Пишите ваши варианты в комментариях)

Все мы хоть раз пользовались директивой @ts-ignore, которая позволяет игнорировать строку кода на наличие ошибок TypeScript. Но, на самом деле, это не единственная директива, позволяющая управлять поведением компилятора. Вот ещё несколько примеров: 1️⃣ @ts-expect-error — похожа на @ts-ignore, но ожидает, что следующая строка кода вызовет ошибку компиляции. Если ошибка не возникает, TypeScript выдаст предупреждение. 2️⃣ @ts-nocheck — отключает проверку ошибок для всего файла. Полезно, когда нужно быстро включить файл в проект без необходимости исправлять все ошибки типизации. например, при миграции существующего JavaScript-проекта на TypeScript. 3️⃣ @ts-check — включает проверку типов в файле JavaScript, когда в TypeScript включён режим allowJs. Полезно, если в вашем проекте используются файлы JavaScript, и вы хотите частично применять возможности TypeScript для повышения надёжности кода. P.S. Использование этих директив вредит вашему здоровью стоит минимизировать, поскольку они могут скрыть важные предупреждения о возможных ошибках в коде.