Что выведет этот код?

console.log("A")

setTimeout(() => console.log("B"), 0)

Promise.resolve().then(() => console.log("C"))

console.log("D")

A
D
C
B

Разбор по шагам.

• Сначала выполняется синхронный код (Call Stack):
• console.log("A") → выводит A
• setTimeout(..., 0) → колбэк отправляется в macrotask queue
• Promise.resolve().then(...) → колбэк отправляется в microtask queue
• console.log("D") → выводит D

После этого основной поток завершён.

Затем Event Loop обрабатывает microtasks (они имеют более высокий приоритет):

выполняется Promise → выводит C

И только потом выполняются macrotasks:

• setTimeout → выводит B

Итоговый порядок выполнения:

Sync → Microtasks (Promise) → Macrotasks (setTimeout)

Если кратко:

Promise всегда выполнится раньше setTimeout, даже если timeout = 0.

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

ЧИСТЫЙ
100% JAVASCRIPT БЭКЕНД
БЕЗ ФРЕЙМВОРКОВ
ВРЕМЯ СТАРТА 0.05 СЕКУНД

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

Уложить карту, графики, фильтры и таблицы на один экран, дать пользователю гибкость, при этом не сломать UX и не перегрузить браузер — звучит мощно.

Так мы переделали интерфейс 2ГИС Про (это наш сервис геоаналитики для бизнеса) от визуальной модели до архитектуры. Ниже — лишь часть наших обновлений.

🔰 Сетка и адаптивность
🔰 Карта теперь виджет
🔰 Без потери событий
🔰 Кастомные ручки изменения размера карточки
🔰 Виртуализация и производительность
🔰 Плавные анимации и скрытие виджетов

Наш опыт будет точно полезен для разработчиков UI, веб-инженеров, работающих с дашбордами и тем, кто строит большие аналитические продукты.

Полный разбор с кодом и архитектурными решениями в нашей статье на Хабр

Другие инженерные инсайты от 2ГИС → в Telegram-канале RnD

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

🖥 5 маленьких, но полезных библиотек React

▶️1. Urlcat

Urlcat — это крошечная JavaScript-библиотека, которая делает очень удобным построение URL и предотвращает распространенные ошибки.

Да, для построения URL можно использовать URL API. Но вам все равно придется позаботиться о некоторых деталях вместо того, так что используйте Urlcat.

Вы ее подключаете, и она просто работает. Не нужно изучать сложные шаблоны или тратить часы на документацию.

🖥 Смело пробуйте, GitHub


▶️2. UseHooks-ts

UseHooks — это небольшая библиотека с хорошо написанными, задокументированными и полностью типизированными (для пользователей TypeScript) хуками для всех этих вещей. Использование этой библиотеки позволит вам не отвлекаться на мелочи и сосредоточиться на самом проекте.

🖥 GitHub


▶️3. Logt

Когда я пишу код фронтенда, я хочу иметь логи. Но с некоторыми требованиями:
— логи должны быть полностью типизированными (чтобы использовать в Typescript)
— они должны быть небольшими
— у логов должны быть цветные ярлыки
— мне нужны разные уровни логов
— должна быть возможность скрывать некоторые логи в зависимости от условий (мб, в продакшен-сборке)
— должна быть возможность отправлять эти логи куда-то еще (мб, в Sentry).

После долгих поисков подходящей библиотеки, я нашел Logt, которая отвечает всем моим требованиям.

🖥 Рекомендую на 100%, GitHub


▶️4. Loadable Components

Несколько ключевых моментов: Loadable Components поддерживает SSR (рендеринг на стороне сервера), Library Splitting (разделение библиотеки) и даже полный динамический импорт. Неплохо, да?

Библиотека действительно проста в использовании. Практически plug-and-play.

🖥 GitHub


▶️5. Emoji Mart

Работая над различными проектами, мне часто приходится иметь дело с эмодзи. Так что держите эту маленькую библиотеку.

🖥 Позвольте вам представить Emoji Mart, GitHub

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

🤖 Запустите Moltbot в Cloudflare Sandbox

Moltworker позволяет запускать персонального AI-ассистента Moltbot в среде Cloudflare, обеспечивая управляемую и всегда доступную среду без необходимости самостоятельного хостинга. Проект демонстрирует возможность работы Moltbot в облачной песочнице, включая поддержку нескольких платформ для общения.

🚀 Основные моменты:
- Персональный AI-ассистент с поддержкой Telegram, Discord и Slack
- Веб-интерфейс для управления чатами
- Безопасная аутентификация и управление устройствами
- Хранение истории чатов для постоянного доступа
- Опциональное использование R2 для хранения данных

📌 GitHub: https://github.com/cloudflare/moltworker

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

🎨 Превратите диаграммы Mermaid в красивые SVG и ASCII

Pretty-Mermaid Skills — это инструмент для рендеринга диаграмм Mermaid, поддерживающий SVG и ASCII. Он предлагает множество тем и высокую производительность, идеально подходит для интеграции с AI-инструментами.

🚀 Основные моменты:
- Поддержка нескольких форматов: SVG и ASCII
- 15 встроенных тем для разных сценариев
- Полная поддержка диаграмм: потоки, последовательности и др.
- Высокая производительность с параллельным рендерингом
- Готовые шаблоны и подробная документация

📌 GitHub: https://github.com/imxv/Pretty-mermaid-skills

#javascript

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

👩‍💻 Полезная подборку ресурсов, которые помогут прокачать TypeScript быстрее и без лишней теории:

• TypeHero – платформа для практики TypeScript. Готовые задачи разного уровня и возможность создавать свои — отличный способ набить руку на типах

• TSdiagram – open-source инструмент: вставляете TS-файл и мгновенно получаете наглядную диаграмму интерфейсов, типов, классов и их связей. Очень удобно для разбора чужого кода или архитектуры

• Visual Types – интерактивный мини-курс в формате playground’а, который помогает разобраться в сложных типах через эксперименты прямо в браузере

Добавляйте в закладки — пригодится каждому, кто работает с TypeScript 👍

@javascriptv

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

Weekend Offer Multitrack: быстрый найм для опытных специалистов

Приглашаем бэкенд-разработчиков с опытом от 5 лет на C++, Python, Go или Java/Kotlin получить офер за 2 дня и поработать в трёх командах Яндекса на выбор.

Приходите, если вам важно видеть результат своей работы в живых системах и метриках, а не только в merged PR.

Как всё проходит:

🟢 До 6 марта — регистрация на сайте.
🟢 14 марта — технические секции.
🟢 15 марта — финальная секция и офер.

После получения офера у вас будет возможность выбрать три команды и в течение нескольких недель поочерёдно поработать в каждой. Такой формат позволит не только познакомиться с коллегами и технологическим стеком, но и оценить задачи и рабочие процессы в каждой команде.

Подробности и форма регистрации — по ссылке.

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

⚡️ 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/

@javascriptv

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

Советы по HTML 💡

Знаете ли вы, что с помощью элемента HTML <dialog> можно легко создать модал?

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

🖥 Большинство “парсеров” умирают через 2 дня.
Ты научишься делать те, которые живут в проде.

Это не про BeautifulSoup ради галочки.
Это про системы сбора данных, которые:

• не падают от мелких правок на сайте
• собирают данные в разы быстрее
• обновляют всё сами по расписанию
• обходят ограничения и баны
• выглядят как сервис, а не хаос из файлов

Ты начнёшь видеть сайты не как страницы, а как источники данных, к которым можно подключиться.

В итоге ты сможешь:

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

Это навык, который напрямую превращается в деньги.
Не “знаю Python”, а умею добывать данные из интернета профессионально.

🎁 48 часов скидка 50% на Stepik: https://stepik.org/a/269942/

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

🎮 Учимся Flexbox с Flexbox Froggy

Flexbox Froggy — это увлекательная игра для освоения CSS Flexbox. Игроки помогают лягушонку добраться до лилий, используя правильные свойства flexbox. Идеально подходит для новичков и разработчиков, желающих улучшить свои навыки в верстке.

🚀Основные моменты:
- Интерактивный подход к обучению CSS Flexbox
- Более 20 уровней с нарастающей сложностью
- Поддержка нескольких языков
- Открытый исходный код и возможность внесения вкладов

📌 GitHub: https://github.com/thomaspark/flexboxfroggy

#javascript

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

🤫 STFU: приложение для борьбы с шумом в общественных местах

STFU — это простое приложение, которое воспроизводит услышанный звук с задержкой, заставляя громких собеседников замолчать. Создано в ответ на шумные ситуации, когда вежливые просьбы не помогают. Работает на основе веб-аудио API и имеет забавный подход к решению проблемы.

🚀Основные моменты:
- Воспроизводит звук с задержкой ~2 секунды.
- Помогает справиться с громкими разговорами.
- Легко настраивается и используется.
- Создано с юмором и креативом.

📌 GitHub: https://github.com/Pankajtanwarbanna/stfu

#javascript

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

Вас добавили в чат «Первые шаги в JavaScript»

💯 Прокачайте навыки в веб-разработке на бесплатном курсе

Академия Selectel выпустила новый курс по JavaScript. Если вы хотите освоить синтаксис и базовые конструкции языка — первые три модуля для вас.

После обучения вы сможете:

🔹 работать с переменными let, var и const,
🔹 создавать простые функции и работать с DOM,
🔹 писать логические конструкции и тернарные операторы if/else.

Получите промокод на бесплатную работу с сервисами Selectel, а после финального теста — сертификат о прохождении.

Изучите основы JavaScript и создайте свой первый пет-проект →

Реклама. АО "Селектел". erid:2W5zFJPYQbz

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

🚀 Подборка репозиториев, которые реально полезно добавить в закладки - от фронтенда до AI/LLM.

Frontend / UI
1) Flexbox Froggy - учим flexbox в формате игры
https://github.com/thomaspark/flexboxfroggy

2) shadcn/ui - топовая база UI-компонентов для React
https://github.com/shadcn-ui/ui

3) 50 Projects in 50 Days - прокачка практикой
https://github.com/bradtraversy/50projects50days

4) Awesome React Components - огромная коллекция компонентов
https://github.com/brillout/awesome-react-components

5) Awesome CSS - всё про CSS, паттерны и идеи
https://github.com/awesome-css-group/awesome-css

AI / Multimodal / LLM
6) LLaVA - Large Language and Vision Assistant
https://github.com/haotian-liu/LLaVA

7) CLIP - contrastive обучение текста и изображений
https://github.com/openai/CLIP

8) Transformers - главная библиотека для SOTA NLP/Multimodal моделей
https://github.com/huggingface/transformers

9) Awesome Multimodal ML - бумаги + репозитории по multimodal
https://github.com/pliang279/awesome-multimodal-ml

10) RAG from Scratch - собрать RAG пошагово и понять как работает
https://github.com/langchain-ai/rag-from-scratch

11) Awesome LLM Apps - подборка production-ready LLM приложений
https://github.com/Shubhamsaboo/awesome-llm-apps

12) LLM Engineer Handbook - гайд по профессии LLM-инженера
https://github.com/PacktPublishing/LLM-Engineers-Handbook

Agents / Tools
13) MCP Python SDK - официальный SDK Model Context Protocol
https://github.com/modelcontextprotocol/python-sdk

ML / CV collections
14) Awesome Machine Learning - curated ML фреймворки и библиотеки
https://github.com/josephmisiti/awesome-machine-learning

15) Awesome Computer Vision - огромная база по Computer Vision
https://github.com/jbhuang0604/awesome-computer-vision

16) AI Engineering Hub (ZenML) - MLOps и инженерная часть AI
https://github.com/zenml-io/zenml

Qwen ecosystem
17) Qwen (Official)
https://github.com/QwenLM/Qwen

18) Qwen Fine-Tuning Examples
https://github.com/QwenLM/Qwen-Finetuning

Reinforcement Learning
19) Spinning Up in Deep RL (OpenAI)
https://github.com/openai/spinningup

20) Reinforcement Learning: An Introduction (Sutton & Barto)
https://github.com/ShangtongZhang/reinforcement-learning-an-introduction

Core DL
21) PyTorch
https://github.com/pytorch/pytorch

Generative AI
22) Awesome Generative AI Guide
https://github.com/steven2358/awesome-generative-ai

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

🎨 Excalidraw MCP App: Интерактивные диаграммы в чате

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

🚀 Основные моменты:
- Поддержка интерактивных диаграмм в чате
- Легкая интеграция с Claude.ai
- Возможность локального развертывания
- Удобный интерфейс для рисования
- Постоянные обновления и улучшения

📌 GitHub: https://github.com/antonpk1/excalidraw-mcp-app

#javascript

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

🕹️ Discord ID Bypass Tool: Управляйте 3D-аватарами в реальном времени!

Этот инструмент позволяет контролировать голову и рот 3D-аватара с помощью геймпада или клавиатуры, что помогает обойти проверки Discord. Поддерживает форматы VRM, FBX и GLB, с автоматическим определением костей и возможностью тестирования морфов.

🚀Основные моменты:
- Поддержка нескольких форматов моделей
- Автоматическое определение костей
- Тестирование морфов для управления выражениями
- Управление с помощью геймпада и клавиатуры
- Никакой установки — работает в любом современном браузере

📌 GitHub: https://github.com/promptpirate-x/discord-id-bypass-tool

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

Я смотрю, как AI-скептики вручную верстают лендинг, потому что «LLM - это всего лишь предсказание следующего токена».

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

🚀 X/Twitter Research Agent for AI

Эффективный CLI-инструмент для работы с X API. Позволяет искать, фильтровать и мониторить твиты, получая исследовательские данные без лишних усилий. Идеален для взаимодействия с AI-агентами и анализа контента.

🚀Основные моменты:
- Поиск твитов с сортировкой и фильтрацией
- Мониторинг аккаунтов через списки наблюдения
- Быстрый режим для экономии ресурсов
- Кэширование запросов для снижения затрат
- Прозрачность расходов на каждую операцию

📌 GitHub: https://github.com/rohunvora/x-research-skill

#typescript

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

⚡️ Cloudflare переписали альтернативу Next.js… за неделю.

Компания представила vinext - фреймворк, примерно на 94% совместимый с Next.js, но построенный на Vite и работающий напрямую в Cloudflare Workers.

Самое интересное - скорость разработки.

Проект был создан всего за одну неделю и разрабатывался вместе с AI.

Что это значит:

- крупные фреймворки теперь можно пересобирать заново очень быстро
- стоимость разработки таких проектов резко падает
- инфраструктурные и платформенные эксперименты становятся дешевыми

https://x.com/Cloudflare/status/2026415441149571095

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

🚀 CodePilot: GUI для Claude Code

CodePilot — это настольное приложение с графическим интерфейсом для взаимодействия с Claude Code. Оно позволяет удобно общаться, писать код и управлять проектами без использования терминала. Приложение поддерживает управление сессиями, визуализацию файлов и настройку разрешений.

🚀 Основные моменты:
- 💬 Реальное взаимодействие с Claude с поддержкой Markdown и подсветки синтаксиса.
- 📂 Удобное управление сессиями и сохранение разговоров в SQLite.
- 🎯 Контекст проекта с живым деревом файлов.
- 🔒 Настройка разрешений для действий.
- ⚙️ Поддержка нескольких режимов взаимодействия.

📌 GitHub: https://github.com/op7418/CodePilot

#javascript

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

⚡️ Google: AI-агенты могут радикально изменить доступность технологий.

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

Что меняется:

- Интерфейс больше не фиксированный
AI-агент может стать «прослойкой» между человеком и приложением:
упрощать сложные формы, объяснять действия, автоматизировать шаги и переводить интерфейс в удобный формат.

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

- Естественное взаимодействие
Вместо кнопок и меню:
- голос
- текст
- разговорный интерфейс
Пользователь может просто сказать:
«Заполни заявку», «Найди счёт», «Отправь письмо».

- Автоматизация сложных задач
AI может:
- заполнять формы
- навигировать по сайтам
- выполнять многошаговые процессы
- работать с несколькими системами одновременно

- Universal Design нового уровня
Классическая доступность — это отдельные режимы (screen reader, увеличенный текст и т.д.).
С агентами доступность становится динамической и индивидуальной, а не одинаковой для всех.

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

Многие цифровые сервисы недоступны не из-за отсутствия функций, а из-за сложности интерфейсов.
AI-агенты могут убрать этот барьер, превращая сложные системы в простой разговор.

Главный вывод:

Следующий этап доступности — это не новые кнопки и настройки.
Это персональный AI-помощник, который адаптирует весь цифровой мир под человека.

https://research.google/blog/how-ai-agents-can-redefine-universal-design-to-increase-accessibility/

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

📚🚀 Prismer.AI — Альтернатива OpenAI Prism для научных исследований

Prismer.AI — это открытая платформа для управления академическим процессом, от чтения статей до публикации. Она включает в себя AI-ридер PDF, облачное управление контекстом и редактор LaTeX, что делает её уникальной в сравнении с традиционными инструментами.

🚀Основные моменты:
- AI-ридер с графами цитирования
- Облачное управление знаниями с SDK
- Поддержка анализа данных в Jupyter
- Проверка цитат на соответствие базам данных
- Многоагентная система для исследований

📌 GitHub: https://github.com/Prismer-AI/Prismer

#typescript

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

🎨 Создавайте красивые диаграммы с beautiful-mermaid!

Этот инструмент позволяет быстро генерировать диаграммы Mermaid в формате SVG или ASCII, с возможностью кастомизации тем и без зависимостей от DOM. Идеально подходит для визуализации данных в терминале или интерфейсах.

🚀Основные моменты:
- Поддержка 5 типов диаграмм: потоки, состояния, последовательности и др.
- Двойной вывод: SVG для UI и ASCII для терминалов.
- 15 встроенных тем и простота добавления собственных.
- Мгновенное переключение тем без перерисовки.
- Высокая скорость рендеринга — более 100 диаграмм за 500 мс.

📌 GitHub: https://github.com/lukilabs/beautiful-mermaid

#typescript

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

🖥 Учим React через интерактив и наглядные схемы

Если React кажется сложным и абстрактным - проблема чаще всего не в вас, а в подаче. Когда не видно, что происходит под капотом, всё превращается в магию из хуков и стейтов.

Этот сайт решает именно это. Он показывает React визуально:
как рендерится интерфейс, как обновляется состояние, что происходит при изменениях и почему компонент ведёт себя именно так.

Не просто теория, а понимание механики.

Заходите и разберитесь в React по-настоящему:
https://react.gg/visualized

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

Иногда смотришь на чужой сайт и думаешь: “вот бы забрать этот блок/кнопку/анимацию себе” 😄

Нашёл удобный инструмент - MiroMiro.

Он позволяет в пару кликов *скопировать любой элемент со страницы* и сразу получить всё, что нужно для повторения дизайна:
- CSS стили
- картинки
- SVG
- Lottie-анимации
- палитру цветов

Полезно, когда делаешь лендинги, UI или просто собираешь референсы без ручного ковыряния DevTools.

miromiro.app

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

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

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

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

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

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

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

🚀 Автономный кодинг с Ralph

Ralph — это минималистичный агент для автономного кодирования, использующий файлы и git как память. Он выполняет задачи по одной истории за итерацию, сохраняя состояние в .ralph/.

🚀 Основные моменты:
- Определение историй и статусов через PRD (JSON).
- Каждая итерация начинается с чистого состояния.
- Логи и состояние хранятся в .ralph/.
- Поддержка различных агентов для выполнения задач.
- Простая настройка и использование шаблонов.

📌 GitHub: https://github.com/iannuttall/ralph

#javascript

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

⚡️ Включаем CSS-режим после январских - визуальная шпаргалка по cssreference.io

Внутри:
Коллекции по темам: Flexbox, Grid, Animations, Typography

У каждого свойства есть наглядная иллюстрация - сразу видно, что оно делает

Быстрый поиск по свойствам без лишних кликов

📎 Однозначно в закладки, чтобы не гуглить одно и то же каждый раз

cssreference.io

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

🧠 Умное управление задачами с Weft

Weft — это персональная доска задач, где AI-агенты выполняют ваши задания. Просто создайте задачу, назначьте агента, и он начнет работать, выполняя действия, такие как чтение писем, создание PR и редактирование документов. Все действия требуют вашего одобрения перед выполнением.

🚀 Основные моменты:
- AI-агенты работают параллельно над задачами
- Интеграция с Gmail, Google Docs, Google Sheets и GitHub
- Полный контроль над данными — саморазворачиваемый на Cloudflare
- Уведомления о завершении задач и необходимости одобрения

📌 GitHub: https://github.com/jonesphillip/weft

#javascript

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