This media is not supported in your browser
VIEW IN TELEGRAM
Новое в CSS –
Это свойство автоматически масштабирует размер шрифта так, чтобы текст идеально вписывался в ширину своего контейнера
Пока что поддерживается только в Chrome, Brave и Edge
➡️ @FrontendPortal
text-fit: growЭто свойство автоматически масштабирует размер шрифта так, чтобы текст идеально вписывался в ширину своего контейнера
Пока что поддерживается только в Chrome, Brave и Edge
Please open Telegram to view this post
VIEW IN TELEGRAM
❤37👍20🔥7
ES2026 официально утверждён Ecma
Теперь эти возможности официально входят в состав JavaScript / ES:
➡️ @FrontendPortal
Теперь эти возможности официально входят в состав JavaScript / ES:
Array.fromAsync
Error.isError
Math.sumPrecise
Uint8Array — преобразование в/из Base64
последовательное выполнение итераторов
Доступ к исходному тексту через JSON.parse
Upsert — Map.getOrInsert
Please open Telegram to view this post
VIEW IN TELEGRAM
👍37❤7
This media is not supported in your browser
VIEW IN TELEGRAM
Брутальный способ переключить ваш сайт на тёмную тему
С нативной и настраиваемой анимацией.
Всего 2 строки JavaScript и немного CSS:
→ http://theme-toggle.rdsx.dev
➡️ @FrontendPortal
С нативной и настраиваемой анимацией.
Всего 2 строки JavaScript и немного CSS:
→ http://theme-toggle.rdsx.dev
Please open Telegram to view this post
VIEW IN TELEGRAM
👍32🤯18❤7🔥3🏆3
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
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