FrontEndDev
25.7K subscribers
2.7K photos
30 videos
7.93K links
🚀 Статьи, новости, туториалы по 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
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
12 встроенных возможностей Node.js, которые уже заменяют популярные пакеты

Node.js уже умеет заменять axios, nodemon, dotenv, jest и другие привычные зависимости встроенными API. Это сокращает число пакетов в проекте, убирает лишние установки и делает стек проще, но перед переходом стоит проверить стабильность и то, чего встроенные возможности пока не умеют.

https://flaviocopes.com/node-builtins/
❤15👍2
Как определить пересечение элементов только на CSS

CSS теперь позволяет отследить момент, когда декоративный элемент начинает пересекаться с контентом, и скрыть его без JavaScript. Для этого используются anchor positioning, scroll-driven animations и style container queries, а срабатывание завязано не на скролл, а на появление overflow в измеряющем элементе.

https://ishadeed.com/article/css-detect-overlap/
❤‍🔥6
🏁Тестовый собес на Frontend с разработчиком из R-Vision, ex-Сбер

15 октября в 19:00 (мск) приходи посмотреть открытое онлайн-собеседование на Frontend-разработчика

Интервьюер: Даниил Дмитриев – Frontend-разработчик в R-Vision, ex-Сбер. Пишет на React и TypeScript, совмещает роль тимлида, менторит разработчиков и проводит код-ревью

На эфире нет сценария ↓
Кандидат – случайный разработчик, который не знает вопросов заранее

На обычном собесе ты не знаешь, что думает интервьюер, пока не придёт фидбек. На этом эфире Даниил проговорит всё вслух:

— какие вопросы и задачи даёт кандидатам на Frontend-собесах
— что в каждом ответе засчитал бы, а что нет — и почему


А в конце ответит на твои вопросы

Эфир проходит в рамках менторской программы от ШОРТКАТ для разработчиков, которые хотят повысить грейд, ЗП и прокачать скиллы

Участие бесплатное 🔥

Зарегаться на эфир можно в боте → @shortcut_front_bot

Реклама.
О рекламодателе.
👍3👎3🔥2🤣1
Как называть UI-компоненты, токены и фичи без путаницы

Подборка практических подходов и инструментов для нейминга в интерфейсах: от HTML-классов и функций до design tokens, компонентов, цветов и новых фич. Это помогает сократить путаницу в команде, сделать систему именования более устойчивой и быстрее находить нужные сущности в коде и дизайн-системе.

https://smashingmagazine.com/2026/10/how-name-things/
🔥12❤2❤‍🔥1
Mermaid 12.0: новый движок раскладки и UML use case диаграммы

Mermaid 12.0 по умолчанию перешёл на движок ELK для flowchart, class, state и похожих диаграмм, поэтому уже существующие схемы могут выглядеть иначе, если не указать layout: dagre. Ещё в версии появились UML use case диаграммы, что расширяет набор схем для документации и проектирования интерфейсов и систем.
Готово к работе бесплатно в Extrella

https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4012.0.0
👍7❤2
Как 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/
⚡13❤‍🔥5👍3
This media is not supported in your browser
VIEW IN TELEGRAM
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
👎12🤡10👍4🤣1
Как ускорить страницу с демо-видео: сжатие, главы и отложенный автоплей

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

https://habr.com/ru/articles/1090594/
❤4👍3
Size Limit: инструмент для контроля бюджета производительности JavaScript

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

https://github.com/ai/size-limit
❤10👍5🤣2
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
🔥6❤2
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
👍11🥰3😍3
Проект от подписчика для тех, кто пилит свой сервис

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

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

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

https://votby.ru/
👍8
Forwarded from Vibe and AI
Media is too big
VIEW IN TELEGRAM
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
🌚4🔥3🤯2⚡1😁1
Плавная типографика в CSS: что выбрать вместо брейкпоинтов

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

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

https://blog.damato.design/posts/fluid-typography/
🔥3❤1🐳1
Как ускорили веб-приложение Claude

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

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

https://claude.dev/blog/how-we-made-claude-ai-faster/
⚡4👌2