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

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

Читать статью

Обрезка нескольких строк с троеточием на чистом CSS!

Все мы знаем, что с помощью свойства text-overflow: ellipsis; можно добавить троеточие к одной строчке, которая выходит за пределы контейнера. Но также с помощью свойства -webkit-line-clamp мы можем обрезать несколько строк текста!

Для его использования нужно также установить два нестандартных свойства: display: -webkit-box; и -webkit-box-orient: vertical;

Обратите внимание, что без добавления overflow: hidden; содержимое не будет обрезано, но многоточие все равно будет отображаться после указанного количества строк.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

https://youtu.be/X0Q5hp80TEY

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

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

Полезный метод в 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 и поддерживается в современных браузерах.

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

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

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

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

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

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

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

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

#подкаст

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

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

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

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

Что такое useLayoutEffect

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

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

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

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

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

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

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

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

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

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