27159
Присоединяйтесь к нашему каналу и погрузитесь в мир фронтенд-разработки Связь: @devmangx РКН: https://clck.ru/3Fs3wT
Совет по CSS
Мы часто используем кнопки действий, появляющиеся при наведении, чтобы интерфейс выглядел чище.
Но пользователи с клавиатурой и на тачскринах не могут инициировать наведение, из-за чего такие кнопки становятся недоступными
Сделай доступным для клавиатуры: используй :focus-within, чтобы показывать кнопки, когда фокус находится внутри контейнера.
Сделай доступным для тачскрина: hover: none сработает, если основное устройство ввода не поддерживает наведение
➡️ @FrontendPortal | #tip by Shripal Soni
У текста всегда странный лишний отступ: сверху над заглавными буквами и снизу под базовой линией. Фикс в одну строку CSS:
text-box: trim-both cap alphabetic;
Я, сливающий все приватные данные своей компании в нейронку, просто чтобы отцентрировать div
➡️ @FrontendPortal
Если ты используешь эти JavaScript-библиотеки… Скорее всего, они тебе уже не нужны.
Лучше используй нативный API
➡️ @FrontendPortal
CodePen анонсировал CodePen 2.0
Популярная фронтенд-песочница получает крупное обновление. Сейчас версия находится в закрытой бете, доступ к которой можно запросить.
Новые возможности включают:
→ Поддержку файлов и папок для более удобной структуры проекта
→ Build with Blocks — сборка интерфейсов из переиспользуемых UI-блоков
→ Беспроблемную настройку инструментов и фреймворков
→ Совместную работу в реальном времени с другими разработчиками
→ Omnibar для быстрого поиска чего угодно
→ Новые настройки приватности
Где фронтенд-разработчику искать вакансии в зарубежных компаниях?
Ответ — в Dev & ML Connectable Jobs. Это канал с подборкой вакансий в международных стартапах с русскоязычными фаундерами и командами. Если хочется выйти на зарубежный рынок без сотен откликов в никуда — полезный источник.
Вот несколько актуальных вакансий от авторов канала:
— Senior Frontend Engineer (Growth team) в AppFollow
— Senior Frontend Developer (Nuxt 3 / Vue 3 / TypeScript) в Alao
— Frontend Lead Developer в Muse Group
— Frontend Developer в Emerging Travel Group
— Frontend Tech Lead (Design System) в Manychat
больше вакансий — в Dev Connectable Jobs 🙌
CSS Pattern
Сборник красивых фонов на чистом CSS
Можно настраивать цвета, плотность, отступы, размеры и другие параметры, чтобы идеально попасть в ваш дизайн
https://css-pattern.com/
➡️ @FrontendPortal
Chrome Dev Tools Tip: Сохраняйте и выполняйте кодовые сниппеты
Иногда нам нужно выполнять один и тот же JS-код на разных страницах. Например, чтобы получить URL-адреса превью видео с Vimeo или извлечь различные данные, связанные с производительностью страницы, и т.д.
В таких случаях мы можем один раз создать пользовательский сниппет в Chrome DevTools и запускать его на любой странице
➡️ @FrontendPortal | #tip by Shripal Soni
Джош Комо выкатил разбор спрайтов в вебе. Показывает, как анимировать спрайты в CSS внутри вьюпорта <img> через object-fit, object-position и steps(jump-none) для чёткой покадровой анимации без мыла.
Заодно разбирает, когда спрайты лучше GIF, а когда разумнее делать процедурную анимацию.
Внутри, как обычно: наглядные визуализации, интерактивчики и понятная теория. Читаем здесь ✌️
➡️ @FrontendPortal
Это значительно упрощает отладку веб-анимаций
Slowmo — это небольшая утилита для разработчиков, которая позволяет замедлять анимации на веб-странице, чтобы можно было детально посмотреть, что именно происходит.
Особенно полезно для:
- Отладки CSS-анимаций
- Тонкой настройки таймингов transition’ов
- Изучения качественно проработанной UI-анимации
- Поиска и исправления странных багов и глитчей в анимации
https://slowmo.dev/
➡️ @FrontendPortal
Быстрый способ улучшить поведение текста в приложении — использовать text-wrap: balance. Это свойство равномерно распределяет текст по строкам, избегая "висячих" слов
Поддержка ограничена небольшим количеством строк (примерно <6–10 в зависимости от браузера), поэтому лучше всего применять его для заголовков или коротких абзацев
➡️ @FrontendPortal
Вышла тулза 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. Получишь экспертные советы, как улучшить свои проекты и вывести их на профессиональный уровень.
В итоге добавишь в своё портфолио уникальный проект сервиса доставки , доступный по ссылке, который повысит твою ценность как специалиста.
🔥 С нас обучение, практика и поддержка на пути к фрилансу.
С тебя участие в интенсиве
👉 Начать бесплатное обучение
Не упусти шанс получить мощный заряд уверенности для дальнейшего роста в разработке!
Верстаешь?
Оцени 7 причин пройти наш бесплатный интенсив по Frontend-разработке:
1. Без опыта сделаешь реальный сайт сервиса доставки с нуля;
2. Добавишь JavaScript-логику, расчёты и трекинг;
3. Подключишь карты и маршрут доставки через API;
4. Превратишь сайт в Angular-приложение;
5. Подключишь backend и выложишь проект в продакшен;
6. Научишься использовать ChatGPT и Giga во Frontend-разработке;
7. Узнаешь 9 способов найти первый заказ на фрилансе даже без опыта.
А главное, ты проведёшь 7 дней в приятной компании Fullstack-разработчика с 12-летним стажем – Романа Чернова и получишь живую помощь по проекту.
👉 Проскочить на интенсив бесплатно
Начинаем уже завтра.
🔥 С нас обучение, практика и помощь с выходом на фриланс или собеседованием.
Вышел Better Auth 1.5! Добавь аутентификацию на свой сайт за считанные минуты. Бесплатно и с открытым исходным кодом.
✓ React, Vue, Astro, Next.js, Nuxt…
✓ Логин через X, GitHub, Meta, Google, Discord и другие
$ pnpm install better-auth
🔥 Подписка на easyoffer PRO на 1 год со скидкой 70%
easyoffer – сайт для подготовки к собеседованию на программиста, тестировщика и другие IT-профессии становится еще доступнее со скидкой 70% до 10 марта.
⚙️ Актуальные функции:
1. База вопросов из реальных технических собеседований с вероятностью встречи и примерами ответов.
2. База задач с этапа live-coding.
3. База видеозаписей 1100+ реальных собеседований, в том числе в топовые компании (Сбер, Авито, Яндекс, WB, OZON, МТС и др.) на позиции Junior/Middle/Senior.
4. База 400+ тестовых заданий от компаний.
5. Аналитика ТОП-требований из вакансий для лучшего написания резюме по ключевым словам.
6. Тренажеры для подготовки к собеседованию. В том числе тренажер «Реальное собеседование» со сценарием вопросов под конкретную компанию.
Акция до 10 марта (включительно) на PRO-тариф.
– Подписка действует 1 год
– Доступ ко всем профессиями сразу
👉 Смотри подробности тарифа и покупай на easyoffer
Интересный факт: когда речь идёт о возможности прерывания, CSS transitions и keyframe-анимации ведут себя по-разному
Transitions интерполируют значения к последнему актуальному состоянию и могут быть прерваны, тогда как keyframe-анимации выполняются по фиксированному таймлайну и после запуска не перенаправляются на новое состояние
➡️ @FrontendPortal
Совет по веб-доступности: Лучший способ сделать ссылки только с иконками доступными для скринридеров
Иногда нужно создавать ссылки, содержащие только иконку. Например: ссылки для шеринга поста
Но такие ссылки недоступны для пользователей скринридеров
Чтобы это исправить, можно задать подпись в скрытом элементе и связать его с тегом <a> с помощью атрибутов aria-labelledby и id. Также установите aria-hidden="true" на SVG-иконку, чтобы скринридеры её пропускали
➡️ @FrontendPortal | #tip by Shripal Soni
Опенсорс веб-вьювер для зумируемых изображений, реализованный на чистом JavaScript
Посмотреть, как он работает, и начать использовать можно здесь: https://openseadragon.github.io/
➡️ @FrontendPortal
tabular-nums должен быть значением по умолчанию для любых чисел, которые обновляются (таймеры, счётчики, цены, проценты, очки, лайв-данные и т.д.).
Включить OpenType-фичу tnum можно через CSS-свойство font-variant-numeric:
.tabular-nums {
font-variant-numeric: tabular-nums;
}
Как frontend-разработчику получить оффер в Big Tech?
Платят как джуну, а спрашивают как с лида 🙄 Зарплата не растёт, задачи скучные.
Пробуешь откликаться, но на резюме клюют только ноунейм компании, а на собесах валят на алгоритмах? При этом вокруг кто-то постоянно получает офферы в Яндекс или VK...
Стабильность с маленькой зп, или дестрой рынка и выход на максимальную? Синяя или красная таблетка, Нео?! 👾
Меня зовут Тихон, привет! Я — действующий Frontend-разработчик и ментор.
Помогаю устроиться на хорошие позиции в Big Tech и сопровождаю на испытательном сроке.
Мгновенно извлекайте всю дизайн-систему любого сайта
Dembrandt — это NPM-пакет, который сканирует сайт и вытаскивает его визуальные стилевые параметры: цвета, типографику, отступы и паттерны лейаута.
Вместо того чтобы вручную инспектировать стили в DevTools, вы можете быстро понять, как сайт структурирован и стилизован
GitHub тут, сайт здесь 👜
➡️ @FrontendPortal
Денис из комьюнити @its_capitan запустил собственную детективную игру в одиночку: каждый персонаж — это реальный Telegram-аккаунт, AI отвечает за героев, улики (сайты, карты) — всё настоящее.
Что в итоге:
🔘 3 месяца на подготовку + 3 месяца на разработку
🔘 40+ покупок за полтора месяца
🔘 выручка — $1500+
🔘 чек — $40
🔘 стек: Python, Telegram API, OpenAI + Anthropic
Без команды и инвестиций, но с классной идеей и проработанным сценарием — проект уже зарабатывает деньги.
Таких запусков в канале десятки. Ребята честно рассказывают про успехи, провалы и продвижение. Без теорий — только фактические цифры и запуск в реальном времени.
➡️ @its_capitan
Подписывайтесь, если интересно, как делать маленькие IT-проекты с доходом и без иллюзий.
Реклама: ИП Зуев Игорь Владимирович, ИНН: 360408359441, Erid: 2VtzquWmhY8
Когда они это добавили?
Теперь в 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