Фон, реагирующий на звук через Web Audio API
С помощью
Добавим кнопку:
Подключаем микрофон и создаём источник:
Создаём анализатор:
Меняем фон в зависимости от уровня сигнала:
Запускаем:
🔥 Говорите — и фон реагирует в реальном времени. Такой эффект можно использовать в музыкальных визуализациях, интро-анимациях или как интерактивную деталь интерфейса.
📣 Code Ready | #практика
С помощью
Web Audio API можно в реальном времени анализировать входящий аудиопоток с микрофона и использовать полученные данные для динамического изменения фона.Добавим кнопку:
<button id="start">Включить микрофон</button>
Подключаем микрофон и создаём источник:
const btn = document.getElementById("start");
btn.onclick = async () => {
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
const ctx = new AudioContext();
await ctx.resume(); // требуется в некоторых браузерах
const src = ctx.createMediaStreamSource(stream);Создаём анализатор:
const analyser = ctx.createAnalyser();
const data = new Uint8Array(analyser.frequencyBinCount);
src.connect(analyser);
Меняем фон в зависимости от уровня сигнала:
function animate() {
analyser.getByteFrequencyData(data);
const volume = data.reduce((a, b) => a + b, 0) / data.length;
const hue = Math.min(360, volume * 3);
document.body.style.background = `hsl(${hue}, 80%, 50%)`;
requestAnimationFrame(animate);
}Запускаем:
animate();
btn.remove();
};
Please open Telegram to view this post
VIEW IN TELEGRAM
👍18🔥13🤝9
Элемент
<datalist> — это источник предложений, то есть такой элемент, который содержит предопределённые варианты выбора для пользователя. В основном за варианты выбора опций выступают элементы <option>.Элемент
<input> не будут работать с элементом <datalist>, если у <input> одно из следующих значений атрибута type:• hidden;
• password;
• checkbox;
• radio;
• file;
• submit;
• image;
• reset;
• button.
У тега по умолчанию есть роль
listbox.Please open Telegram to view this post
VIEW IN TELEGRAM
❤19👍13🔥10
This media is not supported in your browser
VIEW IN TELEGRAM
Code Time — расширение, которое показывает, сколько вы реально пишете код, в какие часы работаете продуктивнее и как меняются ваши рабочие сессии со временем. Это простая статистика активности, которая помогает увидеть свой темп и оптимизировать рабочий день.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍25🔥12🤝9❤2👎1
Когда проект растёт, стили начинают перебиваться и путаться. CSS дал решение - каскадные слои.
Создайте слои с приоритетом:
@layer reset, base, components, utilities;
Теперь порядок каскада становится управляемым: слои идут строго в указанной последовательности, а внутри слоя продолжают работать обычные правила (специфичность и порядок объявления).
Например, базовые стили:
@layer base {
button {
font-size: 1rem;
}}Компоненты идут выше по приоритету:
@layer components {
.btn-primary {
font-size: 1.1rem;
}}И утилиты завершают каскад:
@layer utilities {
.fs-lg {
font-size: 1.25rem;
}}Please open Telegram to view this post
VIEW IN TELEGRAM
👍16❤10🔥10
Привет! В этом гайде создаём UI-компонент, который позволяет редактировать текст не открывая отдельные формы — просто кликом по элементу.
Ключевые моменты:
• HTML: один элемент, автоматически переходящий в режим редактирования.
• CSS: два визуальных состояния — отображение и ввод — с тенью, скруглениями и мягкой цветовой палитрой.
• JS: обработка Enter/Escape, аккуратное восстановление DOM-структуры.
Такой элемент подходит для админок, дашбордов, списков задач, inline-настроек, динамических панелей и любых UI, где важно редактирование "по месту" без перегрузки интерфейса.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤18🔥9👍7🤝1
This media is not supported in your browser
VIEW IN TELEGRAM
CodeSnap — расширение, которое делает аккуратные, читаемые скриншоты кода прямо из VS Code. Выделяете нужные строки и получаете чистое изображение с подсветкой синтаксиса, сглаженными шрифтами.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍20🔥8🤝8❤1
👍16❤9🔥7
Прозрачный основной текст с контуром, а два псевдослоя дублируют надпись и смещаются в разные стороны. При наведении слои расходятся, создавая 3D-смещение в стиле глич-дизайна.
Как работает:
• Прозрачный основной текст оставляет только контур;
• ::before и ::after выводят копию строки поверх него;
• При hover слои уходят в противоположные направления, формируя глубину;
• Всё построено на transform и text-stroke.
Минимальный код, но эффект отлично выделяет заголовки, hero-блоки и промо-элементы.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍19❤14🔥9🤝2
Например,
<head> содержит метаданные страницы, теги вроде <div> и <span> используются для структурирования разметки, а <h1>–<h6> — для иерархии заголовков.На картинке — компактная шпаргалка с базовыми HTML-тегами: структура документа, текстовая разметка, списки, таблицы, формы и основные события форм.
Сохрани, чтобы не забыть!
Please open Telegram to view this post
VIEW IN TELEGRAM
👍18🔥9❤6🤝2
Универсальное чтение файлов: текст, JSON и бинарные данные!
Когда пользователь загружает файл обычно начинают писать разные обработчики. Получается много дублирования.
Можно сделать универсальный ридер:
Теперь можно читать файл как текст:
Читаем как
Читаем картинку в виде
Читаем бинарные данные:
🔥 Одна функция заменяет несколько обработчиков чтения файлов.
📣 Code Ready | #совет
Когда пользователь загружает файл обычно начинают писать разные обработчики. Получается много дублирования.
Можно сделать универсальный ридер:
const readFile = (file, as = 'text') =>
new Promise(r => {
const fr = new FileReader();
fr.onload = () => r(fr.result);
fr[`readAs${as[0].toUpperCase() + as.slice(1)}`](file);
});
Теперь можно читать файл как текст:
const txt = await readFile(file, 'text');
Читаем как
JSON:const obj = JSON.parse(await readFile(file, 'text'));
Читаем картинку в виде
base64:const base64 = await readFile(file, 'dataURL');
Читаем бинарные данные:
const buf = await readFile(file, 'arrayBuffer');
Please open Telegram to view this post
VIEW IN TELEGRAM
🤝16❤8🔥6👍1
В этой шпаргалке собраны основные методы и свойства Mutation Observer API для отслеживания структурных и атрибутных изменений DOM. Здесь отражены инструменты, позволяющие наблюдать за добавлением и удалением узлов, изменениями атрибутов и текстового содержимого, а также управлять жизненным циклом наблюдателя в прикладных сценариях.Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥15👍14🤝9❤1