Skill Blog: Веб-разработка

👩‍💻 JS Трюк: Для одновременного перебора индексов и значений массива 🟡 Конечно, существует метод .forEach(), но этот трюк предназначен для тех случаев, когда приходится использовать классический цикл for Метод .entries() возвращает двумерный массив, где первый элемент в каждом подмассиве - это индекс, а второй - само значение. Мы можем использовать деструктурирующее присваивание, чтобы получить эти значения в двух переменных

👩‍💻 Событие beforeunload Это событие позволяет веб-странице вызвать диалоговое окно подтверждения, спрашивающее пользователя, действительно ли он хочет покинуть страницу Событие происходит перед событием выгрузки страницы unload Обработка через определение onbeforeunload на объекте window:

window.onbeforeunload = () => false

Подробнее: 🟡MDN 🟡Doka

Метод для возврата элемента массива по указанному индексу Он действует почти как скобочная запись array[index], за исключением того, что индекс может быть отрицательным

Единица turn Позволяет определять угол в оборотах. 1turn, соответственно, равен одному обороту или 360 градусам. Удобно использовать в анимации и трансформации элементов, когда требуется повернуть элемент на один или несколько оборотов

overAPI - этот ресурс содержит огромное количество различных шпаргалок по самым популярным технологиям ⛓ Ссылка: тут

CSS Container Queries: Современный подход к адаптиву Контейнерные Запросы - это передовая функция CSS, поддерживаемая 91.65% браузеров Они позволяют нам применять стили к элементам на основе условий, касающихся размеров контейнера. Это делается с помощью правила @container, которое работает аналогично медиазапросам, но ориентировано на размеры контейнера, а не окна просмотра

Web Developer Checklist - интересный сервис для веб-разработчика, который поможет по пунктам проверить готовность проекта к запуску Доступен в виде сайта и расширения Ссылка: тут

Notifications API в JS Используется для настройки и отображения уведомлений на рабочий стол пользователя Поскольку API уведомлений легко злоупотребить, по умолчанию он строго применяет две функции безопасности: — Во-первых, пользователи должны явно согласиться получать уведомления для каждого источника — Во-вторых, отправлять уведомления может только код, работающий в безопасном контексте (HTTPS)

Простой эффект зума с помощью CSS Здесь мы создаем обертку над реальным изображением, отключаем переполнение(overflow) на обертке и масштабируем изображения для достижения этого эффекта

CSS Click Chart - с помощью этого инструмента можно посмотреть, как реализуется то или иное действие на CSS. Также отображается поддержка браузерами Ссылка: тут

В типографике маленькие прописные буквы - это стиль или вариант шрифта, который похож на прописные, но имеет уменьшенную высоту, как у строчных букв. Такой способ изменения символов называется капителью Как правило, он используется для создания акцента на участке текста В CSS это можно включить с помощью свойства font-variant-caps, установив для него значение ✅ small-caps — включает капитель для строчных букв ✅ all-small-caps — включает капитель для строчных и прописных букв

typescript-plugin-css-modules Из коробки CSS Modules не поддерживают типизацию для классов, определенных в CSS-файлах. Но можно подключить этот плагин, который автоматически сгенерирует TypeScript типы на основе имен классов В VS Code убедитесь, что используете версию TypeScript, которая установлена в вашем проекте, а не глобальную(Нажмите на версию TypeScript в правом нижнем углу и выберите "Use Workspace Version") Ссылка: тут

101 совет про React Нашёл для вас полезную статью с советами и подсказками по React Отличная вещь, которая пригодится при изучении React или для подготовки к собеседованию Читать: ссылка

Держите коллекцию советов профессионалов CSS Нашел интересный репозиторий с полезными советами по CSS. Есть очевидные и не очень, нашел кое что новое и для себя. Например, не знал что можно сбросить все свойства элмента всего одной командой all: unset; Буду теперь знать) Ссылка: GitHub

Швейцарский нож для работы с массивами. Метод reduce() Метод reduce сворачивает массив к одному значению (редуцирует) е с помощью переданной функции-колбэка и начального значения. Функция-колбэк будет вызвана для каждого элемента массива, и всегда должна возвращать результат

Использование CSS-градиента для затемнения картинки Одним из способов затемнения изображений с помощью CSS является использование градиентов. Этот метод позволяет более гибко настроить эффект, а также добавить различные переходы и цветовые комбинации СSS:

background: linear-gradient(
to right,
rgb(0 0 0 / 0.5),
rgb(0 0 0 / 0)
), url("img.jpg") 100%/cover no-repeat;

Подборка интересных трюков в VS Code Советы, которые недостаточно велики для отдельного поста, но иногда очень могут пригодится

Подборка 3-х суперполезных функциий в CSS - Функция calc() позволяет производить математические вычисления прямо в CSS - Функция clamp() позволяет ограничивать диапазон изменения некоего значения, задавая его нижний и верхний пределы - CSS-свойство filter добавляет визуальные эффекты к элементам на странице и использует в качестве значений функции

Логические свойства в CSS Логические свойства привязаны не к сторонам экрана, а к направлению письма. Они задают отступы, рамки и позиционирование, опираясь на инлайновую (inline) и блочную (block) оси. Инлайновая ось проходит в направлении, в котором пишется текст. Например, в тексте, написанном на русском или английском, инлайновая ось пройдёт слева направо, в тексте на арабском — справа налево, а в тексте на японском — сверху вниз. Блочная ось идёт перпендикулярно инлайновой и имеет своё направление. Например, в тексте, написанном на японском — справа налево, а в монгольском — слева направо Подробнее