requestAnimationFrame: секрет гладких анимаций в вебе

requestAnimationFrame — это браузерный API, разработанный специально для визуальных обновлений. Он сообщает браузеру: «Запускайте этот обратный вызов непосредственно перед следующей перерисовкой». И вместо того, чтобы угадывать время, вы синхронизируете свою работу с конвейером рендеринга браузера.

В этой статье разбирается, как именно это работает:

https://www.debugbear.com/blog/requestanimationframe

@tproger_web
Читайте также в VK и Max

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

Ключевые возможности:
— быстрый поиск и навигация по дереву репозитория;
​— выбор сразу нескольких файлов и папок для пакетной загрузки;
​— полная поддержка скачивания тяжелых файлов через Git LFS.
​
Способы установки:
— Rust: cargo install ghgrab
​— Node.js: npm i -g ghgrab
— ​Python: pipx install ghgrab
​
Проект полностью открыт, исходный код можно изучить по ссылке: https://github.com/abhixdd/ghgrab

@prog_tools

Во время валидации сайт упал

@tproger_web
Читайте также в VK и Max

Веб-графика, которая вредит: что разработчики делают не так

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

Нагрузка на сайты растёт и это напрямую влияет на скорость загрузки, потребление трафика и, в конечном итоге, на пользовательский опыт. При этом многие разработчики до сих пор не используют современные форматы и не оптимизируют изображения.

Если хотите, чтобы ваш сайт грузился быстрее и меньше нагружал систему пользователя, то изучите эти советы и практики, которые помогут вам улучшить пользовательский опыт. Их можно использовать как по отдельности, так и в комплексе.

https://habr.com/ru/companies/alfa/articles/1012848/

@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;
  }
}

Этого достаточно для того, чтобы оживить ваше изображение. Конечно, лучше всего это работает с простыми картинками, как в примере из видео. Но вы можете поэкспериментировать и с более сложными вариантами.

Подробнее о способе можно почитать здесь.

#css #лайфхак

Предотвращаем восстание машин, как умеем

@tproger_web
Читайте также в VK и Max

Разработчики переписали парсер WASM с Rust на TypeScript и он ускорился в три раза

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

Но оказалось, что оптимизировать ещё нужно уметь, а главное, знать, что именно оптимизировать. В этой статье они поделились своим опытом.

@tproger_web
Читайте также в VK и Max

Разработка DHCP-сервера на Python

Сегодня мы рассмотрим, как создать собственный DHCP‑сервер на Python. Суть сервера проста — он динамически раздаёт IP‑адреса устройствам в сети, избавляя нас от головной боли статической конфигурации. Он будет ловить DHCP‑запросы от клиентов, выбирать свободный IP из заранее подготовленного пула и подтверждать выдачу. Так мы убъем двух зайцев: и с питоном поупражняемся, и с работой сетей поближе познакомимся.

Начинаем тут.

Ставь ❤️, если любишь практиковаться с питоном.

#python

@prog_point (теперь ещё в VK и Max)

А тут есть питонисты? Ставьте любую реакцию, если работаете с питоном

@tproger_web
Читайте также в VK и Max

Паттерны современного Node.js

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

Это не только косметические изменения: это фундаментальный сдвиг в подходе к серверной разработке на JavaScript. Современный Node.js меньше полагается на внешние библиотеки, упрощает архитектуру и делает разработку понятнее и приятнее. Давайте разберёмся, в чём суть этих изменений и почему они важны для ваших приложений в 2025 году. Переходите по ссылке: https://habr.com/ru/articles/933702/

#nodejs

@tproger_web
Читайте также в VK и Max

Как переносить «висячие» слова с помощью JavaScript

Тексты, в которых на новой строке одиноко торчит «в», «на» или «и», сразу теряют в читаемости. В этой статье — короткий, но полезный приём: как с помощью JavaScript автоматически заменять пробелы после коротких слов на неразрывные и избавляться от висячих слов. Работает и для HTML-содержимого, и для Markdown. Минимум кода — максимум пользы для интерфейса и редактурной чистоты.

#фронтенд #javascript #ux

@tproger_web
Читайте также в VK и Max

JavaScript для всех: деструктуризация

При работе с массивами и объектами часто нужно извлекать отдельные значения, чтобы присвоить их переменным. Без современных возможностей это приводило к громоздкому и повторяющемуся коду — так разработчики работали десятилетиями.

С появлением ES6 в 2015 году у нас появилась деструктуризация: единый, лаконичный синтаксис для распаковки значений из массива или объекта и их присваивания переменным в одном объявлении let, const или var. В самой простой форме — деструктуризации с шаблоном связывания — каждое значение извлекается из литерала и попадает в соответствующий идентификатор за раз.

Понять, как это работает и где может пригодиться вам, поможет эта статья: https://css-tricks.com/javascript-for-everyone-destructuring/

#javascript #основы

@tproger_web
Читайте также в VK и Max

80% проблем с асинхронностью в Angular решают пять операторов RxJS

Когда Angular-проект разрастается, код рискует превратиться в клубок подписок: данные из разных мест нужно склеивать, пользователь кликает быстрее, чем приходит ответ от сервера, а одна необработанная ошибка способна положить целый компонент.

RxJS часто пугает количеством операторов, но на практике львиную долу типовых задач покрывает всего пять из них. В статье разбирают именно те инструменты, которые помогают избавиться от вложенных подписок, отменять устаревшие запросы, управлять параллельными вызовами и делать интерфейс отзывчивым без лишней нагрузки на сервер.

Если хотите перестать гадать, почему данные приходят не в том порядке, и сделать обработку ошибок по-взрослому, смотрите материал: https://habr.com/ru/companies/ruvds/articles/1008646/

#angular

@tproger_web
Читайте также в VK и Max

Есть тут CSS-разработчики? Отмечайтесь в комментариях

@tproger_web
Читайте также в VK и Max

Firefox 149: нативные контролы, CSS-гибкость и Reporting API для CSP

Вышел стабильный релиз Firefox 149 — и в нём несколько изменений, которые делают веб-разработку чуть приятнее, а контроль над безопасностью строже.

Главное, что стоит взять на заметку:

— Программное управление нативными элементами. Появилась поддержка showPicker() для <datalist> — теперь можно открывать браузерный picker для списка опций по событию пользователя. Также добавили CloseWatcher: наконец-то можно единообразно обрабатывать закрытие модалок, попапов и кастомных компонентов через Esc или системную кнопку «Назад» на Android, как это делают нативные элементы.

— Больше гибкости в CSS. shape-outside теперь понимает функцию xywh() — можно задавать форму обтекания контентом с привязкой к краям блока. vertical-align стал шорткатом для свойств выравнивания по базовой линии, а @container позволяет указывать только имя контейнера без условия запроса.

— Безопасность и отчётность. Реализовали Reporting API для CSP и Integrity Policy. Теперь можно ловить нарушения политик через ReportingObserver, а не только полагаться на заголовок Report-To. Удобно для мониторинга в production.

Кроме того, добавили captureStream() для медиаэлементов (стримим видео с веб-камеры или экрана напрямую в WebRTC), расширили допустимые символы в DOM-методах (теперь как в HTML-парсере) и внедрили поддержку математического шрифта через font-family: math.

Полный список изменений, включая нововведения для WebDriver и дополнений, — в официальных заметках: https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/149

#новости #фронтенд #firefox

Коды состояния HTTP на котиках 😺

Если объяснять HTTP-состояния текстом скучно, вот забавный проект: https://http.cat/

Сервис показывает мем с котиком, идеально иллюстрирующим код ошибки. Это весело, наглядно и можно использовать в своих проектах.

@tproger_web
Читайте также в VK и Max

SPA-переходы без фреймворков: асинхронная смена страниц с клонированием DOM

Главная сложность плавных переходов между страницами — нужно одновременно держать в DOM старую и новую страницу, чтобы анимировать их crossfade. Готовые решения скрывают эту механику, но если требуется тонкая настройка, лучше разобраться, как всё устроено внутри.

В туториале показывают, как собрать лёгкий SPA-роутер на чистом JS, GSAP и Vite. Ключевой приём: клонировать контейнер, подгрузить HTML новой страницы, запустить параллельную анимацию и только потом удалить старый DOM.

Помимо роутинга с перехватом кликов и обработкой popstate, разбирают организацию страниц как модулей с init/cleanup, анимацию входа для элементов и блокировку повторных переходов.

В результате вы получаете полностью контролируемую систему, которую можно расширять под любые эффекты — от простого fade до сложных кинематографичных переходов.

Детали и код — в материале.

#spa #javascript #vite

Интересно было бы увидеть каким кодом пофиксили проблему

@tproger_web
Читайте также в VK и Max

Разработчик Нильс Линхир портировал Doom в браузер с 3D рендерингом на чистом CSS. Игровая логика написана на JavaScript, но для вывода графики автор принципиально отказался от Canvas и WebGL. Вся визуализация переложена на браузерный движок стилей.

Детали реализации:
— каждый объект и текстура представлены обычным тегом div;
— позиционирование в пространстве работает через CSS-трансформации;
— геометрия вычисляется нативными CSS-функциями hypot и atan2;
— сложная архитектура уровней вырезается свойством clip-path.

Технический разбор архитектуры и нюансов производительности: https://tprg.ru/yGpg

@make_game (теперь в VK и Max)