27159
Присоединяйтесь к нашему каналу и погрузитесь в мир фронтенд-разработки Связь: @devmangx РКН: https://clck.ru/3Fs3wT
Совет по JS: возможно, вы не знали про способ автоматически экранировать обратные слэши в строке
Используйте String.raw, она возвращает строку как есть, без обработки escape-последовательностей вроде \t, \n и т.д.
Она трактует \ и t как отдельные символы и автоматически экранирует обратный слэш в выходной строке.
➡️ @FrontendPortal | #tip by Shripal Soni
Есть повод отпраздновать!
facebook/react → react/react
➡️ @FrontendPortal
Бесплатное обучение по AI, Python, аналитике и IT-профессиям стало доступно россиянам 🇷🇺
Запущена госпрограмма, в рамках которой работающие граждане РФ (и те кто в поиске) теперь могут получить новую специальность или повысить квалификацию за счёт государства.
Программа реализуется совместно с Ростелеком.
Принес небольшую коллекцию красивых переходов 😳
Внутри готовые анимации для карточек, меню, уведомлений, загрузок, переключателей и других элементов интерфейса. Всё можно сразу посмотреть, скопировать и украсть себе в проект.
https://transitions.dev/
➡️ @FrontendPortal
Метод для возврата элемента массива по указанному индексу
Он действует почти как скобочная запись array[index], за исключением того, что индекс может быть отрицательным
➡️ @FrontendPortal | #js
Cloudflare купила компанию, стоящую за Vite!
Компанию создателя Vue — Эвана Ю.
Теперь Cloudflare также владеет проектами Vitest, Rolldown, Oxc... Ранее у них уже был Astro. Теперь ещё и Vite.
Это даёт Cloudflare контроль над всем стеком. У них теперь есть все примитивы: frontend/backend-фреймворк, линтинг, тестирование, форматирование, JS runtime, база данных, KV, инференс, blob storage, access и так далее.
Умный ход. Аккуратно упакованный набор, который можно скормить LLM, чтобы она собрала сайт ✌️
➡️ @FrontendPortal
Релизнулся Chrome 149! Наконец-то появилась возможность стилизовать gaps в CSS Grid и Flexbox.
Внешний вид календаря теперь тоже можно легко реализовать с помощью CSS Grid
➡️ @FrontendPortal
Во ВКонтакте серьезно обновили frontend-архитектуру
Речь про переход ключевых разделов vk.com на SPA: ленты, профилей, сообществ, мессенджера и других сценариев, то есть про реальный highload frontend.
Что получили:
→ первая отрисовка страницы ускорилась на 25%
→ переходы между разделами — в 3.5 раза быстрее
→ интерфейс сразу показывает каркас страницы, а затем догружает контент
Из интересного по инженерке:
→ деплой фронтенда сократился до 20 секунд
→ 6–8 релизов в сутки
→ 100+ merge request ежедневно попадает в прод
Переход делали постепенно и без изменения привычного интерфейса.
https://www.cnews.ru/news/line/2026-06-03_vkontakte_obnovila_veb-platformu
➡️ @FrontendPortal
Адаптивное изображение
Тег <picture> используется, когда для разных устройств или вариантов отображения нам нужны разные картинки
<picture>
<source srcset="320.jpg" media="(max-width: 800px)">
<img src="640.jpg" alt="...">
</picture>
<source> по порядку, останавливается на первом подходящем под текущие условия и отображает картинку из атрибута srcset. Другие теги <source> не анализируются. <picture> не поддерживается браузером или ни один из тегов <source> не подходит под условия, то отображается картинка из тега <img>
Этот опенсорсный веб-компонент автоматически генерирует скелетон-заглушки с shimmer-эффектом на основе вашего реального UI с множеством настроек.
→ не нужно создавать отдельные skeleton-компоненты
→ генерирует лоадеры по фактической структуре DOM
→ настраиваемые shimmer-эффекты и стили
→ работает с React, Vue, Svelte и другими фреймворками
https://github.com/Aejkatappaja/phantom-ui
➡️ @FrontendPortal
Познакомьтесь с Datatype – шрифтом, который превращает текст в графики. Доступен в Google Fonts и в Workspace.
Простой синтаксис вроде {b:10,25,7,95} автоматически преобразуется в спарклайны, круговые диаграммы и бар-чарты, которые отлично смотрятся в ваших документах, презентациях и таблицах
Datatype на Google Fonts
➡️ @FrontendPortal
Вот здесь можно найти кучу красивых абстрактных SVG-шейпов и мгновенно скопировать код в один клик.
Идеально для дизайнеров и разработчиков, которые хотят сделать свои интерфейсы более динамичными и визуально насыщенными 😏
➡️ @FrontendPortal
Вау, это наконец-то происходит!npm планирует по умолчанию блокировать postinstall-скрипты в одном из будущих релизов.
В ближайшем будущем мы, скорее всего, начнём получать предупреждение.
Ссылка на PR с реализацией первого этапа:
https://github.com/npm/cli/pull/9360
Ссылка на RFC с описанием всех связанных фич и трёхэтапного плана роллаута:
https://github.com/npm/rfcs/pull/868
➡️ @FrontendPortal
Успех в геймдеве сегодня - это скорость проверки гипотез
С помощью ИИ мобильную игру можно собрать за пару часов и сразу проверить, есть ли у нее потенциал
Это огромное преимущество - пока кто-то месяцами делает “идеальный проект”, другие за это время тестируют десятки идей и выходят в плюс через закупку трафика
В закрепе канала @kidsgametop лежит гайд, как собрать мобильный MVP за 60 минут с помощью нейросетей - лучший способ быстрее тестировать идеи и заходить в рынок
P.S. Если у тебя уже есть готовый проект на любой стадии - пиши в ЛС, обсудим издательство
Читать полностью…
Новый HTML-элемент для установки приложений! И это можно будет делать без JavaScript.
Он рендерит кнопку на языке пользователя и запускает процесс установки по клику.
Пока что тестируется в Chrome и Edge.
➡️ @FrontendPortal
Откопал интересную штуку для UI
Набор кастомизируемых pixel-grid спиннеров в стиле retro flip-dot дисплеев: можно выбрать готовый вариант, собрать свой в визуальном редакторе и экспортировать в SVG, React, Flutter и другие форматы
https://flicker.laurie.fyi/gallery
➡️ @FrontendPortal
React Compiler на Rust почти готов
Команда React практически завершила перенос React Compiler с TypeScript на Rust. Новая версия уже используется внутри компании и показывает очень уверенные результаты:
• 99,9% паритета с текущей реализацией на TypeScript
• около 25% прироста производительности
• более глубокая интеграция с экосистемой Rust-инструментов, включая SWC и OXC
Отдельно интересно, что часть портирования проходов компилятора выполнялась с помощью вайб-кодинга
Сейчас команда занимается финальной полировкой, тестированием и сбором обратной связи. По словам разработчиков, уровень уверенности в новой реализации уже достаточно высок, и PR планируют смержить в ближайшие недели
Параллельно экосистема уже готовится к переходу на новую версию. Для React Compiler на Rust появились черновые интеграционные PR для:
• Oxc
• SWC
• Bun
➡️ @FrontendPortal
Откопал мощный редактор с кучей красивых готовых mesh-градиентов, которые можно визуально кастомизировать и экспортировать как изображения или даже анимированные видео
https://colorflow.ls.graphics/
➡️ @FrontendPortal
🖥 Frontend с нуля до трудоустройства
Путь до Frontend-оффера — это не только обучение, но и собеседования, резюме и ATS-фильтры.
И у большинства кандидатов проблемы повторяются на одних и тех же этапах.
💼 Мы собрали материалы для каждого шага:
— ATS и разбор резюме
— база реальных Frontend собеседований
— задачи с собесов в BigTech
— System Design для Frontend
— инфраструктура больших приложений
— сообщество фронтендеров
— курсы по React, TypeScript и FSD
📍 В закрепе найдёшь материалы для каждого этапа пути до оффера.
Создать прикольную анимацию сайдбара на CSS не так уж сложно ☺️
Здесь мы делаем простую анимацию, чтобы скрывать и показывать сайдбар, одновременно сдвигая основной контент страницы вправо.
Если хочешь, можно сделать анимацию проще: убрать scale и оставить только translate.
Экспериментируй с разными значениями timing functions, длительностью и другими параметрами, чтобы добиться нужного эффекта
➡️ @FrontendPortal | #CSS
40 собесов и оффер за 1 месяц
Алексей разработчик.
Искал работу с декабря - написание сопроводов и отклики занимали очень много времени.
Выхлоп - почти нулевой.
В какой-то момент понял:
так можно искать бесконечно.
И по совету друга попробовал ии-ассистента Софи.
▫️За ~1 месяц прошел около 40 собеседований
▫️Получил оффер с вакансии, на которую, по его словам, не откликнулся бы сам
В описании она выглядела скучно, а по факту - одна из самых интересных компаний, с которыми я общался.
А ты знал, что в VS Code можно мгновенно выделить всё содержимое между парными скобками? 🤯
Просто дважды кликни внутри пары {} или (), и VS Code автоматически выделит весь код, который находится между ними.
Мелкая фишка, но при редактировании кода она может неожиданно сэкономить кучу времени ✌️
➡️ @FrontendPortal
Blossom — это опенсорс система каруселей с огромным количеством красивых паттернов и готовых примеров. Также в комплекте идут навыки для AI-агентов, а ещё есть поддержка React, Vue, Svelte и Web Components.
github.com/jespervos/blossom-carousel
➡️ @FrontendPortal
На Stepik вышла программа «Фундамент DevOps»
Это комплексная программа из 4 практических курсов по ключевым технологиям современного DevOps: Linux, Git, Docker и Kubernetes.
Вы последовательно пройдёте путь от работы в Linux и Git до контейнеризации приложений и управления ими в Kubernetes.
Что вы изучите:
• уверенную работу в Linux и терминале
• Git и контроль версий в реальных проектах
• Docker и контейнеризацию приложений
• Kubernetes и оркестрацию контейнеров
• основы сетей, безопасности и хранения данных
• автоматизацию задач и диагностику инфраструктуры
... и многому другому
Как frontend-разработчику вырасти в ЗП?
День сурка frontend-разработчика выглядит так
Зарплата замерла, задачи — бесконечный повтор, растет только кол-во бессмысленных созвонов
Откликаешься на вакансии — отвечают только ноунеймы, на собесах закидывают странными алгоритмами «на скорость».
И самое бесящее — пока буксуешь, кто-то вокруг спокойно забирает офферы в Яндекс и VK...
Ты тоже можешь получить оффер в компанию, в которой тебя будут ценить и хорошо платить.
⚡️ Писать код руками больше не нужно!
Привет. Меня зовут Кирилл. Я создаю топовые подборки с уроками по AI и вайбкодингу:
— 60+ промптов для дебага: поиск ошибок, оптимизация кода
— 40 бесплатных курсов по вайбкодингу
— 150 гайдов, как использовать ChatGPT, Claude Code, Antigravity, Cursor, Perplexity, Lovable
— 100 готовых модулей: авторизация, админки, логирование, тесты, i18n
— 37 MCP серверов: дизайн, разработка, Тесты/QA, деплой
Всего 10 минут в день на канале и ты научишься вайб-кодить проекты любой сложности.
Подписывайся, чтобы получать подборки каждую неделю!
Comimi — это JS/TS-библиотека, которая позволяет создавать кастомизируемые интерфейсы для чтения манги и комиксов в вебе
→ лейауты для чтения манги/комиксов
→ несколько режимов просмотра и чтения
→ гибкая настройка поведения ридера
→ создано для веб-ридеров комиксов
GitHub тут ✌️
➡️ @FrontendPortal
Markdown-редактор для React, который реально ощущается отполированным 🙂
MDXEditor – это редактор в стиле Notion с поддержкой продвинутого markdown, MDX, JSX, таблиц, блоков с кодом и прочего.
→ современное и удобное редактирование текста
→ гибкая система расширений с нормальной настройкой
→ отлично вписывается в React- и MDX-разработку
→ всё работает плавно и без ощущения сырого инструмента
Идеально подойдёт для документации, блогов, CMS и всяких инструментов для написания контента ✋
GitHub тут
➡️ @FrontendPortal
Совет на всю жизнь — начните изучать вайбкодинг.
Нейронки уже собирают проекты от идеи до релиза, пишут код, находят и исправляют баги лучше команды айтишников. Это сэкономит вам десятки часов работы.
А чтобы научиться вайбкодить и не совершать ошибки - читайте канал AI-архитектор, где есть:
➖Инструкции по Antigravity и n8n.
➖Связки, которые приносят от 100 000 ₽ за проект
➖Реальный опыт программиста и вайбкодера, который настраивает автоматизацию ИИ для гос. компаний.
Подписывайтесь и смотрите в закрепе, как за 2 дня собрать ИИ-автоматизацию без единой строчки кода: /channel/+4qqKyvjqF7E5YjJi