JavaScript

⚡️ Вышел React 19.3 - View Transitions и Fragment Refs стали стабильными

Что добавили:

• Анимации через `<ViewTransition>`
Появление, исчезновение, перемещение и изменение размеров элементов через браузерный View Transition API. По умолчанию - плавное затухание, свои эффекты задаются через CSS или Web Animations API.

Анимации запускаются для Transition-обновлений, включая startTransition, раскрытие Suspense и useDeferredValue. Обычные срочные обновления отображаются сразу.

• `ref` у `<Fragment>`
Можно управлять фокусом, обработчиками событий, измерениями и наблюдением за группой DOM-элементов без дополнительного `<div>`, который мог бы повлиять на вёрстку.

• `use(browser())` для компонентов, которым нужен браузер
Позволяет пропустить серверный рендеринг компонента, зависящего, например, от localStorage. На сервере показывается ближайший Suspense fallback, в браузере компонент продолжает рендеринг.

• Поддержка Trusted Types
React больше не превращает соответствующие объекты в строки перед передачей в DOM API. Политики Trusted Types теперь могут работать корректно.

• Меньше обёрток для Context
Server Components могут напрямую рендерить контекст, импортированный из модуля с 'use client'.

Также медленный Transition больше не задерживает другие, не связанные с ним переходы.

https://react.dev/blog/2026/09/09/react-19-3

@react_tg

Форматирование JSON-кода

Вы, вполне вероятно, хорошо знакомы с методом JSON.stringify(). А знаете о том, что с помощью этого метода можно форматировать JSON-код? Это, на самом деле, очень просто.

Метод stringify() принимает три параметра. Это параметры value, replace и space. Два последних параметра в этом списке являются необязательными. Именно поэтому их вы, возможно, раньше не использовали. Для настройки выравнивания JSON-кода необходимо использовать параметр space.

So Much to Print 

Оригинальная анимация газетного станка.

https://codepen.io/jkantner/pen/vYKoeeP

🔴 Тестовое собеседование с ТимЛидом Frontend-разработки в этот четверг

6 августа(в четверг!) в 19:00 по мск приходи онлайн на открытое собеседование, чтобы посмотреть на настоящее интервью на Middle Frontend-разработчика.

Как это будет:
📂 Алексей Романов, Teamlead в Underhood.dev с опытом 6+ лет, будет задавать реальные вопросы и задачи разработчику-добровольцу
📂 Алексей будет комментировать каждый ответ респондента, чтобы дать понять, чего от вас ожидает собеседующий на интервью
📂 В конце можно будет задать любой вопрос Алексею

Это бесплатно. Эфир проходит в рамках менторской программы от ШОРТКАТ для Frontend-разработчиков, которые хотят повысить свой грейд, ЗП и прокачать скиллы.

Переходи в нашего бота, чтобы получить ссылку на эфир → @shortcut_front_bot

Реклама.
О рекламодателе.

🎨 Улучшаем веб-дизайн с AI

Этот репозиторий предлагает навык для AI-агентов, который преобразует стандартные веб-страницы в стильные и уникальные. Он включает правила против клише, систему дизайна и теорию цвета oklch, чтобы обеспечить высокое качество HTML/CSS/JavaScript.

🚀Основные моменты:
- Инъекция дизайнерского вкуса в AI-процессы
- Запрет на избитые шаблоны и клише
- Шестиступенчатый рабочий процесс от требований до проверки
- Подборка качественных шрифтов и цветовых сочетаний
- Примеры страниц с использованием и без использования навыка

📌 GitHub: https://github.com/ConardLi/web-design-skill

#javascript

JavaScript. Что будет выведено в консоль?

Ответ

⚡️ TypeScript 6.0 Beta - что нового

Microsoft выпустили TypeScript 6.0 Beta. В релизе — улучшения производительности, более точная типизация и изменения, которые упрощают работу с большими проектами.

Вот основные изменения.

Быстрее работа компилятора

- Улучшена производительность проверки типов
- Быстрее сборка крупных проектов
- Оптимизации для больших monorepo

TypeScript продолжает фокусироваться на скорости, особенно для больших кодовых баз.

Улучшения типизации

- Более точный вывод типов в сложных сценариях
- Улучшения для generics
- Лучшая работа с union и conditional types

Меньше ситуаций, где приходится явно указывать типы вручную.

ECMAScript и совместимость

- Поддержка новых возможностей JavaScript
- Улучшенная совместимость с современными runtime и bundler’ами
- Обновления для работы с Node.js и современными инструментами сборки

Инструменты и DX

- Более понятные сообщения об ошибках
- Улучшения в Language Service (автодополнение, навигация)
- Улучшенная работа редакторов (VS Code и др.)

Почему это важно

Релиз не про новые «синтаксические фичи», а про:
- скорость
- стабильность
- удобство разработки
- масштабируемость для больших проектов

Если у вас большой TypeScript-проект, обновление может дать заметный прирост производительности.

💥 Подробности: https://devblogs.microsoft.com/typescript/announcing-typescript-6-0-beta/
💥 Видео: https://www.youtube.com/watch?v=CbHJlBToYQM

🌏 Осторожно, можно налипнуть на долгие часы: интерактивная карта, которая показывает, как слова мигрировали сквозь века 😊

Если тебе хоть раз было интересно, откуда взялось слово и как оно менялось по дороге - это прям находка. Проект визуализирует “путешествие” слов по миру: как корни кочевали вместе с торговлей, войнами, колонизацией и смешением культур.

Что внутри:
- Gemini помогает находить корни и родство слов (этимология без занудства)
- D3.js превращает всё это в красивую анимацию на карте
- ты просто вводишь слово - и видишь его историю как маршрут: страны, эпохи, переходы

Это не просто справочник, а настоящая “география языка”, в которой можно зависнуть на час.

https://wanderword-141284551734.us-west1.run.app/

👣 Generics-first HTTP клиент для Go

httpx - это тонкая обертка над стандартным net/http, сделанная с упором на generics.

Идея простая:
- сохранить всю мощь и escape hatches обычного http.Client
- но сделать 90% повседневных запросов максимально простыми и типобезопасными

Что дает httpx
- типизированные запросы и ответы через generics
- минимум бойлерплейта для обычных GET/POST
- при необходимости — полный доступ к низкоуровневому API
- не прячет net/http, а аккуратно его расширяет

Подходит когда:
- надо быстро писать HTTP-код без ручного json.Unmarshal
- важна типобезопасность
- не хочется тяжелых фреймворков

Хороший пример того, как generics в Go можно использовать по делу, а не ради абстракций.

https://github.com/goforj/httpx

Работа с API сторонних сервисов в веб-приложении: Пример интеграции с OpenWeatherMap API

Интеграция с API сторонних сервисов позволяет получать актуальные данные и расширять функциональность вашего веб-приложения. В данном примере мы рассмотрим интеграцию с OpenWeatherMap API, чтобы получать данные о погоде и отображать их на веб-странице.

📝 Пример кода:

1. Получение API ключа:
Для работы с OpenWeatherMap API необходимо получить API ключ, который будет использоваться для авторизации запросов. Вы можете зарегистрироваться на сайте OpenWeatherMap, чтобы получить свой ключ API.

2. Создание функции для выполнения запросов к API, обработка данных и отображение на странице(Рисунок 1):

3. HTML-разметка и стили(Рисунок 2 и 3)
В примере мы создали функцию fetchWeatherData, которая выполняет запрос к OpenWeatherMap API с указанием города и ключа API. Затем мы обрабатываем полученные данные и отображаем их на странице при помощи функции displayWeatherData. При нажатии кнопки "Search" происходит выполнение запроса и отображение данных о погоде для указанного города.

Этот пример демонстрирует базовую интеграцию с API стороннего сервиса и может быть расширен для более сложной обработки данных или отображения.

🍏Ничего сверхъестественного - просто Gemini 3 Pro за один (!) промпт разворачивает полноценную симуляцию macOS или Windows прямо в браузере.

Всего 900 строк кода - и у вас уже есть рабочий интерфейс с анимациями, меню, браузером и даже терминалом.

Модель справляется с этим за 172 секунды.

Код и демо уже доступны - а инсайдеры шепчут, что официальный релиз выйдет на этой неделе.
Первые тестеры называют Gemini 3 Pro «лучшим ИИ для кодинга на сегодня».

https://codepen.io/ChetasLua/pen/EaPvqVo

Table tenniCSS

Создано на HTML и SCSS, без использования JS.

#css

https://codepen.io/amit_sheen/pen/PobQjMX

💡 HTML трюк

Используйте теги <details> и <summary>, чтобы сделать на странице сворачиваемый блок контента.

<details> — контейнер для скрытого содержимого.

<summary> — заголовок, по клику на который блок разворачивается или сворачивается.

🔥 Трюк с style в React, который упростит работу с динамическими стилями

Вместо создания длинных условий или классов, можно использовать spread-оператор и логические выражения прямо в объекте стилей:

<div
  style={{
    padding: '16px',
    ...(isError && { border: '1px solid red' }),
    ...(isActive ? { backgroundColor: '#def' } : { opacity: 0.5 }),
  }}
>
  Hello!
</div>

📌 Что тут происходит:

* ...(условие && { стиль }) добавит стиль, если условие true;
* Альтернатива classnames для inline-стилей;
* Чисто, читаемо и удобно при большом числе условий.

🧠 Подходит, когда используете inline-стили (например, в дизайн-системах или при генерации email-шаблонов).

💡 Можно комбинировать с memo-компонентами и кастомными хуками, чтобы минимизировать ререндеры и повысить производительность.

Совет по CSS 💡

Используйте табличные цифры для отображения таймеров ✅

https://www.codewithshripal.com/playground/css/use-tabular-number-for-timers

@javascriptv