⚡️Howler.js — это JavaScript-библиотека для работы с аудио в веб-приложениях. Она обеспечивает удобный API для воспроизведения звуков, что позволяет разработчикам легко добавлять аудиоэффекты и музыкальные фоны на свои веб-страницы.
🟣 Howler.js поддерживает все современные форматы аудио и предоставляет дополнительные возможности для управления звуками.
➡️Основные возможности:
1️⃣Кроссбраузерная поддержка: Работает в большинстве современных браузеров, обеспечивая совместимость с различными аудиоформатами (MP3, OGG, WAV, AAC и другими).
2️⃣Управление звуками: Воспроизведение, пауза, остановка, изменение громкости, регулировка скорости воспроизведения.
3️⃣Поддержка спрайтов: Возможность создания аудиоспрайтов, что позволяет хранить несколько звуков в одном файле и воспроизводить их по частям.
4️⃣Буферизация: Автоматическая загрузка и кэширование аудиофайлов для плавного воспроизведения.
5️⃣События: Поддержка событий, таких как начало воспроизведения, завершение, пауза и другие.
6️⃣Простая интеграция: Легкий API, который позволяет быстро интегрировать аудио в веб-приложения.
<script> // Создание объекта Howl для управления звуком var sound = new Howl({ src: ['path/to/sound.mp3', 'path/to/sound.ogg'], volume: 0.5, onplay: function() { console.log('Sound is playing'); }, onend: function() { console.log('Sound has ended'); } });
// Функции управления звуком function playSound() { sound.play(); }
function pauseSound() { sound.pause(); }
function stopSound() { sound.stop(); } </script> </body> </html>
🟣 Этот пример демонстрирует, как создать аудиообъект с помощью howler.js и управлять воспроизведением звука через кнопки.
🟣 Howler.js является мощным инструментом для добавления аудио в веб-приложения, предлагая множество функций для гибкого и удобного управления звуками.
⚡️Tamagui - это программное обеспечение с текстовым графическим пользовательским интерфейсом (TUI) для управления устройствами через командную строку, облегчая взаимодействие пользователя с техническими устройствами.
➡️Для установки используйте:
npm install tamagui @tamagui/config
➡️Включает в себя три компонента:
🟢@tamagui/core — является библиотекой стилей, расширяющей API стилей React Native с множеством функций из CSS без внешних зависимостей, кроме React.
🟢@tamagui/static — компилятор, который оптимизирует производительность.
🟢@tamagui — обширный универсальный набор компонентов.
// Загружаем изображение и создаем спрайт PIXI.Loader.shared.add('example.png').load((loader, resources) => { let sprite = new PIXI.Sprite(resources['example.png'].texture);
⚡️useLayoutEffect — это хук в React, который позволяет выполнять побочные эффекты синхронно после того, как все изменения DOM были внесены, но до того, как браузер обновит экран.
🔵 Это делает его полезным для операций, которые должны произойти до того, как пользователь увидит изменения.
▶️Сравнение с useEffect
Основное различие между useEffect и useLayoutEffect заключается во времени их выполнения:
🔘useEffect выполняется асинхронно после рендеринга и после того, как браузер обновил экран. 🔘useLayoutEffect выполняется синхронно сразу после всех изменений в DOM, но до того, как браузер нарисует экран.
▶️Когда использовать useLayoutEffect
Использование useLayoutEffect целесообразно в случаях, когда нужно:
🔘 Измерить размеры или позицию DOM-элементов до того, как браузер отрисует изменения. 🔘 Выполнить какие-либо операции, которые могут повлиять на верстку или стиль, и эти изменения должны быть учтены до отображения на экране.
▶️Пример использования useLayoutEffect
Рассмотрим пример, где мы хотим измерить ширину элемента div сразу после его рендеринга и отобразить эту ширину в элементе:
import React, { useLayoutEffect, useRef, useState } from 'react';
useLayoutEffect(() => { if (divRef.current) { setWidth(divRef.current.offsetWidth); } }, []);
return ( <div> <div ref={divRef} style={{ width: '50%' }}> Resize the window to change my width </div> <p>Div width: {width}px</p> </div> ); }
export default MeasureDiv;
⚠️В этом примере:
🔘 Мы используем useRef для получения ссылки на элемент div. 🔘 С помощью useLayoutEffect мы измеряем ширину элемента после его рендеринга, но до того, как браузер обновит экран. 🔘 Ширина сохраняется в состоянии с помощью useState и отображается в абзаце.
Этот подход гарантирует, что ширина элемента будет измерена до того, как пользователь увидит изменения на экране, что может быть критично для некоторых приложений, например, для анимаций или точных расчётов верстки.
▶️Важные моменты
🔘 Поскольку useLayoutEffect блокирует обновление экрана до завершения эффекта, использование его для длительных операций может привести к задержкам и ухудшению производительности.
🔘 Поэтому рекомендуется использовать useLayoutEffect только тогда, когда это действительно необходимо, а для всех остальных побочных эффектов использовать useEffect.
Bookmarks поможет вам ориентироваться в коде, легко и быстро перемещаясь между важными позициями. Также поддерживается набор команд выделения, позволяющий выделять строки с закладками и области между строками с закладками.
⚡️Dismantle.js — это библиотека для анализа и модификации исполняемого JavaScript-кода.
🟢 Она предоставляет инструменты для работы с абстрактными синтаксическими деревьями (AST), позволяя разработчикам исследовать и изменять структуру и поведение кода.
➡️Основные возможности включают:
1️⃣Разбор кода: Преобразование JavaScript-кода в синтаксическое дерево.
2️⃣Анализ кода: Изучение элементов кода, таких как переменные, функции и выражения.
3️⃣Манипуляция кодом: Изменение синтаксического дерева для рефакторинга или оптимизации.
4️⃣Генерация кода: Преобразование измененного синтаксического дерева обратно в код.
👀 Эта библиотека полезна для создания инструментов разработки, таких как линтеры, форматеры и транспайлеры.
⚡️Как отобразить сообщение, если JavaScript отключен?⚡️
🟢 Большинство веб-страниц используют JavaScript, но при его отключении сайт может стать недоступным.
🟢 Некоторые пользователи отключают JavaScript ради безопасности, поэтому важно, чтобы ваша страница работала без него. Проверки должны выполняться на стороне клиента и сервера.
🟢 Если контент не работает без JavaScript, нужно показывать сообщение об ошибке.
1️⃣ Использование HTML тега <noscript>
🔵 Тег <noscript> отображает альтернативный контент в браузерах без поддержки скриптов или с отключенным JavaScript.
➡️ Пример:
<noscript> Видео не может проигрываться, так как JavaScript отключен. </noscript>
➡️ Полный пример:
<!DOCTYPE html> <html> <head> <title>Заголовок документа</title> </head> <body> <h1>Пример тега noscript</h1> <noscript> <h2>JavaScript отключен в вашем веб-браузере. Некоторые функции не будут работать.</h2> <style type="text/css"> #main-content { display: none; } </style> </noscript> <div id="main-content"> <h2>JavaScript включен!</h2> </div> </body> </html>
2️⃣ Использование метода meta refresh
🟣 Для отображения контента при отключенном JavaScript можно перенаправить пользователя на страницу с сообщением об этом. Метод meta refresh использует тег <meta> с атрибутом http-equiv="refresh" и атрибутом content, указывающим интервал времени до перенаправления.
➡️ Установив интервал в 0, можно мгновенно перенаправить пользователя:
➡️ ESLint обеспечивает проверку кода на наличие синтаксических ошибок и предлагает варианты исправлений.
➡️ Хотя в VS Code есть встроенная система IntelliSense для отображения подсказок, ESLint становится более удобным выбором, особенно если требуются различные настройки для JSX, обычного JavaScript или среды Node.js.
➡️ Линтер также может интегрироваться в систему проверки кода, позволяя убедиться в правильности кода перед отправкой файлов в репозиторий.
В JavaScript ссылается на контекст выполнения текущей функции или объекта. Его значение определяется тем, как была вызвана функция, а не тем, где она была объявлена.
➡️Основные правила определения значения this:
1️⃣Глобальный контекст (контекст выполнения скрипта): вне какой-либо функции this ссылается на глобальный объект (в браузерах это window, в Node.js — `global`).
console.log(this); // window (в браузере)
2️⃣Внутри функции: если функция вызывается в глобальном контексте, this также будет ссылаться на глобальный объект.
function foo() { console.log(this); // window (в браузере) } foo();
3️⃣Методы объекта: если функция вызвана как метод объекта, this ссылается на этот объект.
4️⃣Конструкторы: при вызове функции как конструктора с помощью new, this ссылается на новый экземпляр объекта.
function Person(name) { this.name = name; } const person = new Person('John'); console.log(person.name); // John
5️⃣call, apply и bind: методы call, apply и bind позволяют явно задать значение this.
function greet() { console.log(this.name); } const person = { name: 'John' }; greet.call(person); // John
6️⃣Стрелочные функции: у стрелочных функций нет собственного this. Они захватывают значение this из окружающего контекста на момент своего определения.
The Odin Project - это бесплатный онлайн-курс, который поможет вам освоить все основные навыки веб-разработки, начиная с HTML и CSS, и заканчивая созданием полноценных веб-приложений.
🔵 Это простой метод шифрования текста, при котором каждый символ заменяется другим символом, сдвинутым на фиксированное количество позиций вправо или влево по алфавиту.
🔵 Например, при сдвиге на 1 символ А становится Б, Б становится В и так далее.
🟢 В JavaScript можно отложить выполнение определенных участков кода на неопределенное время, например, с помощью функции setTimeout(), прослушивателя событий или сетевых запросов с использованием fetch API.
🟢 Промисы представляют собой способ делать асинхронный код в JavaScript предсказуемым. Они позволяют разрешать код, созданный при помощи async. Успешное выполнение кода обрабатывается через метод .then(), а ошибки - через метод .catch().
🟢 Async/await представляет собой улучшенный синтаксис для работы с промисами, который позволяет делать асинхронный код выглядеть как синхронный.
// Асинхронный код; 'done' журналирован после данных о положении, несмотря на то что 'done' предполагается // исполнить в коде позже navigator.geolocation.getCurrentPosition(position => { console.log(position); }, error => { console.error(error); }); console.log("done");
// Асинхронный код обработан после промиса; мы получаем желаемый результат — данные о положении // журналированы, затем журналировано 'done' const promise = new Promise((resolve, reject) => { navigator.geolocation.getCurrentPosition(resolve, reject); });
// Асинхронный код с async/await выглядит как синхронный, наиболее удобочитаемый способ // работы с промисами async function getPosition() { // async/await работает только в функциях (пока) const result = await new Promise((resolve, reject) => { navigator.geolocation.getCurrentPosition(resolve, reject); }); const position = await result; console.log(position); console.log('done'); }
🗣 Каждый программист должен знать ключевые концепции JavaScript, такие как типы данных, примитивные типы, стек вызовов, методы map, reduce, filter и многое другое.
➡️ Всего в репозитории 33 пункта, к каждому из которых есть множество статей и видеоматериалов.
