27159
Присоединяйтесь к нашему каналу и погрузитесь в мир фронтенд-разработки Связь: @devmangx РКН: https://clck.ru/3Fs3wT
🚀Приглашаем на бесплатный урок «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;
}
Нашёл крутой ресурс для React-разработчиков — React Bits
Это библиотека с анимированными UI-компонентами, которые можно легко интегрировать в проекты.
В коллекции более 30 компонентов, включая кнопки, карточки, модальные окна и другие элементы интерфейса. Каждый компонент можно настроить под свои нужды, благодаря гибким пропсам и настройкам.
Документация на сайте подробная и понятная, с примерами использования и возможностью взаимодействовать с компонентами прямо в браузере.
➡️ @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
ТОП фреймворков Frontend с наибольшим количеством вакансий:
🔸React — 126 000
🔸Angular — 86 000
🔸Vue — 24 000
🔸Другие — 4 500
(Количество вакансий)
Более 250 000 вакансий проанализировано по всему миру.
У React также самые высокие зарплаты(основано исключительно на вакансиях из США). Статья также исследует тенденции за последние два года и показывает, что Angular теряет популярность, а React сохраняет сильные позиции.
Для подробностей, ознакомьтесь с полным текстом здесь
➡️ @FrontendPortal
Это — база по Machine Learning и Data Science, которая заменит вам сотни тг-каналов и сайтов. Фишка в том, что здесь опытные ML-специалисты первыми освещают новости сферы, пишут емкие разборы статей и делятся прикладными материалами.
И канал – только часть клада: ребята сделали целый сайт с научными лонгридами, ML-соревнованиями и свежими вакансиями индустрии.
Теперь вся жизнь ML-специалиста собрана в одном месте: Data Secrets