27159
Присоединяйтесь к нашему каналу и погрузитесь в мир фронтенд-разработки Связь: @devmangx РКН: https://clck.ru/3Fs3wT
CSS Совет
Одна строка для задания одновременно max-width и width в CSS
Мы можем использовать min() для задания как width, так и max-width.min() возвращает наименьшее значение из переданных
📝 Примечание: значения в функции min() можно указывать в любом порядке.
➡️ @FrontendPortal | #tip by Shripal Soni
Если нужно быстро сгенерировать кастомный SVG-лоадер — вот отличная опенсорс-тулза. Гибкая настройка: цвет, скорость, размер и прочее по вкусу
Закидывайте в закладки — пригодится: http://loaders.holasvg.com
➡️ @FrontendPortal | #resourse
👩💻 Всем программистам посвящается!
Вот 14 авторских обучающих IT каналов по самым востребованным областям программирования:
Выбирай своё направление:
👩💻 Frontend — t.me/frontend_ready
📱 JavaScript — t.me/javascript_ready
👩💻 Python — t.me/python_ready
🤔 InfoSec & Хакинг — t.me/hacking_ready
🖥 SQL & Базы Данных — t.me/sql_ready
🤖 AI & ML — t.me/neuro_ready
👩💻 IT Новости — t.me/it_ready
👩💻 C/C++ — /channel/cpp_ready
👩💻 C# & Unity — t.me/csharp_ready
👩💻 Linux — t.me/linux_ready
👩💻 Java — t.me/java_ready
📖 IT Книги — t.me/books_ready
🖼️ DevOps — t.me/devops_ready
🖥 Design — t.me/design_ready
📌 Гайды, шпаргалки, задачи, ресурсы и фишки для каждого языка программирования!
transitionType проп для ссылок в Next.js 16.2
(требует дополнительной настройки для <ViewTransitions />)
<ViewTransitions> всё ещё экспериментальная фича в Next.js и не рекомендуется для продакшена
Полная демка:
https://github.com/SidKH/gist-of-next-demos/blob/cursor/view-transition-transition-types-demo/README.md
➡️ @FrontendPortal
PatternСraft — библиотека фонов с градиентами и геометрическими узорами
Каждый фон можно посмотреть в деле, а затем скопировать его CSS для своих проектов
patterncraft.fun
➡️ @FrontendPortal
Верстаешь?
Оцени 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
Все надоело и пропал интерес, чувствуешь себя амебой и хочется только залипать в телефоне. Бывает?
Homo Manifestans — канал для айтишников, у которых периодически опускаются руки и отключается мозг, ибо переработки и постоянная тревожность не приводят к другим исходам 🤗
✓ Как научиться отвлекаться от работы и отдыхать?
✓ Как совместить кучу рабочих задач и время с семьей?
✓ Как справиться с прокрастинацией?
✓ Как не растерять запал, даже если начальник и коллеги 💩 и кажется, что ничего не выходит?
Подписывайтесь на канал @vadimpetrovpsi и научитесь работать без упахивания, выгорания и ущерба для личной жизни!
Псс. Заходите в закреп — там много полезного, и даже бесплатный мини-курс по выходу из апатии:
👉 /channel/+ou2-l5lmzUU3NTQy
Cobe — это крошечная библиотека WebGL для отображения глобуса, которая позволяет рендерить красивую анимированную Землю на canvas практически без увеличения размера бандла.
→ ~5KB (gzip)
→ основана на WebGL
→ плавная анимация глобуса
→ настраиваемые маркеры и цвета
→ работает в любом JS-проекте
Идеально подходит для лендингов, где нужен глобус без подключения тяжёлых зависимостей ✌️
GitHub тут
➡️ @FrontendPortal
Pinterest перешёл на нативные CSS-карусели, чтобы заменить устаревший JS по всей платформе → https://goo.gle/4cZR6Pk
Используя CSS-примитивы вроде scroll markers и scroll snap, они добились:
- сокращения кода на 90% (с ~2000 строк JS до ~200 строк CSS)
- ускорения загрузки страниц на 15%
- более плавного и интерактивного UI
➡️ @FrontendPortal
Весна для многих в индустрии началась с сюрпризов, и это не подснежники 💩
Но мы с вами и не с таким справлялись, да? Поэтому давайте сделаем себе что-то приятное :)
🤩🤩🤩 В апреле мы в @qa_guru разыграем сразу 2 полных гранта на годовые программы по автоматизации тестирования.
— QA Automation Engineer на Python
— QA Automation Engineer на Java
Для этого:
⬆26 марта (уже в четверг!)
⬇в 13:00 МСК
Приходи на бесплатный карьерный вебинар «QA в 2026: кто вырастет в доходе, а кто исчезнет с рынка».
Занять место тут ⬅⬅⬅
Каждый участник встречи получит свой номер. А гранты разыграем среди тех, кто купит любую из годовых программ до 31 марта.
Что будет на встрече?
Наш эфир — продолжение февральской темы, по которой мы получили от вас много вопросов.
— Поговорим, как изменилась роль QA.
— Дадим список навыков, которые усиливают ценность QA-инженера и влияют на доход.
— Расскажем, заменит ли ИИ тестировщиков и как использовать его в своих целях.
— И куда двигаться дальше, план развития на 3–6 месяцев.
— Обсудим резюме: что реально повышает отклики, а что уже не работает.
Там же откроем специальные цены на курсы только для участников эфира.
Если ты уже в QA, думаешь про автоматизацию или ищешь работу — приходи.
Узнаешь много полезного бесплатно и получишь готовый карьерный план.
🤩 А если давно хотел пойти учиться, то это шанс забрать год бесплатно.
↘Займи место здесь
Совет по 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