27159
Присоединяйтесь к нашему каналу и погрузитесь в мир фронтенд-разработки Связь: @devmangx РКН: https://clck.ru/3Fs3wT
Math.random() пора на пенсию
В JavaScript появилась новая предложенная возможность — добавить пространство имён Random в язык
Это новый глобальный объект Random с более чем 20 методами для работы со случайностью в JS — включая перемешивание, выборку, взвешенный выбор, генераторы с сидом и т. д.
Предложение на днях достигло 1 этапа в TC39: https://github.com/tc39/proposal-random-functions
➡️ @FrontendPortal
Вышел Angular v20
‣ Стабилизация API реактивности и инкрементальной гидратации
‣ Интеграция с Chrome DevTools
‣ Улучшенная проверка типов, упрощённый гайд по стилю и другое
‣ RFC на официального маскота Angular
‣ И многое другое
Подробнее: https://goo.gle/angular-v20-blog
➡️ @FrontendPortal
Наткнулся на полезняшку для тех, кто не любит тащить весь репозиторий ради пары файлов — GitZip
Расширение для браузера, которое позволяет скачивать отдельные файлы или папки из любого GitHub-репо
Доступно в Chrome, Edge и Firefox
➡️ @FrontendPortal | #resourse
Мультиколонки
Основная идея мультиколонок заключается в том, что вы можете взять фрагмент содержимого и поместить его в несколько колонок, как в газете
.article {
// Шорткат columns даёт возможность указать значения для свойств column-count и column-width одновременно, задав количество и ширину колонок
columns: 2 200px;
column-gap: 25px;
}
.title{
// Свойство column-span позволяет элементу растянуться на несколько колонок
column-span: all;
}
4 часа нетворка и супер полезных докладов для фронтендеров… Звучит, как идеальный вечер вторник🚀
Приходите 3 июня на Frontend meetup, который пройдёт в московском офисе Авито. Обещают доклады про:
- внедрение Suspense SSR Architecture в проекты на React;
- генерацию реактивных моделей из GraphQL-схем;
- интеграцию зависимостей (DI) через библиотеку tsyringe;
- а вот эту тему раскрыть не можем! Всё узнаете 3 июня оффлайн.
Только не забудьте зарегистрироваться по ссылке.
Это реально одна из самых впечатляющих штук, сделанных для веба
Знакомьтесь — Horizon Drive, браузерная игра от команды Shopify. Под капотом чистый JS, Three.js и React Three Fiber
Вы не поверите (и проверите), но это жутко залипательно 😳
➡️ @FrontendPortal
TypeScript теперь работает на Go
Команда TS выкатила предварительную нативную версию компилятора на Go для тестирования
Ускорение впечатляющее — до 10x на реальных проектах. Например, в кодовой базе Sentry (~1,5 млн строк) время проверки типов снизилось с 55 до 6,8 секунд.
Чтобы попробовать новую версию, установите её отдельно: npm install -D @typescript/native-preview. После этого используйте tsgo вместо привычного tsc. Когда выйдет полноценный релиз (TypeScript 7), tsc и станет той самой Go-версией. Пока, для удобства тестирования, это отдельный бинарник
Плюс расширение в VS Code: “TypeScript (Native Preview)”. После установки его нужно вручную включить через палитру команд: TypeScript Native Preview: Enable (Experimental)
@IT_Portal
Друзья, привет! 👋
Хочу посоветовать вам очень полезный 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
Ещё одна свежая фича в Chrome DevTools — с помощью Gemini (это ИИ-моделька гугла) можно править CSS прямо в Elements и сразу сохранять изменения в исходники
Никакого копипаста между браузером и редактором. Внес правку — она тут же в проекте. Плюс — можно тестить на лету
Годнота 👍
➡️ @FrontendPortal
Chrome 137 подъехал. В CSS добавили функцию if. Да-да, условные конструкции прямо в стилях 😧
Ещё из интересного — завезли reading-flow и reading-order. Теперь можно управлять таб-навигацией в flex и grid без костылей. Это решает старую проблему в макетах, когда порядок фокуса может не совпадать с визуальным расположением элементов
Плюс WebAssembly теперь понимает промисы через API JSPI
Мелкие ништяки: изоляция Blob URL по storage key, добавлена поддержка offset-path: shape() и float-пикселей в Canvas
Подробнее: https://developer.chrome.com/blog/new-in-chrome-137
➡️ @FrontendPortal
😄 Как связать браузер и локальное оборудование? Какие архитектурные компромиссы нужно учитывать, чтобы по клику в веб-интерфейсе запускалось приложение на «железе» пользователя, а результаты шли обратно на сервер?
На эти вопросы в своей новой статье уже ответил наш эксперт Зураб Гостохов! В ней ты найдёшь не только теорию, но и практику — с кодом, схемами реализации, нюансами развёртывания и регистрации приложений, а также советами по дальнейшему развитию архитектуры 🔥
Реклама. АО "НСПК". ИНН 7706812159. erid: 2W5zFJKTVw6
Проблема: Вам нужно объявить типы в обычных .js файлах.
Решение: Используйте комментарии JSDoc.
Вот как это сделать.
➡️ @FrontendPortal | #tip
Новая фишка в Chrome DevTools — теперь можно аннотировать перформанс-трейсы с помощью Gemini
Разрабы из Google прикрутили ИИ прямо в инструменты производительности: кликаешь два раза по ивенту в Main-треке, жмёшь «Generate label», и Gemini на основе стека вызовов и контекста подсказывает, что там вообще происходит
Фича полезная, особенно для глубокого разбора. Стоит попробовать ✌️
Работает с версии Chrome 137
➡️ @FrontendPortal | #tip
10 полезных апдейтов в вебе с Google I/O 2025
На свежей конференции Google I/O 2025 Google напомнили о пачке свежих фич
1. CSS-карусели без JS — scroll buttons и scroll markers в Chrome 135
2. Interest Invoker API: декларативные поповеры и тултипы
3. Несколько встроенных AI API на базе моделей вроде Gemini Nano теперь поддерживают мультимодальность в Prompt API
4. Клиентский AI теперь работает в связке с Firebase и Gemini Developer API для гибридных решений
5. AI в DevTools — Gemini подскажет, что не так со стилями, производительностью, сетью и исходниками. И может прям в Elements применять фиксы.
6. Апгрейд DevTools Performance: теперь там сразу Core Web Vitals (локальные и от реальных пользователей), встроенный Lighthouse и подсказки от Gemini
7. Baseline интегрирован в VSCode и ESLint — сразу видишь, какие фичи доступны в браузерах.
8. Полный обзор поддержки веб-функций в Web Platform Dashboard
9. Тестовая версия упрощённого входа с Credential Manager
10. Отмена отправки Chrome Extensions — быстрее фиксим и переотправляем.
Нашёл огненный опенсорс инструмент для конвертации файлов прямо в браузере.
Никакой рекламы, лимитов по размеру и заморочек — просто 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