Веб-страница

requestAnimationFrame: секрет гладких анимаций в вебе requestAnimationFrame — это браузерный API, разработанный специально для визуальных обновлений. Он сообщает браузеру: «Запускайте этот обратный вызов непосредственно перед следующей перерисовкой». И вместо того, чтобы угадывать время, вы синхронизируете свою работу с конвейером рендеринга браузера. В этой статье разбирается, как именно это работает: https://www.debugbear.com/blog/requestanimationframe @tproger_web Читайте также в VK и Max

Сloudflare показал новый /crawl endpoint в Browser Rendering. Достаточно отправить стартовый URL, а сервис сам найдёт все страницы (через sitemap/ссылки), отрендерит в headless-браузере и вернёт HTML, Markdown или JSON (Workers AI). Штука, конечно, удобная, но ирония в том, что раньше компания предоставляла услуги по защите от подобных инструментов. Но видимо им надоело бороться и они решили возглавить. #новости @tproger_web Читайте также в VK и Max

Как создавать сложные расширения Chrome Создать сложное расширение для браузера не так-то просто, особенно для новичков. Но не волнуйтесь. Это руководство покажет вам, как сделать полнофункциональное расширение для Chrome на реальном примере! В итоге у вас получится расширение для сохранения изображения с любых сайтов в ваш сервис через API. #extensions #chrome @tproger_web Читайте также в VK и Max

Саморисующиеся фигуры на CSS Сегодня хочу поделиться с вами лайфхаком, который позволяет буквально в несколько строчек CSS-кода сделать красивую анимацию отрисовки SVG изображения. Всё, что вам требуется, добавить в код SVG к строку pathLength="1", а затем прописать следующие стили в CSS: path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: dash 5s linear forwards; } @keyframes dash { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } Этого достаточно для того, чтобы оживить в...

CLI-утилита ghgrab позволяет интерактивно просматривать структуру любого репозитория прямо в терминале и скачивать только конкретные папки или файлы, обходя необходимость клонировать проект целиком. Утилита работает через REST API GitHub и вытягивает данные напрямую, минуя стандартный протокол Git. Ключевые возможности: — быстрый поиск и навигация по дереву репозитория; ​— выбор сразу нескольких файлов и папок для пакетной загрузки; ​— полная поддержка скачивания тяжелых файлов через Git LFS. ​ ...

Веб-графика, которая вредит: что разработчики делают не так По данным с archive.org за последние 6 лет средний размер веб-страницы значительно увеличился. Если в декабре 2019 года средний вес десктопной веб-страницы составлял 1,9 МБ, то сейчас он уже 2,9 МБ для десктопа и 2,6 МБ для мобильных устройств. Причём изображения составляют до 40% общего веса страницы. Нагрузка на сайты растёт и это напрямую влияет на скорость загрузки, потребление трафика и, в конечном итоге, на пользовательский опыт. ...

Предотвращаем восстание машин, как умеем @tproger_web Читайте также в VK и Max

Паттерны современного Node.js Node.js за годы сильно изменился: от эпохи колбэков и повсеместного CommonJS до современного, чистого и стандартизированного подхода. Если вы пишете на нём уже несколько лет, вы сами видели, как код стал проще, структурированнее и ближе к веб‑стандартам. Это не только косметические изменения: это фундаментальный сдвиг в подходе к серверной разработке на JavaScript. Современный Node.js меньше полагается на внешние библиотеки, упрощает архитектуру и делает разработку ...

Во время валидации сайт упал @tproger_web Читайте также в VK и Max

Разработчики переписали парсер WASM с Rust на TypeScript и он ускорился в три раза Команда парсера openui‑lang написала его на Rust и скомпилировали в WASM. Логика была здравой: Rust быстрый, WASM в браузере даёт скорость, близкую к нативной, а парсер — разумно сложный, многоэтапный конвейер. Почему бы не захотеть его на Rust? Но оказалось, что оптимизировать ещё нужно уметь, а главное, знать, что именно оптимизировать. В этой статье они поделились своим опытом. @tproger_web Читайте также в VK и...