Code Ready | Frontend – Telegram
Code Ready | Frontend
22.2K subscribers
1.08K photos
447 videos
17 files
715 links
Авторский канал по Frontend разработке.
Ресурсы, гайды, задачи, шпаргалки.
Информация ежедневно пополняется!

Автор: @energy_it

РКН: https://clck.ru/3NJCKs

Реклама на бирже: https://telega.in/c/code_ready
Download Telegram
📱 Метрики элементов и работа с рендерингом!

Шпаргалка по браузерным API, которые помогают получать размеры, координаты и полные измерения контента, а также анализировать итоговые CSS-стили. Включает инструменты для управления анимациями через requestAnimationFrame. Подходит для задач, связанных с позиционированием, динамической версткой, оптимизацией анимаций и отладкой поведения элементов в интерфейсе.

📣 Code Ready | #шпора
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍15🔥96🤝2
🤓 Напоминалка для работы с Git.

Например, git push отправляет твои изменения на сервер, а git checkout позволяет быстро переключаться между ветками.

На картинке — 12 самых нужных команд, которые стоит держать под рукой.

Сохрани, чтобы не забыть!

📣 Code Ready | #ресурсы
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥2112👍9🤝1
Извлекаем и обрабатываем выделенный текст — Selection API

Selection API позволяет получать выделение пользователя в DOM (кроме <input> и <textarea>, где нужно использовать selectionStart/selectionEnd). API подходит для подсветки, анализа, сохранения выделений и запуска контекстных действий.

Получаем выделенный текст:
const text = window.getSelection().toString();
console.log("Выделено:", text);


Отслеживаем изменения выделения:
document.addEventListener("selectionchange", () => {
const t = window.getSelection().toString();
if (t) console.log("Новое выделение:", t);
});


Извлекаем детали выделения:
const sel = window.getSelection();

console.log("anchorNode:", sel.anchorNode);
console.log("focusNode:", sel.focusNode);
console.log("rangeCount:", sel.rangeCount);


Удобный хелпер:
function onSelect(callback) {
const handler = () => {
const text = window.getSelection().toString().trim();
if (text) callback(text);
};

document.addEventListener("selectionchange", handler);
return () => document.removeEventListener("selectionchange", handler);
}


Использование:
const unsubscribe = onSelect(selected => {
console.log("Пользователь выделил:", selected);
});


🔥 Такой пример полезен для практики работы с браузерными API, реакцией на системные события и динамическим управлением интерфейсом.

📣 Code Ready | #практика
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥16👍108
👩‍💻 Добавляем субтитры, описания и альтернативные дорожки!

Тег <track> используется внутри <video> или <audio> и добавляет к медиаконтенту текстовые дорожки: субтитры, описания, переводы и другие вспомогательные данные. Содержимое берётся из отдельного файла формата WebVTT (.vtt).

Основные атрибуты:
• src — путь к файлу .vtt, содержащему субтитры или метаданные;
• kind — тип дорожки;
• srclang — язык содержимого (например, "ru", "en");
• label — видимое имя дорожки в интерфейсе выбора;
• default — делает дорожку выбранной по умолчанию.


Если у атрибута kind значение не указано, то тип по умолчанию — subnoscripts (субтитры).

📣 Code Ready | #атрибут
Please open Telegram to view this post
VIEW IN TELEGRAM
👍23🔥129
📱 Таймер обратного отсчёта!

Привет! Сегодня разберем, как сделать таймер, который отсчитывает время до указанного события (например, до конца распродажи), и по завершении показывает сообщение.

Результат:
На странице будет таймер вроде 00:00:10, который уменьшает время каждую секунду и завершает обратный отсчёт.

📣 Code Ready | #гайд
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥2310🤝9👎2
👩‍💻 Растягивай абсолютные элементы в одну строку — через inset!

Многие задают абсолютным элементам растяжение вручную:
.block::before {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
content: "";
}


Но то же самое можно записать короче — одной строкой:
.block {
position: relative;
}
.block::before {
position: absolute;
inset: 0;
content: "";
}


inset: 0 означает сразу: top: 0; right: 0; bottom: 0; left: 0; — элемент растянется по родителю.

🔥 Полезно для оверлеев, эффектов, декоративных слоёв и background-паттернов.

📣 Code Ready | #совет
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1917🔥13
This media is not supported in your browser
VIEW IN TELEGRAM
Frontend VK Hub — как работают наши интерфейсы?

Что делает интерфейсы VK быстрыми, удобными и устойчивыми под нагрузкой миллионов пользователей?
Frontend VK Hub — это сообщество инженеров, которые создают и развивают пользовательские интерфейсы для ВКонтакте, VK Play, VK WorkSpace и других сервисов экосистемы. Мы делимся практическим опытом, рассказываем о подходах к производительности, внедрении современных фреймворков и всему, что связано с улучшением Developer Experience.

Здесь можно найти инсайты от ведущих фронтенд-разработчиков, разборы реальных задач, новости индустрии и приглашения на мероприятия VK. И конечно, вакансии!

Подписывайся!

Реклама. ООО "ВК" ИНН 7743001840
👎94
📱 Web Animations API — контроль анимаций через JS!

В этой шпаргалке собраны методы и свойства для создания, управления и синхронизации анимаций без использования CSS. Здесь отражены инструменты, позволяющие программно запускать, останавливать, реверсировать, ускорять и завершать анимации, а также работать с таймлайнами и событиями завершения.

📣 Code Ready | #шпора
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥2113👍9🤝1
👍2010🔥7
Фон, реагирующий на звук через Web Audio API

С помощью 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();
};


🔥 Говорите — и фон реагирует в реальном времени. Такой эффект можно использовать в музыкальных визуализациях, интро-анимациях или как интерактивную деталь интерфейса.

📣 Code Ready | #практика
Please open Telegram to view this post
VIEW IN TELEGRAM
👍18🔥13🤝9