FrontEndDev
28.7K subscribers
2.22K photos
22 videos
7.43K links
🚀 Статьи, новости, туториалы по frontend разработке.

https://jem-space.ru

Admin: @jem_jem
Пишу в @five_a_m

Хорошие серваки от DigitalOcean: https://m.do.co/c/1351d64475ee

Реклама: https://bit.ly/2NxmVDu
РКН: https://clck.ru/3GLw7G
Download Telegram
Вертикальный ритм

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

https://habr.com/ru/companies/edison/articles/340670/
👍93❤‍🔥1🔥1
Оператор satisfies в TypeScript

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

https://frontendmasters.com/blog/satisfies-in-typescript/
❤‍🔥87🔥4
Анализ 100 лендинг страниц продуктов для разработчиков

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

https://evilmartians.com/chronicles/we-studied-100-devtool-landing-pages-here-is-what-actually-works-in-2025
👍103🤣3👨‍💻1
Как выжить в мире сложных интерфейсов в 2025-м

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

https://habr.com/ru/companies/ncloudtech/articles/924704/
👍7💩32🤔2
Асинхронное итерирование с Array.fromAsync()

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

https://allthingssmitty.com/2025/07/14/modern-async-iteration-in-javascript-with-array-fromasync/
👍154🔥4
Как хорошо вы знаете класс Date?

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

https://jsdate.wtf/
🤣19👍8🤯6🥴3😁21🔥1
Один из наших подписчиков запилил ресурс для подготовки к фронтенд‑собеседованиям — Hack Frontend

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

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

Платформа полностью бесплатная
https://www.hackfrontend.com
👍1712💩2
Localhost-атака: как **ta и Яндекс следят за пользователями Android через localhost

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

https://habr.com/ru/articles/915732/
10🤔5👍4😱1💩1
Scroll-Driven Sticky заголовки

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

https://css-tricks.com/scroll-driven-sticky-heading/
8🔥2👍1
Как создавать 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
👍13❤‍🔥3👏3🔥2💩2👎1😁1
Утилитные TS типы для работы с Promise

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

https://spin.atomicobject.com/better-promise-all/
6❤‍🔥3👍2
Контролируем длину строк в CSS

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

https://css-tricks.com/setting-line-length-in-css-and-fitting-text-to-a-container/
👍7🔥63
Совмещаем несколько трансформаций с animation-composition

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

https://frontendmasters.com/blog/stacked-transforms/
👍621
Frontend Performance Checklist

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

https://crystallize.com/blog/frontend-performance-checklist
👍113🔥2
Подмена входящего трафика: скрытые, но крайне полезные фичи браузера Chrome

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

https://habr.com/ru/companies/sberbank/articles/923888/
👍73🔥3
Руководство по PDF.js

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

https://www.nutrient.io/blog/complete-guide-to-pdfjs/
🔥12👍41
ES-toolkit

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

https://es-toolkit.dev/
116🤩3🤨3🔥2
VS Code: 5 интересных функций и расширений, меняющих подход к разработке

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

https://habr.com/ru/articles/930926/
👍10🤮32🔥1
Хотите разобраться в тестировании API на ASP.NET Core?

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

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

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

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

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

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

https://survey.devographics.com/en-US/survey/state-of-html/2025
4👍2🔥2
Операторы логического присваивания

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

https://allthingssmitty.com/2025/07/28/logical-assignment-operators-in-javascript-small-syntax-big-wins/
1👍10👀32