27159
Присоединяйтесь к нашему каналу и погрузитесь в мир фронтенд-разработки Связь: @devmangx РКН: https://clck.ru/3Fs3wT
Когда они это добавили?
Теперь в Chrome DevTools отображаются вычисленные пошаговые значения для css calc() + переменных.
Отладка стала в 100 раз проще
➡️ @FrontendPortal
А вы знали, что в Chrome DevTools есть Live Expressions?
В консоли нажмите на иконку «👁», чтобы создать Live Expression. Она автоматически пересчитывает ваше JavaScript-выражение примерно каждые ~250 мс.
Суперудобно, чтобы отслеживать:
- изменения переменных
- состояние DOM
- таймеры
- позицию скролла
- метрики FPS
➡️ @FrontendPortal
Большой сдвиг для веба: Google зарелизил экспериментальный WebMCP для Chrome (пока за флагом)
Это открытый стандарт, который меняет модель взаимодействия AI-агентов с вебом: вместо “прокликивания” интерфейса (табы, ожидания, скриншоты, попытки понять пиксели/DOM) сайт экспортирует свою функциональность как структурированные tools, а агент вызывает их напрямую
Как разработчик, ты можешь переиспользовать существующую JS-логику и за несколько строк JS обернуть её в WebMCP-tools. Более того, любую HTML-форму можно превратить в WebMCP-tool, просто добавив новые атрибуты
Вот шаги, если хочешь потестить:
1. Скачай Chrome Canary.
2. Включи флаг: перейди на chrome://flags/#enable-webmcp-testing
3. Установи расширение: тык
4. Открой этот пример: тык
Нужны чистые и минималистичные иконки для UI и дизайн-задач? 🐇
Griddy Icons — это бесплатное опенсорс семейство иконок с чётким, утилитарным стилем. В наборе более 1100 иконок, толщина обводки 1.5px и сетка 24×24px. Всё выдержано в единой системе и сразу готово к использованию в U
Забираем здесь
➡️ @FrontendPortal | #resourse
Вышел TypeScript 6.0 Beta! 🥳
- Temporal
- Map#getOrInsert
- RegExp.escape
- префикс #/ для package imports
Новые значения по умолчанию!
- target: ES2025
- --strict
Депрекейты!
🗑 baseUrl, outFile
🗑 import assertions
🗑 namespace module
🗑 moduleResolution: node
🗑 target: ES5
https://devblogs.microsoft.com/typescript/announcing-typescript-6-0-beta/
➡️ @FrontendPortal
Совет на 2026 год — освойте ВАЙБ-КОДИНГ. ИИ уже пишет код, чинит баги, генерит тесты и документацию быстрее и качественнее любой команды айтишников
И те, кто научится вайбкодить сейчас, будут зарабатывать в разы больше тех, кто всё ещё делает всё вручную
Разобраться в этом с нуля поможет канал Вайб-кодинг. Там простым языком разбирают, какие инструменты действительно стоит использовать, как собирать проекты от идеи до релиза и что сейчас актуально в вайбкодинге
Подписывайтесь, нас уже 15 тысяч: @vibecoding_tg
Годная JS-либа для реализации drag-and-drop списков — Sortable
Живёт уже не первый год, проверена временем и продом. Поддерживает перетаскивание элементов как внутри одного списка, так и между несколькими. Работает на нативном Drag and Drop API
Простой и читаемый API, никаких зависимостей. Поддерживает анимацию при перетаскивании, работает на десктопах и тач-устройствах. Совместима с большинством фреймворков
➡️ @FrontendPortal | #resourse
Если тебе кажется, что используемые градиенты выглядят тусклыми или "грязными", попробуй вместо этого использовать цвета в пространстве OKLCH
В OKLCH оттенок задаётся как угол, а значит цвета, через которые проходит градиент, отличаются от тех, что получаются в sRGB
Можно подробнее почитать об этом здесь
➡️ @FrontendPortal
Полезный совет по DevTools для доступности
Хром умеет эмулировать дальтонизм и размытие зрения. Быстрый способ проверить, насколько ваш UI дружелюбен к тем, кто видит мир иначе
DevTools → Rendering → Emulate vision deficiencies
➡️ @FrontendPortal | #tip
Тем временем подъехали результаты State of JS 2025
TypeScript уверенно лидирует как язык, Vite по загрузкам обогнал Webpack, а доля ИИ-сгенерированного кода к концу 2025 года подобралась вплотную к 30%. Параллельно заметно растёт интерес к инструментам нового поколения: Cursor, Zed, Claude, Gemini и Copilot
Общее состояние JS-экосистемы: ключевые тренды, инструменты, библиотеки и сдвиги за последний год — вся аналитика в отчёте: https://2025.stateofjs.com/en-US/
➡️ @FrontendPortal
HTML-совет
Не используй input type="number" для важных числовых полей — типа почтового индекса, номера карты и т.п.
Почему?
- На десктопе появляется ненужный спиннер.
- Значение может случайно измениться при прокрутке мыши или нажатии клавиш вверх/вниз.
Вместо этого — используй inputmode="numeric" + pattern
✅ Показывает цифровую клавиатуру на мобильных устройствах — лучше UX.
✅ Добавляет валидацию на цифры.
➡️ @FrontendPortal | #tip by Shripal Soni
Простая кнопка в стиле ретро
Хитрость здесь заключается в том, чтобы создать боксовую тень без размытия для состояния по умолчанию
Для активного состояния я перемещаю кнопку, уменьшая при этом тень, так что тень кажется статичной
Подобного трюка можно добиться и с помощью псевдоэлементов, но я предпочитаю эту технику за ее простоту
➡️ @FrontendPortal
ilamy Calendar
Мощная, полнофункциональная библиотека календарных компонентов для React, написанная на TypeScript, Tailwind CSS и с использованием современных React-паттернов. Поддерживает несколько режимов отображения календаря, drag-and-drop, повторяющиеся события и продвинутую интернационализацию
GitHub тут
➡️ @FrontendPortal | #resourse
Вас добавили в чат «Первые шаги в JavaScript»
💯 Прокачайте навыки в веб-разработке на бесплатном курсе
Академия Selectel выпустила новый курс по JavaScript. Если вы хотите освоить синтаксис и базовые конструкции языка — первые три модуля для вас.
После обучения вы сможете:
🔹 работать с переменными let, var и const,
🔹 создавать простые функции и работать с DOM,
🔹 писать логические конструкции и тернарные операторы if/else.
Получите промокод на бесплатную работу с сервисами Selectel, а после финального теста — сертификат о прохождении.
Изучите основы JavaScript и создайте свой первый пет-проект →
Реклама. АО "Селектел". erid:2W5zFJHcTUc
Предотвращение цепной прокрутки с помощью overscroll-behavior
Если мы попытаемся выполнить прокрутку, когда граница скроллинга достигнута, то прокрутка будет выполнена в ближайшей родительской области скроллинга, что называется цепочкой прокрутки(scroll chaining)
Мы можем предотвратить цепочку прокрутки, установив для свойства overscroll-behaviour значение contain или none
- Подробнее
- Поиграть можно здесь
➡️ @FrontendPortal | #CSS #tip by Shripal Soni
Вышла тулза React Doctor, которая проверяет ваш React-код на наличие анти-паттернов:
- Лишние useEffect
- Проблемы с доступностью
- Prop drilling вместо context / композиции
Запускается как CLI или как агент-скилл. Повторяйте запуск, пока всё не пройдет проверки. Полностью опенсорс
Запустите в терминале, чтобы попробовать:
npx -y react-doctor@latest
Классный стильный toast-компонент для React. По ощущениям он немного напоминает iOS Dynamic Island для уведомлений: плавный, цепляет внимание и выглядит чисто "из коробки"
https://github.com/hiaaryan/sileo
➡️ @FrontendPortal
#Проекты_подписчиков
Слово автору @he150
mlut (читается как "млат") - это CSS-фреймворк для кастомных сайтов и креативов. Он помогает верстать проекты с индивидуальным и нешаблонным дизайном, где не подходят фреймворки старой школы и плохо справляются LLM. mlut похож на Tailwind, поскольку основан на подходе Atomic CSS, но по некоторым параметрам превосходит все популярные аналоги.
Atomic CSS - это методология верстки, в которой мы используем маленькие атомарные классы, каждый из которых делает одно действие. Эти классы называют утилитами. Обычно они применяет одно CSS-свойство (например, цвет текста), но не обязательно одно. Выглядят они примерно так: D-ib, Bgc-blue_h.
Преимущества такого подхода
1. Тратим меньше мыслетоплива: не думаем о нейминге сущностей, структуре каталогов
2. Меньше CSS на клиенте: реиспользуем одни и те же утилиты, а новые стили почти перестают добавляться
3. Быстрее пишем стили: короткие классы, нет переключения файлов
4. Можно применять на любом стеке: JS SPA, PHP, Clojure, etc
Ключевые особенности mlut
1. Краткий и строгий нейминг. Сокращения основаны на популярности свойств CSS и составлены по единому алгоритму. Если вы знаете CSS, то вы почти знаете mlut
2. Богатый и нативный синтаксис. Это как Vim для CSS. Удобно создавать сложные стили с помощью мощного синтаксиса, концептуально близкого к CSS
3. Написан на Sass. Используйте всю мощь препроцессора для связи рукописного CSS и утилит
Что реализовано на сегодня
- генератор утилит почти любой сложности
- JIT-движок, который умеет генерировать утилиты из HTML/JSX/etc
- CLI с минификацией и автопрефиксером
- плагины для сборщиков фронтенда: Webpack, Vite и Rollup
- онлайн-песочница
Также есть обширная документация. Совместно с HTML Academy готовится интерактивный мини-курс по инструменту. Первый урок уже вышел.
Это open source проект - результат глубокого ресерча и 1200+ часов труда. Больше технических деталей есть в расшифровке доклада с HolyJS.
Планы по развитию
- добавить еще возможностей CSS для сложной верстки: множественные градиенты, псевдоселекторы с аргументами, типа :has(), etc
- сделать интеграции для вайб-кодинга
- сделать плагины к IDE для автокомплита и подсказок
А недавно мы запустили проект на ProductRadar. Бодаемся там со стартапами за топ-3 продуктов этой недели. Будем благодарны за поддержку лайком на этой площадке и любой фидбек. Давайте покажем всем, что open source инструмент тоже может быть продуктом!
➡️ @FrontendPortal
7 дней бесплатного обучения во Frontend-разработке!
🔥 Ухвати свой шанс погрузиться в мир Frontend-разработки на нашем бесплатном онлайн-интенсиве! Интересные уроки, практическая работа и поддержка куратора — всё это доступно тебе прямо сейчас.
Всего за 7 дней ты:
1. Сгенерируешь сайт через Giga, DeepSeek, ChatGPT;
2. Сверстаешь весь сайт на HTML + CSS с правильным адаптивом;
3. Оживишь проект на JavaScript: логика, расчёты и трекинг заказов;
4. Подключишь карты и API, увидишь, как данные работают в настоящем продукте;
5. Получишь экспертные советы, как улучшить свои проекты и вывести их на профессиональный уровень.
В итоге добавишь в своё портфолио уникальный проект сервиса доставки , доступный по ссылке, который повысит твою ценность как специалиста.
🔥 С нас обучение, практика и поддержка на пути к фрилансу.
С тебя участие в интенсиве
👉 Начать бесплатное обучение
Не упусти шанс получить мощный заряд уверенности для дальнейшего роста в разработке!
Современный способ просматривать npm-пакеты
“NPMX” — это новый браузер для реестра npm, ориентированный на скорость и удобство для разработчиков
Никакого лишнего UI. Никаких тормозящих страниц. Только мгновенная информация о пакете, когда она действительно нужна 👌
https://npmx.dev/
➡️ @FrontendPortal | #resourse
Оочень крутая штука для изучения типов в TypeScript: Visual Types
Сайт сделан максимально приятно: всё интерактивное, с клавиатурной навигацией (и даже со звуковыми эффектами). Материал подаётся через 149 примеров с прогрессом и ачивками, получается почти как мини-курс в формате playground’а
Забираем тут ✌️
➡️ @FrontendPortal | #TypeScript
💻 Нужно развернуть low-code платформу без лишней инфраструктурной сложности?
С My NocoBase вы можете развернуть платформу в облачной инфраструктуре за несколько минут с доступом почти ко всем возможностям платформы и плагинам.
Кроме того, у вас будет возможность масштабироваться без ограничений по пользователям, перейти на self-host и получать техническую поддержку и консультации от команды в любой момент.
⏩️ В телеграм-канале @nocobase_ru мы делимся практическими кейсами и гайдами, как быстро создавать приложения, автоматизировать процессы и запускать проекты без лишнего кода.
#nocobase #lowcode #nocode #opensource #ai #it
⚡️ Как закрыть спринт за пару дней?
Для тех, кто уже выкупил прикол ИИ, Кирилл создал блог, куда пишет глубокие посты на тему использования ИИ в разработке.
Он уже 7 лет работает C++ программистом фултайм и параллельно создает свои IT продукты с помощью вайбкодинга.
На своем канале рассказывает:
— Как с AI за пару дней закрывать спринты?
— Как научить ИИ писать код, который не нужно править?
— Как создавать и продвигать собственные IT продукты?
Подписаться можно тут: /channel/+iQF4kKSO9qo1OTRi
Не двигайтесь: вы в ИИ-кадре
Этот бот создает фото для соцсетей в футуристичном стиле. Его можно поставить на аватарку, особенно если идете на t-sync conf. Конференция от Группы «Т-Технологии» для опытных инженеров впервые пройдет в Москве 7 февраля.
Попробовать бота можно здесь. А узнать больше о t-sync conf и зарегистрироваться — здесь
Как структурировать масштабируемый React-проект:
app/ → pages/ → features/ → shared/
➡️ @FrontendPortal
Задаём цвет в зависимости от темы операционной системы пользователя
Функция light-dark() принимает два аргумента и возвращает один из них в зависимости от того, какую тему выбрал пользователь.
Первое значение вернётся, если у пользователя установлена светлая тема, либо тема не выбрана, а второе, если установлена тёмная тема
Чтобы функция light-dark() заработала, нужно прописать свойство color-scheme со значением light dark. Обычно это делают в псевдоклассе :root. Если это свойство не прописать, то функция всегда будет возвращать только первое значение
На данный момент поддержка — 87.36%
➡️ @FrontendPortal | #CSS
Как frontend-разработчику получить оффер в Big Tech?
Платят как джуну, а спрашивают как с лида 🙄 Зарплата не растёт, задачи скучные.
Пробуешь откликаться, но на резюме клюют только ноунейм компании, а на собесах валят на алгоритмах? При этом вокруг кто-то постоянно получает офферы в Яндекс или VK...
Стабильность с маленькой зп, или дестрой рынка и выход на максимальную? Синяя или красная таблетка, Нео?! 👾
Меня зовут Тихон, привет! Я — действующий Frontend-разработчик и ментор.
Помогаю устроиться на хорошие позиции в Big Tech и сопровождаю на испытательном сроке.
Возможно, ты просто пошел по дедовым стопам
➡️ @FrontendPortal
Оптимизация SVG – краткий гайд для начинающих
Часто на сайтах встречаются SVG-изображения, которые не оптимизированы как следует: они содержат лишние группы, ненужные атрибуты и числа с огромным количеством десятичных знаков
Лаура Калбаг из Penpot делится практическими советами, как сделать SVG-файлы меньше по размеру, но без видимой потери качества – от базовых приёмов до полезных автоматизированных инструментов
Читайте здесь
➡️ @FrontendPortal
Форматирование чисел и Intl.NumberFormatIntl.NumberFormat один за конструкторов Internationalization API, который используется для форматирования чисел, валюты, процентов и единиц измерения, таких как длина, температура и др.
Этот конструктор принимает локаль и объект с настройками
new Intl.NumberFormat(locale, options).format(number)