27159
Присоединяйтесь к нашему каналу и погрузитесь в мир фронтенд-разработки Связь: @devmangx РКН: https://clck.ru/3Fs3wT
🎄Как стать айтишником в 2025 году?
Можно самому пытаться найти крупицы полезной инфы через сломанный поиск Гугла, можно получать ответы от ChatGPT с ошибками...
А можно воспользоваться Базой Знаний, где опытные айтишники уже отобрали за вас все материалы. И для вашего удобства поделили их на категории:
🖥 Python: @python_baza
👩💻 Frontend: @frontend_baza
👩💻 Backend: @backend_baza
🎨 Дизайн: @design_baza
📚 Книги: @archive_baza
👩💻 Топ GitHub: @main_it_baza
⏲️ Ссылки будут активны 48 часов — успей начать Новый год правильно вместе с Базой Знаний 🚀
Эта библиотека JavaScript позволяет добавить потрясающие эффекты курсора, которые выглядят плавно, футуристично и безумно круто.
Подготовьтесь заставить пользователей сказать WOWWW ✌️
https://cursify.vercel.app/
➡️ @FrontendPortal | #resourse
Семантический способ выделить часть текста с помощью тега <mark>
Тег <mark> выделяет или подсвечивает важный фрагмент текста. По умолчанию браузеры добавляют <mark> жёлтый фоновый цвет
➡️ @FrontendPortal | #HTML
Бесплатный практический вебинар: Веб-разработчик: с нуля до мини-игры за 2 часа.
⏰ Когда: 20 февраля в 19:00 по мск.
Погрузитесь в решение реальной задачи и напишите небольшую игру на HTML, JS и CSS, которая работает прямо в браузере 🎮
Расскажем, что ждут работодатели от джунов, какие есть грейды во фронтенд-разработке и на какую зарплату рассчитывать в перспективе.
Какие JS фреймворки учить: Vue, React, а может, Angular?
Задайте вопросы опытному спикеру, сделайте первый шаг в направлении новой профессии.
🎁 Всем, кто зарегистрировался - гайд «Как заговорить на сленге IT-специалистов», а каждому участнику - карта компетенций начинающего Frontend-разработчика и гайд «Как опубликовать страницу в интернете при помощи GitHub Pages»
💡 Совет по CSS
Предположим, что есть фиксированный хедер с z-index: 1 и компонент карточного стека с верхней карточкой, имеющей z-index: 1.z-index хедера мешает наложению карточек.
Решение: Создать новый контекст наложения для компонента карточного стека.
Есть много способов создать контекст наложения косвенно, но лучший и прямой способ — использовать isolation: isolate.
Теперь z-index карточек находится в пределах компонента карточного стека, и не мешает z-index хедера.
✔️ #tip by Shripal Soni
➡️ @FrontendPortal | #tip
Долгое время разработчики мечтали о функции в CSS, которая позволила бы выбирать родителя конкретного элемента.
И вот мы в 2025 году 🤩 с возможностью делать именно это.
В этом примере у нас есть два элемента с классом .parent, но с разными детьми. С помощью псевдокласса :has() мы можем выбрать родителя конкретного ребенка. С помощью этого мы можем применить стили только к этому конкретному родителю.
Это открывает множество возможностей, таких как:
🔸 Стилизация списка при наведении на определенный элемент
🔸 Стилизация карточки в зависимости от того, есть ли на ней изображение
🔸 Стилизация заголовка в зависимости от того, есть ли в нем ссылка
Возможности безграничны, пользуйтесь
➡️ @FrontendPortal | #CSS
Делимся приватным архивом на 837 ГБ курсов по программированию:
1. Обучение Python с нуля
2. Обучение JavaScript с нуля
3. Обучение С++ с нуля
4. Обучение С# с нуля
5. Обучение HTML/CSS с нуля
6. Обучение Java с нуля
7. Обучение SQL/GO/PHP с нуля
Архивы скоро удалят, очень важно успеть!🔥
Извлекай текст из любых изображений с этой библиотекой
Tesseract.js — это мощная JS-библиотека для распознавания текста на изображениях прямо в браузере или на сервере с использованием Node.js
Она поддерживает более 100 языков, автоматическое определение ориентации текста и скриптов, а также предоставляет простой интерфейс для чтения границ абзацев, слов и символов
Подробнее можно ознакомиться с примероми кода и документацией на GitHub
➡️ @FrontendPortal | #resourse
Вырезанный текст с помощью свойства mix-blend-mode
Свойство задает режим наложения исходного цвета на фоновый цвет или фоновое изображение. В значении screen можно добиться эффекта вырезанного текста
➡️ @FrontendPortal | #CSS
Ты знал этот трюк?
Если ввести react.new в адресной строке браузера, мгновенно откроется новая React-песочница, готовая к кодингу ✌️
А вот целая коллекция доменов .new, введённых Google, — они полезны для быстрого доступа к определённым приложениям
➡️ @FrontendPortal | #tip
Вариативные шрифты
Вместо множества файлов с разными стилями и толщинами теперь можно использовать один — вариативный шрифт.
Традиционно под каждый вес (жирность) или стиль (italic, bold, light) шрифта вам надо загрузить несколько соответствующих шрифтов, файлов.
С OpenType-вариативными шрифтами всё это хранится в одном файле, а нужные параметры легко настраиваются в CSS.
Это ускоряет загрузку сайта и даёт больше свободы в дизайне.
🔸Подробнее о вариативных шрифтах читайте в статье: Введение в вариативные шрифты
➡️ @FrontendPortal | #CSS
Yandex B2B Tech и Яндекс 360 для бизнеса запускает онлайн-доски для бизнеса 🛠
Корпоративная версия сервиса теперь доступна для использования на собственных серверах.
🔸 Удобные инструменты для ведения проектов, контроля сроков и визуализации данных
🔸 Все под контролем: администратор настраивает доступы и отслеживает активность сотрудников
🔸 Данные остаются внутри компании, зашифрованные и безопасные
🔸 В будущем появится облачная версия
Лицензии уже можно приобрести на сайте Яндекс 360 для бизнеса
Эта огромная библиотека включает 180 тщательно подобранных CSS-градиентов, которые идеально подойдут для ваших проектов 😎
https://webgradients.com
➡️ @FrontendPortal | #resourse
Пользовательский текст маркера списка
В CSS counter(list-item) — это специальное значение счетчика, которое доступно по умолчанию и содержит номер текущего элемента списка в упорядоченном списке
➡️ @FrontendPortal | #CSS
🔥Podlodka React Crew – онлайн-конференция для React-разработчиков.
И в новом сезоне ребята решили разобраться, какие инструменты и знания включают в роадмапы профессионального развития и насколько они применимы.
Что в программе:
💬 Говорим на одном языке с пользователями: i18n в React-приложениях – Виталий Баев, контрибьютор Next.js и Vite 🌍 Как выбрать инструменты и сделать интерфейс удобным для всех?
📡 OpenTelemetry для фронтенд-разработчика – Валерий Катцин, frontend-разработчик в Точке 📊 Как собирать данные о работе приложения и использовать их для улучшения продукта?
🔥 "Долгожданный" React 19 – Алекс Рассудихин, разработчик с опытом во Vue, React, Next и Astro 🚀 Какие фичи вышли в продакшен, а какие – нет?
🤖 AI Integrated Developer Experience – Марк Байдебура, Senior Full-stack Engineer в Influencer 🧠 Где AI реально помогает, а где пока его лучше не использовать?
📅 Конференция пройдет 10-14 февраля.
Ты не просто узнаешь по новые фичи и подходы, но и определишься, какие из них включить в свой roadmap и как расти дальше.
🔗 Регистрируйтесь: podlodka.io/reactcrew
Современная фронтенд-разработка — это не только HTML, CSS и JavaScript.
Существуют инструменты, которые значительно упрощают процесс кодирования, но бывает сложно понять, с чего начать.
В этой статье Хунор объясняет все — от редакторов и библиотек до бандлеров — чтобы помочь вам настроить фронтенд-проект с нуля.
https://freecodecamp.org/news/how-to-set-up-a-front-end-development-project/
➡️ @FrontendPortal | #article #en
🚀Приглашаем на бесплатный урок «React и графические библиотеки: визуализация данных» от онлайн-курса React.js Developer 20 февраля 19:00 (мск).
Что будет на вебинаре?
- Обзор популярных графических библиотек для React.
- Установка и настройка необходимых зависимостей в проект React.
- Примеры визуализации данных.
Кому вебинар будет полезен?
- React разработчикам, работающим с аналитикой и данными.
- Разработчикам, желающим улучшить UI своих приложений.
- Командам, внедряющим инструменты для анализа и представления данных.
Что узнают участники вебинара?
✅Как визуализировать данные в React.
✅Как интегрировать визуализации в существующие приложения.
✅Как создавать интуитивно понятные и привлекательные визуализации для пользователей.
⏰ Успейте зарегистрироваться на бесплатный вебинар 20 февраля 19:00 (мск). Запись ограничена: https://otus.pw/e9KW/
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576
javascript algorithms — репозиторий, в котором собраны самые разные алгоритмы, написанные на Javascript.
Здесь вы найдете примеры кода для алгоритмов, таких как сортировки, поиска, графов, теории чисел и многое другое.
👉 Github
➡️ @FrontendPortal | #resourse
Простой способ взломать Матрицу 😁
➡️ @FrontendPortal | #memes
Ловите годноту 😳
Кто спрашивал на какие каналы по программированию я подписан? Лично я подписан и читаю этот канал: @umnyiprogrammist
➡️ @FrontendPortal | #resourse
Мгновенно создавайте идеальные макеты одним кликом 👍
Это интерактивный инструмент, который позволяет создавать гибкие макеты для CSS Flexbox и Grid, и делает это настолько интуитивно и наглядно, что даже новичок разберётся
➡️ @FrontendPortal | #resourse
CSS: svh, lvh, dvh — новые единицы измерения
Рассказываем, зачем нужны новые единицы измерения svh, lvh и dvh в CSS для адаптивной верстки, и чем они отличаются от прежней единицы vh
🔸Хорошее видео на эту тему: YouTube
🔸Поддержка на данный момент составляет 94.19%
➡️ @FrontendPortal | #CSS
Фронтенд задачки в картинках — просто, наглядно и понятно. Проверяй свои знания в интерактивном формате каждый день.
Присоединяйтесь: @Frontend_Task
Тернистый путь JS-кодеров к сеньору 😂
➡️ @FrontendPortal | #memes
Новости frontend-сообщества, баттлы по вёрстке и полезный нетворкинг: 15 февраля Яндекс вновь проведет конференцию «Я💛Фронтенд»
Что в программе?
Десятки докладов от экспертов, дискуссии и новости веба
• Code in the dark: соревнование по вёрстке вместе с Семеном Левенсоном из Яндекс Маркета
• Кофе с talk’ом с экспертами Яндекса, которые погрузятся в технические и архитектурные проблемы участников
• Capture the flag — традиционный батл в онлайн-формате, где нужно решить задачи быстрее других участников. Турнир стартует уже завтра!
Найти все онлайн-активности можно на сайте ивента — там же регистрируемся на саму конференцию до 12 февраля.
Очень люблю геймификацию: наткнулся на игру CSS Diner, которая помогает запомнить селекторы CSS, предлагая вам с помощью них выбирать предметы на столе ✌️
Это, конечно, не Elden Ring, но если возникнут трудности — на YouTube есть прохождение, но советую к нему прибегать только в крайних случаях, иначе эффект от обучения будет не тот
➡️ @FrontendPortal | #resourse
Пойми, проблема не в тебе, проблема во мне…
➡️ @FrontendPortal | #memes
🚦 Хочешь быть в курсе всех новинок и событий на дорогах Москвы? Подписывайся на «СпецДорПроект»!
🎥 У нас ты увидишь:
• Уникальные кадры ДТП и неожиданных инцидентов на дорогах;
• Как на улицах городов работают «Умные перекрёстки»;
• Советы и лайфхаки для всех участников дорожного движения.
🔥 Присоединяйся к нам и будь на шаг впереди всех!
💡 HTML Совет: Элемент <search>
Мы можем использовать элемент <search> для обёртывания полей и контента, связанных с поиском/фильтрацией.
Элемент <search> воспринимается браузером как «поисковая» область в API доступности, что помогает пользователям вспомогательных технологий (например, пользователям экранных читалок) легко находить поисковые зоны на веб-странице.
🔸Пример кода:
<search>
<form action="/search">
<label>
Поиск продукта:
<input type="search" name="productName" />
</label>
<button>Поиск</button>
</form>
</search>
aria-labelledby / aria-label, чтобы различать их.
Проверяем правописание
Атрибут spellcheck указывает браузеру проверять или нет правописание и грамматику в тексте.
Атрибут применяется к тегам input или textarea, а также к элементам, которым задан атрибут contenteditable
Можно с помощью псевдоэлемента ::spelling-error стилизовать неправильно написанный текстовый сегмент (поддержка 86.01%)
::spelling-error {
background-color: yellow;
}