FrontEndDev
الذهاب إلى القناة على Telegram
🚀 Статьи, новости, туториалы по frontend разработке. http://jem-space.ru Admin: @jem_jem Пишу в @five_a_m AI и вайбкод @vibe_and_ai Читать на парковке: https://max.ru/front_end_dev Реклама: http://bit.ly/2NxmVDu РКН: https://clck.ru/3GLw7G
إظهار المزيد
الشبكة:📈 نظرة تحليلية على قناة تيليجرام FrontEndDev
تُعد قناة FrontEndDev (@front_end_dev) في القطاع اللغوي الروسية لاعباً نشطاً. يضم المجتمع حالياً 25 590 مشتركاً، محتلاً المرتبة 5 194 في فئة التكنولوجيات والتطبيقات والمرتبة 25 390 في منطقة روسيا.
📊 مؤشرات الجمهور والحراك
منذ تأسيسه في невідомо، حقق المشروع نمواً سريعاً وجمع 25 590 مشتركاً.
بحسب آخر البيانات بتاريخ 25 أكتوبر, 2026، تحافظ القناة على نشاط مستقر. خلال آخر 30 يوماً تغيّر عدد الأعضاء بمقدار -277، وفي آخر 24 ساعة بمقدار -8، مع بقاء الوصول العام مرتفعاً.
- حالة التحقق: غير موثّقة
- معدل التفاعل (ER): يبلغ متوسط تفاعل الجمهور 9.52%. وخلال أول 24 ساعة من النشر يحصد المحتوى عادةً 5.81% من ردود الفعل نسبةً إلى إجمالي المشتركين.
- وصول المنشورات: يحصل كل منشور على متوسط 2 436 مشاهدة. وخلال اليوم الأول يجمع عادةً 1 487 مشاهدة.
- التفاعلات والاستجابة: يتفاعل الجمهور بانتظام؛ متوسط التفاعلات لكل منشور يبلغ 13.
- الاهتمامات الموضوعية: يركز المحتوى على مواضيع رئيسية مثل css, api, интерфейс, html, frontend.
📝 الوصف وسياسة المحتوى
يصف المؤلف القناة بأنها مساحة للتعبير عن الآراء الذاتية:
“🚀 Статьи, новости, туториалы по frontend разработке.
http://jem-space.ru
Admin: @jem_jem
Пишу в @five_a_m
AI и вайбкод @vibe_and_ai
Читать на парковке: https://max.ru/front_end_dev
Реклама: http://bit.ly/2NxmVDu
РКН: https://clck.ru/3GLw7G”
بفضل وتيرة التحديث المرتفعة (أحدث البيانات بتاريخ 26 أكتوبر, 2026) تحافظ القناة على حداثتها ومستوى وصول مرتفع. وتُظهر التحليلات تفاعلاً نشطاً من الجمهور، ما يجعلها نقطة تأثير مهمة ضمن فئة التكنولوجيات والتطبيقات.
25 590
المشتركون
-824 ساعات
-687 أيام
-27730 أيام
أرشيف المشاركات
25 587
Шпаргалка по интерфейсам: мелочи, которые делают UI заметно лучше] Подборка практических правил для более понятных, удобных и аккуратных интерфейсов. Она помогает выровнять отступы, анимации, типографику, цвета и доступность так, чтобы UI выглядел цельно и не раздражал пользователя. Для фронтендера это готовый набор решений, которые можно сразу переносить в компоненты и дизайн-систему. ·
25 587
React Forms и React.memo: что на самом деле перерисовывается
Формы в React помогают понять, где живут данные и почему компонент рендерится снова. Контролируемые поля удобны, когда значение влияет на интерфейс прямо во время ввода, а uncontrolled-подход и FormData подходят, когда нужен только итоговый результат. Это напрямую связано с оптимизацией через React.memo: чтобы не ререндерить лишнее, важно понимать, какие изменения действительно затрагивают компонент.
https://reactdevelopment.substack.com/p/react-forms-and-reactmemo-understanding
25 587
Как ускорили веб-приложение Claude
Разбор того, как в веб-приложении Claude сократили время до первого ввода у 75-го перцентиля с 3,1 до 0,55 секунды. Для этого нашли несколько скрытых тормозов: мелкие сдвиги верстки, которые не попадали в CLS, дорогой селектор :root:has(), добавлявший 24 мс на каждое изменение DOM, и проблему с предрендерингом Chrome, который строил страницу с неверной высотой.
Полезно как пример того, где реально прячутся задержки в интерфейсе и как их искать, если базовые метрики уже выглядят нормально.
https://claude.dev/blog/how-we-made-claude-ai-faster/
25 587
Плавная типографика в CSS: что выбрать вместо брейкпоинтов
Плавную типографику в CSS удобнее собирать через clamp() и viewport units: размер шрифта можно задать одной формулой без переключения на фиксированные значения по брейкпоинтам. Для доступности лучше не полагаться только на vw, а добавлять фиксированную величину, чтобы масштабирование страницы не ломало ожидаемое поведение.
Использовать container queries для размера текста стоит осторожно: если шрифт зависит от ширины контейнера, одинаковые заголовки в разных блоках начинают выглядеть как разные уровни иерархии.
https://blog.damato.design/posts/fluid-typography/
25 587
Repost from N/a
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/carbonyl25 587
Проект от подписчиков для тех, кто пилит свой сервис
Вот бы! - площадка, на которой можно бесплатно прорекламироваться и получить обратную связь от потенциальных пользователей.
Люди могут не только оставить комментарий или лайк, но и отметить, готовы ли пользоваться, платить, присоединиться или инвестировать в проект.
А если своей идеи пока нет, можно посмотреть, чего не хватает другим, и найти что-то интересное для себя.
https://votby.ru/
25 587
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
25 587
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
25 587
Size Limit: инструмент для контроля бюджета производительности JavaScript
Size Limit позволяет задать лимит на размер бандла или время загрузки кода и автоматически завалить CI или пометить PR, если изменения выходят за бюджет. Подходит для разовых проверок, показывает, куда уходят байты, и не привязан ни к фреймворку, ни к конкретному сборщику или CI.
https://github.com/ai/size-limit
25 587
Как ускорить страницу с демо-видео: сжатие, главы и отложенный автоплей
Демо-видео на первом экране можно сделать заметно легче, если отдельно оптимизировать сам ролик, постер и момент запуска. Такой подход позволяет показать несколько сценариев продукта сразу, не заставляя пользователя смотреть длинное видео целиком и не раздувая стартовую загрузку страницы.
https://habr.com/ru/articles/1090594/
25 587
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
25 587
Как 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/
25 587
Mermaid 12.0: новый движок раскладки и UML use case диаграммы
Mermaid 12.0 по умолчанию перешёл на движок ELK для flowchart, class, state и похожих диаграмм, поэтому уже существующие схемы могут выглядеть иначе, если не указать layout: dagre. Ещё в версии появились UML use case диаграммы, что расширяет набор схем для документации и проектирования интерфейсов и систем.
https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.0.0
25 587
Как называть UI-компоненты, токены и фичи без путаницы
Подборка практических подходов и инструментов для нейминга в интерфейсах: от HTML-классов и функций до design tokens, компонентов, цветов и новых фич. Это помогает сократить путаницу в команде, сделать систему именования более устойчивой и быстрее находить нужные сущности в коде и дизайн-системе.
https://smashingmagazine.com/2026/10/how-name-things/
25 587
🏁Тестовый собес на Frontend с разработчиком из R-Vision, ex-Сбер
15 октября в 19:00 (мск) приходи посмотреть открытое онлайн-собеседование на Frontend-разработчика
Интервьюер: Даниил Дмитриев – Frontend-разработчик в R-Vision, ex-Сбер. Пишет на React и TypeScript, совмещает роль тимлида, менторит разработчиков и проводит код-ревью
На эфире нет сценария ↓
Кандидат – случайный разработчик, который не знает вопросов заранее
На обычном собесе ты не знаешь, что думает интервьюер, пока не придёт фидбек. На этом эфире Даниил проговорит всё вслух:
— какие вопросы и задачи даёт кандидатам на Frontend-собесах — что в каждом ответе засчитал бы, а что нет — и почемуА в конце ответит на твои вопросы Эфир проходит в рамках менторской программы от ШОРТКАТ для разработчиков, которые хотят повысить грейд, ЗП и прокачать скиллы Участие бесплатное 🔥 Зарегаться на эфир можно в боте → @shortcut_front_bot Реклама. О рекламодателе.
25 587
Как определить пересечение элементов только на CSS
CSS теперь позволяет отследить момент, когда декоративный элемент начинает пересекаться с контентом, и скрыть его без JavaScript. Для этого используются anchor positioning, scroll-driven animations и style container queries, а срабатывание завязано не на скролл, а на появление overflow в измеряющем элементе.
https://ishadeed.com/article/css-detect-overlap/
25 587
12 встроенных возможностей Node.js, которые уже заменяют популярные пакеты
Node.js уже умеет заменять axios, nodemon, dotenv, jest и другие привычные зависимости встроенными API. Это сокращает число пакетов в проекте, убирает лишние установки и делает стек проще, но перед переходом стоит проверить стабильность и то, чего встроенные возможности пока не умеют.
https://flaviocopes.com/node-builtins/
25 587
CSS в почте как канал атак
Разбор показывает, как CSS и HTML в webmail могут использоваться для обхода sanitization, подмены интерфейса, утечки токенов и даже захвата аккаунтов. Для фронтенда это важно как напоминание, что безопасный рендеринг untrusted content ломается на расхождениях между тем, что считает безопасным sanitizer, и тем, как браузер реально интерпретирует разметку. Нельзя полагаться только на allowlist CSS и HTML, если в интерфейсе есть кликабельные элементы, псевдоэлементы и прокси для изображений.
https://portswigger.net/research/css-the-bomb-inside-your-inbox
25 587
Виртуальный джойстик для HTML5-игр за пару минут
nippleJS позволяет быстро добавить виртуальный джойстик в HTML5-игру без зависимостей и использовать его как внутри canvas, так и вне его. Для Phaser это даёт готовый touch-контроллер: игрок двигается по силе и углу жеста, а при отпускании джойстика останавливается.
https://emanueleferonato.com/2023/07/24/add-a-virtual-joystick-to-your-html5-games-in-a-matter-of-minutes-with-nipplejs-example-powered-by-phaser-and-arcade-physics/
25 587
vgpu для WebGPU в браузере и Node.js
Либa vgpu даёт один API для рендера WebGPU-шейдеров в браузере, в headless Node.js и в serverless-окружениях. Она позволяет переиспользовать один и тот же WGSL-код, а модули WGSL импортируются и экспортируются по схеме, похожей на TypeScript. На практике это упрощает сборку графики, генерацию PNG или MP4 без браузера и перенос шейдерной логики между клиентом и сервером.
https://vgpu.sh/
