Как GitHub ускорил сайт, переведя стили с CSS-in-JS на CSS Modules

GitHub перевёл Primer и затем большую часть интерфейса с CSS-in-JS на CSS Modules, чтобы убрать клиентские и серверные накладные расходы на стили и ускорить рендеринг страниц.

https://github.blog/engineering/architecture-optimization/improving-site-performance-by-shipping-more-css/

5 офферов получили наши ребята на прошлой неделе

Оффер на 4,2k долларов
Оффер на 5k евро
Оффер 260k рублей
Оффер на 210k рублей
Оффер на 220k рублей

И еще 19 за сентябрь... а за лето более 50... и у тебя получится!

👋 Меня зовут Тихон, я действующий Frontend-разработчик и ментор. За руку довожу до оффера в Big Tech и не бросаю на испытательном сроке. Вокруг меня собралось целое комьюнити из почти 300 фронтендеров.

Я веду канал, в котором уже 15 тыс разработчиков. Регулярно публикую полезные материалы по подготовке к собесам. А еще каждый четверг у нас проходят полезные стримы с решениями задач и разборами резюме)

Забирайте в закрепленном сообщении

Полные разборы реальных собеседований: Сбер, VK, OZON, M-Video, Evrone, еще раз OZON, IT One, Trading View, МТС, Лантан, ДОМ.РФ

Сборники вопросов по темам:
Кибербезопасность на собеседовании
Все вопросы по React на собеседовании
Все вопросы по TypeScript на собеседовании
Как решать задачи двумя указателями
Вопросы с Vue собеседований
Вопросы по сетям и методологиям с 200 собесов
Вопросы по JS с 200 собесов
Какие задачи спрашивают на livecoding чаще

Полезные посты:
Job-борды для поиска работы
Запись нашего самого кринжового собеса
Новый HTTP метод QUERY

🏆Статистика по рынку:
Июль, Июнь, Май, Апрель, Март

Подписывайся 👇
frontend_punks

Реклама, erid: 2W5zFHUNGNm ИП Галактионов Тихон Витальевич, ИНН 771618975809

Как ускорить страницу с демо-видео: сжатие, главы и отложенный автоплей

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

https://habr.com/ru/articles/1090594/

Size Limit: инструмент для контроля бюджета производительности JavaScript

Size Limit позволяет задать лимит на размер бандла или время загрузки кода и автоматически завалить CI или пометить PR, если изменения выходят за бюджет. Подходит для разовых проверок, показывает, куда уходят байты, и не привязан ни к фреймворку, ни к конкретному сборщику или CI.

https://github.com/ai/size-limit

Next.js 16.4: lazy compilation, меньше Turbopack и новые возможности React 19.3

В Next.js 16.4 добавили lazy compilation, уменьшили размер сборки Turbopack, подтянули возможности React 19.3 и доработали Cache Components и инструменты для разработки. Это ускоряет старт и сборку проекта, а также делает работу с кэшем и отладкой удобнее в повседневной разработке.

https://nextjs.org/blog/next-16-4

Vite+ 1.0: единая CLI для runtime, package manager и frontend toolchain

Vite+ 1.0 объединяет Node.js runtime, package manager и frontend toolchain в одной CLI. Это сокращает количество разрозненных конфигов, команд и обновлений, а в проектах с несколькими репозиториями и монорепами упрощает поддержку, миграции и CI.

https://voidzero.dev/posts/announcing-vite-plus-1-0

Проект от подписчика для тех, кто пилит свой сервис

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

Люди могут не только оставить комментарий или лайк, но и отметить, готовы ли пользоваться, платить, присоединиться или инвестировать в проект.

А если своей идеи пока нет, можно посмотреть, чего не хватает другим, и найти что-то интересное для себя.

https://votby.ru/

Chromium прямо в терминале

Carbonyl запускает Chromium в терминале и открывает обычные сайты без окна браузера, даже по SSH.

Для старта есть Docker
docker run --rm -ti fathyb/carbonyl https://youtube.com
или установка через npm install --global carbonyl

после чего запускается carbonyl https://github.com.

https://github.com/fathyb/carbonyl

Плавная типографика в CSS: что выбрать вместо брейкпоинтов

Плавную типографику в CSS удобнее собирать через clamp() и viewport units: размер шрифта можно задать одной формулой без переключения на фиксированные значения по брейкпоинтам. Для доступности лучше не полагаться только на vw, а добавлять фиксированную величину, чтобы масштабирование страницы не ломало ожидаемое поведение.

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

https://blog.damato.design/posts/fluid-typography/

Как ускорили веб-приложение Claude

Разбор того, как в веб-приложении Claude сократили время до первого ввода у 75-го перцентиля с 3,1 до 0,55 секунды. Для этого нашли несколько скрытых тормозов: мелкие сдвиги верстки, которые не попадали в CLS, дорогой селектор :root:has(), добавлявший 24 мс на каждое изменение DOM, и проблему с предрендерингом Chrome, который строил страницу с неверной высотой.

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

https://claude.dev/blog/how-we-made-claude-ai-faster/

React Forms и React.memo: что на самом деле перерисовывается

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

https://reactdevelopment.substack.com/p/react-forms-and-reactmemo-understanding

Шпаргалка по интерфейсам: мелочи, которые делают UI заметно лучше

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

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

https://interfaces.dev/cheat-sheet

Самый дорогой способ проверить идею — полгода её разрабатывать

Сначала проверьте спрос. Так сделали эти ребята:

— Юра выбрал нишу, которую все считают скучной, но там уже платят. Начал с $100 в месяц, через год вышел примерно на $10K.
— Денис один собрал AI-игру в Telegram. За первые полтора месяца ~$1 500.
— Аня не пишет код, но запустила AI-бота для английского. Первые ~$200 пришли в первый же месяц.

Масштабы разные, схема одна:
1. Найти, за что люди уже платят.
2. Быстро собрать MVP.
3. Проверить спрос на живых пользователях.
4. Только потом докручивать продукт.

Это не рецепт «как точно сделать $10K». Гарантий вообще нет.
Но так вы узнаете ответ за недели, а не за год.

В @its_capitan разбирают такие запуски по шагам: что сделали, сколько получили, где облажались.

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

Реклама: ИП Зуев Игорь Владимирович, ИНН: 360408359441, Erid: 2Vtzqw8XNmT