27159
Присоединяйтесь к нашему каналу и погрузитесь в мир фронтенд-разработки Связь: @devmangx РКН: https://clck.ru/3Fs3wT
Как создать скелетную загрузку в CSS
Каркасный или как его еще называют скелетный загрузчик может выполнять роль заполнителя для информации, которая все еще загружается, помогая пользователю сосредоточиться на прогрессе, а не на времени ожидания
➡️ @FrontendPortal | #tutorial
Этот сайт 🤌✨
Определенно стоит заглянуть для мощного вдохновения: https://buttermax.net/
➡️ @FrontendPortal
Как легко прокачать навыки верстки и найти работу?
Присоединяйся к каналам опытного верстальщика:
2. Вёрстка сайтов | HTML, CSS, JS — здесь собраны бесплатные, структурированные уроки и различные материалы по HTML, CSS, JS, а также советы по заработку на фрилансе.
2. Работа — вёрстка и фронтенд — канал с лучшими вакансиями и проектами с фриланса по вёрстке и фронтенду
Научись и зарабатывай на верстке!
Предположим, у вас есть сетка 5x5 в CSS. В ней находятся элементы разного размера, но они не закреплены за определёнными позициями.
В таких случаях использование режима "dense" для свойства grid-auto-flow позволяет заполнять пустые ячейки, оставленные предыдущими элементами, продвигая последующие элементы, которые могут поместиться в эти промежутки.
Это может быть полезно, например, для галереи изображений, где элементы имеют случайные размеры.
Пример кода:
.grid {
grid-template-rows: repeat(5, 10rem);
grid-template-columns: repeat(5, 10rem);
}
.item-2 {
grid-row-end: span 2;
grid-column-end: span 2;
}
Ловите крутой и полезный инструмент для работы с JSON
Это расширение VSCode позволяет легко преобразовывать сложные наборы данных JSON в информативные и визуально привлекательные графики
Поддерживаются также YAML и XML форматы. Созданные диаграммы можно скачать как изображения
Кроме того, инструмент доступен в браузере
➡️ @FrontendPortal | #resourse
Проект для миддлов:
создайте курс для Яндекс Практикума!
Сервис онлайн-образования Яндекс Практикум в поисках автора для курса Мидл фронтенд-разработчик.
Что предстоит делать: готовить тексты уроков и заданий, составлять тесты и чек-листы, заботиться о том, чтобы материалы увлекали студентов.
Будущего коллегу окружим комфортом:
▪︎сотрудничайте с нами удалённо,
▪︎получайте дополнительный доход,
▪︎влейтесь в наше энергичное и яркое комьюнити!
От кандидата ожидают:
▪︎опыт работы от 3х лет,
▪︎может выделить критерии завершенности фичи,
▪︎понимает, как можно измерить результат фичи.
Более подробные требования к кандидату описаны здесь, откликайтесь и давайте менять индустрию вместе!
Swapy
Это инструмент для создания drag-and-drop интерфейсов всего за пару строк кода
Работает с любым фреймворком: React, Vue, Angular, Svelte или даже без них.
Гибко настраивается, позволяет выделять слоты и элементы для перетаскивания, добавлять анимации, и отслеживать изменения.
Лёгкий в установке и супер понятный в использовании.
npm install swapy
Продуктивный хак для VS Code
Вместо того чтобы каждый раз писать console.log(), вы можете добавить в VS Code сочетание клавиш
В этом примере я настроил, чтобы текст "cc" автоматически расширялся в "console.log()" при нажатии Tab
И таких снипеттов можно сделать кучу. Пользуйтесь ✌️
➡️ @FrontendPortal | #tip
Сходил к этому вашему психологу, стало только хуже.
➡️ @FrontendPortal | #memes
Всем привет!
Если вы следите за миром инди-разработки, то канал INT | Indie News Today — это настоящая находка!
Здесь публикуются свежие новости от инди-студий: анонсы, трейлеры, апдейты, истории разработчиков и многое другое. Канал поможет вам не только узнать о перспективных проектах, но и глубже погрузиться в индустрию независимых игр.
Подписывайтесь, чтобы быть в курсе самых интересных событий в мире инди!
В CSS теперь возможно вертикальное центрирование одним свойством 🙃
Раньше, если вы хотели выровнять контент по вертикальному центру, вы не могли этого сделать, пока не измените контейнер на flex или grid
Но теперь все основные браузеры поддерживают свойство align-content и для блочных элементов. Поддержка на данный момент 87.14%
➡️ @FrontendPortal | #CSS
Создаем галерею изображений с помощью CSS Grid
Важной частью является свойство grid-auto-flow: dense;, которое заставляет автоматически заполнять все ячейки сетки, независимо от того, в каком порядке вы их определили
➡️ @FrontendPortal | #CSS
<h1> Ищем новичков во фронтенд-разработке и вёрстке сайтов. </h1>
<p> Хотим показать, как получить реальный опыт в разработке сайтов и веб-приложений. </p>
<p> А именно: </p>
<ul>
<li> - Сверстать веб-сайт на HTML + CSS; </li>
<li> - Реализовать функционал на JavaScript; </li>
<li> - Пощупать фронтенд-фреймворк Angular;</li>
<li> - Подключить Backend и загрузить сайт на хостинг. </li>
</ul>
<p> 💪 Чтобы в итоге ты своими руками разработал качественный сайт, который не стыдно добавить в портфолио или продать. </p>
<button type="button"> 👉 Приходи на бесплатное обучение и зови с собой друзей </button>
<p> Бонусом получишь гайд для поиска работы и заказов на фронтенд-разработку. </p>
Шпаргалка по новым методам Set в JS
С недавнего времени все современные браузеры и Node.js поддерживают 7 новых методов Set, которые значительно упрощают сравнение массивов и наборов данных
Ранее я уже делал разбор каждого метода — пост. Если пропустили, самое время наверстать 🧠
➡️ @FrontendPortal
Hello! Я, Мария Семичева, дипломированный преподаватель английского и немецкого, приглашаю Вас в свой канал Logical English.
Здесь Вы найдете:
📽Видео-объяснения;
❓Квизы;
🎙Подкаст про изучение языка;
💡 Советы по изучению языка;
🎓Уроки на интерактивной платформе.
А еще можно записаться ко мне на уроки в самых разных форматах или прийти на асинхронное обучение.
Welcome!
Создание липкого заголовка в СSS
Блоки с «липким» позиционированием ведут себя как position: relative и position: fixed одновременно
Пока блок не достиг указанного расстояния от края окна браузера, он ведёт себя как относительно спозиционированный. Когда блок достигнет этой точки, то станет вести себя, как будто мы указали position: fixed
Когда таких заголовков несколько, они накладываются друг на друга, и пользователю виден последний из них
➡️ @FrontendPortal | #CSS #tutorial
🇷🇺«Сталинские Соколы» объявляют первый крупнейший в России турнир «Drone-Con» в номинациях:
- Настройка WiFi
- Пилотирование FPV дронов
- Онлайн стратегия «Битва Дронов»
🕙Когда? 11-13 апреля 2025 года
Заезд участников с 10.04.2025
Приз за выход в 1/8 финала в каждой номинации – 300 000 рублей
За победу в номинации:
🥇I место – 3 000 000 рублей
🥈II место – 2 000 000 рублей
🥉III место – 1 000 000 рублей
Пройди заочный онлайн этап до 1 апреля, и получи возможность попасть на очный этап «Drone-Con»!
Подать заявку и узнать подробности – @dronecon
Простой способ создания эффекта карусели в CSS без сторонних библиотек
В основе этого эффекта лежат две вещи:
🟡 Липкое позиционирование, которое позволяет зафиксировать элемент на месте при прокрутке следующего элемента
🟡 Scroll snapping (новая функция CSS), которая автоматически привязывает элемент к краю прокручиваемого контейнера
Более подробно — Статья
Попробовать самому — Codepen
➡️ @FrontendPortal | #tutorial
💡 Ленивая загрузка автоматически воспроизводимых видео, которые находятся ниже первого экрана
Установите preload="none" и удалите атрибут autoplay у видео, чтобы оно не загружалось по умолчанию. Затем, используя API Intersection Observer, мы можем воспроизводить видео, когда оно становится видимым в области просмотра
Посмотреть это в действии: тык
➡️ @FrontendPortal | #tip by Shripal Soni
Здесь разрабы не просто двигают кнопки и лутают деньги, а создают шедевры!
Я Никита — frontend-разработчик, любящий свою работу. Я приглашаю тебя в свой канал о фронтенде с душой Frontend For The Soul с вдохновляющим комьюнити, фичами, которых нет в других источниках, регулярными трендовыми идеями и книгами.
Здесь каждый пиксель имеет душу. Присоединяйся — @frontendforthesoul
Для тех кто просил, наш канал с мемами для программистов и айтишников👇
/channel/+VYBO0_wJn3g4YmIy
Old but gold: Простой способ создания эффекта бесконечной карусели с помощью CSS
Видели ли вы подобную анимацию на сайтах в разделе «Партнеры/клиенты»? Вот простая схема создания этого фальшивого эффекта бесконечной карусели 🦆
В качестве дополнительного совета, если вы не хотите дублировать элементы вручную или указывать количество элементов в CSS, вы можете использовать некоторые манипуляции JavaScript DOM и пользовательские свойства CSS (вот пример продвинутой реализации)
➡️ @FrontendPortal | #tutorial
Вы знали, что в Chrome DevTools есть скрытая функция CSS Overview?
Она предоставляет полный анализ цветов, шрифтов, медиазапросов и неиспользуемых стилей на вашем сайте — всё в одном месте ☕️
➡️ @FrontendPortal | #tip
🚀Приглашаем на масштабный бесплатный урок «Создание масштабируемых backend-решений с использованием Node.js и Firebase Cloud Functions» от онлайн-курса Node.js Developer 19 марта 20:00 (мск).
На вебинаре эксперт поделится обширными знаниями в backend-решениях:
1️⃣ Введение в масштабируемые backend-решения с использованием Node.js и Firebase:
- Обзор возможностей Firebase Cloud Functions.
- Почему Firebase Cloud Functions и Node.js — отличный выбор для создания масштабируемых backend-решений.
- Примеры использования: обработка событий, интеграция с внешними API, автоматизация задач.
2️⃣ Практическая демонстрация: - Настройка Firebase проекта и подключение Cloud Functions.
- Создание Cloud Function на Node.js для обработки HTTP-запросов.
- Интеграция Cloud Functions с Firestore: автоматическая обработка данных при изменении документов.
- Пример использования Cloud Functions для отправки уведомлений через Firebase Cloud Messaging (FCM).
3️⃣ Рекомендации по оптимизации и масштабированию:
- Лучшие практики для работы с Firebase Cloud Functions.
- Как избегать частых ошибок и улучшать производительность функций.
- Советы по оптимизации затрат при использовании Cloud Functions.
Кому вебинар будет полезен?
· Backend-разработчикам,
· Разработчикам Node.js,
· Начинающим разработчикам,
· Техническим руководителям.
Что узнают участники вебинара?
✅ Практические навыки по созданию и настройке backend-логики, которые можно применить в реальных проектах.
✅ Уверенность в использовании Firebase Cloud Functions для создания масштабируемых и эффективных backend-решений.
⏰ Успейте зарегистрироваться на бесплатный вебинар 19 марта 20:00 (мск). Запись ограничена! https://otus.pw/gsE2/
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576
Совет по CSS: Нечувствительный к регистру селектор атрибутов
Мы можем добавить i к селектору атрибутов, чтобы он выбирал элементы с этим значением атрибута без учета регистра
➡️ @FrontendPortal | #tip by Shripal Soni
Хороший ресурс для практики вёрстки
Огромная библиотека UI-задач, которые можно взять и попробовать воссоздать
Полезно, если хочешь держать руку на пульсе и тренировать насмотренность 🫡
https://www.uidesigndaily.com/
➡️ @FrontendPortal | #resourse
Фронтенд с юмором — это "Frontline" 💻😂
Ты кодишь, но не забываешь смеяться? Тогда заходи, тимлид фронтенда рассказывает про все что связано с web-разработкой и не забывает запостить смешных мемасов.
На Frontline соединяются профессионализм и веселье в мире веб-разработки.
Здесь ты найдешь:
👨💻 Гайды и советы по HTML, CSS, JavaScript и популярным фреймворкам.
😂 Мемы и шутки про будни разработчика — потому что смех это тоже часть работы!
🔥 Новости и тренды в веб-разработке — чтобы быть на шаг впереди.
💬 Обсуждения и обмен опытом с коллегами по цеху.
🎉 Вдохновение и мотивация — ведь кодить можно с улыбкой (даже на javascript)
🔗 Присоединяйся и и будь в курсе фронтенд-новинок, не забывая про отличное настроение 🚀
#реальноклассныйканал
Нашел действительно полезное расширение — Responsive Viewer
Ключевые фишки:
— Одновременное отображение сайта на нескольких разрешениях
— Полная синхронизация всех действий во всех окнах
— Поддержка Chrome и Edge
Если вам нужна быстрая и удобная проверка адаптива — must-have инструмент. Экономит кучу времени ✌️
Исходный код: GitHub
➡️ @FrontendPortal | #resourse