27159
Присоединяйтесь к нашему каналу и погрузитесь в мир фронтенд-разработки Связь: @devmangx РКН: https://clck.ru/3Fs3wT
Нужно сравнить два изображения на своём сайте? Это официальный компонент Google.
✓ Занимает всего 3 КБ
✓ Имеет встроенные стили
✓ Работает на мобильных устройствах
✓ Совместим с любым фреймворком
Установка → npm install two-up-element
➡️ @FrontendPortal | #resourse
⚡️ Дождались! Ребята сделали крутейшие каналы про Айти
Здесь сложные темы объясняют на простых картинках, понятном языке. А также решаем задачки, делимся ресурсами и советами.
📱 Python | Программирование
⚙️ Webdev | Backend & Frontend
😷 Hacking | Кибербезопасность
🖥 Memes | Мемы айтишников
🖥 CodHub | Курсы IT
Простой совет по JavaScript
Знаете ли вы, что в JavaScript существует событие "resize", которое срабатывает каждый раз, когда изменяется размер окна области просмотра браузера?
➡️ @FrontendPortal | #tip
GSAP теперь на 100% БЕСПЛАТЕН
Благодаря Webflow, GSAP теперь полностью бесплатен, включая ВСЕ бонусные плагины, такие как SplitText, MorphSVG и остальные, которые ранее были доступны только участникам Club GSAP
➡️ @FrontendPortal
Событие beforeunload
Это событие позволяет веб-странице вызвать диалоговое окно подтверждения, спрашивающее пользователя, действительно ли он хочет покинуть страницу
Событие происходит перед событием выгрузки страницы unload
Обработка через определение onbeforeunload на объекте window:
window.onbeforeunload = () => false
Маленькая шпаргалка для начинающих джаваскриптеров: как работать с объектами как с массивами
— Object.keys(obj) → массив ключей
— Object.values(obj) → массив значений
— Object.entries(obj) → массив пар [ключ, значение]
— Object.fromEntries(arr) → из пар обратно в объект
Новый компонент для React: <ViewTransition />
Предназначен для анимации переходов в приложении. С его помощью можно декларативно объявить, что анимировать, когда и как
Для определения момента анимации можно использовать три триггера: startTransition, useDeferredValue и Suspense. Сами анимации можно кастомизировать с помощью CSS
Пока что это экспериментальная фича, подробности здесь
➡️ @FrontendPortal
Задаём цвет в зависимости от темы операционной системы пользователя
Функция light-dark() принимает два аргумента и возвращает один из них в зависимости от того, какую тему выбрал пользователь.
Первое значение вернётся, если у пользователя установлена светлая тема, либо тема не выбрана, а второе, если установлена тёмная тема
Чтобы функция light-dark() заработала, нужно прописать свойство color-scheme со значением light dark. Обычно это делают в псевдоклассе :root. Если это свойство не прописать, то функция всегда будет возвращать только первое значение
На данный момент поддержка — 87.54%
➡️ @FrontendPortal | #CSS
Хочешь, чтобы сайт реагировал на длинные или жёсткие нажатия? Лови годную либу — Pressure.js
Это JS-библиотека для обработки Force Touch, 3D Touch и давления указателя
Определяет силу нажатия, его длительность и интенсивность касания на устройствах, таких как телефоны, планшеты и десктопах
Документация, установка и поддержка девайсов тут:
https://pressurejs.com/documentation.html
➡️ @FrontendPortal | #resourse
Годный инструмент, позволяющий наглядно видеть порядок выполнения JS кода
Можно выбрать готовые примеры или вбить свой код (знаешь эти задачки: «В каком порядке всё отработает?» — вот это оно).
Очень полезно для понимания JavaScript в целом 🍯
Пробуем здесь, код на GitHub
➡️ @FrontendPortal | #resourse
Собрал для вас четыре крутых ресурса, которые помогут прокачать навыки
1. Frontend Mentor — решаешь реальные задачи: от карточек до дашбордов. Получаешь макет, верстаешь, загружаешь — получаешь фидбэк
2. DevChallenges — задачи по веб-разработке с готовыми дизайнами
3. CSS Battle — соревновательная платформа по минификации CSS: создаёшь визуалы с минимальным количеством кода.
4. Frontend Practice — воссоздаёшь реальные сайты по уровням сложности. Отлично для вёрстки и практики UI
Сохраняйте себе и делитесь с друзьями ✌️
➡️ @FrontendPortal | #resourse
Возможно, вы не знали, что можно напрямую получить значение числового input-поля как число с помощью valueAsNumber. Ручное преобразование не требуется
Свойство value у HTMLInputElement всегда возвращает строку.
Поэтому для числовых полей нам приходится вручную преобразовывать значение в число с помощью parseInt(), parseFloat(), Number() или оператора +.
Мы можем упростить это, используя valueAsNumber. Оно напрямую возвращает значение как число.
➡️ @FrontendPortal | #tip by Shripal Soni
Прощай, document.cookie. Привет, CookieStore
Современный, асинхронный и наконец-то адекватный API для работы с куками
🔸Чистые и интуитивно понятные методы для чтения и записи cookie
🔸Встроенная обработка событий изменения cookie
🔸Асинхронные операции, не блокирующие главный поток
🔸Эффективная работа с несколькими cookie
Уже доступно в Chrome, Firefox, Safari и Edge.
Подробности ищите в документации MDN
➡️ @FrontendPortal
Простая кнопка в стиле ретро
Хитрость здесь заключается в том, чтобы создать боксовую тень без размытия для состояния по умолчанию
Для активного состояния я перемещаю кнопку, уменьшая при этом тень, так что тень кажется статичной
Подобного трюка можно добиться и с помощью псевдоэлементов, но я предпочитаю эту технику за ее простоту
➡️ @FrontendPortal
Flexer — визуальный CSS Flexbox конфигуратор
Там можно поиграться с CSS Flexbox и посмотреть, как разные свойства влияют на внешний вид элементов
Отличный способ разобраться с flexbox для начинающих
https://www.flexer.dev/
➡️ @FrontendPortal | #resourse
Годное расширение для Chrome
Оно позволяет мгновенно протестировать более 1500 шрифтов Google прямо в браузере на любом тексте.
Забираем здесь
➡️ @FrontendPortal | #resourse
Мы неправильно используем CSS и отступы для абзацев
Не нужно использовать ни em, ни rem, ни px, и тем более %.
Лучше и проще использовать lh.
Это эквивалент высоты строки, значения свойства line-height.
Браузерная поддержка — 94%
Если тебе нужно поддерживать старые браузеры — добавь fallback:
p {
padding: 1em; /* fallback для динозавров */
padding: 1lh;
}lh влияет на внешние отступы у абзацев, в этой демке
Пополняем вашу копилку полезных ресурсов новыми сайтами
• Animated CSS Background — генератор анимированных фонов на чистом CSS
• Transition.style — готовые переходы, копируются в один клик
• Fancy Border Radius — создавайте нестандартные формы с border-radius
• CSS Filters Generator — фильтры в стиле Instagram для ваших изображений
• SpinKit — простые CSS спиннеры
Сохраняем ☕️
➡️ @FrontendPortal | #resourse
Если тебе когда-либо приходилось реализовывать тултипы с нуля — уф — ты знаешь, насколько это может быть мучительно.
Недавно CSS сильно упростил эту задачу, а теперь… это появляется и в Tailwind CSS.
Anchors для Tailwind CSS — полноценная поддержка спецификации CSS Anchor Positioning с удобным синтаксисом.
Подробнее: https://github.com/toolwind/anchors
Про Anchor Positioning API рассказывали здесь
➡️ @FrontendPortal
Стань частью масштабного ИТ-события от МТС
True Tech Day 2025 — третья технологическая конференция МТС для профессионалов ИТ‑индустрии. Одна из главных тем в этом году — тренды и практики искусственного интеллекта.
В программе:
— Доклады от ученых и зарубежных спикеров с индексом Хирша более 50.
— Кейсы применения современных ИИ‑решений — от AI‑агентов, тестов LLM и бенчмарков до вопросов регулирования.
— AI-интерактивы и технологические квесты.
— Пространство для нетворкинга,
…а еще after-party со звездным лайн-апом.
Когда: 6 июня
Где: Москва, МТС Live Холл и онлайн
Участие бесплатно. Регистрируйся по ссылке.
Полезный совет по DevTools для доступности
Хром умеет эмулировать дальтонизм и размытие зрения. Быстрый способ проверить, насколько ваш UI дружелюбен к тем, кто видит мир иначе
DevTools → Rendering → Emulate vision deficiencies
➡️ @FrontendPortal | #tip
В Chrome 135 завезли нативные Observables
Теперь в браузере доступен Observable API — удобный способ обработки асинхронного потока событий
Нативные Observables, обеспечивают глубокую интеграцию с Web API с помощью методов .when() и поведением мультикаста по умолчанию
Важно: они немного отличаются по структуре и поведению от Observables из RxJS (например, методы возвращают Promise, отмена через AbortController).
Подробнее — в этом разборе
Кстати, разработка RxJS 8 ранее была приостановлена в ожидании нативных Observable. Теперь, когда они появились, проект продолжит развитие с учетом этих изменений.
➡️ @FrontendPortal
Быстрый и простой совет по VS Code
Используйте сочетание клавиш «Alt + Page Up» или «Alt + Page Down», чтобы быстро прокручивать файл без перемещения курсора
➡️ @FrontendPortal | #tip
Функция clamp()
Функция clamp() позволяет ограничивать диапазон изменения некоего значения, задавая его нижний и верхний пределы
.box {
width: clamp(100px, 50%, 200px);
}100px и 200px будут минимальной и максимальной границами значения соответственно. 50% предпочтительный размер. Это означает, что размер элемента будет варьироваться в зависимости от ширины окна браузера, но никогда не станет меньше, чем 100px, и больше, чем 200px
В CSS единица cap определяется как размер заглавной буквы текущего шрифта
Это очень удобно для задания иконок, сопровождающих подпись, например, внутри кнопок
В этом примере мы задали иконке высоту 1cap, что делает её равной высоте буквы "S".
Мы также выровняли эту иконку по базовой линии(baseline) для идеального выравнивания текста и иконки
➡️ @FrontendPortal | #CSS
Генератор градиентного фона
Хотите создавать действительно крутой градиент, а не полоски из 2-3 цветов? Тогда присмотритесь к Mesher — инструменту, который позволяет создавать очень сложные комбинации цветов, смешивая их так, как нужно именно вам.
https://csshero.org/mesher/
➡️ @FrontendPortal | #resourse
Быстрый совет по VS Code
Используйте сочетание клавиш Alt + ↑, чтобы быстро переместить строку кода вверх, и Alt + ↓, чтобы переместить строку вниз — без копирования и вставки
➡️ @FrontendPortal | #tip
26–27 апреля проводим Weekend Offer Frontend
Устроиться в Яндекс за выходные — реально. Ищем крутых фронтендеров с опытом работы от 4 лет, готовых работать в офисном или гибридном режиме в России.
Подавайте заявку до 23 апреля — и всего за два дня пройдите все технические собеседования. После сможете пообщаться с нанимающими менеджерами и выбрать из 10 команд ту, которая покажется самой интересной. Если всё сложится хорошо, сразу же пришлём вам офер.
Узнать подробности и зарегистрироваться.
Реклама. ООО "Яндекс". ИНН 7736207543
Простые и плавные анимации перехода с View Transitions
В Chrome и Safari появилась поддержка View Transitions API
Эта апишка дает нам механизм для простого создания анимированных переходов между различными состояниями веб-сайта без необходимости расписывать сложную логику с помощью JS
Подробнее здесь:
https://developer.chrome.com/docs/web-platform/view-transitions
➡️ @FrontendPortal