27159
Присоединяйтесь к нашему каналу и погрузитесь в мир фронтенд-разработки Связь: @devmangx РКН: https://clck.ru/3Fs3wT
Каждому фронтендеру будет полезно ✅
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>
Наткнулся на крутую штуку — Project Wallace
Это сервис, который анализирует качество твоего CSS-кода
Разбирает CSS на кусочки и показывает, где накосячил с производительностью, что не по стандартам, а что вообще сложно поддерживать.
В итоге получаешь чёткий список того, что нужно поправить, чтобы код стал чище и быстрее
👉 https://projectwallace.com/css-code-quality
➡️ @FrontendPortal | #resourse
Знали ли вы о таком атрибуте size, который можно использовать с элементами <select> в HTML? 🤩
По умолчанию, без этого атрибута браузеры отображают выпадающий список для выбора.
Но если добавить этот атрибут, браузеры создают более высокий, прокручиваемый список, из которого пользователи могут выбрать один вариант.
(Лично мне это напоминает те самые виджеты в Visual Basic в старые времена)
Видите ли вы какие-то случаи применения этого атрибута? 🤔
➡️ @FrontendPortal | #CSS
Интересный способ как выровнить иконку с текстом
Единица 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
Держите интересную статью про балансировку текста в CSS
Автор рассказывает, как с помощью свойства text-wrap: balance решать проблемы неравномерного переноса строк в заголовках и текстах
Разбираются примеры, как это работает в браузерах и какие есть ограничения. В статье: демки, реальные примеры с TechCrunch и BBC, а также идеи для будущих решений
👉 Читайте статью здесь: Balancing Text In CSS
➡️ @FrontendPortal | #article #en
😱 Вот и всё! Теперь вам не нужно сливать деньги на дорогие курсы по фронтенд-разработке — всё необходимое для обучения доступно совершенно бесплатно!
Всё, что нужно для изучения фронтенда: полное руководство по HTML, CSS, а также практические гайды — @made_in_html_css.
Детальный анализ материалов по FRONTEND-разработке. При этом информация представлена в лёгком и доступном формате, который делает процесс обучения увлекательным и ненадоедливым!
Не упустите шанс подписаться на этот уникальный канал — Made in HTML/CSS
Нашел для вас пять классных ресурсов, которые помогут разобраться в GIT
🔜 Learn Git Branching — это интерактивный учебник по Git, направленный на закрепление теории прохождением наглядной практики.
🔜 Oh My Git! — игра для обучения Git. Там визуализируются внутренние структуры репозиториев. Игра опенсорс, так что можно покопаться в исходниках
🔜 Git How To — это интерактивный тур, который познакомит вас с основами Git
🔜 Pro Git book — онлайн учебник по Git, который предлагает подробные руководства и документацию по всем аспектам работы с системой контроля версий
🔜 Git Gud — CLI-игра с различными уровнями сложности, которая поможет освоить Git от базового уровня до профи
➡️ @FrontendPortal | #resourse
Battery Status API
Через Battery Status API можно получить доступ к информации о батарее устройства
navigator.getBattery().then((batteryManager) => console.log(batteryManager));