27159
Присоединяйтесь к нашему каналу и погрузитесь в мир фронтенд-разработки Связь: @devmangx РКН: https://clck.ru/3Fs3wT
Каждый раз, когда видишь setState внутри useEffect, иди постой в углу 5 минут и подумай о том, что ты натворил.
А потом удали этот useEffect
➡️ @FrontendPortal
Интерактивная библиотека визуализации данных — ECharts
Позволяет добавлять интуитивно понятные, интерактивные и настраиваемые диаграммы в проект.
- Предоставляет более 20 типов диаграмм
- Переключение между рендерингом Canvas и SVG
- Автоматически генерируемые описания диаграмм
- Написана на чистом JavaScript
Забираем тут
➡️ @FrontendPortal | #resourse
14 февраля встречаемся на главной фронтенд-конференции Яндекса — «Я 💛 Фронтенд»: ежегодное мероприятие для тех, кто создает современные интерфейсы. Присоединяйтесь офлайн в Москве или онлайн!
Что вас ждет?
📌 Доклады о применении веб-компонентов, использовании LLM, переходе от традиционной адаптивности к новому подходу, и о том, как встроенные модели меняют архитектуру веб-приложений
📌 Code in the Dark — баттл по верстке на HTML/CSS
📌 CSS арт-челлендж, интерактивная викторина по фронтенд-разработке и другие активности от команд Яндекса
А совсем скоро стартует Capture the Flag — фронтендерский турнир на скорость с наградами для победителей.
Регистрируемся на ивент здесь — там же будут появляться онлайн-активности.
jQuery 4.0 тихо вышел в релиз!
https://github.com/jquery/jquery/releases/tag/4.0.0
После почти 10 лет с момента публикации ветки 3.0 и спустя 20 лет после основания проекта состоялся релиз JavaScript-библиотеки jQuery 4.0, используемой по данным организации W3Techs на 70.9% из 10 млн наиболее посещаемых сайтов в сети
Т-Банк ищет стажеров
Хотите начать карьеру в бигтехе без опыта? В 2025 году это сделали больше тысячи студентов. Многие из них остались в команде и сегодня работают над продуктами, которыми пользуются миллионы.
Стажеры здесь не остаются один на один с трудностями. С первого дня рядом менторы и команда, которая помогает разобраться в новых задачах, поддерживает и делится опытом.
Вас ждет оплачиваемая стажировка с официальным оформлением и гибким графиком, чтобы совмещать работу с учебой.
Что ждет новых участников стажировки:
— восемь направлений на выбор: разработка, аналитика, QA, SRE и другие;
— погружение в бизнес-задачи с первого дня;
— работа над продуктами, которыми пользуются миллионы;
— возможность работать удаленно или в офисе;
— комьюнити, где вы быстро почувствуете себя своим.
Подайте заявку на оплачиваемую стажировку уже сейчас
Обрати внимание, что в корректном примере чипы мгновенно перемещаются на новую позицию, когда один из чипов удаляется.
Это происходит из-за режима popLayout в AnimatePresence из motion/react, который обеспечивает более плавную и быструю анимацию при удалении элемента
➡️ @FrontendPortal
📢 ИИ из каждого утюга, а как им пользоваться-то?
Владение нейросетями — один из ключевых навыков для разработчика в 2026 году. И пока год только начинается, есть время накопить «опыт в ML» и подтвердить его в собственном резюме.
Научитесь применять ИИ на практике с бесплатным курсом Академии Selectel. На нем вы:
👉 развернете нейросети в облаке за 5 минут,
👉 создадите Telegram-бота для обработки полученных сообщений,
👉 познакомитесь с библиотекой от Hugging Face и задеплоите шаблон для генерации изображений на сервер с GPU.
А бонусом разберете актуальные нейросети в 2026 году и получите лайфхаки по генерации изображений.
Внутри курса — шесть блоков с инструкциями от экспертов Selectel, обзоры на Midjourney, DALL-E, Stable Diffusion и другие нейросети для разработчиков. Прокачивайте практические навыки абсолютно бесплатно ➡️
Делись своим localhost с кем угодно за секунды
через URL, доступный по всему миру, с HTTPS
$ brew install cloudflared
$ cloudflared tunnel --url <твой-локальный-домен>
📱 Держите 6 хороших каналов по искусственному интеллекту и программированию для любого уровня!
Выбирай направление:
📱 Нейросети — @neuro_prompt
🤖 AI-инструменты — @ai_prompt
📱 Python — @python_prompt
🤔 InfoSec & Хакинг — @infosec_prompt
👩💻 IT Новости — @it_news
😄 IT Мемы — @it_memes
Промпты, обучение, шпаргалки и полезные ресурсы на каждую тему!
Мне этот Chrome DevTools теперь абсолютно понятен
Chrome DevTools – это не только панель для отладки, но и полноценная среда для проектирования, тестирования и анализа веб-приложений. С его помощью можно глубоко изучать DOM, стили, JavaScript, сетевые запросы, оптимизировать производительность и управлять данными пользователя.
Хорошая статья. Читайте тут ✌️
➡️ @FrontendPortal | #article
TypeHero, платформа для изучения TypeScript на практике с готовыми задачами и возможностью создания собственных задач
https://typehero.dev
➡️ @FrontendPortal | #resourse
Ищем новичков во frontend-разработке и вёрстке сайтов.
Айтилогия запускает бесплатное обучение, где будет:
1. Практика на реальном заказе ценой до 10 000₽.
2. Разбор работ куратором.
3. Задачи от Fullstack-разработчика с 12-летним опытом.
4. Именной сертификат.
И главное — ты почувствуешь уверенность.
Потому что увидишь, что выполнить заказ на frontend-проект тебе по силам.
👉 Приходи на бесплатное обучение и зови с собой друзей
🔥 С 2019 Айтилогия стабильно помогает с обучением, практикой, зарабатывать на фрилансе и проходить собеседования.
Простой способ сделать выпадающие списки более приятными – учитывать точку их появления (origin-aware).
Они должны масштабироваться от элемента-триггера. В данном случае – transform-origin: top left
По умолчанию используется значение center, и это ощущается неправильно, потому что элемент будто появляется из ниоткуда
➡️ @FrontendPortal | #tip by Emil Kowalski
Нужны красивые map-компоненты для ваших приложений?
Это отличная библиотека чистых и современных компонентов карт с нулевой конфигурацией и установкой одной командой
Некоторые возможности:
- Автоматически адаптируется под светлую и тёмную тему
- Работает из коробки, без какой-либо настройки
- Поддержка тултипов, подписей и расширенных маркеров
- Отрисовка маршрутов и путей на карте
- Идеально сочетается с современными UI-стеками, такими как shadcn
GitHub: mapcn
➡️ @FrontendPortal | #resourse
📲📲📲📲📲📲📲📲📲📲
📲📲📲📲📲📲📲📲📲📲
📲📲📲📲📲📲📲📲📲📲
Давайте поговорим об ИТ
серьезно
Когда-то клавиатуры
выглядели совсем не так,
как сейчас: без привычной
раскладки, без
функциональных клавиш и
даже без Backspace. А
JavaScript написали всего
за десять дней и
умудрились сделать его
мировым стандартом.
Такие истории не просто
забавные факты — они
помогают лучше понимать,
почему технологии
работают именно так,
какие решения стояли за
ними и как это влияет на
современные инструменты.
В МТС True Tech как раз
собирают подобные
исторические разборы, а
еще там много хардкорного
ИТ-материала и есть
жизненные мемы.
Загляните в сообщество
@truetechcommunity, там
много интересного
контента.
🖥🖥🖥🖥
Реклама. ООО "МТС Веб Сервисы".
ИНН 7707767501. Erid: 2W5zFHpsJkY
👩💻 В сеть вывалилась гигантская куча курсов и книг
Держи сотни гигабайт свежих уроков, и каждую неделю мы подкидываем ещё!
• 1612 ГБ — DevOps
• 1402 ГБ — Python
• 1300 ГБ — C, C++
• 1815 ГБ — Frontend
• 1515 ГБ — Backend
• 898 ГБ — ИБ, Хакинг
• 996 ГБ — Kotlin, Swift
• 212 ГБ — JavaScript
• 315 ГБ — Flutter
• 820 ГБ — Go, PHP
• 419 ГБ — Java, Rust
• 648 ГБ — GameDev
• 517 ГБ — Windows, Linux
• 998 ГБ — Дизайн (UX/UI)
• 617 ГБ — Нейросети (ML/RL)
• 546 ГБ — БД (SQL & NoSQL)
• 687 ГБ — Аналитика данных
• 115 ГБ — QA-тестирование
Подписывайся и не плати за то, что можно получить бесплатно
Обнаружение статуса соединения
Для отслеживания статуса подключения можно использовать navigator.online API. Это вернет логическое значение, чтобы указать, находится ли пользователь в сети.
Мы можем подписаться на офлайн- и онлайн-события, чтобы узнавать об этих конкретных изменениях
window.addEventListener('offline', (e) => {
console.log('offline');
});
window.addEventListener('online', (e) => {
console.log('online');
});
React-Grid-Layout — это система сеточного расположения, похожая на Packery или Gridster, для React
Она позволяет создавать перетаскиваемые, изменяемые по размеру и адаптивные сеточные макеты в React. Представьте себе панели управления, админ-панели, страницы аналитики или конструкторы страниц, где пользователи могут свободно перемещать и изменять размеры блоков.
Вы один раз определяете сетку, и она сама управляет перетаскиванием, изменением размеров и точками прерывания
GitHub: react-grid-layout
➡️ @FrontendPortal | #resourse
Принёс находку: sshx. Всего одна команда, и у вас в браузере открывается реплика локального терминала: можно звать коллег по ссылке, видеть курсоры друг друга и даже чатиться
Идеально для дебага, обучения или просто совместной работы. Cайт здесь, GitHub тут
➡️ @FrontendPortal
Вертикальные вкладки доступны за флагом в Chrome 145 (текущая бета)
1. Перейдите на chrome://flags/#vertical-tabs
2. Включите флаг (установите Enabled)
3. Перезапустите Chrome
4. Кликните правой кнопкой по панели вкладок и выберите “Move Tabs To The Side” (переместить вкладки вбок)
➡️ @FrontendPortal
API интернационализации (Intl) в браузерах и Node.js предоставляет множество полезных инструментов для работы с языковыми специфическими отображениями, например, с "компактной" нотацией, такой как 10K, 5M и т.д.
Вот пример, как вы можете использовать это 😎
Это особенно полезно для таких вещей, как панели управления и страницы профилей в социальных сетях.
Также этот API предлагает множество других возможностей, обязательно ознакомьтесь с полной документацией на MDN
➡️ @FrontendPortal | #js
Chrome DevTools теперь поддерживает индивидуальное ограничение скорости для отдельных сетевых запросов
Разработчики просили об этом годами! Теперь DevTools позволяет эмулировать медленное сетевое соединение не для всей страницы целиком, а только для конкретных запросов.
Это помогает тестировать, как веб-приложение работает и обрабатывает проблемы, когда отдельные ресурсы (например, изображения, скрипты или API-запросы) загружаются медленно
➡️ @FrontendPortal
Возможно, вы не знали, что можно напрямую получить значение числового input-поля как число с помощью valueAsNumber. Ручное преобразование не требуется
Свойство value у HTMLInputElement всегда возвращает строку.
Поэтому для числовых полей нам приходится вручную преобразовывать значение в число с помощью parseInt(), parseFloat(), Number() или оператора +.
Мы можем упростить это, используя valueAsNumber. Оно напрямую возвращает значение как число.
➡️ @FrontendPortal | #tip by Shripal Soni
Эта библиотека позволяет запускать полноценные 3D-физические симуляции прямо в браузере. JoltPhysics-js переносит высокопроизводительный C++ физический движок в JavaScript с помощью WebAssembly.
Проще говоря, теперь ваш сайт может симулировать гравитацию, столкновения, твёрдые тела и реалистичное движение. Полностью в браузере. Без нативных приложений. Без бэкенда. Только JS.
Что можно на нём сделать:
- Браузерные 3D-игры с настоящей физикой
- Интерактивные симуляции и демо
- Реалистичную анимацию и движение для проектов на Three.js и WebGL
Это не игрушечная физическая библиотека. Это продакшен-движок, который используется в играх и теперь работает прямо в вебе ✌️
https://github.com/jrouwe/JoltPhysics.js
➡️ @FrontendPortal | #resourse
🤵♂️Мужчина с ухоженным внешним видом выглядит увереннее — это факт.
А уверенность часто решает исход переговоров, собеседований, важных встреч.
В московской клинике Darbtur пересадкой волос занимаются врачи из элитных клиник Стамбула с опытом 1000+ процедур.
✅Каждая операция — точная работа, рассчитанная на прогнозируемый и естественный результат.
Подтвержденные результаты до и после смотрите в телеграм канале, а также на сайте.
👇Почему выбирают Darbtur:
- Современные методы пересадки волос FUE и DHI
- Пересадка проводится за 1 день
- Максимально естественный результат без следов вмешательства
🎁 До конца января на сайте Darbtur доступна запись на бесплатную консультацию.
Удобная работа с localStorage
Chrome-расширение для быстрого просмотра, редактирования и удаления данных в localStorage прямо из браузера.
Избавляет от необходимости постоянно лазить в DevTools и работать через консоль
Расширение в Chrome
➡️ @FrontendPortal | #resourse
Балансировка текста с помощью text-wrap: balance
Текст переносится так, чтобы наилучшим образом сбалансировать количество символов в каждой строке, что улучшает качество верстки и читабельность
Поддерживается только для блоков текста, содержащих ограниченное количество строк (в реализации Chromium используется до шести переносных строк), т.е. оно полезно для таких случаев, как заголовки или цитаты
h1, h2, h3, h4, h5, h6, blockquote {
text-wrap: balance;
}
С кодом у тебя всё ок.
Если что-то не работает — смотришь логи, находишь баг, фикcишь.
А с женщинами ощущение, будто:
— документации нет
— поведение недетерминированное
— один и тот же input → разный output
— вчера работало, сегодня — игнор
Ты вроде нормальный парень.
Не токсик. Не дурак. Не бедный.
По логике этого должно хватать.
Но система не сходится.
Ты общаешься — вроде без ошибок.
А в ответ холод, странные реакции или «давай как-нибудь потом».
Самое бесячее — ты не понимаешь, где именно происходит краш.
Со временем я понял простую вещь:
в отношениях и общении с женщинами другая архитектура.
Не интуиция. Не магия.
Просто другие правила, которые никто не объяснил.
В этом канале я разбираю это как систему:
что реально влияет, где ты теряешь контроль,
и как перестать действовать методом тыка.
Если ты привык дебажить, а не гадать — оставайся. Тут будет полезно: /channel/+dJDWNYUmknMwNTdi
Наш слоняра: TypeScript стал самым популярным языком на GitHub 🥳
а если ещё сложить JS и TS, то разница была бы огромной
Полный отчет GitHub за 2025 здесь
➡️ @FrontendPortal
Принес безумную коллекцию Unicode-символов
Здесь можно найти неограниченное количество символов и копировать их в форматах HTML, Unicode, Hex, JSON и не только. Есть возможность кастомизировать символ под себя и экспортировать его в формате SVG или PNG
https://symbol.so/
➡️ @FrontendPortal | #resourse