FrontEndDev
26.4K subscribers
2.57K photos
24 videos
7.79K 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
Вопросы на собеседование по TypeScript: рефакторинг без риска

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

https://habr.com/ru/articles/1033686/
🔥7👍42
Профессиональные скилы для AI coding agents

Собирайте пайплайны для AI агентов с workflow, quality gates и best practices уровня senior инженеров, чтобы код выходил предсказуемым и поддерживаемым.

https://github.com/addyosmani/agent-skills
7🤡5👌2❤‍🔥1🔥1
Mobile View

Удобное и простое расширение, для предпросмотра ваших веб приложений на мобильных устройствах. Оборачивает контент в рамку, позволяя выбрать девайс, ориентацию и много других настроек.

https://mobileview.app/
613❤‍🔥2👎2🔥2
Десктоп приложения с Zig и WebView: маленькие бинарники и быстрые сборки

Zero-native позволяет собирать нативные десктоп приложения с веб интерфейсом через системный WebView или встроенный Chromium, сохраняя общий API и гибко выбирая движок под задачу.

https://zero-native.dev/
🔥43👍1👎1
Ежедневные flexbox головоломки

Прокачивайте CSS Flexbox через ежедневные задачи: нужно собрать целевой layout, подбирая свойства flexbox, чтобы добиться нужного выравнивания и поведения элементов.

https://flexboxle.com
👍9🥱42
Карточки фиксированной высоты: хрупкость, о которой легко забыть

Выравнивание карточек в сетке по высоте кажется простым, но фиксированная высота быстро ломается из-за контента, переносов и разных размеров элементов. Разбираем, почему такие решения становятся нестабильными и как подходить к верстке, чтобы макет оставался предсказуемым.

https://css-tricks.com/fixed-height-cards-more-fragile-than-they-look/
9👍5
Разбираем Bulletproof React: как навести порядок в кодовой базе

Bulletproof React помогает уйти от хаоса в React проектах за счет feature based структуры, четких границ между частями и встроенных практик по тестированию и безопасности, чтобы код оставался поддерживаемым и масштабируемым.

https://habr.com/ru/articles/1033506/
👍92🔥1😁1
ShadowRealm в JavaScript

Новый API ShadowRealm предлагает изоляцию исполнения кода в отдельной среде, чтобы безопаснее отделять контекст и глобальные объекты. Разбираемся, как это соотносится с realms в браузере и почему это шаг к более надежным приложениям.

https://css-tricks.com/soon-we-can-finally-banish-javascript-to-the-shadowrealm/
5🔥2
React useOptimistic для мгновенных обновлений интерфейса в продакшене

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

https://www.sitepoint.com/react-useoptimistic-production-patterns-for-instant-ui-updates/
👍54🔥2
Как тимлиду победить синдром самозванца. Бесплатный урок курса «Руководитель команд в ИТ»

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

На открытом уроке 23 июня в 20:00 разберём, почему у начинающих и действующих руководителей возникает синдром самозванца. Поговорим о том, как отличать реальные зоны роста от необоснованной неуверенности, какие ожидания от тимлида действительно реалистичны, а какие только создают лишнее давление. Отдельно обсудим, как управленческие ошибки отличаются от нормальной адаптации к новой роли и почему сложная ситуация не всегда доказывает вашу некомпетентность.

Также разберём, как использовать обратную связь, делегирование и работу с ожиданиями, чтобы укреплять уверенность в управленческой роли. Участники поймут, какие практики помогают принимать решения без постоянного сомнения в себе и как постепенно выстроить опору на свои навыки, опыт и понятные управленческие инструменты.

Урок не для тех, кто ждёт универсальный способ «стать уверенным за один вечер». Он будет полезен начинающим тимлидам, действующим руководителям команд, опытным разработчикам перед переходом в лидерскую роль и специалистам, которые хотят систематизировать управленческие навыки без лишней тревоги и самокопания.

👉 Записаться: https://otus.pw/uFHK/

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru
3👍3💩3
Как я написал «Обратную змейку» на чистом Canvas

Игрок управляет не змеёй, а яблоком, цель — выживать как можно дольше, пока три типа змей преследуют и меняют поведение. Логика разбита на модули (Snake/Renderer/Game) без фреймворков: от обновления движения и коллизий до отрисовки сетки и пиксельных спрайтов через fillRect()

https://habr.com/ru/companies/ruvds/articles/1047434/
1🔥6🥰32💩1
Out Loud — open-source ИИ для озвучивания текста

Out Loud делает AI text-to-speech полностью офлайн. Поддерживается 50+ естественных голосов на 8 языках, а также есть расширение для Chrome, чтобы озвучивать страницы в один клик. Код под MIT-лицензией — репозиторий можно форкать, проверять и улучшать под свои задачи.

https://www.out-loud.io/
👍71🔥1
Geometric.js — библиотека для геометрии в JavaScript.

Работайте с точками, отрезками, полигонами, углами и пересечениями, выполняя измерения и преобразования. Удобно использовать для задач визуализации, расчётов и логики в веб‑приложениях, где нужна геометрия на лету.

https://www.harryjstevens.com/geometric/
👍61
🔍Тестовое собеседование с руководителем Frontend-разработки в этот четверг

25 июня(в четверг!) в 19:00 по мск приходи онлайн на открытое собеседование, чтобы посмотреть на настоящее интервью на Middle Frontend-разработчика.

Как это будет:
📂 Виталий Черков, руководитель группы Frontend разработки с опытом 8+ лет, будет задавать реальные вопросы и задачи разработчику-добровольцу
📂 Виталий будет комментировать каждый ответ респондента, чтобы дать понять, чего от вас ожидает собеседующий на интервью
📂 В конце можно будет задать любой вопрос Виталию

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

Переходи в нашего бота, чтобы получить ссылку на эфир →
@shortcut_front_bot

Реклама.
О рекламодателе.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3👎3
Отладка WASM в Chrome DevTools

Chrome DevTools умеет полноценно дебажить скомпилированный WASM: ставьте брейкпоинты в Sources, смотрите локальные значения и стек вызовов, а для ref.cast и похожих ошибок включайте Pause on exceptions чтобы сразу ловить источник проблемы.

https://eli.thegreenplace.net/2026/debugging-wasm-in-chrome-devtools/
1🥰4👍2🔥1
Архитектура local-first для веб разработки

Разбираем, как строить приложения с приоритетом локальных данных в 2026 году: синхронизация, конфликтные сценарии и практичные решения для надежной работы офлайн и онлайн. Подойдет тем, кто уже пробовал local-first и хочет понять, где реальные риски и как их закрывать.

https://smashingmagazine.com/2026/05/architecture-local-first-web-development/
👍41
Навыки для AI кодинг агентов: как вернуть спецификации, тесты и review в процесс

AI coding agents часто идут по кратчайшему пути к готовому коду и пропускают спецификации, тесты и проверку, из за чего качество падает на масштабе. Проект предлагает оформлять best practices не как эссе, а как пошаговые skills с чекпоинтами и критериями выхода, чтобы агент следовал жизненному циклу разработки как у зрелой инженерной команды.

https://addyosmani.com/blog/agent-skills/
🔥2