Все мы хоть раз пользовались директивой @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. Использование этих директив вредит вашему здоровью стоит минимизировать, поскольку они могут скрыть важные предупреждения о возможных ошибках в коде.

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

Сегодня я расскажу о том, как работают 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.