27159
Присоединяйтесь к нашему каналу и погрузитесь в мир фронтенд-разработки Связь: @devmangx РКН: https://clck.ru/3Fs3wT
Нашёл огненный опенсорс инструмент для конвертации файлов прямо в браузере.
Никакой рекламы, лимитов по размеру и заморочек — просто drag-n-drop и одна кнопка. Понимает любые популярные форматы (изображения, аудио, доки) и даже пакетную обработку тянет на отлично.
Код полностью открыт — можно развернуть у себя или сразу потыкать онлайн-демку: https://vert.sh/
➡️ @FrontendPortal | #resourse
HTML продолжает отбирать работу у JS
Теперь закрывать модалки можно прямо через HTML. Новый атрибут closedby в <dialog> управляет способом закрытия диалогов юзером
🔸closedby="none" — юзер ничего не закроет сам
🔸closedby="closerequest" — закрывается при нажатии клавиши ESC (или другого триггера закрытия)
🔸closedby="any" — модалка закрывается по клику снаружи или ESC
Выглядит бодро, но пока эксперименталочка
➡️ @FrontendPortal | #HTML
Что такое Model Context Protocol и почему о нем все говорят в AI индустрии?
29 мая в 11:00 команда KTS — IT–компания, основанная выпускниками МГТУ и создающая IT-продукты для крупного бизнеса с 2015 года, проведёт вебинар для руководителей проектов и разработчиков. Если вы работаете с ИИ или просто следите за развитием LLM — этот вебинар для вас.
Model Context Protocol — один из новых стандартов взаимодействия LLM с реальным миром, выпущенный Anthropic. MCP активно внедряется во множество инструментов, таких как: Cursor, Claude, n8n, Zed и другие. Он открывает возможности по легкому встраиванию самых разнообразных систем в LLM, превращая языковые модели в "многоруких помощников", не прибегая даже зачастую к программированию.
Что будет на вебинаре?
✅ Проведем экскурс в function/tool calling в LLM - как языковые модели могут оперировать фактами из реального мира
✅ Расскажем о появлении Model Context Protocol (MCP): что дает новый протокол?
✅ Продемонстрируем архитектуру взаимодействия MCP-серверов и клиентов
✅ Покажем практические примеры использования в Claude Desktop, Cursor, n8n
✅ Объясним, как написать свой собственный MCP-сервер (Python SDK, Node.js SDK) и интегрировать в свои процессы
Также на вебинаре поговорим о том, как собрать MCP-сервер без кода на n8n, где искать существующие MCP-серверы, что существует кроме MCP?
Если вы хотите понять, куда движется интеграция ИИ, и как использовать это в своих продуктах или проектах — приходите.
❗️Регистрация на вебинар не требуется! Просто переходите в канал и следите за обновлениями.
Реклама. ООО "Студия КТС", ИНН: 7733257480, erid: 2VtzqwWP3C8
Chrome Dev Tools Tip: Сохраняйте и выполняйте кодовые сниппеты
Иногда нам нужно выполнять один и тот же JS-код на разных страницах. Например, чтобы получить URL-адреса превью видео с Vimeo или извлечь различные данные, связанные с производительностью страницы, и т.д.
В таких случаях мы можем один раз создать пользовательский сниппет в Chrome DevTools и запускать его на любой странице
➡️ @FrontendPortal | #tip by Shripal Soni
😤 Ты вроде уже мидл — но на собеседованиях чувствуешь себя как джун?
— Не знаешь, что говорить, когда спрашивают про опыт
— Боишься уйти в новый проект, потому что не потянешь
— Сыплешься на первом же этапе, хотя вроде умеешь работать
Значит, тебе нужна эта статья.
В ней:
— Как реально устроен процесс найма
— Почему мидлы с опытом проваливаются на собесах
— Как презентовать себя, чтобы получать офферы на 200–250k
— И как спокойно пройти испытательный срок и не вылететь на 3-й неделе
Я — CTO с 13-летним опытом. Собеседовал десятки разработчиков.
Знаю, что хочет услышать работодатель.
Знаю, почему “хороших” не берут.
И написал статью, чтобы ты не повторял чужие ошибки.
Если хочешь двигаться по карьерной лестнице и расти регулярно в зарплате — подпишись на канал и забери статью в закрепе.
t.me/money_career канал для тех, кто ищет деньги в it
Вы когда-нибудь сталкивались с тем, что элемент с width: 100% и margin вылезает за пределы родителя?
С этим трюком больше не придётся ломать голову.
CSS считает ширину до границы элемента — то есть включает контент, padding и border.
А вот margin сверху — это уже «снаружи», и тут начинаются проблемы.
Хотите, чтобы элемент имел margin и при этом полностью помещался внутри родителя?
Можно попробовать подключить математику и использовать что-то вроде calc(100% - 40px), но с ключевым словом stretch для свойства width CSS сделает это автоматически
➡️ @FrontendPortal | #CSS
Mantine – популярная опенсорс либа React-компонентов для создания стильных и адаптивных веб-приложений
Помимо набора из 120+ настраиваемых компонентов, библиотека предоставляет 70+ полезныx хуков для расширения функциональности фронтенда
https://ui.mantine.dev/
➡️ @FrontendPortal | #resourse
DevTools прямо в мобильном браузере — Eruda
Это лёгкий плагин, который встраивает devtools в мобильный браузер двумя строчками кода. Позволяет подключить консоль, проверить какие запросы отправляются, запускать JS-код, чекнуть FPS и Memory и т.п.
https://github.com/liriliri/eruda
➡️ @FrontendPortal | #resourse
Ищем новичков во фронтенд-разработке и вёрстке сайтов.
Хотим показать, как получить реальный опыт в разработке сайтов и веб-приложений.
А именно:
- Сверстать веб-сайт на HTML + CSS;
- Реализовать функционал на JavaScript;
- Пощупать фронтенд-фреймворк Angular;
- Подключить Backend и загрузить сайт на хостинг.
Чтобы в итоге ты своими руками разработал качественный сайт, который не стыдно добавить в портфолио или продать.
Такой опыт можно получить на бесплатном практикуме уже завтра с поддержкой от опытных кураторов на каждом этапе.
👉 Приходи на бесплатное обучение и зови с собой друзей
Бонусом получишь гайд для поиска работы и заказов на фронтенд-разработку.
react-google-maps
Библиотека, которая позволяет легко встраивать Google Maps в ваши React-приложения, используя компоненты и хуки
Чтобы начать, достаточно установить пакет:
npm install @vis.gl/react-google-maps
APIProvider, передаём свой API-ключ, и можно творить магию с картами.import { AdvancedMarker, APIProvider, Map } from '@vis.gl/react-google-maps';
function App() {
const position = { lat: 53.54992, lng: 10.00678 };
return (
<APIProvider apiKey={'ВАШ_API_КЛЮЧ'}>
<Map defaultCenter={position} defaultZoom={10} mapId="DEMO_MAP_ID">
<AdvancedMarker position={position} />
</Map>
</APIProvider>
);
}
export default App;useMapsLibrary() для подгрузки дополнительных библиотек, если нужно что-то посложнее, типа геокодинга или маршрутизации
Новые возможности CSS для плавной анимации входа и выхода
Если вы когда-либо работали с добавлением и удалением элементов из DOM, вы знаете, насколько сложно реализовать плавные переходы. Больше — нет
Относительное новое CSS свойство transition-behavior указывает, будут ли запускаться переходы для анимаций, поведение которых является дискретным
Значение transition-behavior может быть включено как часть сокращенного transition объявления:
transition: all 0.35s allow-discrete;
starting-style, которое определяет начальное состояние анимации при появлении элемента на странице. Подробнее про него рассказывал тут: пост
🔥 Ты хочешь пройти собеседование и не облажаться?
А может, ты уже middle, но на собесах сыпешься на простых вопросах?
Тогда добро пожаловать в канал, где:
⚔️ Я каждый день прохожу собеседования сам
🔍 Публикую реальные вопросы, которые задают прямо сейчас
🧠 Показываю, как на них правильно отвечать
📉 Разбираю типичные ошибки — свои и чужие
📈 Даю фреймы, шпаргалки и схемы, которые реально помогают пройти отбор
Я прошёл путь от джуна на jQuery до основателя команды из 12 разработчиков и собеседователя.
📍 Если ты хочешь устроиться в нормальную компанию,
📍 Если ты хочешь зарабатывать достойно,
📍 Если ты не хочешь тупить на собесе —
👇 Подписывайся прямо сейчас
/channel/itprizrak — Канал, где ты станешь сильнее
Интерактивная библиотека визуализации данных — ECharts
Позволяет добавлять интуитивно понятные, интерактивные и настраиваемые диаграммы в проект.
🔸Предоставляет более 20 типов диаграмм
🔸Переключение между рендерингом Canvas и SVG
🔸Автоматически генерируемые описания диаграмм
🔸Написана на чистом JavaScript
https://echarts.apache.org/en/index.html
➡️ @FrontendPortal | #resourse
Вот полезный совет по TypeScript:
Используйте шаблонные строковые литералы, чтобы убедиться, что ваши заголовки Authorization правильно отформатированы
➡️ @FrontendPortal | #tip by Matt Pocock
Друзья, привет! 👋
Хочу посоветовать вам очень полезный Telegram-канал — That's IT. Его ведёт Сергей — тимлид с 11-летним опытом, который сам внедряет ИИ в продукты, делится тем, что работает на практике, и помогает другим зарабатывать с помощью ИИ.
На канале Сергея вы найдёте:
— Чёткие инструкции по работе с нейросетями
— Подборки лучших инструментов для автоматизации и креатива
— Бесплатные гайды и видеоуроки
— Реальные кейсы внедрения ИИ, которые дают результат
Никакой воды — только практический опыт и контент, который можно применить прямо сегодня. Сергей ежедневно помогает своим клиентам автоматизировать процессы с помощью ИИ, и делится этими фишками с подписчиками.
Если вы хотите быть в теме и использовать нейросети с умом — обязательно загляните 👇
That's IT | Сергей Фролов
Мне нужно сделать статическую лендинговую страницу. Установлю React, Angular, Vue, использую микро-фронтенды, микросервисы и выполню npm install ещё для 1500 зависимостей.
➡️ @FrontendPortal | #memes
Веб-приложение с кучей полезных штук для разработчиков — 12 инструментов в одном месте
Генератор треугольников, теней, градиентов. Cжатие SVG, конвертер SVG → JSX, демо курсоров и многое-многое другое
Опенсорс. Быстро. Удобно.
Сохраняем и пользуемся как швейцарским ножом: https://omatsuri.app/
➡️ @FrontendPortal | #resourse
Наконец-то нормальные гайды по CSS 😁Vibe coding -> Ride coding.
➡️ @FrontendPortal
LazyBrush
Это опенсорс JS-библиотека для рисования плавных кривых и прямых линий с помощью мыши, пальца или любого poniting устройства
https://github.com/dulnan/lazy-brush
➡️ @FrontendPortal | #resourse
👩💻 Всем программистам посвящается!
Вот 17 авторских обучающих IT каналов по самым востребованным областям программирования:
Выбирай своё направление:
👩💻 Frontend — t.me/frontend_ready
📱 JavaScript — t.me/javascript_ready
👩💻 Backend — t.me/backend_ready
📱 GitHub — t.me/github_ready
👩💻 Python — t.me/python_ready
👩💻 Java — t.me/java_ready
👩💻 Всё IT — t.me/it_ready
🖥 Базы Данных & SQL — t.me/sql_ready
👩💻 C/C++ — /channel/cpp_ready
👩💻 C# & Unity — t.me/csharp_ready
🖼️ DevOps — t.me/devops_ready
🤔 Хакинг & ИБ — t.me/hacking_ready
👩💻 Linux — t.me/linux_ready
👩💻 Bash & Shell — t.me/bash_ready
👩💻 Нейросети — t.me/neuro_ready
📖 IT Книги — t.me/books_ready
🖥 Design — t.me/design_ready
📌 Гайды, шпаргалки, задачи, ресурсы и фишки для каждого языка программирования!
Знаете ли вы, что это можно реализовать вообще без JS
Селектор :has() в CSS открывает по-настоящему уникальную функциональность, которая раньше была невозможна.
Вы можете использовать чекбокс в любой части страницы, чтобы управлять стилями элемента в совершенно другом месте. Как вам такое? 🤩
➡️ @FrontendPortal | #CSS
Слышали когда-нибудь о поисковой системе для цветов? 🌈
Этот веб-сайт позволяет находить цветовые идеи по ключевым словам
Быстро, удобно, и чертовски полезно, когда нужно накидать палитру для UI или любого визуала
https://picular.co/
➡️ @FrontendPortal | #resourse
Быстрый совет по VS Code
Используй сочетание клавиш Ctrl + Shift + F, чтобы быстро выполнить поиск по всем файлам проекта
Очень удобно для нахождения нужных фрагментов кода без открытия каждого файла
➡️ @FrontendPortal | #tip
Обнаружение статуса соединения
Для отслеживания статуса подключения можно использовать navigator.online API. Это вернет логическое значение, чтобы указать, находится ли пользователь в сети.
Мы можем подписаться на офлайн- и онлайн-события, чтобы узнавать об этих конкретных изменениях
window.addEventListener('offline', (e) => {
console.log('offline');
});
window.addEventListener('online', (e) => {
console.log('online');
});
Не просто кнопка "Загрузить": Секреты работы с файлами в React
🎓 19 мая в 20:00 — бесплатный вебинар для разработчиков, которые хотят делать удобную и безопасную загрузку файлов в React-приложениях.
Что покажем:
— Drag & Drop, предпросмотр, валидация — всё, что ждали от UX;
— Обработка PDF, Excel и изображений прямо в браузере;
— Как не «положить» интерфейс при загрузке тяжёлых файлов;
— Защита от XSS, проверка MIME-типов и другие нюансы безопасности.
📌 Для фронтендеров и fullstack-разработчиков, которым важна клиентская оптимизация.
В программе — реальные примеры кода, которые можно сразу использовать.
Урок пройдет в преддверии старта курса «React.js Developer». Каждый участник вебинара получит скидку на обучение.
Регистрация: https://otus.pw/DhHq/
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576
Совет по CSS: аккуратнее с vh
На мобилках 100vh не учитывает исчезающие тулбары
Решение — dvh: он всегда подстраивается под фактическую высоту окна. Так ваш дизайн использует всё доступное пространство, избегает обрезки и улучшает UX
➡️ @FrontendPortal | #tip
Сегодня день рождения CSS2 💃
12 мая 1998 года W3C выкатил официальные рекомендации по спецификации CSS2.
Тогда в стандарт завезли фичи вроде абсолютного, относительного и фиксированного позиционирования элементов — и многое другое.
➡️ @FrontendPortal
Там в VSCode подъехала обнова. Одна из годных фич — автогенерация alt для картинок
Навёлся на тег с картинкой → Ctrl + . или лампочка → готово.
Поддерживаются HTML и Markdown.
Пользуйтесь ✌️
➡️ @FrontendPortal
Нашёл для вас крутейший интерактивный курс по Git прямо в VS Code — GitByBit
Это тренажёр, где ты учишься Git через практику: 48 уроков по 5-10 минут каждый
Есть классная фишка — "Гитопедия", где собираешь знания по ходу обучения. Плюс квизы, чтобы всё усвоить
Всем, кто хочет научиться гиту с нуля, рекомендую заценить ✌️
➡️ @FrontendPortal | #resourse