27159
Присоединяйтесь к нашему каналу и погрузитесь в мир фронтенд-разработки Связь: @devmangx РКН: https://clck.ru/3Fs3wT
Использование box-shadow необычным способом, которого вы могли не ожидать 🤩
Box-shadow в CSS может быть многослойным. Вы можете применять несколько теней для одного элемента. Обычно это используется для создания глубоких и реалистичных теней, но что мешает нам немного поэкспериментировать? 😂
🔸 Здесь мы создаём тень с нулевым размытием и небольшим смещением, чтобы создать дублирующий слой.
🔸 Затем создаём похожий слой, но с немного большим расхождением, чтобы создать псевдо-обводку.
🔸 И, наконец, добавляем ещё один слой с настоящей тенью.
➡️ @FrontendPortal | #CSS
Совет IT-спецам на 2025 год - чаще посещайте тематические мероприятия
Зачем тратить время на Ютубчик, когда можно интересно проводить время, при этом развивая свои навыки!
А чтобы не гуглить афиши и не подписываться на сотню разных каналов, IT-мероприятия России уже собрали все самые топовые события в одном месте.
Оффлайн и онлайн, для разных специальностей и уровней знаний.
👨🏻💻 В этом канале ты найдешь самые актуальные и интересные события: анонсы форумов, конференций, митапов, вебинаров, хакатонов, олимпиад и многое другое.
Присоединяйся к комьюнити лучших спецов и заново влюбись в свою работу:
IT мероприятия России / ITMeeting / IT events
Атрибут poster
Указывает адрес картинки, которая будет отображаться, пока видео не доступно или не вопроизводится. Если атрибут poster не указан, браузер постарается отобразить первый кадр видео
➡️ @FrontendPortal | #HTML
Свойство columns помогает разделить текст или элементы списка на несколько колонок.
Вы можете контролировать как:
🔸 Количество колонок
🔸 Ширину каждой колонки
Здесь мы использовали "auto" для количества колонок и ширину 10rem.
Это заставляет браузер автоматически выбирать количество колонок в зависимости от доступного размера, так чтобы ширина каждой колонки была близка к 10rem.
Это полезно для контента, подобного новостным статьям, и, как показано в этом примере, для ссылок в подвале.
➡️ @FrontendPortal | #CSS
Если вы используете Object.fromEntries(url.searchParams) для разбора строки запроса, теперь вы можете заменить это на typedSearch(url.searchParams, schema) для:
🔸типобезопасности
🔸поддержки массивов
✔️ #tip by EGOIST
➡️ @FrontendPortal | #TypeScript
Интересный способ как выровнить иконку с текстом
Единица cap считается относительно высоты заглавных букв шрифта
Это помогает нам легко изменять размер иконок, расположенных рядом с текстом, чтобы они полностью соответствовали высоте текста
Полный код:
<div class='container'>
<div class='icon'>...</div>
<div class='text'>Settings</div>
</div>
.container {
display: flex;
align-items: baseline;
gap: 0.5rem;
}
.icon {
height: 1cap;
aspect-ratio: 1;
}
Фронтенд с юмором — это "Frontline" 💻😂
Ты кодишь, но не забываешь смеяться? Тогда заходи к нам, тимлид фронтенда рассказывает про все что связано с web-разработкой и не забывает запостить смешных мемасов.
На Frontline соединяются профессионализм и веселье в мире веб-разработки.
Здесь ты найдешь:
👨💻 Гайды и советы по HTML, CSS, JavaScript и популярным фреймворкам.
😂 Мемы и шутки про будни разработчика — потому что смех это тоже часть работы!
🔥 Новости и тренды в веб-разработке — чтобы быть на шаг впереди.
💬 Обсуждения и обмен опытом с коллегами по цеху.
🎉 Вдохновение и мотивация — ведь кодить можно с улыбкой (даже на javascript)
🔗 Присоединяйся и и будь в курсе фронтенд-новинок, не забывая про отличное настроение 🚀
#реальноклассныйканал
О веб-сайте Renfe и о том, чего НИКОГДА не следует делать на своей странице.
Сегодня я заметил, что при входе на сайт он ВСЕГДА задерживается ровно на 3 секунды, прежде чем показать содержимое.
Странно то, что ВСЕ данные уже загружены, но время ожидания всегда одинаковое...
Я исследовал проблему, и причина вас удивит:
Вот интересный трюк в CSS!
Мы создаем градиент (сплошной цвет, так как оба конца линейного градиента одинаковы) и прикрепляем его к левому концу с размером 0%.
При наведении размер увеличивается до 100%, так что градиент растет с левой стороны.
При выходе из режима наведения градиент уходит вправо (поскольку в обычном состоянии находится справа)
➡️ @FrontendPortal | #CSS
Присоединяйся к нашей команде!
Работа в ИТ — это не просто задачи и сроки, это возможность быть частью креативной и дружной команды. В Лиге каждый день — это новый вызов и шанс развивать свои навыки.
Почему у нас классно работать?
- Курс на профессиональный рост. Мы инвестируем в ваше развитие. Тренинги, семинары и курсы — все для того, чтобы вы становились еще лучше.
- Команда единомышленников. У нас работают профессионалы своего дела, готовые делиться опытом и поддерживать друг друга.
- Комфортная атмосфера. Мы создаем пространство, где каждый чувствует себя как дома. Уютные офисы, зоны для отдыха и креативные уголки помогут вам находиться в форме.
- Веселье и активные мероприятия. Мы не только трудимся, но и развлекаемся. Мероприятия, тимбилдинги, конкурсы и просто дружеские посиделки сделают ваши будни ярче.
Не упусти шанс! Хочешь работать в компании, где ценят каждую идею и есть место для роста и веселья — присоединяйся к нам прямо сейчас и подписывайся на канал Лиги Цифровой Экономики.
https://tglink.io/9cf8efe5acbd
Реклама. ООО "ЭЙТИ КОНСАЛТИНГ". ИНН 7715744096. erid: 2W5zFHTBbgt
⚡️ 72% программистов не имеют среднего образования
Наше поколение — самоучки, а изучить любое IT-направление легко благодаря нашему ресурсу с полезными материалами:
👩💻 JavaScript 👩💻 React
👩💻 Python 👩💻 Docker
👩💻 Java 🖼️ Spring
👩💻 C# 👩💻 Game Dev
👩💻 С/С++ 👩💻 DevOps
👣 GoLang 🖼️ Redis
👩💻 Kotlin 👩💻 Mob Dev
🖼️ PHP 🖥 SQL
🖼️ Swift 👩💻 Kubernetes
Пользуйтесь, потом сами себе спасибо скажете!
💡 Неопределенный чекбокс
Когда у нас есть главный чекбокс в таблице или древовидной структуре чекбоксов, нужно отображать его в состоянии неопределенности, если выбраны только некоторые записи
Просто сделайте это, установив свойство indeterminate чекбокса в true:
checkboxEle.indeterminate = true;
Вот несколько небольших советов, которые помогут улучшить твои навыки работы с терминалом в Linux
Мой любимый — это сочетание клавиш ctrl + p и ctrl + n, о котором я недавно узнал от Стефана Юдиса
Это такая мелочь (ну, ведь уже есть клавиши ↑ ↓ для навигации по истории команд), но это улучшает удобство работы, ведь тебе не нужно убирать руки с привычного положения на клавиатуре ⌨️
➡️ @FrontendPortal | #разное
Ищем IT-специалистов, которые хотят быстро вырасти в 2025 году
Обучающие видео и проф. литература - не то, что поможет достичь вершин.
Личное общение, обмен опытом, крутое комьюнити из топовых специалистов и гигантов индустрии - залог успеха. И все это доступно как онлайн, так и оффлайн!
👨🏻💻 Подписывайся на IT-мероприятия России и получай самую актуальную информацию о предстоящих мероприятиях.
— Форумы
— Конференции
— Митапы
— Вебинары
— Хакатоны
—Олимпиады
И многое другое!
Все самые лучшие IT-event'ы в одном канале.
Присоединяйся: IT-мероприятия России / ITMeeting / IT events
Простой трюк, чтобы поменять две переменные местами
Деструктурирующее присваивание позволяет присваивать элементы массива в правой части переменным в левой части
Здесь мы создаем массив с двумя переменными, а затем присваиваем его противоположным переменным
➡️ @FrontendPortal | #js
Откопал интересный репозиторий — react-learning-resources
Это тщательно подобранный список материалов для быстрого освоения React и все, что с ним связано.
Здесь собраны курсы, статьи и полезные инструменты, которые покроют всё: от основ React до более продвинутых технологий.
→ https://github.com/nareshbhatia/react-learning-resources
➡️ @FrontendPortal | #resourse
⚡️ ИТОГИ УЖЕ ЗАВТРА. Конкурс с призами на 700 ТЫСЯЧ рублей подходит к концу. Дарим:
1. iPhone 16
2. AirPods Pro 2
3. Самый свежий Samsung на Android
4. PlayStation 5 Pro
5. Nintendo Switch
6. ПК с RTX 4060
7. AirPods Max
8. Игровая мышь Razer Viper Pro 2
9. Наушники Razer Barracuda
10. $200 на Steam
Держите под рукой эти бесплатные и удобные шпаргалки по CSS:
🔸Селекторы
🔸Box Model
🔸Flexbox
🔸Grid
→ Ссылка на репозиторий GitHub
➡️ @FrontendPortal | #resourse
Каждому фронтендеру будет полезно ✅
True Frontender – канал, который поможет поднять грейд и вырасти как разработчику. Авторские статьи, разбор задач с собеседований, шпаргалки и многое другое.
Новый год – новые цели вместе @TrueFrontender 🧠
Зацените эту находку — библиотека Sonner для React
Это мощный инструмент для создания уведомлений. Простая установка, кастомизация и реально топовые визуальные фишки. Хватает трёх строчек кода, чтобы всё заработало.
Фишки: задавайте типы, настраивайте позиции, управляйте количеством отображаемых уведомлений. Плюс есть суперудобная поддержка анимаций и дополнительных действий.
Короче, если хотите добавить стильных "тостов" в проект — однозначно стоит глянуть: https://sonner.emilkowal.ski/
➡️ @FrontendPortal | #resourse
Размытие невыбранных элементов в CSS 🤩
HTML:
<div class="icons-container">
<button ...>...</button>
<button ...>...</button>
<button ...>...</button>
</div>
:has. Этот селектор позволяет выбрать родительский элемент, если его дочерние элементы удовлетворяют определённым условиям
Верстаешь?
Оцени 7 причин пройти наш бесплатный интенсив по Frontend-разработке:
1. Ты сверстаешь веб-сайт на HTML + CSS;
2. Оживишь страницу с помощью JavaScript;
3. Используешь фронтенд-фреймворк Angular;
4. Подключишь Backend и загрузишь сайт на хостинг;
5. Получишь советы по доработке от эксперта;
6. Научишься использовать ChatGPT и Giga во Frontend-разработке;
7. Узнаешь 9 способов найти первый заказ даже без опыта.
А главное, ты проведёшь 7 дней в приятной компании Fullstack-разработчика с 10-летним стажем – Романа Чернова.
👉 Проскочить на интенсив бесплатно
Начинаем уже завтра.
🔥 С нас обучение, практика и помощь с выходом на фриланс или собеседованием.
Бесплатное API для определения местоположения IP-адреса
50 000 бесплатных запросов в месяц
Работает с JavaScript, Python и другими языками программирования
👉 https://ipinfo.io
➡️ @FrontendPortal | #resourse
Некоторые небольшие советы по CSS, которые недостаточно значимы для отдельных постов 👍
➡️ @FrontendPortal | #CSS
API интернационализации (Intl) в браузерах и Node.js предоставляет множество полезных инструментов для работы с языковыми специфическими отображениями, например, с "компактной" нотацией, такой как 10K, 5M и т.д.
Вот пример, как вы можете использовать это 😎
Это особенно полезно для таких вещей, как панели управления и страницы профилей в социальных сетях.
Также этот API предлагает множество других возможностей, обязательно ознакомьтесь с полной документацией на MDN
➡️ @FrontendPortal | #js
Откопал тут интересный сервис — Domain Digger
Вводишь домен — получаешь кучу инфы: DNS, WHOIS, SSL, субдомены и всё, что нужно
Работает быстро, без кэширования, можно выбирать разные DNS-серверы для точных данных
Попробовать можно здесь: https://digger.tools/
➡️ @FrontendPortal | #resourse
🤖 IT-MARKET — инновационная платформа для разработчиков и предпринимателей!
🔃 Здесь ваши проекты обретают новую жизнь, превращаясь в реальные предложения для миллионов покупателей.
⭐️ IT-MARKET — это мост между теми, кто создает технологии, и теми, кому они нужны. Начните продавать или находите инновации для вашего бизнеса уже сегодня!
🔗 Присоединяйтесь к IT-MARKET!
Откопал тут библиотеку — react-google-maps
Она позволяет легко встраивать Google Maps в ваши React-приложения, используя компоненты и хуки
Чтобы начать, достаточно установить пакет:
npm install @vis.gl/react-google-maps
import { AdvancedMarker, APIProvider, Map } from '@vis.gl/react-google-maps';
function App() {
const position = { lat: 53.54992, lng: 10.00678 };
return (
<APIProvider apiKey={'ВАШ_API_КЛЮЧ'}>
<Map defaultCenter={position} defaultZoom={10} mapId="DEMO_MAP_ID">
<AdvancedMarker position={position} />
</Map>
</APIProvider>
);
}
export default App;
Адаптивное изображение
Тег <picture> используется, когда для разных устройств или вариантов отображения нам нужны разные картинки
<picture>
<source srcset="320.jpg" media="(max-width: 800px)">
<img src="640.jpg" alt="...">
</picture>