JavaScript

👨🏻‍💻 AI в бэкенд-задачах — на Podlodka Backend Crew Код теперь может написать агент, но за результат всё ещё отвечаете вы. Организаторы Podlodka Backend Crew собрали конференцию о том, как работать с бэкендом после того, как AI написал код. Причём в программе нет докладов в жанре «у нас все получилось» — только реальная практика. Конференция пройдёт с 26 по 30 октября. 🧠️️️️ Участники сезона: • Разберут пулл‑реквесты от агента и попробуют предотвратить возможные инциденты на рулетке кейсов • Выяснят, какие неожиданные ловушки скрываются в OpenAPI и на что обращать внимание при разработке контрактов • Разберут антипаттерны в AI-юнит-тестах, узнают, как их избежать с помощью современных инструментов, и заберут себе новый агентский скилл • Спроектируют бэкенд дейтинг-приложения на архитектурной кате и решат, где в нём действительно нужен AI. Формат Podlodka Backend Crew — комфортный онлайн: 5 дней, утренние и вечерние сессии в Zoom. Отдельный плюс — цена: заметно ниже привычных конференций, при этом вы не просто слушаете о чужом опыте, а разбираете PR и отвечаете за релиз, проектируете систему в команде и расследуете чужие провалы. Такого вовлечения не получить на обычной конференции. 🔗 Изучайте программу и присоединяйтесь: https://podlodka.io/becrew Промокод на скидку для подписчиков backendcrew

⚡️ Вышел 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 трюк Используйте теги

и

, чтобы сделать на странице сворачиваемый блок контента.

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

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

🔥 Трюк с 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-компонентами и кастомными хуками, чтобы минимизировать ререндеры и повысить производительность.

🔥 Трюк с 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-компонентами и кастомными хуками, чтобы минимизировать ререндеры и повысить производительность.

⌨️ Хотите научиться создавать полноценные API-серверы с использованием Node.js и TypeScript? Приглашаем на открытый урок «Как создать API-сервер с TypeScript и Node.js». 🗓 4 августа в 20:00 МСК 🆓 Бесплатно. Урок в рамках старта курса «Node.js Developer». На открытом уроке мы покажем, как быстро настроить сервер с помощью Express, создать маршруты для работы с данными и обрабатывать запросы от клиентов. Вы освоите основы TypeScript и API-разработки, получите знания для работы с типами данных и ошибок. 🎯 Погрузитесь в мир востребованной backend-разработки: создайте API-сервер, научитесь писать чистый и безопасный код и откройте для себя возможности Node.js. 🔗 Ссылка на регистрацию: https://otus.pw/QvtX/

Совет по CSS 💡 Используйте табличные цифры для отображения таймеров ✅ https://www.codewithshripal.com/playground/css/use-tabular-number-for-timers @javascriptv