27159
Присоединяйтесь к нашему каналу и погрузитесь в мир фронтенд-разработки Связь: @devmangx РКН: https://clck.ru/3Fs3wT
Все надоело и пропал интерес, чувствуешь себя амебой и хочется только залипать в телефоне. Бывает?
Психолог взрослого человека — канал для айтишников, у которых периодически опускаются руки и отключается мозг, ибо переработки и постоянная тревожность не приводят к другим исходам.
✔️ Как научиться отвлекаться от работы и отдыхать?
✔️ Как совместить кучу рабочих задач и время с семьей?
✔️ Как справиться с прокрастинацией?
✔️ Как не растерять запал, даже если начальник и коллеги 💩 и кажется, что ничего не выходит?
Подписывайтесь на канал @vadimpetrovpsi и научитесь работать без упахивания, выгорания и ущерба для личной жизни!
👨🏻💻 Псс. Заходите в закреп — там много полезного, и даже бесплатный мини-курс по выходу из апатии: /channel/+IcB0wvLIB2YxYjI6
В копилку лайфхаков по VSCode: теперь в терминале можно включить автодополнение а-ля IntelliSense
Как включить:
• Открываешь Settings → ищешь "terminal integrated suggest"
• Врубаешь чекбокс
Пользуемся 😇
➡️ @FrontendPortal | #vscode
Несколько мелких трюков, чтобы добавить сайту щепотку магии
➡️ @FrontendPortal | #CSS
Годное расширение для 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
Форматирование чисел и Intl.NumberFormatIntl.NumberFormat один за конструкторов Internationalization API, который используется для форматирования чисел, валюты, процентов и единиц измерения, таких как длина, температура и др.
Этот конструктор принимает локаль и объект с настройками
new Intl.NumberFormat(locale, options).format(number)
Дорога до вуза, задания, встречи с друзьями...Где найти энергию на все? 🤯
Lamoda поможет не тратить силы на лишнее — работай удаленно или в гибридном формате на новой оплачиваемой стажировке! 😎
Подавай заявку до 16 мая, чтобы воспользоваться и другими комфортными условиями: 👇
— зарплатой 90 000 или 65 000 рублей в зависимости от направления
— гибким графиком: работай от 30 часов в неделю
— полезными бенефитами: ДМС для экстренных случаев, корпоративными скидками, обучением и другим
— карьерными перспективами: ты сможешь остаться в штате Lamoda
Переходи на сайт — там ты найдешь еще больше крутых преимуществ работы в Lamoda! https://vk.cc/cLCvYq?erid=2W5zFHrQthW
Нужно сравнить два изображения на своём сайте? Это официальный компонент 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