Разбираем Web API, который пришел на смену History API. С его помощью можно программно управлять переходами, историей и состоянием приложения без перезагрузки страницы, перехватывать и обрабатывать навигации и реализовывать нативный SPA-роутинг. Поддержка: Chrome 102+, Edge 102+, Opera 88+; Safari и Firefox — либо отсутствует, либо экспериментальна.Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍21❤11🔥11
Привет! В этом гайде создаём компактный аудио-плеер с кнопкой воспроизведения и плавным прогресс-баром.
Ключевые моменты:
• HTML: минимальная структура — кнопка Play/Pause и индикатор прогресса.
• CSS: чистое оформление, мягкая тень и плавные переходы.
• JS: логика воспроизведения, обновление прогресса и сброс состояния при окончании трека.
Такой мини-плеер отлично подойдёт для сайтов, блогов, портфолио или UI-демо, где важно добавить звук, сохранив лёгкость интерфейса.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍29❤13🔥10🤝4
This media is not supported in your browser
VIEW IN TELEGRAM
Хочешь пройти путь от основ до уверенного разработчика без скучной теории и бесконечного поиска информации? The Odin Project - это платформа, где обучение строится на практике: создаёшь полноценные сайты и приложения, реально прокачиваешь навыки фронтенда, бэкенда и даже DevOps.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍13❤9🔥6🤝3
Когда выделяешь текст на сайте, браузер по умолчанию красит его голубым. Но можно полностью кастомизировать выделение.
::selection {
background: #ffcc00;
color: #111;
}Это псевдоэлемент, который управляет стилем только выделенного текста. Работает со шрифтами, цветами и даже с прозрачностью.
Делаем тему динамической:
[data-theme="dark"] ::selection {
background: #444;
color: #fff;
}Можно стилизовать и выделение в
input / textarea:input::selection,
textarea::selection {
background: #222;
color: #0ff;
}
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥25👍10❤9🤝1
Анимационный приём, создающий ощущение живого интерфейса. Каждая точка пульсирует с разной задержкой, формируя плавную волну света.
Как работает:
• keyframes glow управляет размером и прозрачностью точек, создавая эффект пульсации;
• animation-delay задаёт разный ритм для каждой точки, формируя плавную волну;
• box-shadow добавляет мягкое неоновое свечение для глубины.
Так с помощью простых свойств анимации и задержки можно создавать динамику интерфейса.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍26❤12🔥10
This media is not supported in your browser
VIEW IN TELEGRAM
Sort Lines — расширение, которое сортирует выделенные строки за секунду: по алфавиту, длине, в обратном порядке или даже уникальности. Работает с любым текстом, от JSON и env-файлов до списков классов в CSS.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥18👍10❤8
В этой шпаргалке собраны основные приёмы работы с Fetch API: выполнение запросов, обработка ответов, парсинг данных, проверка статусов, отмена через AbortController, а также использование объектов Request, Response и Headers. Fetch API — это способ выполнять HTTP-запросы без лишнего кода и сторонних библиотек.Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥27❤10👍6🤝4