front_end_dev | Technologies

Telegram-канал front_end_dev - FrontEndDev

29748

🚀 Статьи, новости, туториалы по 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

Subscribe to a channel

FrontEndDev

Используем Performance Extensibility API

Google не так давно представил API для более детального измерения перфоманса. Можно создватать отдельные треки на вкладке Performance для различных участков кода.

https://csswizardry.com/2025/07/the-extensibility-api/

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

FrontEndDev

State of HTML 2025

Стартовал новый опрос об HTML, который позволяет понять, как разработчики используют новые и старые фичи HTML и какие хотелось бы увидеть в будущем. Если хотите повлиять на развитие современного web — у вас есть шанс.

https://survey.devographics.com/en-US/survey/state-of-html/2025

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

FrontEndDev

VS Code: 5 интересных функций и расширений, меняющих подход к разработке

Даже опытные пользователи зачастую не догадываются о некоторых "скрытых" возможностях VSCode, которые могут значительно повысить продуктивность.

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

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

FrontEndDev

Руководство по PDF.js

PDF.js — популярная open‑source библиотека от Mozilla для рендеринга PDF-документов в браузере без использования плагинов. Гайд подробно описывает шаги от базовой настройки и отображения PDF-страниц в <canvas> до более продвинутых возможностей, таких как извлечение текста, аннотации и создание UI

https://www.nutrient.io/blog/complete-guide-to-pdfjs/

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

FrontEndDev

Frontend Performance Checklist

Большой гайд с лучшими практиками по оптимизации веб приложений.

https://crystallize.com/blog/frontend-performance-checklist

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

FrontEndDev

Контролируем длину строк в CSS

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

https://css-tricks.com/setting-line-length-in-css-and-fitting-text-to-a-container/

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

FrontEndDev

Утилитные TS типы для работы с Promise

Примеры типизации сложных кейсов при работе с Promise.all или вложенными Promise.

https://spin.atomicobject.com/better-promise-all/

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

FrontEndDev

Задача: получить максимум инсайтов за минимум времени
Решение: прийти к нам на Frontend meetup. 😎

А именно:
✔️ Как ускорить сборку фронта в 10 раз (и не развалить всё по пути)
✔️ Как развивать хард-скиллы на работе, а не в 2 часа ночи
✔️ Как подружиться с ИИ и не отдать ему контроль над кодовой базой.

Встречаемся офлайн/онлайн 22 июля в 18:00 в Sber Agile Home по адресу: Кутузовский проспект, 32к1, Москва.
Здесь можно узнать подробности и зарегистрироваться!

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

FrontEndDev

Localhost-атака: как **ta и Яндекс следят за пользователями Android через localhost

Скрипты **ta Pixel и Яндекс.Метрика в браузере устанавливают соединение с фоновыми нативными приложениями, прослушивающими определённые TCP/UDP‑порты, чтобы передать cookie (например, _fbp) и идентификаторы устройства, тем самым связывая активность в браузере с учётной записью пользователя. Этот способ обхода защиты ставит под угрозу приватность и делает даже приватный режим небезопасным.

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

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

FrontEndDev

Как хорошо вы знаете класс Date?

Квиз из 28 нестандартных вопросов о том, как работает Date в JS. Делитесь результатами в коментах.

https://jsdate.wtf/

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

FrontEndDev

Как выжить в мире сложных интерфейсов в 2025-м

7 работающих рецептов от React и CSS до дизайн-систем.

https://habr.com/ru/companies/ncloudtech/articles/924704/

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

FrontEndDev

Оператор satisfies в TypeScript

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

https://frontendmasters.com/blog/satisfies-in-typescript/

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

FrontEndDev

🎯 Хочешь запустить своё мини-приложение на аудиторию в 45 млн пользователей?

VK Dev Grants — грантовая программа для разработчиков от VK Mini Apps

🏆 Призовой фонд — 5 млн ₽

💡 Условия — от идеи до масштабного релиза

💼 Участие — соло или в команде

🧠 Экспертная поддержка, продвижение и монетизация

Заявки на 1 этап принимаются до 31 июля. Для участия потребуется презентация проекта с подробным описанием идеи мини-приложения и всем, что может лечь в основу проекта.

👉 Подать заявку.

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

FrontEndDev

Новшества EcmaScript 2025

Улучшения для Set, методы итераторов, дублирующиеся именованные группы захвата регулярных выражений, Promise.try() и новый тип Float16Array.

https://pawelgrzybek.com/whats-new-in-ecmascript-2025/

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

FrontEndDev

Пропали на неделю, сори.

Инспектор HTML форм

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

https://polypane.app/form-inspector/

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

FrontEndDev

Операторы логического присваивания

Использование короткого синтаксиса для упрощения инициализации переменных с условиями. Виды операторов, примеры, поддержка в браузерах.

https://allthingssmitty.com/2025/07/28/logical-assignment-operators-in-javascript-small-syntax-big-wins/

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

FrontEndDev

Хотите разобраться в тестировании API на ASP.NET Core?

➡️ Присоединяйтесь к открытому уроку «Тестирование API в ASP.NET Core: Интеграция и Нагрузка» 5 августа в 20:00 МСК. На вебинаре мы:

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

📗 Этот урок — отличная подготовка к курсу «C# ASP.NET Core разработчик», который стартует совсем скоро. Все участники вебинара получат скидку на обучение!

Записаться на вебинар → https://otus.pw/9DLV/

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

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

FrontEndDev

ES-toolkit

Новая легковесная альтернатива для lodash с поддержкой типов и улучшенной производительностью.

https://es-toolkit.dev/

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

FrontEndDev

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

Инструкция о том, как разрабатывать веб приложения с Chrome, если API еще не готов.

https://habr.com/ru/companies/sberbank/articles/923888/

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

FrontEndDev

Совмещаем несколько трансформаций с animation-composition

Возможности, которые предоставляет animation-composition: replace, add, accumulate и примеры их использования для более гибкого управления анимацией и композициями трансформаций в CSS

https://frontendmasters.com/blog/stacked-transforms/

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

FrontEndDev

⚡️Хотите научиться писать надежные тесты для React-приложений и улучшить свои навыки в тестировании?

Присоединяйтесь к открытому уроку «Тестирование React-приложений с помощью React Testing Library» 23 июля в 20:00 МСК! Разберем:
- Основы React Testing Library (RTL): философию и ключевые принципы.
- Разницу между RTL и Enzyme, и почему RTL — лучший выбор.
- Как тестировать рендеринг, события, асинхронный код и кастомные хуки.

Это отличная возможность перед стартом курса «React.js Developer» от OTUS. Все участники получат скидку на обучение и полезные материалы для дальнейшего изучения.

👉Регистрация открыта: https://otus.pw/scrx/

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

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

FrontEndDev

Как создавать 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

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

FrontEndDev

Scroll-Driven Sticky заголовки

Используем Scroll-Driven анимацию совместно с position: sticky чтобы оживлять заголовки при прокрутке.

https://css-tricks.com/scroll-driven-sticky-heading/

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

FrontEndDev

Один из наших подписчиков запилил ресурс для подготовки к фронтенд‑собеседованиям — Hack Frontend

Там собрано всё, что обычно нужно:

- База знаний с реальными вопросами и детальными разборками, а не просто теоретические статьи.
- База задач из интервью с возможностью решать их прямо в браузере (есть встроенная IDE).
- Квизы по «тонким» моментам JavaScript: event loop, замыкания, промисы, прототипы и пр.

Платформа полностью бесплатная
https://www.hackfrontend.com

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

FrontEndDev

Асинхронное итерирование с Array.fromAsync()

Современный способ асинхронного итерирования и его сравнение с привычными паттернами.

https://allthingssmitty.com/2025/07/14/modern-async-iteration-in-javascript-with-array-fromasync/

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

FrontEndDev

Анализ 100 лендинг станиц продуктов для разработчиков

Представим, что у вас есть инструмент для разработчиков и вы хотите его продвигать. Какую лендинг страницу сделать? Вот обзорная статья от Злых Марсиан с успешными практиками для дизайна лендингов: понятные заголовки, визуальные демо продукта и чёткие призывы к действию.

https://evilmartians.com/chronicles/we-studied-100-devtool-landing-pages-here-is-what-actually-works-in-2025

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

FrontEndDev

Вертикальный ритм

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

https://habr.com/ru/companies/edison/articles/340670/

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

FrontEndDev

Стилизуем gap

О новой CSS-функциональности — gap decorations, которая позволяет добавлять декоративные разделительные линии между элементами flex, grid и multi-column без лишнего HTML-кода. Теперь можно одним CSS-свойством настроить ширину, цвет, стиль линий и даже сложные шаблоны через repeat(). Поддержка с Chrome 139.

https://css-tricks.com/the-gap-strikes-back-now-stylable/

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

FrontEndDev

Params Editor

Удобное расширение для Chrome для редактирования query параметров url

https://params-editor.isolpro.in/

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

FrontEndDev

Как оптимизировать работу вашего NextJs приложения с after

О новой API-функции after() в Next.js 15, которая позволяет выполнять дополнительную логику после отправки ответа клиенту, не замедляя основной рендеринг. О том, где и как применять after(), а также потенциальные ограничения при работе с Server Components и middleware.

https://blog.logrocket.com/how-to-optimize-next-js-app-after/

Читать полностью…
Subscribe to a channel