🚀 Статьи, новости, туториалы по frontend разработке. http://jem-space.ru Admin: @jem_jem Пишу в @five_a_m Хорошие серваки от DigitalOcean: https://m.do.co/c/1351d64475ee Реклама: http://bit.ly/2NxmVDu РКН: https://clck.ru/3GLw7G
Используем Performance Extensibility API
Google не так давно представил API для более детального измерения перфоманса. Можно создватать отдельные треки на вкладке Performance для различных участков кода.
https://csswizardry.com/2025/07/the-extensibility-api/
State of HTML 2025
Стартовал новый опрос об HTML, который позволяет понять, как разработчики используют новые и старые фичи HTML и какие хотелось бы увидеть в будущем. Если хотите повлиять на развитие современного web — у вас есть шанс.
https://survey.devographics.com/en-US/survey/state-of-html/2025
VS Code: 5 интересных функций и расширений, меняющих подход к разработке
Даже опытные пользователи зачастую не догадываются о некоторых "скрытых" возможностях VSCode, которые могут значительно повысить продуктивность.
https://habr.com/ru/articles/930926/
Руководство по PDF.js
PDF.js — популярная open‑source библиотека от Mozilla для рендеринга PDF-документов в браузере без использования плагинов. Гайд подробно описывает шаги от базовой настройки и отображения PDF-страниц в <canvas> до более продвинутых возможностей, таких как извлечение текста, аннотации и создание UI
https://www.nutrient.io/blog/complete-guide-to-pdfjs/
Frontend Performance Checklist
Большой гайд с лучшими практиками по оптимизации веб приложений.
https://crystallize.com/blog/frontend-performance-checklist
Контролируем длину строк в CSS
Способы стилизации для того чтобы текст красиво вписывался в блок: установка оптимального числа символов на строку, трюки с vw, а также SVG-решения для адаптивного масштабирования текста под размер контейнера.
https://css-tricks.com/setting-line-length-in-css-and-fitting-text-to-a-container/
Утилитные TS типы для работы с Promise
Примеры типизации сложных кейсов при работе с Promise.all или вложенными Promise.
https://spin.atomicobject.com/better-promise-all/
Задача: получить максимум инсайтов за минимум времени
Решение: прийти к нам на Frontend meetup. 😎
А именно:
✔️ Как ускорить сборку фронта в 10 раз (и не развалить всё по пути)
✔️ Как развивать хард-скиллы на работе, а не в 2 часа ночи
✔️ Как подружиться с ИИ и не отдать ему контроль над кодовой базой.
Встречаемся офлайн/онлайн 22 июля в 18:00 в Sber Agile Home по адресу: Кутузовский проспект, 32к1, Москва.
Здесь можно узнать подробности и зарегистрироваться!
Localhost-атака: как **ta и Яндекс следят за пользователями Android через localhost
Скрипты **ta Pixel и Яндекс.Метрика в браузере устанавливают соединение с фоновыми нативными приложениями, прослушивающими определённые TCP/UDP‑порты, чтобы передать cookie (например, _fbp) и идентификаторы устройства, тем самым связывая активность в браузере с учётной записью пользователя. Этот способ обхода защиты ставит под угрозу приватность и делает даже приватный режим небезопасным.
https://habr.com/ru/articles/915732/
Как хорошо вы знаете класс Date?
Квиз из 28 нестандартных вопросов о том, как работает Date в JS. Делитесь результатами в коментах.
https://jsdate.wtf/
Как выжить в мире сложных интерфейсов в 2025-м
7 работающих рецептов от React и CSS до дизайн-систем.
https://habr.com/ru/companies/ncloudtech/articles/924704/
Оператор satisfies в TypeScript
Подробнее об операторе satisfies, который позволяет проверить, соответствует ли объект определённому типу. Полезно для случаев, когда нужно сохранить узкие типы значений и одновременно гарантировать соответствие интерфейсу. Благодаря satisfies улучшается безопасность типов, автодополнение и общая надёжность кода, по сравнению с использованием as.
https://frontendmasters.com/blog/satisfies-in-typescript/
🎯 Хочешь запустить своё мини-приложение на аудиторию в 45 млн пользователей?
VK Dev Grants — грантовая программа для разработчиков от VK Mini Apps
🏆 Призовой фонд — 5 млн ₽
💡 Условия — от идеи до масштабного релиза
💼 Участие — соло или в команде
🧠 Экспертная поддержка, продвижение и монетизация
Заявки на 1 этап принимаются до 31 июля. Для участия потребуется презентация проекта с подробным описанием идеи мини-приложения и всем, что может лечь в основу проекта.
👉 Подать заявку.
Новшества EcmaScript 2025
Улучшения для Set, методы итераторов, дублирующиеся именованные группы захвата регулярных выражений, Promise.try() и новый тип Float16Array.
https://pawelgrzybek.com/whats-new-in-ecmascript-2025/
Пропали на неделю, сори.
Инспектор HTML форм
Инструмент, делающий разбор вашей формы на предмет ошибок и недочетов - вставляете код и получаете отчет.
https://polypane.app/form-inspector/
Операторы логического присваивания
Использование короткого синтаксиса для упрощения инициализации переменных с условиями. Виды операторов, примеры, поддержка в браузерах.
https://allthingssmitty.com/2025/07/28/logical-assignment-operators-in-javascript-small-syntax-big-wins/
Хотите разобраться в тестировании API на ASP.NET Core?
➡️ Присоединяйтесь к открытому уроку «Тестирование API в ASP.NET Core: Интеграция и Нагрузка» 5 августа в 20:00 МСК. На вебинаре мы:
- Разберем ключевые концепции интеграционного и нагрузочного тестирования.
- Научимся писать интеграционные тесты с популярными библиотеками.
- Освоим инструменты для нагрузочного тестирования и анализа результатов.
📗 Этот урок — отличная подготовка к курсу «C# ASP.NET Core разработчик», который стартует совсем скоро. Все участники вебинара получат скидку на обучение!
Записаться на вебинар → https://otus.pw/9DLV/
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru
ES-toolkit
Новая легковесная альтернатива для lodash с поддержкой типов и улучшенной производительностью.
https://es-toolkit.dev/
Подмена входящего трафика: скрытые, но крайне полезные фичи браузера Chrome
Инструкция о том, как разрабатывать веб приложения с Chrome, если API еще не готов.
https://habr.com/ru/companies/sberbank/articles/923888/
Совмещаем несколько трансформаций с animation-composition
Возможности, которые предоставляет animation-composition: replace, add, accumulate и примеры их использования для более гибкого управления анимацией и композициями трансформаций в CSS
https://frontendmasters.com/blog/stacked-transforms/
⚡️Хотите научиться писать надежные тесты для React-приложений и улучшить свои навыки в тестировании?
Присоединяйтесь к открытому уроку «Тестирование React-приложений с помощью React Testing Library» 23 июля в 20:00 МСК! Разберем:
- Основы React Testing Library (RTL): философию и ключевые принципы.
- Разницу между RTL и Enzyme, и почему RTL — лучший выбор.
- Как тестировать рендеринг, события, асинхронный код и кастомные хуки.
Это отличная возможность перед стартом курса «React.js Developer» от OTUS. Все участники получат скидку на обучение и полезные материалы для дальнейшего изучения.
👉Регистрация открыта: https://otus.pw/scrx/
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576
Как создавать NPM пакеты в 2025
Пошаговая инструкция, начиная с инициализации Git‑репозитория, настройки сборки через tsc, подключения Prettier и Vitest, до настройки CI через GitHub Actions и публикации с помощью Changesets
Плюсом рассказывают о продвинутых шагах: конфигурирование package.json, генерация .d.ts-типов, настройка линтинга и автоматизации публикации. В итоге получается полностью готовый к продакшну пакет со структурой src→dist, тестами, форматом и CI/CD.
https://www.totaltypescript.com/how-to-create-an-npm-package
Scroll-Driven Sticky заголовки
Используем Scroll-Driven анимацию совместно с position: sticky чтобы оживлять заголовки при прокрутке.
https://css-tricks.com/scroll-driven-sticky-heading/
Один из наших подписчиков запилил ресурс для подготовки к фронтенд‑собеседованиям — Hack Frontend
Там собрано всё, что обычно нужно:
- База знаний с реальными вопросами и детальными разборками, а не просто теоретические статьи.
- База задач из интервью с возможностью решать их прямо в браузере (есть встроенная IDE).
- Квизы по «тонким» моментам JavaScript: event loop, замыкания, промисы, прототипы и пр.
Платформа полностью бесплатная
https://www.hackfrontend.com
Асинхронное итерирование с Array.fromAsync()
Современный способ асинхронного итерирования и его сравнение с привычными паттернами.
https://allthingssmitty.com/2025/07/14/modern-async-iteration-in-javascript-with-array-fromasync/
Анализ 100 лендинг станиц продуктов для разработчиков
Представим, что у вас есть инструмент для разработчиков и вы хотите его продвигать. Какую лендинг страницу сделать? Вот обзорная статья от Злых Марсиан с успешными практиками для дизайна лендингов: понятные заголовки, визуальные демо продукта и чёткие призывы к действию.
https://evilmartians.com/chronicles/we-studied-100-devtool-landing-pages-here-is-what-actually-works-in-2025
Вертикальный ритм
Почему вертикальный ритм важен и как его соблюсти при дизайне и разработке приложений.
https://habr.com/ru/companies/edison/articles/340670/
Стилизуем gap
О новой CSS-функциональности — gap decorations, которая позволяет добавлять декоративные разделительные линии между элементами flex, grid и multi-column без лишнего HTML-кода. Теперь можно одним CSS-свойством настроить ширину, цвет, стиль линий и даже сложные шаблоны через repeat(). Поддержка с Chrome 139.
https://css-tricks.com/the-gap-strikes-back-now-stylable/
Params Editor
Удобное расширение для Chrome для редактирования query параметров url
https://params-editor.isolpro.in/
Как оптимизировать работу вашего NextJs приложения с after
О новой API-функции after()
в Next.js 15, которая позволяет выполнять дополнительную логику после отправки ответа клиенту, не замедляя основной рендеринг. О том, где и как применять after()
, а также потенциальные ограничения при работе с Server Components и middleware.
https://blog.logrocket.com/how-to-optimize-next-js-app-after/