Лечим разбитое сердце вашего сайта

Представьте ситуацию: dashboard в React грузится 10 секунд вместо секунды, и вы уверены, что виноваты лишние rerender'ы или отсутствие memo. Но оказывается, что с бэкендом и React всё в подярке.

Оказывается, в Safari на M1 Max 94% CPU жрёт Layout на... сердечко ❤️. "Быстрый" COLRv1‑шрифт с SVG‑эмодзи для кроссплатформенности внезапно тормозит layout до 1600 мс на glyph (особенно ❤️ и 🤯), в то время как битмапы Apple Color Emoji летают.

Автору статьи пришлось разбираться с этой проблему. И он разобрался. А теперь делится своим опытом и рассказывает почему CoreSVG в Safari не справляется с векторными эмодзи Google.

Telegram | VK | Max | Дзен

Читать полностью…

Народ, что там у вас по грунту?

Читать полностью…

Old but gold: Микрофронтенд с feature sliced design

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

А так же рассказал, как ему удалось удачно объединить оба решения в одном проекте: https://habr.com/ru/articles/747952/

#архитектура

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

Читать полностью…

Создание бесконечной процедурной змеи с помощью Three.js и WebGL

Если вам наскучили однотипные демки на Three.js, эта статья — как раз тот случай, когда «змейка» внезапно становится очень серьёзной темой. Здесь вы узнаете, как собрать бесконечный процедурный объект, который реально можно переиспользовать в проде.

Автор разбирает, как из кривых и простых правил движения собрать живую, бесконечно тянущуюся змейку. Голова пишет путь, из пути строится кривая, а тело и хвост дорисовываются на GPU. За счёт этого движение получается плавным, без разрывов и костылей.

После прочтения вы будете смотреть на любые трейлы, хвосты и «живые» линии в вебе совершенно по‑другому и, главное, поймёте, как сделать свои.

Читать полностью…

Превращаем YouTube в личное хранилище данных

На самом деле это можно провернуть с любым видеохостингом. Автор видео показал, как он шифрует любой файл в видеоролик, загружает на YouTube, а потом по ссылке восстанавливает исходные данные бит-в-бит.

Наивный подход «записать байты в пиксели» сразу ломается об реальность: YouTube повторно кодирует видео с потерями, меняя цвета и убивая данные. Поэтому автор применил блочную схему: файл режется на крупные блоки, для каждого считается CRC для проверки целостности и генерируются избыточные «ремонтные» куски с помощью fountain-кода Wirehair, чтобы можно было восстановить блок даже после повреждений.

Дальше он прячёт биты не в сырые пиксели, а в коэффициенты дискретного косинусного преобразования (DCT), причём в старшие коэффициенты и даже в их знак, потому что именно они меньше страдают от сжатия. Видео экспортируется с lossless‑кодеком, а единственная «грязная» стадия — это сжатие на стороне YouTube.

Посмотреть как это происходит наглядно можно в его ролике (нет, это не файл с трояном).

Читать полностью…

Microsoft выпустила бета-версию TypeScript 6.0

Это переходный релиз перед большим скачком к TypeScript 7.0 на Go с мультипоточностью. Последнее мажорное обновление на текущем движке.

Новые фичи радуют: типы для Temporal (новые даты), upsert-методы в Map (getOrInsert), RegExp.escape, es2025 в target/lib. Плюс DOM теперь включает iterables по умолчанию.

Установить можно через npm install -D typescript@beta. А по читать подробнее по ссылке.

#новости #typescript

Читать полностью…

#простымисловами: Что такое srcset и зачем он нужен

Обычный атрибут src в теге <img> указывает одну-единственную картинку. Но что делать, если пользователи заходят с телефонов, ретина-экранов и 4K мониторов? Показывать одну и ту же версию — значит терять в качестве или перегружать страницу.

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

<img 
  src="image-400.jpg"
  srcset="
    image-400.jpg 400w,
    image-800.jpg 800w,
    image-1200.jpg 1200w
  "
  sizes="(max-width: 600px) 400px,
         (max-width: 1000px) 800px,
         1200px"
  alt="Пример адаптивного изображения">

🔍 Что здесь происходит:

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

В результате:

📱 На телефоне загрузится лёгкое изображение.

💻 На ноутбуке — среднее.

🖥 А на 4K-мониторе — чёткое и большое.

❗️ Важно: src обязателен, так как в браузере пользователя может отсутствовать поддержка srcset.

#фронтенд #html

Читать полностью…

Главное, чтоб это легаси не крашнулось во время поездки

Читать полностью…

У ESLint вышло юбилейное мажорное обновление: полный переход на flat config, Node.js 20.19+

Для ESLint вышло мажорное обновление v10.0.0, которое окончательно убирает старый eslintrc (.eslintrc.*, .eslintignore). Теперь только flat config по умолчанию: проще, быстрее, современнее.

Важные изменения:

🔘 Node.js < 20.19 не поддерживается
🔘 Убраны CLI флаги: --no-eslintrc, --env, --rulesdir
🔘 eslint:recommended обновили новыми правилами
🔘 Program AST node теперь покрывает весь файл (включая whitespace)
🔘 Конфиг ищется от lint'имого файла (удобно для монреп)
🔘 Убраны deprecated методы SourceCode, context

Зачем апгрейдить: быстрее парсинг, меньше багов со scope (JSX/React), готовность к будущему JS.

Читать полностью…

Угадайте кому прилетела эта таска

Читать полностью…

EasyPaste: кроссплатформенное приложение на Tauri + Rust

Пользователь Tproger поделился опытом создания EasyPaste — менеджера шаблонов ответов (для саппорта/sales/HR). UI на HTML/CSS, бэк на Rust через Tauri, билды под macOS/Windows/RedOS.

Что внутри: дерево шаблонов, быстрый поиск по тексту/тегам, избранное, форматирование (жирный/таблицы), вложения файлов, drag'n'drop в другие аппы, tray + глобальные хоткеи.

Боли новичка: сборки/воркфлоу, системные зависимости, tray/hotkeys.

Автор поделился своим опытом, который пригодится как новичкам, так и продвинутым разработчикам на Rust

Читать полностью…

Премия Tproger объявляется открытой! 🐀

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

Отсюда родилась идея Премии Tproger. В ней ИТ-компании делятся успешными кейсами разработки, а аудитория решает, какой проект заслуживает награды — золотой мыши 🐀

В премии участвуют 16 компаний в 4 номинациях:
⚫ Продукт года

Здесь представлены платформенные решения, направленные на комплексную автоматизацию ключевых направлений деятельности: от контроля безопасности разработки ПО и ИТ-инфраструктуры до управления ресурсами компании.

⚫ Облачный продукт года

В этом разделе вас ждут платформы виртуализации, облачные среды для AI/ML, инструменты управления кластерами и микросервисами, обеспечивающие высокую производительность и быстрый запуск цифровых сервисов.

⚫ IT-ивент года

Участники рассказывают о профессиональных конференциях и хакатонах, объединяющих тысячи разработчиков и инженеров.

⚫ Дизайн года

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

Теперь они в ваших руках 👍
1. Переходите на сайт премии.
2. Выбирайте понравившиеся кейсы в каждой категории.
3. И вручайте им золотую мышь.

Голосование продлится до конца февраля и уже в марте мы объявим победителей. Stay tuned!

Читать полностью…

Алгоритмы на JavaScript

Подборка видеоразборов работы алгоритмов на JavaScript. Полезна всем, кто хочет лучше в них шарить. Здесь разбирается 7 наиболее популярных:

1️⃣ Бинарный поиск
2️⃣ Рекурсия
3️⃣ Хеш-таблицы
4️⃣ Обход дерева
5️⃣ Связные списки на примере LRU Cache
6️⃣ Графы и их обход
7️⃣ Рекурсия с мемоизацией для вычисления diff'a текста

Специально для вас скачали их, но если хотите лайкнуть автора, то вот ссылка на плейлист на YouTube.

#видео #алгоритмы #javascript

Читать полностью…

В Chrome DevTools появилась точечная эмуляция медленного интернета

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

#советы

Читать полностью…

State of JS 2025: тренды фронтенда за год

Ежегодный опрос State of JavaScript 2025 вышел. Разбор трендов, обзор популярности фреймворков, библиотек, инструментов и языков.

Ключевые инсайты: фокус на том, что выжило/выросло, что забылось. React/Vue/Svelte/Astro, Next/Nuxt, Tailwind/Vite — кто лидирует?

Читать полностью…

Кейсы из номинации «Дизайн года» ждут ваших голосов

Осталась ровно неделя до конца голосования в премии Tproger. Уже дико хочется узнать, кто в лидерах! Но даже мы в команде стараемся держать интригу. И чтобы скоротать время, давайте посмотрим на дизайнерские кейсы компаний:

— AcademiaDev представила интерактивную инсталляцию, которая разлетелась по СМИ и собрала 48 млн охвата.

— ИИ-платформа Сократик рассказала, как устроена их система по генерации готовых презентаций.

— Островок поделился, как они сделали отдельную айдентику для Ostrovok! Tech.

Закидайте их своими голосами: https://tprg.ru/WLvk

Читать полностью…

Почему статические сайты возвращаются и чему они научились

Помните времена, когда статический сайт был сайтом-визиткой на голом HTML, а любой серьёзный проект требовал CMS? Мы привыкли считать нормальным сайт на WordPress, «Битриксе» или хотя бы самописном Django. Статика же оставалась уделом гиков, документации и страниц о скором запуске.

В 2025 году статические сайты вернулись. Не в качестве альтернативы для бедных, а как зрелая архитектура, которая решает 90% задач быстрее, дешевле и безопаснее, чем тяжёлый бэкенд. Просто мы не сразу заметили, как они научились тому, чего раньше не умели. А об этом уже подробнее в статье.

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

Читать полностью…

Какой кейс станет облачным продуктом года?

Давайте думать, подсказывайте голосовать! В этой номинации Tproger Awards также участвуют пять компаний. Вот статьи про их продукты:

👍ПАК виртуализации от Гравитона, который построен по гиперконвергентной архитектуре, что предусматривает простое и предсказуемое масштабирование.

👍ИИ-ассистент от Рунити, который начинался как внутренний продукт, но уже вышел на внешний рынок.

👍VPS от SmartApe, который помог онлайн-школе выдержать рост нагрузки в 5 раз.

👍Контейнерная платформа «Штурвал» от Лаборатории Числитель, благодаря которой система стала устойчива к высоким нагрузкам.

👍Облачная платформа от Selectel, которая позволяет компаниям самим управлять данными, подключать нужные сервисы в несколько кликов и иметь доступ к поддержке 24/7.

Что из этого достойно золотой мыши — решать вам. Переходите на сайт голосования и выбирайте тот самый кейс 👍

Читать полностью…

WebMCP — новый браузерный API для создания веб-приложений, готовых к взаимодействию с AI-агентами

Это свежий протокол, который готовит веб к эре AI-агентов, позволяя разработчикам явно описывать функции сайтов как структурированные инструменты. ИИ сможет вызывать их напрямую, без хрупкого скринскрейпинга.

Представьте: вместо того чтобы агент парсил DOM, угадывал селекторы и ломался при любом апдейте, он получает готовый список API. Например, add_to_cart с параметрами productId и quantity, или search_flight с датой и направлением, и просто их исполняет в контексте вашей сессии. Это радикально проще и надёжнее аналогов вроде BrowserTools или Playwright‑скриптов, где каждый сайт требует кастомного кода, а поддержка — вечный геморрой.

WebMCP работает через два API: declarative (прямо в HTML-формах для базовых действий) и imperative (JS-регистрация сложных tools с схемой и execute-функцией). Его уже можно тестить с полифиллом на MCP-B. А чтобы это было проще делать рекомендую прочитать эту статью, где разбирается спецификация, примеры кода, security-нюансы и реальные кейсы для e-commerce/travel/support.

Читать полностью…

Выбираем лучший продукт года🐀

У нас в разгаре премия Tproger — в ней мы выбираем лучшие ИТ-разработки среди 16 компаний. Сегодня ближе знакомимся с участниками номинации «Продукт года».

В ней участвуют пять компаний. Изучаем:

👍ОТП Банк представляет ASOC-сканер, который спроектировал один разработчик за месяц.

👍Гравитон делится кейсом создания ПО мониторинга без агентов, который можно затестить бесплатно.

👍NetVision борется с недобросовестными самокатчиками с помощью платформы интеллектуального мониторинга СИМ.

👍Solar показывает appScreener, который вырос из стартапа до стандарта рынка; при работе над ним сотрудники получили научные степени.

👍Reksoft рассказывает о платформе Brain ERM, который помогает компаниям экономить до 70% времени на рутинных HR-операциях.

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

Читать полностью…

Привет, подписчики!

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

Подпишитесь, чтобы мы не потеряли друг друга. Вот тут полный список: https://ad.tproger.ru/sm

Читать полностью…

Тесты производительности Node.js с 16-й по 25-ю версию

Node.js с 16-й версии до 25-й заметно ускорился. Но в чём именно? Авторы этого разбора протестировали Express-сервер и базовые операции на Apple M4 (macOS, arm64), чтобы показать эволюцию производительности. Тесты повторяли 5 раз, брали медиану, версии от 16.0.0 до 25.3.0 — и LTS, и не-LTS.

Они проверили типичные сценарии: HTTP GET (req/s на localhost с keep-alive и 32 соединениями), JSON.parse/stringify, SHA-256 хэш, копирование буфера 64 КБ, array map+reduce, конкатенация строк, integer-циклы с арифметикой (плюс вариант с Math.random() для реализма).

Выводы получились интересные: прогресс стабильный, но Node 25 вырвался вперёд (что логично), особенно в циклах и вычислениях — до +50% в integer loop. Если у вас есть исследовательский интерес, то рекомендую ознакомиться с деталями на сайте.

#nodejs

Читать полностью…

Бесплатный Claude получил функции из платной Pro-версии

Anthropic открыли в бесплатной версии Claude возможности, которые раньше были только у подписчиков Pro за $20/мес. Теперь без оплаты доступны веб-поиск в реальном времени, анализ изображений и документов, генерация кода с артефактами и мобильные приложения для iOS/Android.

Что изменилось в лимитах:

🔘 Бесплатная версия: Claude Sonnet 4.5 + динамические лимиты (25–40 сообщений в день)
🔘 Pro ($20): в 5 раз больше сообщений + приоритет при пиковых нагрузках
🔘 Max ($100): для power-users без ограничений

На практике бесплатной версии хватает 80% пользователей для чата, суммаризации текстов и написания кода. Pro нужна тем, кто работает с ИИ постоянно и хочет стабильности. Так что это отличная новость для всех любителей ИИ.

Теперь подписка нужна только при интенсивной работе. Попробуйте сами — разница ощутима.

Читать полностью…

Pinball Physics

Развлекательно-познавательного контента вам в ленту. На codepen есть проект, который представляет собой полноценную игру Pinball, в которую вы можете поиграть, а когда поставите очередной рекорд изучить её код и даже попробовать повторить.

Взгляните сами:

https://codepen.io/lonekorean/pen/KXLrVX

#codepen

Читать полностью…

📎 12 ресурсов для БЕСПЛАТНОГО изучения веб-разработки и программирования

🔘Минусы: какие-то из них полностью на английском
🔘Плюсы: глубокая проработка для своей ниши

Сохраните, чтобы изучать то, что нужно вам:

— W3School: https://www.w3schools.com
— Современный учебник JavaScript: https://learn.javascript.ru
— Codewars: https://www.codewars.com
— Refactoring Guru: https://refactoring.guru
— Web. dev: https://web.dev
— Harvard CS50 (2023): https://www.youtube.com/watch?v=LfaMVlDaQ24
— Geeks for geeks: https://www.geeksforgeeks.org
— Дока: https://doka.guide
— Egghead: https://egghead.io
— Freecodecamp: freecodecamp" rel="nofollow">https://www.youtube.com/@freecodecamp
— LeetCode: https://leetcode.com/explore
— Developer Roadmaps: https://roadmap.sh

@tproger_web

Читать полностью…

Chrome DevTools MCP: дебажим сайт с помощью ИИ

Не так давно Google запустила Chrome DevTools MCP сервер, который интегрирует AI (Gemini/Claude) с браузером. Он открывает страницы, кликает, заполняет формы, записывает performance traces, анализирует ключевые показатели.

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

Читать полностью…

Создание гистограмм на современном CSS

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

Это произошло и с гистограммами. То, что раньше требовало внимания и труда, сегодня делается в пару строк (не говоря уже об ИИ, который вообще за вас всё сделает). Как с помощью современных возможностей CSS делать красивые графики и чарты, можно узнать в статье.

#css

Читать полностью…

Сайты с устаревшим UX/UI продают лучше

Скелетор вернётся позже с ещё одним неприятным фактом.

Читать полностью…

Как выбрать наилучшую стратегию рендеринга для вашего приложения

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

Сегодня существует множество технологий таких, как генерация статических сайтов (SSG), рендеринг на стороне сервера (SSR), рендеринг на стороне клиента (CSR), инкрементальная статическая регенерация (ISR) и экспериментальный частичный предварительный рендеринг (PPR). Каждая хороша для своих задач. Какую выбрать для вашего проекта, рассказали в этой статье.

#фронтенд

Читать полностью…

Ошибки в архитектуре, которые совершали Netflix, Slack, Trello, Airbnb и другие компании

Даже у самого многообещающего стартапа и крупной компании могут встречаться типичные ошибки в архитектуре, которые могут всё разрушить.

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

Мастхэв к прочтению: https://tprg.ru/0lof

Читать полностью…