26603
Присоединяйтесь к нашему каналу и погрузитесь в мир фронтенд-разработки Связь: @devmangx РКН: https://clck.ru/3Fs3wT
Пользовательский текст маркера списка
В 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
Temporal уже на подходе 🤩
Это мощное API для работы с датами и временем в JavaScript, которое заменит устаревший Date
🔸 Множество встроенных методов для преобразований, сравнений и вычислений
🔸 Поддержка часовых поясов и календарей
🔸 Неизменяемые и точные до наносекунд даты
Мы уже можем воспользоваться этим API при помощи полифила, разработанного командой FullCalendar
Подробнее в официальном блоге MDN и в статье на Habr'e
➡️ @FrontendPortal | #js
Все еще используешь традиционный способ доступа к элементам с правого конца массива? 📸 Пора добавить немного разнообразия!
🔸 Попробуй новый метод .at() для массивов. Он делает то же самое, что и нотация [x], но по-другому обрабатывает отрицательные значения.
🔸 Отрицательные значения обозначают элементы с правого конца массива.
🔸 -1 дает последний элемент, -2 — предпоследний, и так далее.
➡️ @FrontendPortal | #CSS
Чем больше ты думаешь, что HTML мощный, тем больше понимаешь, что он ещё мощнее 😵
Один из таких недооценённых элементов/функций в HTML — это создание элемента datalist и привязка его к полям ввода, чтобы создать виджет подсказок.
Ты можешь подумать, что для реализации такого компонента нужно много JavaScript, но на самом деле — абсолютно0️⃣ JS
⚠️ Единственный недостаток в том, что нельзя стилизовать внешний вид выпадающего списка — стиль зависит от ОС.
Различия между <select> и <datalist>
— Кроме функции автодополнения элемента <datalist>, основное отличие между <select> и этим тегом в том, что в элементе <select> нельзя выбрать или указать значение не из списка предлагаемых
🔒 7539 ГБ платного контента для программистов утекли в Telegram
Выбирай направление и обучайся:
👩💻 Java — 644 ГБ
🖥 Python — 724 ГБ
🖥 Frontend — 981 ГБ
🖥 Backend — 817 ГБ
👩💻 Все языки — 4373 ГБ
Пост удалится через 48 часов 🕔
🖥 Используйте функции callback ref вместо useEffect (когда возможно) ↓
Преимущества callback ref:
🔸 Снижает нагрузку на рендер (useEffect больше не нужен)
🔸 Требует меньше кода
🔸 Делает код чище и понятнее
✔️ #tip by George Moller
➡️ @FrontendPortal | #react
🚩 Единая точка входа в IT!
Теперь всё, что нужно для твоего роста, собрано в одном месте: статьи, материалы, вакансии, задачи и вопросы с собеседований для каждого направления!
Выбирай сферу и становись частью IT сообщества:
👩💻 Frontend 👩💻 Node.js
👩💻 Python 👩💻 Java
👣 Golang 👣 Rust
🖥 PHP 🖥 Ruby
👩💻 Android 👩💻 iOS
🖥 Общее IT 👩💻 QA
📆 Митапы 👨💻 Вакансии
А также у нас есть собственная платформа для подготовки к собеседованиям!
🔹 Прогресс и история подготовки
🔹 Фильтры по технологиям и сложности
🔹 Интерактивные тренажёры для практики
🔹 4000+ вопросов для подготовки к собеседованиям
🔖 Всё для вашего направления — в одном месте, без лишних подписок.
Мало кто знает этот крутой трюк для фавикона вашего сайта.
Вы можете загрузить другой фавикон для темного режима.
Как это работает:
🔸Первый <link> указывает фавикон для светлого режима (обычный favicon)
🔸Второй <link> загружает другой фавикон, если у пользователя включен темный режим. Это определяется с помощью media="(prefers-color-scheme: dark)"
Если вы используете SVG в качестве фавикона, вы также можете добавить CSS-стили прямо внутри, чтобы он адаптировался (2 картинка)
➡️ @FrontendPortal | #tips
В поиске инвесторов 🚽
➡️ @FrontendPortal | #memes
Ваша карьера в Frontend-разработке начинается в Авито 😎
Приходите на оплачиваемую стажировку в Авито. Здесь вы будете работать с продуктами, которыми пользуются миллионы.
Профессионально развиваться и расти вам помогут:
• наставник — научит, как найти лучшее решение, и поможет разобраться в инструментах и технологиях
• комьюнити стажёров — поделятся опытом и поддержат
• доступ к базам знаний, библиотекам и корпоративным курсам — даст возможность нарастить экспертизу.
Стажировка открыта в пяти направлениях, вы можете выбрать два — основное и запасное. Если попасть на первое не удастся, сможете пройти отбор на второе при наличии мест.
Условия:
• длительность программы — 6 месяцев
• работа от 25 часов в неделю, после завершения стажировки — возможность остаться в компании на полную занятость
• зарплата и корпоративный ноутбук
• можно работать из офиса, удалённо или в гибридном формате.
Более 80% стажёров продолжают карьеру в Авито. Присоединяйтесь к команде и растите вместе с нами! Регистрация открыта до 5 февраля.
💡 Совет по JavaScript
Вы могли не знать, что мы можем настроить вывод JSON.stringify()
По умолчанию JSON.stringify(data) не сериализует Set, Map, BigInt и т. д. Но с помощью функции replacer можно управлять тем, какие данные попадут в итоговую строку
✔️ #tip by Shripal Soni
➡️ @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, чтобы различать их.
Проверяем правописание
Атрибут spellcheck указывает браузеру проверять или нет правописание и грамматику в тексте.
Атрибут применяется к тегам input или textarea, а также к элементам, которым задан атрибут contenteditable
Можно с помощью псевдоэлемента ::spelling-error стилизовать неправильно написанный текстовый сегмент (поддержка 86.01%)
::spelling-error {
background-color: yellow;
}
Нашёл крутой ресурс для React-разработчиков — React Bits
Это библиотека с анимированными UI-компонентами, которые можно легко интегрировать в проекты.
В коллекции более 30 компонентов, включая кнопки, карточки, модальные окна и другие элементы интерфейса. Каждый компонент можно настроить под свои нужды, благодаря гибким пропсам и настройкам.
Документация на сайте подробная и понятная, с примерами использования и возможностью взаимодействовать с компонентами прямо в браузере.
➡️ @FrontendPortal | #resourse
🚀Приглашаем на бесплатный урок «React 19 что нового?» курса React.js Developer 06 февраля 19:00 (мск).
Что будет на вебинаре?
- Обзор новых хуков.
- Посмотрим возможности создания новых пользовательских элементов.
- Передача ref в props и другие минорные изменения.
Кому вебинар будет полезен?
- Junior frontend-разработчикам.
- Опытным разработчикам, желающим быть в курсе последних изменений.
Что узнают участники вебинара?
- Какие фичи появились в React 19.
- Как и где применять в своих проектах новые возможности библиотеки.
- Как отрефакторить уже существующий код.
⏰ Успейте зарегистрироваться на бесплатный вебинар 06 февраля 19:00 (мск). Запись ограничена: https://otus.pw/m0IE/
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576
Вечное противостояние: diseñador grafico vs programador.
➡️ @FrontendPortal | #memes
Здесь разрабы не просто передвигают кнопки и лутают деньги, а создают шедевры!
Я Никита — frontend-разработчик, любящий свою работу. Я приглашаю тебя в свой канал о фронтенде с душой Frontend For The Soul с вдохновляющим комьюнити, фичами, которых нет в других источниках, регулярными трендовыми идеями и книгами.
Здесь каждый пиксель имеет душу. Присоединяйся — @frontendforthesoul
Реклама. Парфенов Н.Н. ИНН 330405205540.
Web Skills — визуальный роадмап для изучающих фронтенд со ссылками на избранные материалы: от основ HTML/CSS/JS до баз данных, UX-дизайна и работы в команде
➡️ @FrontendPortal | #resourse
Держите простой трюк для добавления разделителей между элементами в CSS
Мы используем комбинацию двух псевдоклассов:
- last-child выбирает последний элемент в родителе
- not отрицает последний дочерний элемент, чтобы выбрать все, кроме последнего элемента
Я также использовал логическое свойство border-inline, оно создаёт у элемента рамки по строчной оси(можно использовать border-right)
➡️ @FrontendPortal | #CSS
Animate.css — это библиотека готовых к использованию кроссбраузерных анимаций для ваших проектов
➡️ @FrontendPortal | #resourse
Туториал по созданию перекрывающихся элементов c помощью Grid CSS
В Grid более одного элемента могут занимать одну и ту же ячейку сетки. Мы используем этот факт в демонстрации
➡️ @FrontendPortal | #CSS
Забудь про сложные методы обучения! Поделюсь каналами, которые перевернули мой подход к программированию 🚀
🖥 Indigo Python - улучши навыки кодинга на python
😬 Indigo Hack - погрузись в мир информационной безопасности
🤓 Indigo Web - самый имбовый контент по веб-разработке
🖥 Indigo Архив - платные бесплатные ресурсы по всем направлениям
Не упусти шанс стать частью нашего сообщества!
Наткнулся на интересную библиотеку — Shepherd JS
Это мощная библиотека JS, предназначенная для создания интерактивных пошаговых туров и руководств на веб-страницах
Она поддерживает интеграцию с различными фреймворками, такими как React, Ember, Angular, Vue.js, а также может использоваться с чистым JavaScript
А минималистичный стиль оформления позволяет настроить внешний вид под свой дизайн без лишних заморочек. Плюс, полная поддержка клавиатурной навигации и соответствие стандартам доступности
Для WordPress существует плагин Simple Tour Guide на основе Shepherd.js
Если вы хотите увидеть Shepherd.js в действии, рекомендую посмотреть следующее видео
➡️ @FrontendPortal | #resourse
Подборка небольших советов и трюков, которые вы можете использовать, используя современный синтаксис CSS
➡️ @FrontendPortal | #CSS
IT-специалист — звучит круто! Но за этим «круто» стоят сотни часов учёбы и практики, ночи без сна и дни без обеда.
Лавка, Практикум и Высшее образование от Практикума объединились на День студента, чтобы подарить вам время на отдых. Время, когда вы не ходите за продуктами и не готовите еду.
Разыгрываем многоразовый сертификат на доставку в Яндекс Лавке на 50 000 рублей! А ещё подарки от Яндекс Практикума: кофе, шоппер и футболку.
Участвовать в розыгрыше: ссылка
Информация об организаторе конкурса, сроках, правилах проведения, количестве призов, сроках, месте, порядке получения призов указана на сайте.