📌 Полезное свойство в JSDoc, особенно при рефакторинге! Помогает отмечать функции и константы как deprecated, то есть устаревшими и не рекомендованными к использованию.

В комментариях также полезно указывать альтернативу старому решению.

IDE автоматически будет зачеркивать такие функции в коде и отображать специальную подсказку.

Сегодня мы хотели бы поделиться тем, как можно организовать с нуля небольшой проект, для которого кроме клиента необходимо иметь простой сервер, но при этом нет нужды писать сложный бэкенд или использовать специальные большие фреймворки. А также бонусом расскажем, как можно быстро и просто его задеплоить ⬇️

https://telegra.ph/Eshchyo-odin-preset-sozdayom-demo-s-pomoshchyu-Vite-i-Express-08-17

💡 Как можно сделать такой элемент, используя только один div?

С помощью CSS-свойства outline можно добавить вторую границу вокруг элемента! А если нужно сделать расстояние до границы прозрачным, можно использовать свойство outline-offset.

Делитесь своими вариантами в комментариях👇

Сегодня хотим поделиться с вами отличным ресурсом для изучения и практики CSS Flexbox!

Это бесплатный игровой тренажёр 👉 Flexbox Froggy

Закрепляем на видное место и вперёд оттачивать свои навыки в flexbox-ах!) 🚀

🤔 Вы когда-нибудь задавались вопросом, чем отличаются import и require, и почему где-то используется одно, а где-то другое? Если да, то мы написали подробный разбор систем модулей в JavaScript, чтобы развеять все вопросы. А если вы уже разбираетесь в них, то статья поможет закрепить знания.

https://telegra.ph/CommonJS-i-ECMAScript-Modules-v-JavaScript-v-chyom-raznica-i-kak-s-nimi-zhit-08-24

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