26006
Всё по фронтенду, бэкенду и девопсу в одном месте Разместить рекламу: @tproger_sales_bot Правила общения: https://tprg.ru/rules Другие каналы: @tproger_channels Сайт: https://tprg.ru/site Регистрация в перечне РКН: https://tprg.ru/64ai
А тут есть питонисты? Ставьте любую реакцию, если работаете с питоном
@tproger_web
Читайте также в VK и Max
Разработчики переписали парсер WASM с Rust на TypeScript и он ускорился в три раза
Команда парсера openui‑lang написала его на Rust и скомпилировали в WASM. Логика была здравой: Rust быстрый, WASM в браузере даёт скорость, близкую к нативной, а парсер — разумно сложный, многоэтапный конвейер. Почему бы не захотеть его на Rust?
Но оказалось, что оптимизировать ещё нужно уметь, а главное, знать, что именно оптимизировать. В этой статье они поделились своим опытом.
@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;
}
}
Во время валидации сайт упал
@tproger_web
Читайте также в VK и Max
requestAnimationFrame: секрет гладких анимаций в вебе
requestAnimationFrame — это браузерный API, разработанный специально для визуальных обновлений. Он сообщает браузеру: «Запускайте этот обратный вызов непосредственно перед следующей перерисовкой». И вместо того, чтобы угадывать время, вы синхронизируете свою работу с конвейером рендеринга браузера.
В этой статье разбирается, как именно это работает:
https://www.debugbear.com/blog/requestanimationframe
@tproger_web
Читайте также в VK и Max
Как создавать сложные расширения Chrome
Создать сложное расширение для браузера не так-то просто, особенно для новичков.
Но не волнуйтесь. Это руководство покажет вам, как сделать полнофункциональное расширение для Chrome на реальном примере!
В итоге у вас получится расширение для сохранения изображения с любых сайтов в ваш сервис через API.
#extensions #chrome
@tproger_web
Читайте также в VK и Max
Сделал бы с первого раза без ошибок и отдыхал
@tproger_web
Читайте также в VK и Max
Vite 8 вышел — теперь на Rust и с новым бандлером!
Команда Vite выпустила 8-ю версию: прощай дуэт esbuild + Rollup, здравствуй Rolldown — единый бандлер на Rust, в 10-30 раз быстрее сборок. Полная совместимость с плагинами, никаких глюков — протестировано на Linear (46с → 6с), Ramp (-57%) и других.
Что нового: реестр плагинов registry.vite.dev, devtools для дебаггинга, tsconfig paths из коробки, emitDecoratorMetadata, Wasm в SSR, консоль браузера в терминал (для агентов ИИ) и не только.
Подробности по ссылке: https://vite.dev/blog/announcing-vite8
#vite #веб
@tproger
Читайте также в VK, Max и Дзен
JavaScript localStorage: что такое и как использовать?
LocalStorage в JavaScript позволяет хранить пары ключ/значение в браузере. Но в отличие от обычных переменных, всё, что мы запишем в localStorage, останется там после перезагрузки страницы и закрытия браузера.
В статье рассказали, как работает и как использовать localStorage в JS: https://tproger.ru/articles/javascript-localstorage-polnoe-rukovodstvo/
#js
@tproger_web
Читайте также в VK и Max
Спрайты в вебе: техника анимаций из игр на чистом CSS
Josh Comeau показал, как спрайтшиты из геймдева оживают в браузере без JavaScript. Берешь PNG с кадрами (например, мерцающий трофей или спящая анимированная героиня), вставляешь в <img> и переключаешь фреймы.
Для motion-дизайнеров и фанатов ретро-эффектов обязательно к прочтению: https://www.joshwcomeau.com/animation/sprites/
У админа есть идея для медицинского стартапа. Про сферу ничего не знаю, но тема 100% рабочая. Пишите в личку
@tproger_web
Читайте также в VK и Max
Эволюция конечных автоматов: от кода-монстра к визуальным схемам
Когда процессы становятся сложнее, а классы разрастаются до тысяч строк, пора пересмотреть подход. В этой серии статей рассказывается, как перейти от императивного описания бизнес-логики к декларативному, используя конечные автоматы. Вы узнаете, как визуализировать процессы, упростить поддержку и масштабирование, а также почему классическая FSM не всегда подходит для реальных задач.
Часть 1
Часть 2
А вы используете конечные автоматы в своих проектах?
#бэкенд #фронтенд #архитектура
@tproger_web
Читайте также в VK и Max
Ключевой нюанс якорного позиционирования в CSS
В CSS якорное позиционирование накладывает строгие правила на структуру DOM и последовательность элементов. Привязываемый элемент может появиться только после полной отрисовки якорного, поэтому важно тщательно продумывать их порядок и иерархию в документе.
Подробнее об этой особенности: https://frontendmasters.com/blog/the-big-gotcha-of-anchor-positioning/
#css
@tproger_web
Читайте также в VK и Max
Ох уж этот уникальный японский веб-дизайн
Японцы известны своим минимализмом, но в случае сайтов у них, почему-то, всё наоборот. Страницы пестрят всевозможными цветами, что уже нарушает 3 принципа дизайна, плюс на них используются мелкие иконки и мно-о-о-о-го текста.
Автор этого материала решила проанализировать с помощью ИИ какие паттерны дизайна сегодня существуют в мире. Это помогло разобраться в причинах такого необычного японского подхода к сайтостроению. Подробности в статье: https://habr.com/ru/companies/ruvds/articles/1003532/
#дизайн #ui
@tproger_web
Читайте также в VK и Max
Любопытный факт: базовый комплект из 12 документов (сканы и фото основного разворота паспорта и страницы с пропиской, СНИЛС, ИНН, трудовой книжки, СТД-Р, военного билета, свидетельств ЗАГС о браке и рождении, диплома об образовании, загранпаспорта и водительского удостоверения) специальные OCR-программы могут распознать 100 раз за минуту на сервере без GPU.
Что для этого нужно, рассказывают здесь: https://tprg.ru/HVQO
@tproger_web
Читайте также в VK и Max
Разработка DHCP-сервера на Python
Сегодня мы рассмотрим, как создать собственный DHCP‑сервер на Python. Суть сервера проста — он динамически раздаёт IP‑адреса устройствам в сети, избавляя нас от головной боли статической конфигурации. Он будет ловить DHCP‑запросы от клиентов, выбирать свободный IP из заранее подготовленного пула и подтверждать выдачу. Так мы убъем двух зайцев: и с питоном поупражняемся, и с работой сетей поближе познакомимся.
Начинаем тут.
Ставь ❤️, если любишь практиковаться с питоном.
#python
@prog_point (теперь ещё в VK и Max)
Предотвращаем восстание машин, как умеем
@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
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
Сloudflare показал новый /crawl endpoint в Browser Rendering. Достаточно отправить стартовый URL, а сервис сам найдёт все страницы (через sitemap/ссылки), отрендерит в headless-браузере и вернёт HTML, Markdown или JSON (Workers AI).
Штука, конечно, удобная, но ирония в том, что раньше компания предоставляла услуги по защите от подобных инструментов. Но видимо им надоело бороться и они решили возглавить.
#новости
@tproger_web
Читайте также в VK и Max
Dembrandt: извлекаем дизайн-системы сайтов одной командой
Open-source инструмент Dembrandt анализирует любой сайт и вытаскивает токены дизайна: цвета, шрифты, отступы, тени, радиусы, состояния кнопок и даже брейкпоинты. Выводит в JSON по стандарту W3C, делая пригодным для использования с Figma, Tailwind или Storybook.
Инструкция по использованию и установке по ссылке: https://www.dembrandt.com
#инструменты
@tproger_web
Читайте также в VK и Max
Забудьте innerHTML — встречайте setHTML для безопасного JS
Появился новый метод .setHTML() из Sanitizer API — прямую замену опасному innerHTML(). Теперь можно вставлять HTML без риска XSS-атак, браузер сам чистит код от вредных скриптов.
В Firefox 148 это уже работает, Chrome/Safari на подходе. Никаких библиотек вроде DOMPurify — чистый стандарт, drop-in замена. Идеально для динамических дашбордов, админок и всего, где юзерский контент.
Подробнее можно узнать в статье: https://hacks.mozilla.org/2026/02/goodbye-innerhtml-hello-sethtml-stronger-xss-protection-in-firefox-148/
@tproger_web
Читайте также в VK и Max
⚡️ЧТОБЫ СТАТЬ МИЛЛИОНЕРОМ, ДОСТАТОЧНО ОБЫЧНОГО накопительного счёта в Альфа-Банке⚡️
Важнейшую новость недели расскажет наш специальный корреспондент Артемий Лебедев.
Становитесь миллионером прямо здесь.
@alfabank
Java‑разработчик? Проверьте свой уровень и подтвердите его сертификатом
Сертификация Java‑разработчиков — это объективная оценка навыков, признанная АПКИТ и отмеченная как лучшее digital‑решение года для корпоративного обучения.
Три уровня на выбор:
🔘 Базовый — для новичков;
🔘 Специалист — уверенные практики с опытом 2–4 года;
🔘 Профессионал — эксперты, решающие сложные архитектурные задачи.
Если не знаете, с чего начать, пройдите бесплатный пробный тест — он подскажет подходящий уровень.
Бонус: скачайте карту компетенций Java-разработчика и закрывайте пробелы по плану.
После экзамена вы получите детальный отчёт по компетенциям в процентах, а работодатель сможет проверить сертификат онлайн.
➡️ Выбрать уровень или пройти бесплатное тестирование
Это #партнёрский пост
Великий раскол во фронтенде: джаваскриптеры против HTML/CSS-мастеров
Старая, но интересная статья о том, как фронтенд-комьюнити раскололось на два лагеря. Одни живут в React/Vue/Node.js и считают HTML/CSS «для дизайнеров», другие обожают чистый CSS Grid, доступность и семантику — и презирают обилие JS-кода.
С одной стороны JS-фреймворки усложняют простые сайты, но дают мощь SPA. С другой — HTML/CSS проще вход, но не тянет сложную логику. Оба лагеря растут в сложностях — никто не знает всего.
Давний спор особенно интересен с учётом развития ИИ и изменений парадигм разработки в целом. Осуждаем в комментариях, а читаем здесь: https://css-tricks.com/the-great-divide/
@tproger_web
Читайте также в VK и Max
Браузеры научатся лениво грузить видео и аудио — стандарт на подходе!
Скотт Джел из Squarespace добился поддержки loading="lazy" для <video> и <audio> — аудио и видео теперь можно будет подгружать только при скролле к элементу, как у картинок. Никаких скриптов, чистый HTML.
Уже в Chrome Canary (флаг --enable-features=LazyLoadVideoAndAudio), патчи для Firefox/WebKit в работе. Тесты: видео с автоплеем ждёт viewport, запросы в DevTools видно. Идеально для длинных страниц с медиа — экономия трафика и CPU.
Стандарт в HTML уже скоро. Подробности: https://scottjehl.com/posts/lazy-media/
#веб #html
@tproger
Читайте также в VK, Max и Дзен
Это уже какой-то вайб-сисадмининг получается
@tproger_web
Читайте также в VK и Max
Код для входа: какие джуны нужны в 2026 году
Рынок труда для новичков в ИТ больше не похож на открытые ворота. Это хорошо охраняемый объект с пропускной системой. Код для входа меняется каждый год. В 2026 году компаниям нужны не энтузиасты, а специалисты с конкретным набором «ключей» — это касается даже начинающих.
Кого на самом деле ищут работодатели: три типа джунов, которые получат оффер. Ключевые навыки 2026, алгоритм входа в профессию и анализ трендов рынка. Подробный лонгрид для начинающих и меняющих специализацию.
@prog_point (теперь ещё в VK и Max)
Репозиторий, в котором собраны лучшие практики по тестированию JavaScript и Node.js приложений
Подборка советов составлена на основе десятков статей, книг и инструментов:
— cтруктура тестов,
— тесты для бэкенда и микросервисов,
— UI-тесты для веб-компонентов,
— анализ эффективности тестов,
— настройка CI.
Сохраните, чтобы не потерять: https://github.com/goldbergyoni/javascript-testing-best-practices
#javascript #nodejs #тестирование
@tproger_web
Читайте также в VK и Max
Полноценный эмулятор процессора архитектуры x86 на чистом CSS? Да!
Никакого JavaScript или WebAssembly, все вычисления происходят исключительно силами браузерного движка стилей.
Как это реализовано технически:
— эмулятор исполняет реальный машинный код для процессоров 8086;
— тактовый генератор построен на CSS-анимациях, поэтому система работает автономно и не требует от пользователя постоянно водить курсором по экрану;
— логика работает благодаря новым спецификациям CSS, таким как условные операторы if(), стилевые запросы и кастомные функции
Вы даже можете запустить в этом эмуляторе собственные программы. Достаточно написать код на C и прогнать его через GCC с помощью скрипта из репозитория автора. На выходе вы получите готовый HTML-файл со стилями, внутри которого будет крутиться ваш бинарник.
Да, современный CSS действительно стал тьюринг-полным языком программирования. Но из-за использования экспериментальных функций запустить демку пока можно только в браузерах на базе Chromium.
Подробности на сайте.
#css