27159
Присоединяйтесь к нашему каналу и погрузитесь в мир фронтенд-разработки Связь: @devmangx РКН: https://clck.ru/3Fs3wT
ThiingsGrid
Высокопроизводительный компонент бесконечной прокрутки для React, который обеспечивает плавные взаимодействия через тач или мышь с инерционным скроллингом.
Подходит для отображения больших наборов данных в виде сетки с кастомными рендерами ячеек ✌️
GitHub: thiings-grid
➡️ @FrontendPortal | #resourse
Действительно классный гайд по тому, как прокачать навык работы с дейтпикерами в JS
Ты найдёшь примеры, понятные объяснения и отличный визуальный формат, который помогает разобраться во всех тонкостях создания дейтпикеров на чистом JavaScript.
Читайте здесь 👍
➡️ @FrontendPortal | #article
Создание липкого заголовка в СSS
Блоки с «липким» позиционированием ведут себя как position: relative и position: fixed одновременно
Пока блок не достиг указанного расстояния от края окна браузера, он ведёт себя как относительно спозиционированный. Когда блок достигнет этой точки, то станет вести себя, как будто мы указали position: fixed
Когда таких заголовков несколько, они накладываются друг на друга, и пользователю виден последний из них
➡️ @FrontendPortal | #CSS #tutorial
Вышел React Email 5.0
Лучший способ создавать email-шаблоны с помощью React.
✓ Теперь с поддержкой тёмного режима
✓ Совместимость с Tailwind 4
✓ 8 новых компонентов
Предпросмотр, линтер и многое другое:
→ npx create-email@latest
➡️ @FrontendPortal | #resourse
Простой способ создания эффекта бесконечной карусели с помощью CSS
Видели ли вы подобную анимацию на сайтах в разделе «Партнеры/клиенты»? Вот простая схема создания этого фальшивого эффекта бесконечной карусели 🦆
В качестве дополнительного совета, если вы не хотите дублировать элементы вручную или указывать количество элементов в CSS, вы можете использовать некоторые манипуляции JavaScript DOM и пользовательские свойства CSS (вот пример продвинутой реализации)
➡️ @FrontendPortal | #tutorial #OldButGold
То, что доктор прописал!
9 самых необходимых IT-каналов, которые должен читать каждый айтишник:
Доктор Mobile - лечим ваш смартфон, минимум слов, максимум пользы.
Доктор Python — коды, хаки и фичи.
Доктор Techlogy — свежие технологии и их применение.
Доктор Cyber — информационная безопасность без скуки.
Доктор GitHub — лучшие репозитории от врача.
Доктор IT — всё о цифровом мире и его инсайтах.
Доктор GameDev — рецепты создания игр и гайды.
Доктор GPT — лучшие промпты и сервисы ИИ.
Доктор Memes — смех лечит лучше любых апдейтов.
Доктор C++ — фичи, советы и код без боли.
Подпишись, чтобы стать профессором, а не пациентом.
Вот пошаговый туториал о том, как реализовать hover-указатель для элементов списка в CSS
Это очень просто и занимает всего несколько строк кода.
Мы используем кастомный маркер списка, чтобы поставить эмодзи в качестве маркера, а затем меняем его цвет при hover
Код на CodePen ✌️
➡️ @FrontendPortal | #CSS
Telegram опубликовал список 8 самых быстрорастущих каналов для программистов:
Only Python — Подборки приёмов и фич, о которых не рассказывают в курсах.
Only Tech — Главные тренды и инсайды из мира технологий, маркетинга и интернет-культуры.
Only Hack — Реальные кейсы кибератак, инструменты и методы защиты, которые используют хакеры.
Only GitHub — Репозитории, которые решают реальные задачи.
Скрипты, фреймворки и готовые решения
Only IT — Без мнений и слухов — только факты и важные IT-события.
Only Apple — Новые апдейты, утечки и фишки, которые Apple ещё не показала.
Only GPT — Промпты, хаки и свежие инструменты, о которых молчат даже AI-каналы.
Only Memes — Если ты когда-нибудь деплоил в пятницу вечером — ты поймешь
Подписывайтесь и прокачивайте свои скиллы.
Создаем галерею изображений с помощью CSS Grid
Важной частью является свойство grid-auto-flow: dense;, которое заставляет автоматически заполнять все ячейки сетки, независимо от того, в каком порядке вы их определили
➡️ @FrontendPortal | #CSS
Полезное чтиво: гайд по созданию упрощённого клона Crossy Road на Three.js
В этом туторе разберетесь, как сделать простую 3D-игру с персонажем, который должен пройти через бесконечные препятствия, избегая машин и деревьев
Есть версии на JS и TS, плюс версия с React Three Fiber
➡️ @FrontendPortal
⚡️ Бесплатное обучение фронтенд-разработке с нуля: HTML/CSS, JavaScript, Next.js — с поддержкой от наставника
Подойдёт и новичкам, и тем, у кого есть опыт во фронтенде
На канале Интенсивный JavaScript действующий тимлид и опытный разработчик помогает изучить фронтенд на практических задачах, которые интересно кодить
С 8 ноября стартует новое бесплтаное обучение, где он на практике поможет разобраться во фронтенде: новичкамм в HTML/CSS и JavaScript, а тем, кто с опытом — Next.js
Всего сделаете три проекта:
💡 сайт услуг сборки ПК
💡 фронтенд для магазина на Next.js
💡 и ещё один проект полностью самостоятельно в формате соревнования с другими участниками
Обучение подойдёт, даже если у вас нет опыта в программировании — всё объясняют так, чтобы поняла даже ваша бабуля
🔖Ещё автор регулярно набирает людей в свою команду, проводит собесы и знает, почему прилетают отказы большинству джунов
Что будет кроме уроков:
Для новичков:
пошаговый план изучения всего, что нужно современному фронтендеру с нуля
какие проекты положить в портфолио
Для тех, кто опытнее:
какие проекты в портфолио повышают шансы на удачный собес
тест знаний и навыков
как искать заказы на фрилансе, когда биржи умерли
Подписывайтесь, чтобы участвовать, осталось 39 мест
Учиться самостоятельно можно бесконечно, если не знать, куда копать. На интенсиве сократите время на поиск информации и получите пошаговый план от разработчика, который нанимает новичков в команду
➡️Участвовать бесплатно
Poopetti — это лёгкая и забавная библиотека для создания падающих эмодзи и эффектов взрыва эмодзи
Основной акцент сделан на 💩 эмодзи
Превратить скучный интерфейс в что-то запоминающееся здесь. GitHub тут
➡️ @FrontendPortal
CSS Совет: Возможно, вы не знали об этом трюке анимации иконки при клике/фокусе
Легко анимируйте иконку при взаимодействии, создавая спрайт изображения со всеми кадрами анимации и используя функцию временного расчета steps() в CSS.
input[type="checkbox"] {
/* Задаем ширину и высоту, равные размеру одного кадра в спрайте */
width: 28px;
height: 28px;
appearance: none;
background: url('/images/star_sprite.png') no-repeat;
/* steps = общее количество кадров - 1 */
transition: background-position 0.3s steps(15);
}
input[type="checkbox"]:checked {
/* Переход к последнему кадру */
/* Ширина одного кадра = 28px */
/* 28px * 15 кадров = 420px */
background-position: -420px 0;
}
Создавайте крутые onboarding-туры прямо в своих веб-приложениях
Вы это точно видели: заходите в новое приложение, и оно шаг за шагом проводит вас по интерфейсу, подсвечивая нужные элементы. Чисто, аккуратно, удобно.
Вот либа, которая позволяет реализовать то же самое, совместима с проектами на Next.js и React
Забираем с GitHub: NextStep
➡️ @FrontendPortal | #resourse
🔥Прими участие в Хакатоне от ИТ-холдинга Т1 в Москве и поборись за призовой фонд 1 200 000 рублей!
Когда: 25–28 ноября
Формат: онлайн + финал на площадке
Участвуй, если ты:
🔹обучаешься на технической или ИТ-специальности
🔹развиваешься в направлении разработки, системной администрации, AI/ML или DevOps
🔹сможешь быть в Москве 28 ноября.
Выбери свой кейс:
✴️VibeCode Jam: собеседование будущего. Создай ИИ-платформу для прохождения технических собеседований с виртуальным интервьюером.
✴️Self-Deploy: CI/CD без DevOps. Автоматизируй генерацию CI/CD пайплайнов по анализу структуры Git-репозитория.
Ленивая загрузка автоматически воспроизводимых видео, которые находятся ниже первого экрана
Установите preload="none" и удалите атрибут autoplay у видео, чтобы оно не загружалось по умолчанию. Затем, используя API Intersection Observer, мы можем воспроизводить видео, когда оно становится видимым в области просмотра
Посмотреть это в действии: тык
➡️ @FrontendPortal | #tip by Shripal Soni
Зарплата 207.000р у Middle-разработчика в Яндекс
«В день уходит несколько часов на созвоны, в остальное время закрываю задачки из спринта, редко перерабатываю. У компании топовый офис, но с коллективом как-то не заладилось. Радуюсь классному ДМС и стабильной зарплате» - middle разработчик из Яндекса.
Бигтех по-русски - канал с реальными зарплатами и историями IT-специалистов российского БигТеха. Там уже опубликованы рассказы программистов Альфа-банка, Сбера и Тинькофф 🤯
Читайте: @bigtech_russia
Swapy
Это инструмент для создания drag-and-drop интерфейсов всего за пару строк кода
Работает с любым фреймворком: React, Vue, Angular, Svelte или даже без них.
Гибко настраивается, позволяет выделять слоты и элементы для перетаскивания, добавлять анимации, и отслеживать изменения.
Лёгкий в установке и супер понятный в использовании.
npm install swapy
👩💻 Ищем JavaScript разработчиков. Релокейт, удалёнка, платим много!
Специально для Вас, собираем лучшие вакансии по JavaScript с прямыми контактами в Telegram:
👩💻 Fronted Jobs - для фронтендеров
👩💻 Node.Js Jobs - для бекендеров
Подпишись чтобы не упустить свой шанс получить лучший оффер!
Добавь скролл-эффекты нового уровня в свои веб-проекты
Эта библиотека позволяет добавить к страницам аккуратные storytelling-эффекты при прокрутке: плавные, контролируемые и максимально вовлекающие
Забираем с GitHub: scrollytelling
➡️ @FrontendPortal | #resourse
ESLint: "Вложенные тернарные выражения могут усложнить понимание кода"
TypeScript:
➡️ @FrontendPortal
HTML Совет: Элемент <search>
Мы можем использовать элемент <search> для обёртывания полей и контента, связанных с поиском/фильтрацией.
Элемент <search> воспринимается браузером как «поисковая» область в API доступности, что помогает пользователям вспомогательных технологий (например, пользователям экранных читалок) легко находить поисковые зоны на веб-странице.
Пример кода:
<search>
<form action="/search">
<label>
Поиск продукта:
<input type="search" name="productName" />
</label>
<button>Поиск</button>
</form>
</search>
aria-labelledby / aria-label, чтобы различать их.
Хочешь добавить визуализацию данных в реальном времени в свои веб-приложения?
Эта JS-либа помогает создавать высокопроизводительные интерактивные дашборды, которые без проблем справляются с большими наборами данных, лайв-обновлениями и сложной аналитикой.
Отлично подходит для:
- Реалтайм-дашбордов
- Потоковых или быстро меняющихся данных
- Масштабной аналитики прямо в браузере
Забираем с Github: perspective
➡️ @FrontendPortal | #resourse
Ищем новичков во фронтенд-разработке и вёрстке сайтов.
Хотим показать, как получить реальный опыт в разработке сайтов и веб-приложений.
А именно:
- Сверстать веб-сайт на HTML + CSS;
- Реализовать функционал на JavaScript;
- Пощупать фронтенд-фреймворк Angular;
- Подключить Backend и загрузить сайт на хостинг.
Чтобы в итоге ты своими руками разработал качественный сайт, который не стыдно добавить в портфолио или продать.
Такой опыт можно получить на бесплатном практикуме уже завтра с поддержкой от опытных кураторов на каждом этапе.
👉 Приходи на бесплатное обучение и зови с собой друзей
Бонусом получишь гайд для поиска работы и заказов на фронтенд-разработку.
CSS Совет: Синтаксис диапазонов для медиа-запросов
Вы, возможно, не знали об этом более удобном и понятном синтаксисе диапазонов для определения медиа-запросов
Теперь мы можем использовать операторы <, >, =, <=, >= для определения диапазонов в медиа-запросах, чтобы упростить их понимание
✅ Поддерживается во всех основных браузерах с марта 2023 года (92.31%)
✅ Доступен плагин PostCSS для неподдерживаемых браузеров.
➡️ @FrontendPortal | #tip by Shripal Soni
Как вставить иконку внутрь input
Для этого трюка часто используется свойство background-image. Мы используем фоновое изображение без повторов в качестве иконки и добавляем отступ для смещения фактического текста
➡️ @FrontendPortal | #CSS
В утекшем коде Apple встречаются вот такие строки. А ты ещё чувствуешь вину за использование console.log
➡️ @FrontendPortal
Фронтендеры, это для вас: 21 ноября в Москве пройдёт конференция «CENTI CONF: Frontend Day»
Впервые за долгое время Centicore Group собирает в одном месте лучших экспертов фронтенд-разработки и специалистов по Angular
Вас ждут:
— топовые спикеры, реальные кейсы и нестандартные решения рабочих задач;
— возможность лично пообщаться с экспертами после выступлений и обменяться опытом в неформальной атмосфере.
Но это ещё не всё. Помимо технических докладов, будет и карьерный блок: эксперт Centicore расскажет, как строить карьеру без “подкруток” в резюме, как привлечь внимание к своей кандидатуре своим реальным опытом и кейсами
А после деловой части конференции всех участников ждет afterparty с нетворкингом и живым общением ☺️
🔸Формат: ТОЛЬКО ОФЛАЙН
🔸Место проведения: г Москва, ул. Новодмитровская, д. 1 стр. 23
🔸Дата и время: 21 ноября 2025 года, 10:30 (мск)
Регистрируйся на конференцию тут, увидимся там 🤝🤝
Apple выпустила веб-интерфейс App Store на Svelte, но забыла убрать сорсмапы в проде, что позволило любому скачать полную структуру фронтенда
Слитый код (включая комментарии) опубликовали в репозитории на GitHub «для образовательных целей» 🤝🤝
➡️ @FrontendPortal
Вышел Vite 7.2
- Опция build.license
- Поддержка proxy и HTTP/2
- И другие новые фичи и фиксы
Полный список изменений: тут
➡️ @FrontendPortal