TypeScript 7 официально вышел 😨
Главное: это не просто очередной релиз, а полностью переработанная версия компилятора и language server
TypeScript 7 портировали на нативный код с поддержкой параллельного выполнения, за счёт чего он может работать до 10 раз быстрее на многих проектах.
Что изменилось:
Все привычные фичи редактора остались на месте: автоимпорты, Find All References, hover-подсказки, inlay hints, code lenses, linked editing, семантическая подсветка, сортировка импортов и многое другое.
Просто теперь это работает заметно быстрее.
Также появились экспериментальные флаги для параллелизма:
управляет количеством воркеров для тайпчекинга,
управляет параллельными сборками проектов.
Для тех, кому всё ещё нужен API TypeScript 6, появился отдельный пакет:
Он ставится рядом с TypeScript 7 и даёт отдельный бинарник
Установить TypeScript 7 можно так:
А запускать, как обычно:
Короче, TypeScript 7 – это большой шаг в сторону более быстрого, стабильного и приятного девелопер экспириенса, особенно на больших кодовых базах и в командах, где каждая задержка в CI и редакторе реально чувствуется.
https://devblogs.microsoft.com/typescript/announcing-typescript-7-0/
➡️ @FrontendPortal
Главное: это не просто очередной релиз, а полностью переработанная версия компилятора и language server
TypeScript 7 портировали на нативный код с поддержкой параллельного выполнения, за счёт чего он может работать до 10 раз быстрее на многих проектах.
Что изменилось:
— быстрее компиляция и тайпчекинг;
— меньше потребление памяти;
— меньше крашей в редакторе;
— быстрее CI;
— отзывчивее VS Code, Visual Studio и другие IDE;
— официальная поддержка LSP;
— новый --watch-режим на базе Go-порта watcher’а из Parcel;
— автоматическое освобождение неиспользуемого состояния тайпчекера после простоя.
Все привычные фичи редактора остались на месте: автоимпорты, Find All References, hover-подсказки, inlay hints, code lenses, linked editing, семантическая подсветка, сортировка импортов и многое другое.
Просто теперь это работает заметно быстрее.
Также появились экспериментальные флаги для параллелизма:
--checkers
управляет количеством воркеров для тайпчекинга,
--builders
управляет параллельными сборками проектов.
Для тех, кому всё ещё нужен API TypeScript 6, появился отдельный пакет:
@typescript/typescript6
Он ставится рядом с TypeScript 7 и даёт отдельный бинарник
tsc6, без конфликтов с обычным tsc.Установить TypeScript 7 можно так:
npm install -D typescript@7
А запускать, как обычно:
npx tsc
Короче, TypeScript 7 – это большой шаг в сторону более быстрого, стабильного и приятного девелопер экспириенса, особенно на больших кодовых базах и в командах, где каждая задержка в CI и редакторе реально чувствуется.
https://devblogs.microsoft.com/typescript/announcing-typescript-7-0/
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤42🔥18👍9😁1🥱1
This media is not supported in your browser
VIEW IN TELEGRAM
Когда вы применяете
Вместо этого используйте эту формулу для расчета внешнего радиуса: внутренний радиус + padding
Можно использовать кастомные свойства, чтобы определить радиус вложенности элементов
➡️ @FrontendPortal | #CSS
border-radius для двух вложенных элементов, может возникнуть соблазн применить одно и то же значение, но это не самый приятный с визуальной точки зрения вариант!Вместо этого используйте эту формулу для расчета внешнего радиуса: внутренний радиус + padding
Можно использовать кастомные свойства, чтобы определить радиус вложенности элементов
.parent {
--nested-radius: calc(var(--radius) - var(--padding));
}
.nested {
border-radius: var(--nested-radius);
}Please open Telegram to view this post
VIEW IN TELEGRAM
❤34👍5👨💻4🤝1
Please open Telegram to view this post
VIEW IN TELEGRAM
😁78❤3🔥2👍1
Media is too big
VIEW IN TELEGRAM
Ребят, тут Авито регистрацию на свой первый CTF открыл с призами до 300 000 рублей на команду 📍
AvitoTech устраивает CTF онлайн с денежным призовым фондом, мерчем и интересными тасками!
Регистрация команд уже открыта по ссылке, а ниже собрали инфу, что предстоит делать во время HoneyBadger CTF AvitoTech.
Возьмите на себя роль медоеда, проверьте защиту пчелиного улья и найдите все скрытые уязвимости в сотах.
Чего ждать от турнира: тасков на веб-уязвимости, инфраструктурных мисконфигов, анализа скомпилированного кода, расследования инцидентов, слабостей шифров, всего, что требует хакерской смекалки. И розыгрыша мерча, помимо основного призового фонда.
Важно: CTF не только для спецов по кибербезопасности — есть отдельная лига для всех, кто любит разбираться, как устроены IT-системы🐝
AvitoTech устраивает CTF онлайн с денежным призовым фондом, мерчем и интересными тасками!
Регистрация команд уже открыта по ссылке, а ниже собрали инфу, что предстоит делать во время HoneyBadger CTF AvitoTech.
Возьмите на себя роль медоеда, проверьте защиту пчелиного улья и найдите все скрытые уязвимости в сотах.
Чего ждать от турнира: тасков на веб-уязвимости, инфраструктурных мисконфигов, анализа скомпилированного кода, расследования инцидентов, слабостей шифров, всего, что требует хакерской смекалки. И розыгрыша мерча, помимо основного призового фонда.
Важно: CTF не только для спецов по кибербезопасности — есть отдельная лига для всех, кто любит разбираться, как устроены IT-системы
Please open Telegram to view this post
VIEW IN TELEGRAM
🥱4🔥2❤1
This media is not supported in your browser
VIEW IN TELEGRAM
Откопал годное расширение, которое позволяет запускать модели Ollama, такие как DeepSeek, Llama и Qwen, прямо внутри GitHub Copilot Chat 👍
→ использование локальных AI-моделей в VS Code
→ поддержка tools, MCP и vision
→ AI-автодополнение кода прямо в редакторе
→ переключение между моделями без выхода из редактора
По сути, это превращает Copilot Chat в локальную AI-песочницу
➡️ @FrontendPortal
→ использование локальных AI-моделей в VS Code
→ поддержка tools, MCP и vision
→ AI-автодополнение кода прямо в редакторе
→ переключение между моделями без выхода из редактора
По сути, это превращает Copilot Chat в локальную AI-песочницу
Please open Telegram to view this post
VIEW IN TELEGRAM
❤12👍5
This media is not supported in your browser
VIEW IN TELEGRAM
В этой опенсорсной коллекции собраны одни из самых крутых эффектов переключения темы, которые я когда-либо видел
Представьте, как они будут смотреться в ваших приложениях или на сайтах. Пользователи точно скажут: "Вау!"😳
github.com/rudrodip/theme-toggle-effect
➡️ @FrontendPortal
Представьте, как они будут смотреться в ваших приложениях или на сайтах. Пользователи точно скажут: "Вау!"
github.com/rudrodip/theme-toggle-effect
Please open Telegram to view this post
VIEW IN TELEGRAM
❤20🥱11👍5
16 июля встречаемся с JS‑сообществом SberProfi в Сбер.Среде.
AI уже меняет JavaScript‑разработку. Вопрос не в том, заменит ли он инженеров, а в том, кто освоит его быстрее и качественнее.
🔥 Обсудим изменения на реальных кейсах от Сбера, Cloud․ru и Mish. Очные участники увидят спецформат от блогеров и пообщаются с экспертами GigaCode и GitVerse.
⏳ Начало в 17:00, встреча очных гостей - в 16:00.
Количество очных мест ограничено – успейте зарегистрироваться!
AI уже меняет JavaScript‑разработку. Вопрос не в том, заменит ли он инженеров, а в том, кто освоит его быстрее и качественнее.
⏳ Начало в 17:00, встреча очных гостей - в 16:00.
Количество очных мест ограничено – успейте зарегистрироваться!
Please open Telegram to view this post
VIEW IN TELEGRAM
🥱7❤5👍2🔥1😁1
Поддержка TypeScript 7 в Next.js
Коротко:
Теперь в
Подробнее:
Вышел TypeScript 7 с
В текущем релизе намеренно отсутствует JavaScript API. Его планируют выпустить в TypeScript 7.1.
К сожалению, из-за этого TypeScript 7 в нынешнем виде ломает интеграцию с фреймворками, которые взаимодействуют с TypeScript через JS API.
Next.js использует JS API, чтобы запускать TypeScript во время выполнения
Чтобы добавить поддержку TypeScript 7 без JS API, пришлось изменить способ запуска TypeScript: теперь вместо API напрямую используется установленная команда
Это поведение доступно через экспериментальную опцию:
Изменение вошло в превью-релиз Next.js 16.3.
Установить его можно командой:
➡️ @FrontendPortal
Коротко:
Теперь в
next@preview можно включить опцию experimental.useTypeScriptCli, чтобы использовать TypeScript 7.Подробнее:
Вышел TypeScript 7 с
ts-go - прирост скорости действительно впечатляет!В текущем релизе намеренно отсутствует JavaScript API. Его планируют выпустить в TypeScript 7.1.
К сожалению, из-за этого TypeScript 7 в нынешнем виде ломает интеграцию с фреймворками, которые взаимодействуют с TypeScript через JS API.
Next.js использует JS API, чтобы запускать TypeScript во время выполнения
next build, а также дополнительно форматирует вывод, чтобы логи выглядели единообразно с остальными этапами сборки.Чтобы добавить поддержку TypeScript 7 без JS API, пришлось изменить способ запуска TypeScript: теперь вместо API напрямую используется установленная команда
tsc.Это поведение доступно через экспериментальную опцию:
experimental.useTypeScriptCliИзменение вошло в превью-релиз Next.js 16.3.
Установить его можно командой:
npm install next@previewPlease open Telegram to view this post
VIEW IN TELEGRAM
❤9👍6😁2
This media is not supported in your browser
VIEW IN TELEGRAM
Meta выложила в опенсорс свою внутреннюю дизайн-систему — Astryx
Её используют внутри Meta уже более 8 лет, и на ней работают 13 000+ внутренних приложений.
→ 150+ доступных UI-компонентов
→ 7 встроенных брендовых скинов
→ кастомизируемые темы
→ рассчитана как на разработчиков, так и на ИИ кодинг-агентов
https://astryx.atmeta.com/
➡️ @FrontendPortal
Её используют внутри Meta уже более 8 лет, и на ней работают 13 000+ внутренних приложений.
→ 150+ доступных UI-компонентов
→ 7 встроенных брендовых скинов
→ кастомизируемые темы
→ рассчитана как на разработчиков, так и на ИИ кодинг-агентов
https://astryx.atmeta.com/
Please open Telegram to view this post
VIEW IN TELEGRAM
👍17🔥6❤4🤯3
This media is not supported in your browser
VIEW IN TELEGRAM
Полезный AI-скилл для React-разработчиков
Установка:
Может быть полезен тем, кто использует ИИ при разработке React-приложений и хочет автоматизировать проверку качества кода
➡️ @FrontendPortal
/improve-react от Aiden Bai использует React Doctor для анализа React-кодовой базы. Инструмент помогает находить проблемные паттерны, классифицировать найденные замечания и исправлять их с помощью ИИ.Установка:
npx skills add http://github.com/aidenybai/react-doctor --skill improve-reactМожет быть полезен тем, кто использует ИИ при разработке React-приложений и хочет автоматизировать проверку качества кода
Please open Telegram to view this post
VIEW IN TELEGRAM
❤14🥱7👍3
This media is not supported in your browser
VIEW IN TELEGRAM
Делаешь сайты на фрилансе? А теперь представь: весь путь от ТЗ до сдачи проекта — на одной платформе
Poehali.dev превращает текстовое описание в готовый продукт: сайт, лендинг или приложение — с бэкендом и публикацией на домен. Вёрстку, картинки, деплой берёт на себя ИИ-агент. Ты же контролируешь и правишь, где нужно.
Итог: типовой лендинг — за вечер. Остальное время на новые заказы или сложные проекты с высоким чеком.
Внутри:
• фичи для фрилансеров — свои шаблоны, передача проекта и чат с заказчиком
• шаблоны и расширения — чтобы создавать быстро, а не с нуля
• хостинг — встроенные бэкенд и база данных создают не просто картинку, а рабочий сайт с мгновенной публикацией на твой домен
• ИИ-агент — сам планирует, пишет и запускает, а не просто даёт ответ
Работает на русском и без VPN. Подходит для лендингов курсов, портфолио и продуктовых страниц: выполняй проекты быстрее — зарабатывай больше.
👉 Попробовать бесплатно
По промокоду [
Poehali.dev превращает текстовое описание в готовый продукт: сайт, лендинг или приложение — с бэкендом и публикацией на домен. Вёрстку, картинки, деплой берёт на себя ИИ-агент. Ты же контролируешь и правишь, где нужно.
Итог: типовой лендинг — за вечер. Остальное время на новые заказы или сложные проекты с высоким чеком.
Внутри:
• фичи для фрилансеров — свои шаблоны, передача проекта и чат с заказчиком
• шаблоны и расширения — чтобы создавать быстро, а не с нуля
• хостинг — встроенные бэкенд и база данных создают не просто картинку, а рабочий сайт с мгновенной публикацией на твой домен
• ИИ-агент — сам планирует, пишет и запускает, а не просто даёт ответ
Работает на русском и без VPN. Подходит для лендингов курсов, портфолио и продуктовых страниц: выполняй проекты быстрее — зарабатывай больше.
👉 Попробовать бесплатно
По промокоду [
LAND1T ] первый лендинг в подарок. Успей до 31.07.🥱15❤5😁4🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
Хотите убрать эффект "резиновой" прокрутки в веб-приложении? Достаточно добавить всего одну строку CSS:
Свойство
➡️ @FrontendPortal
html,
body {
overscroll-behavior-y: none;
}
Свойство
overscroll-behavior-y: none отключает вертикальный bounce-эффект при достижении верхней или нижней границы страницы, делая поведение веб-приложения более нативным и предсказуемым, особенно на мобильных устройствах.Please open Telegram to view this post
VIEW IN TELEGRAM
👍44❤15🔥2
NAITION AI: Спрос на разработку с ИИ-агентами вырос в сотни раз за год. Свежий Stanford AI Index 2026 показал, что навык AI Agents стал №1 среди самых востребованных инженерных скиллов.
Рынок можно догнать!
Naition запускает новый, обновленный в июле поток буткемпа по AI-driven разработке уже 21 июля.
Максимум пользы получат middle+ разработчики и команды, нацеленные на апгрейд производительности инженерного процесса.
IT-специалисты других профессий тоже могут себя попробовать.
За 12 недель вы встроите ИИ во все процессы:
Формат: 17 уроков, 5 модулей, живые вечерние эфиры + практика между ними. Минимум теории, максимум разборов кейсов и групповой практики прямо на вебинаре.
👉 Забронировать место — naition.ai
А по промокоду FRONTEND PORTAL для подписчиков — скидка 20% до 17 июля.
• Упоминания «Agentic systems» в вакансиях за год выросли на 10854% (!) — это не опечатка.
• «AI agents» — +2113%.
• Вывод простой: компаниям массово нужны не «написатели кода», а архитекторы мультиагентных систем.Главный скилл в 2026 году — строить долгоживущие автономные процессы, управлять контекстом и верифицировать работу десятков агентов.
Рынок можно догнать!
Naition запускает новый, обновленный в июле поток буткемпа по AI-driven разработке уже 21 июля.
Максимум пользы получат middle+ разработчики и команды, нацеленные на апгрейд производительности инженерного процесса.
IT-специалисты других профессий тоже могут себя попробовать.
За 12 недель вы встроите ИИ во все процессы:
• Соберёте своё ядро — MCP под задачи, RAG, мультиагентную систему с сабагентами и оркестрацией.
• Внедрите агентов в кодовые базы на 100К+ строк — автоматизируете индексацию кода, рефакторинг и изменение архитектуры.
• Научитесь масштабировать AI-практики на всю команду.
Ведут практики с 15-20 годами опыта: ex-Yandex Cloud, staff-инженер Google, CEO Symbioway (центр по найму разработчиков) — люди из эпицентра трансформации рынка.
Формат: 17 уроков, 5 модулей, живые вечерние эфиры + практика между ними. Минимум теории, максимум разборов кейсов и групповой практики прямо на вебинаре.
👉 Забронировать место — naition.ai
А по промокоду FRONTEND PORTAL для подписчиков — скидка 20% до 17 июля.
Что ещё стоит знать:
• Приведёте друга или коллегу — вы вместе получите доп. скидку 10% сверху (в сумме 30%).
• Можно оплатить частями, а начать даже с одного модуля.
• Если вы бизнес, можно прокачать всю команду разом.
🤣11🥱6
This media is not supported in your browser
VIEW IN TELEGRAM
Совет по Chrome Dev Tools
Элементы, которые исчезают при потере фокуса, сложно отлаживать, потому что когда мы пытаемся их инспектировать через dev tools, страница теряет фокус, и такие элементы исчезают
Мы можем избежать этого и инспектировать такие элементы, используя опцию "Emulate a focused page" в панели Styles вкладки Elements
➡️ @FrontendPortal | #tip by Shripal Soni
Элементы, которые исчезают при потере фокуса, сложно отлаживать, потому что когда мы пытаемся их инспектировать через dev tools, страница теряет фокус, и такие элементы исчезают
Мы можем избежать этого и инспектировать такие элементы, используя опцию "Emulate a focused page" в панели Styles вкладки Elements
Please open Telegram to view this post
VIEW IN TELEGRAM
👍54🔥11❤4🏆3🤯1
Вышел ReactBench - открытый бенчмарк для оценки ИИ-агентов на реальных задачах с React
Даже если модель успешно проходит тесты, это не означает, что её код готов к продакшену. В ходе тестирования все модели допускали типичные React-проблемы: лишние
Основные результаты:
Проект открыт для контрибьюций:
https://github.com/millionco/reactbench
Подробнее: https://reactbench.com
Блог: https://www.reactbench.com/blog
➡️ @FrontendPortal
Даже если модель успешно проходит тесты, это не означает, что её код готов к продакшену. В ходе тестирования все модели допускали типичные React-проблемы: лишние
useEffect, снижение производительности и утечки памяти. У некоторых моделей количество таких ошибок достигало примерно 67 на 100 запусков.Основные результаты:
GPT 5.6 Sol xhigh показала лучший результат в целом;
GPT 5.6 Terra medium - оптимальное соотношение цены и качества;
Claude Fable 5 работает на уровне Sol, но в среднем стоит в шесть раз дороже
Проект открыт для контрибьюций:
https://github.com/millionco/reactbench
Подробнее: https://reactbench.com
Блог: https://www.reactbench.com/blog
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤16😁1😱1🥱1
Media is too big
VIEW IN TELEGRAM
Быстрый совет по CSS: динамически увеличивайте CSS-счётчики с помощью
Подробнее о свойстве: Дока
➡️ @FrontendPortal | #CSS
counter-increment, чтобы последовательно пронумеровать стилизованные элементыПодробнее о свойстве: Дока
Please open Telegram to view this post
VIEW IN TELEGRAM
❤36🔥8👨💻1
На Stepik вышла программа «DevOps с нуля: от Linux до Kubernetes»
Это комплексная программа из 5 практических курсов по ключевым технологиям DevOps: Linux, Git, Docker, GitLab CI/CD, Kubernetes
Вы последовательно пройдёте путь от работы в Linux и управления кодом через Git до контейнеризации приложений, настройки CI/CD-пайплайнов и развёртывания в Kubernetes.
Что вы изучите:
Все знания закрепляются на практике с помощью заданий с автопроверкой.
Материал подаётся последовательно и понятным языком: с примерами, схемами и демонстрациями. Во время обучения можно задавать вопросы по урокам и заданиям, получать обратную связь и помощь при возникновении сложностей.
После прохождения программы вы получите сертификат, который можно добавить в резюме.
Скидка 20% на 48 часов: по промокоду
Открыть программу на Stepik
Это комплексная программа из 5 практических курсов по ключевым технологиям DevOps: Linux, Git, Docker, GitLab CI/CD, Kubernetes
Вы последовательно пройдёте путь от работы в Linux и управления кодом через Git до контейнеризации приложений, настройки CI/CD-пайплайнов и развёртывания в Kubernetes.
Что вы изучите:
• работу с Linux и командной строкой
• Git и контроль версий в реальных проектах
• создание Docker-образов и запуск контейнеров
• автоматизацию сборки, тестирования и деплоя в GitLab CI/CD
• развёртывание и управление приложениями в Kubernetes
• сети, хранилища, конфигурации и секреты
• диагностику инфраструктуры и автоматизацию рутинных задач
... и многое другое
Все знания закрепляются на практике с помощью заданий с автопроверкой.
Материал подаётся последовательно и понятным языком: с примерами, схемами и демонстрациями. Во время обучения можно задавать вопросы по урокам и заданиям, получать обратную связь и помощь при возникновении сложностей.
После прохождения программы вы получите сертификат, который можно добавить в резюме.
Скидка 20% на 48 часов: по промокоду
DEVOPS20 стоимость всей программы составит 10 392 ₽.Открыть программу на Stepik
🤣4❤3😁1
Please open Telegram to view this post
VIEW IN TELEGRAM
❤11