Катерина | Про Frontend

Этот момент настал! Я хочу и готова провести свой первый живой стрим. 🥳 ✔️ Формат: прямой эфир, продолжительность ориентировочно 3 часа. Постараюсь сделать запись. ✔️ Дата и время: Так как это мой первый опыт в проведении стримов - я хочу основательно к нему подготовиться, поэтому ориентировочно проводить его буду в первой половине июля в выходной день. ✔️ Цена: донат ✔️ Для кого: Для тех, кто в начале своего пути, но уже умеет писать на JavaScript какие-то простенькие вещи. ✔️ Тема: На данный момент я открыта к теме, есть варианты создать пет-проект, или, возможно вы хотите послушать разъяснение каких-то тем? Пишите в комментарии, чтобы вам было бы интересно посмотреть и послушать. 💗

классный инструмент для стилизации элементов на основе их позиции среди дочерних элементов родителя

📕 Разберёмся с базовым синтаксисом псевдокласса :nth-child следующий: element:nth-child(an + b) ☑️ element — это тип элемента, к которому применяется псевдокласс; ☑️ a — коэффициент, определяющий шаг через который выбираются элементы; ☑️ n — целое число, которое принимает значения 0, 1, 2, 3 и так далее; ☑️ b — смещение, определяющее начальную позицию. 📕 Существует и расширенная формула! element:nth-child(<nth> [of <complex-selector-list>]?) ☑️ element — тип элемента, к которому применяется псевдокласс; ☑️ <nth> — формула, определяющая, какие элементы будут выбраны (как и в базовом :nth-child); ☑️ [of <complex-selector-list>] — необязательный параметр, позволяющий уточнить набор элементов, среди которых будет производиться выборка. Как итог, с помощью :nth-child можно легко выбирать каждый n-ый элемент. А расширенная версия полезна для более точного и избирательного стилирования элементов в сложных структурах HTML 👍 Материал: ✨ Шпаргалка по :nth-child (CodePen) ✨ Шпаргалка по :nth-child со сложным селектором (CodePen) ✨ Ранее демонстрировала работу со сложным селектором (пост) #css #теория #практика #повтор

#javascript #проверь_себя

Вставляем реверс-инженеру палку в колёсо 😰 Я впервые столкнулась с таким необычным поведением, когда невозможно было работать с консолью в браузере. Сам сайт блокировал эту возможность, очищая консоль каждую секунду. Это вызвало у меня не только удивление, но и интерес к тому, как именно это реализовано. И я придумала самое простой способ реализовать:

function() {
    const checkInterval = 1000; // Интервал проверки в миллисекундах

    function clearConsole() {
        console.clear();
        console.log("Консоль разработчика очищается каждую секунду.");
    }

    setInterval(clearConsole, checkInterval);
})();

Этот код использует самовызывающуюся функцию (IIFE) для установки таймера через setInterval. Функция clearConsole вызывается каждую секунду, очищая консоль с помощью console.clear() и выводя сообщение о регулярной очистке. Как итог, если требуется просто регулярная очистка, этого кода достаточно. Полезно, например, для скрытия конфиденциальной информации или для усложнения проверки сайта другими разработчиками. 👍 Используемый материал: 🔗 Immediately Invoked Function Expression (IIFE) - конструкция, которая позволяет объявить и вызвать функцию немедленно (пост)

Оператор satisfies 🧐

используется для проверки того, что тип объекта соответствует заданному интерфейсу или типу. Он позволяет убедиться, что объект удовлетворяет требованиям типа.

Что важно понимать? ✔️ Если сравнивать его с оператором as, то, в отличие от него, satisfies не изменяет тип переменной, а лишь проверяет соответствие типу; ✔️ Позволяет сделать проверку на соответствие типов более гибкой для разнообразных наборов типов. Хотя мне приходилось использовать его не так уж и часто в работе, однако ярким примером его применения стало сочетание с Record<keys, string | number>. Я рассмотрю выдуманную ситуацию в качестве примера, которая наглядно иллюстрирует необходимость использования этого оператора. 😉 В примере мы создаём два типа: UserKeys, который представляет собой строковые ключи 'name' и 'age', и тип User, который обладает данными ключами и их значениями типа string или number. И нам важно создать переменную user, которая будет соответствать типу User 1️⃣ В первом случае мы получим ошибку, так как TypeScript не может автоматически распознать типы конкретных свойств в объекте user. То есть, нет понимания, что свойство name конкретного объекта user является строкой. 2️⃣ Во втором случае, мы используем оператор satisfies, чтобы убедиться, что наш объект user соответствует типу User, не указывая этот тип явно при создании объекта. Таким образом, оператор satisfies в TypeScript помогает обеспечить строгую проверку соответствия объектов заданным типам или интерфейсам. Он также позволяет использовать переменные более гибко, поскольку не требует явного указания типа напрямую. Проверка на соответствие осуществляется по всем ключам и соответствию типов их значений. * Данный материал для разработчиков, которые уже имеют достаточный опыт в TypeScript и сталкивались с map-типом на подобие Record. Полезные источники: ✔️ Typescript’s new ‘satisfies’ operator: Medium ✔️ Mapped Types (+ Record): статья ✔️ Примеры использования, спорные моменты: issues git 👀 Появился в TypeScript 4.9

Обзор CSS / CSS Overview 🐾 Мне попалась очень необычная вкладка в Chrome DevTools - Обзор CSS, которая легко позволяет проверить стилистику сайта и убедиться, что всё отображается как надо. 🥰 Что можно в ней увидеть? ✔️ Обзор цветовой палитры: показ всех цветов, используемых на странице, с разбивкой по цветам текста, фона, границ и теней; ✔️ Шрифты: отображение всех шрифтов, используемых на странице, с информацией о размере, начертании; ✔️ Можно выявить проблемы с контрастностью: выявление элементов, где контраст между текстом и фоном недостаточен для хорошей читаемости, что особенно важно для обеспечения доступности контента; ✔️ Медиа-запросы; ✔️ Неправильное использование и избыточность стилей: обнаружение дублирующихся и ненужных стилей, что помогает оптимизировать CSS и уменьшить размер стилей. Как подключить? 1️⃣ Открыть DevTools; 2️⃣ «Дополнительные инструменты» => «Обзор CSS»; 3️⃣ Нажать на кнопку «Снять обзор». Более подробно: Chrome DevTools Мне нравится то, что можно не только видеть информацию, но и кликать по ней, чтобы узнать, где именно она используется. Также работает механизм наведения: когда вы наводите курсор на элемент, он подсвечивается в браузере (если доступен для просмотра). #devtools #инструменты

Интересный кейс! 🤯 Задача очень простая: добавить статичную кнопку на экран, которая будет прокручивать содержимое вверх. Найденная проблема: Если попробовать быстро прокрутить содержимое и нажать на кнопку «Наверх» - содержимое может не прокрутиться. 🤨 Почему так? Когда контейнер достигает своего конца и происходит эффект отскока, то браузер может изменять стандартное поведение прокрутки. => Это может привести к тому, что вызов метода window.scrollTo() не будет работать, поскольку браузер может игнорировать такие попытки, когда прокрутка в процессе отскока. 💡 Как исправлять? Можно воспользоваться свойством overscroll-behavior и добавить ему значение none => убираем возможный отскок. 📘 Полезный материал: ✔️ overscroll-behavior - управление поведением прокрутки (пост) ✔️ scrollTo - улучшаем пользовательский опыт при навигации по длинным страницам (пост) ✔️ Код демонстрирующий проблему залила на CodePen (но, к сожалению, в нём она не воспроизводится) #css #javascript #теория #практика

Создаём эффект печатающегося текста 👍 На днях я увидела, что во всемирно-известной игре Dota2 в специальном режиме - герои разговаривают. Создаётся эффект печатающегося текста, с оригинальной кареткой. Давайте реализуем! Основная идея заключается в создании контейнера для текста и каретки, стилизации их с помощью CSS, а затем использовании JavaScript для посимвольного добавления текста и анимации каретки. ✔️ В HTML мы создаем структуру, включающую контейнер для текста и каретки; ✔️ В CSS мы применяем стили к тексту и каретке, а также создаем анимацию тряски каретки с помощью @keyframes; ✔️ В JavaScript мы поочередно добавляем символы текста к элементу, обновляя при этом позицию каретки и активируя анимацию тряски. 🔗🔗🔗 Ссылка на CodePen с моей реализацией Кстати, пару лет назад я работала над проектом, который основывался на таком же общении между героями. В процессе разработки удалось избежать ряда проблем, с которыми обычно сталкиваются: 🖇 резкий перенос печатающегося слова на новую строку, если не хватило места (печатала сразу с новой, то есть не было «перескоков слов» и боли в глазах при чтении 😅) 🖇 изначально рассчитывать высоту контейнера, а не писать «снизу-наверх» - когда происходит перенос строки - всё двигается вверх, из-за чего читать становится ещё «больнее». P. S. Да, в текущей реализации не были учтены моменты работы с несколькими строками текста, но планирую добавить их в следующих частях. 🙃

Работа с Git 🤩

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

🌷 Официальная документация Git Самый полный и достоверный источник информации о Git. Здесь вы найдете руководство пользователя, описание команд и множество примеров использования. 🌷 Pro Git (Книга) Бесплатная онлайн-книга, написанная Скоттом Чаконом и Беном Страубом. Эта книга охватывает все аспекты использования Git, от основ до продвинутых тем. 🌷 Git Tips 1 Рассматриваются полезные и малоизвестные опции Git, такие как условные конфигурации, использование git blame и git log с диапазонами строк, настройка детальной информации, а также автоматическое разрешение конфликтов. 🌷 Современные команды и функции Git Советы по использованию современных команд и функций Git, таких как git switch, git restore, и другие новые возможности, которые облегчают повседневную работу с Git. 🌷 Чёрт побери, Git! Решения для распространённых ошибок и проблем, с которыми сталкиваются пользователи Git. Полезен для быстрого поиска ответов на специфические вопросы и проблемные ситуации. P. S. К сожалению, первые 4 ресурса на английском языке, но можно воспользоваться встроенным в браузер переводчиком и будет легче, об устройстве которого я писала по ссылке 👍 #git #рекомендую