Основные методы массивов 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

Читать полностью…

So Much to Print 

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

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

Читать полностью…

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

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

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

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

#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

Читать полностью…

👣 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

Читать полностью…

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

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

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

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

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

Читать полностью…

💡 HTML трюк

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

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

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

Читать полностью…

⌨️ Хотите научиться создавать полноценные 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/

Читать полностью…

Заголовок: JavaScript Engineer (Browser Fingerprinting & Security R&D)

Формат: Удаленная работа, полный день
Зарплата: 80 000 - 180 000 руб. на руки (возможна оплата в USDT)

О проекте:
Мы ищем JS-разработчика, которому надоело "двигать кнопки" и хочется по-настоящему сложных задач. Наш проект — это система для anti-fraud, которая занимается низкоуровневым фингерпринтингом браузеров. Мы копаем глубоко: анализируем QUIC-хендшейки, вычисляем RTT, изучаем особенности WebRTC и DNS для выявления прокси.

Если вам интересно глубоко погружаться в сетевые протоколы, читать исходники Chromium и искать нетривиальные способы обойти защиту — эта вакансия для вас.

Чем предстоит заниматься:
• Разработка JS SDK: Написание модулей на чистом (vanilla) JavaScript для сбора уникальных отпечатков (WebRTC, Canvas/WebGL, DNS, QUIC).
• Frontend (React/Next.js): Разработка личного кабинета для визуализации данных и управления сервисом.
• R&D (Исследования и разработка): Поиск и реализация новых техник детектирования VPN/Proxy. Это значительная часть работы, требующая самостоятельности и умения вести задачу от гипотезы до готового решения.
• Защита кода: Применение обфускации и других техник для защиты нашего SDK от реверс-инжиниринга.
• Реверс-инжиниринг, деобфускация для поиска новых методик.

Требования:
• Отличное знание нативного JavaScript и понимание асинхронности.
• Опыт работы с React.
• Подтвержденный интерес к кибербезопасности: участие в CTF, pet-проекты (браузерные расширения, сетевые утилиты), статьи, профильное образование в области ИБ, хакинг. (Это самое важное!)
• Хорошее понимание сетевого стека (TCP/IP, UDP, DNS, QUIC).
• Желание и способность самостоятельно разбираться в том, как работают браузеры "под капотом".

Желательно:
• Опыт работы с WebRTC, WebSocket.
• Умение читать C++ (для анализа кода браузерных движков).
• Опыт анализа трафика в Wireshark.
• Опыт работы с Next.js.

Мы предлагаем:
Работу над уникальными задачами, которые вы не найдете в 99% компаний. Сильную команду, свободу в принятии технических решений и возможность стать экспертом в узкой, но очень востребованной нише.


Как откликнуться:
Вместе с резюме, пожалуйста, пришлите сопроводительное письмо, в котором кратко расскажите о вашем бэкграунде в кибербезопасности. Нас интересует все:

• Ссылки на ваши pet-проекты (GitHub и др.).
• Ваш никнейм и достижения на CTF-платформах.
• Ссылки на ваши статьи, доклады или заметки.
• Любой другой релевантный опыт, который показывает ваш интерес к этой сфере.

Отклики без этого пункта рассматриваться не будут. Мы ищем человека, который действительно "горит" этой темой.

Контакт: /channel/Siemons8

Читать полностью…

🖌️ LUME — создание 2D/3D-интерфейсов на HTML. Этот набор веб-компонентов превращает обычные HTML-элементы в полноценные носители графики — от CSS3D-преобразований до WebGL-рендеринга.

Под капотом используется AssemblyScript для компиляции в WebAssembly, что обещает стабильную производительность. А в примерах есть даже заготовка для FPS-игры на движке.

🤖 GitHub

@javascriptv

Читать полностью…

JavaScript. Метод includes()

Метод includes() в JavaScript используется для проверки наличия определенного элемента в массиве или строке. Он возвращает булевое значение, указывающее, найден ли элемент.

Для использования метода includes(), вызовите его на массиве или строке, над которыми хотите выполнить поиск. Передайте в качестве аргумента элемент, который вы ищете. Метод вернет true, если элемент найден, и false, если элемент отсутствует.

В приведенном примере у нас есть массив ['яблоко', 'груша', 'апельсин', 'банан']. Мы вызываем метод includes('груша'), чтобы проверить, содержит ли массив элемент 'груша'. Метод возвращает true, так как 'груша' присутствует в массиве. Затем мы вызываем метод includes('слива'), чтобы проверить, содержит ли массив элемент 'слива'. Метод возвращает false, так как 'слива' отсутствует в массиве. Результаты выводятся в консоль.

Читать полностью…

🖥 JavaScript c Нуля - Курс для начинающих!

🕖 Ссылка: 6:55:30

🔗 Ссылка: *клик*

#курс #javascript

@about_javascript

Читать полностью…

🔥 Univer — это библиотека, предназначенная для создания обработчиков команд и автоматизации процессов в приложениях!

🌟 Она используется для обработки команд, позволяя удобно управлять параметрами и аргументами команд. Библиотека может быть полезна для разработчиков, создающих интерфейсы командной строки (CLI) или нуждающихся в инструменте для автоматизации задач.

🔐 Лицензия: Apache-2.0

🖥 Github

@react_tg

Читать полностью…

🖥 Изучите Three.js, создав пять проектов!

🌟 Three.js абстрагирует сложности WebGL (библиотека веб-графики), упрощая разработчикам создание и отображение анимированной 3D-компьютерной графики на веб-странице. С Three.js вы можете создавать все: от простых 3D-моделей до сложных интерактивных впечатлений.

🔗 Ссылка: *клик*

@javascriptv

Читать полностью…

👨🏻‍💻 AI в бэкенд-задачах — на Podlodka Backend Crew

Код теперь может написать агент, но за результат всё ещё отвечаете вы. Организаторы Podlodka Backend Crew собрали конференцию о том, как работать с бэкендом после того, как AI написал код.

Причём в программе нет докладов в жанре «у нас все получилось» — только реальная практика. Конференция пройдёт с 26 по 30 октября.

🧠️️️️ Участники сезона:

• Разберут пулл‑реквесты от агента и попробуют предотвратить возможные инциденты на рулетке кейсов

• Выяснят, какие неожиданные ловушки скрываются в OpenAPI и на что обращать внимание при разработке контрактов

• Разберут антипаттерны в AI-юнит-тестах, узнают, как их избежать с помощью современных инструментов, и заберут себе новый агентский скилл

• Спроектируют бэкенд дейтинг-приложения на архитектурной кате и решат, где в нём действительно нужен AI.

Формат Podlodka Backend Crew — комфортный онлайн: 5 дней, утренние и вечерние сессии в Zoom.

Отдельный плюс — цена: заметно ниже привычных конференций, при этом вы не просто слушаете о чужом опыте, а разбираете PR и отвечаете за релиз, проектируете систему в команде и расследуете чужие провалы.

Такого вовлечения не получить на обычной конференции.

🔗 Изучайте программу и присоединяйтесь: https://podlodka.io/becrew

Промокод на скидку для подписчиков backendcrew

Читать полностью…

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

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

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

Читать полностью…

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

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

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

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

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

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

Читать полностью…

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

Ответ

Читать полностью…

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

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

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

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

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

Читать полностью…

Работа с 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 стороннего сервиса и может быть расширен для более сложной обработки данных или отображения.

Читать полностью…

Table tenniCSS

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

#css

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

Читать полностью…

🔥 Трюк с 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

Читать полностью…

🎯 HTML attributes vs DOM properties

Разница между атрибутами и свойствами в HTML/DOM может быть запутанной, особенно когда названия совпадают. Кратко:

* Атрибут — часть HTML.
* Свойство — часть DOM-объекта.

Пример:

<input value="Hello">

const input = document.querySelector('input');
console.log(input.getAttribute('value')); // "Hello"
console.log(input.value);                 // "Hello"
input.value = 'World';
console.log(input.getAttribute('value')); // "Hello"

Значение атрибута остаётся неизменным, даже если свойство обновляется в JS. DOM-свойства могут не синхронизироваться с атрибутами после инициализации.

🔹Свойства могут отличаться от атрибутов

<input disabled>

input.hasAttribute('disabled'); // true
input.disabled;                 // true
input.removeAttribute('disabled');
input.disabled;                 // false

Свойство disabled — булево. Атрибут disabled работает как флаг: его наличие имеет значение, не важно, какое значение вы ему присвоили.

<input disabled="false">

Это всё равно disabled. Так работает HTML.

🔹Когда использовать атрибуты, а когда свойства?

* Используйте атрибуты, когда:

* Вам нужно установить начальное значение в HTML.
* Вы работаете с HTML-строкой.
* Вы хотите сохранить значение при сериализации (например, outerHTML).

* Используйте свойства, когда:

* Вы работаете с DOM в JS.
* Нужно прочитать или изменить текущее состояние элемента.

🔹Иногда стоит быть осторожнее

input.setAttribute('value', 'New');
console.log(input.value); // "New"

Иногда установка атрибута также влияет на свойство, но не всегда — зависит от элемента и конкретного атрибута/свойства.

https://jakearchibald.com/2024/attributes-vs-properties/

Читать полностью…

🌸 Typed Japanese

Для гиков: энтузиасты придумали учить языки через TypeScript.

Проект Typed Grammar учит грамматике (например, английского или японского) с помощью типов и структур программирования. И никаких зелёных сов!

🔗 GitHub

Читать полностью…

Евгений Разинков – преподаватель ML в Казанском университете с многолетним стажем, руководитель собственной команды ML-инженеров и автор популярного razinkov">канала по машинному обучению на YouTube

приглашает вас в свою AI-школу.

Особенности:
• теория и практика
• акцент на самостоятельную реализацию архитектур с нуля
• полное понимание того, что происходит внутри нейронной сети
• архитектуры от сверточных нейронных сетей до трансформеров и языковых моделей.

Регулярные живые QA-сессии, дружное комьюнити, а также компетишены, где можно будет посоревноваться (в командах и поодиночке) в решении ML задач.

От вас: владение Python и знание основ классического ML (регрессия, классификация, градиентный спуск).
Если классический ML не знаете - есть базовые курсы по ML.

7 месяцев, 4 курса:
• AI: от основ до языковых моделей
• Math for AI - необходимый математический бэкграунд
• MLOps - всё про жизненный цикл модели, логирование, версионирование, docker
• Decision making in AI - управление AI-проектом и стратегия

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

Полная стоимость за 7 месяцев (все 4 курса):
• 112 000 рублей (единоразово)
или
• 17 000 рублей в месяц
Если материалы вам не понравятся, мы вернем деньги за текущий оплаченный месяц (и последующие при единоразовой оплате)!

Старт уже 17 февраля, скорее регистрируйтесь здесь!

Еще больше подробностей о курсе ищите в видео и на странице с отзывами участников.

Кстати, теоретические видео курса AI: от основ до трансформеров находятся в открытом доступе на канале Евгения!

ООО «Лаборатория Евгения Разинкова», ИНН: 5043088023, erid: 2VtzqxKcuC1

Читать полностью…

🖥 Курс по изучению TypeScript для начинающих!

🔗 Ссылка: *клик*

#курс #typescript

freecourses

Читать полностью…

🖥 Wapy.dev — это инструмент для управления подписками и регулярными расходами, предоставляющий удобную панель для отслеживания, оптимизации и уведомлений о платежах!

🌟 Пользователи могут регистрировать свои подписки, получать напоминания о предстоящих платежах через email или push-уведомления, а также анализировать расходы по категориям с поддержкой различных валют и часовых поясов.

🔐 Лицензия: MIT

🖥 Github

@about_javascript

Читать полностью…

🖥 Список из 100 вопросов с собеседований Middle JavaScript разработчика в 2025 году

Представляем вам список из 100 вопросов, которые могут встретиться на собеседовании для позиции Middle JavaScript Developer. Я также добавлю подробное объяснение к каждому вопросу, чтобы вы могли лучше подготовиться к собеседованию.

📌 Читать

@about_javascript

Читать полностью…