Javascript + YouTube

Всем привет, окунитесь в обычный рабочий день frontend разработчика. Жена пикабушника делает листинг каталога для онлайн бронирования vr игр

Приятного просмотра, с удовольствием отвечу на все вопросы по теме

Смотреть в Вк:

Сбой Stack Overflow

В 2016 году Stack Overflow испытал 34-минутный перебой в работе. Причиной стало регулярное выражение, используемое для обработки пользовательского ввода:

^[\s\u200c]+|[\s\u200c]+$

Это выражение должно было находить пробелы в начале и конце строки. Проблема возникла, когда какой-то пользователь запостил комментарий, содержащий около 20 000 последовательных пробелов. Механизм обработки регулярных выражений начал проверять каждый пробел. Когда после 20 000-го пробела встретился другой символ, движок начал откатываться назад, пытаясь найти соответствие, начиная со второго пробела, третьего и так далее.

Это привело к катастрофическому возврату (catastrophic backtracking) – ошибке, которая возникает, когда движок регулярных выражений тратит чрезмерное количество времени на попытки найти соответствие шаблону, перебирая различные комбинации. Количество проверок начало лавинообразно увеличиваться и быстро достигло 199 990 000 – это вызвало значительную задержку и в итоге сбой системы.

Для решения проблемы потребовалось 10 минут на обнаружение причины, 14 минут на написание исправления и еще 10 минут на развертывание решения. В результате регулярное выражение было заменено на функцию подстроки.

Сбой Cloudflare

2 июля 2019 года произошел крупный сбой в работе платформы Cloudflare. Один из инженеров написал регулярное выражение, которое привело к действительно катастрофическому возврату – вызвало экстремальную перегрузку всей инфраструктуры. Использование процессоров выросло до 100%, а большинство сайтов, подключенных к Cloudflare, замедлились до крайности или вовсе оказались недоступными.

Коварная регулярка выглядела так:

(?:(?:\"|'|\]|\}|\\|\d|(?:nan|infinity|true|false|null|undefined|symbol|math)|\`|\-|\+)+[)]*;?((?:\s|-|~|!|{}|\|\||\+)*.*(?:.*=.*)))

Самую большую опасность в этом выражении представляет

.*(?:.*=.*)

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

Глобальный сбой Windows/CrowdStrike

19 июля 2024 года произошел самый массовый сбой в истории – из строя вышли около 8,5 млн Windows-компьютеров с ПО CrowdStrike. Причиной сбоя стало несоответствие между ожидаемым количеством входных параметров (21) и фактическим количеством параметров (20), которые были переданы в интерпретатор контента (этот компонент отвечает за обработку содержимого с использованием регулярных выражений). Когда система получила ввод с 21 параметром, интерпретатор контента попытался считать данные за пределами выделенной памяти, что и привело к сбою системы.

Привет!

Мы запустили еженедельную email-рассылку, посвященную последним новостям и тенденциям в мире бэкенда. В еженедельных письмах ты найдешь:

• Языки программирования и фреймворки для бэкенда

• Архитектура и проектирование серверных приложений

• Базы данных и управление данными

• Безопасность и защита данных

• Облачные технологии и DevOps

• API и интеграции

• Тестирование и отладка

• Инструменты и утилиты для бэкенд-разработчиков

• Лучшие практики и паттерны проектирования

🤵 Как не завалить собеседование в крупной ИТ-компании

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

• Перед собеседованием нужно освежить знания о структурах данных – и не только о списках, массивах и словарях. Не стоит игнорировать и те структуры, с которыми вы в последний раз сталкивались в университете и никогда не используете на практике – очереди, кучи и деревья. Автору попался как раз вопрос о деревьях, с которыми он с университетских времен не встречался и которые, скорее всего, на новой работе ему бы тоже не понадобились. Однако на собеседовании зачастую проверяются не только практические навыки, но и общая ИТ-эрудиция.

• Для тренировки нужно использовать самый простой редактор кода и таймер. Хотя в реальной работе повсеместно используются IDE с автодополнением кода и прочей ИИ-функциональностью, крупные компании при проведении теста обычно настаивают на старомодном способе решения задач, без каких-либо подсказок со стороны IDE. Писать код надо быстро – поэтому во время подготовки к собеседованию обязательно нужно пользоваться таймером для самоконтроля.

• Не надо решать задания по порядку. Необходимо прочитать все вопросы сразу и начинать с ответов на те, что попроще. Автор надолго застрял на первом вопросе, хотя мог быстро ответить на второй и успел бы выполнить третье задание. Два решенных задания, несомненно, лучше, чем незаконченный ответ на первый вопрос.

🛠️ Инструменты

BullMQ – библиотека для Node.js, которая реализует быструю и надежную систему очередей, основанную на Redis и предназначенную для решения всех основных задач в современных микросервисных архитектурах (сглаживание пиков нагрузки, создание надежных каналов связи между сервисами, распределение ресурсоемких задач между несколькими обработчиками и тому подобное).

Основные возможности и преимущества BullMQ:

• Точная обработка сообщений – библиотека гарантирует доставку как минимум один раз.

• Горизонтальное масштабирование – можно добавить сколько угодно обработчиков для параллельной обработки заданий.

• Высокая производительность – благодаря эффективным Lua-скриптам и конвейерной обработке.

• Минимальное использование CPU.

• Распределенное выполнение заданий на основе Redis.

• Поддержка очередей LIFO и FIFO.

• Приоритезация и отсроченное выполнение заданий.

• Запланированные и повторяющиеся задачи по расписанию.

• Настройка параллельности для каждого обработчика.

• Многопоточные (изолированные) функции обработки.

• Автоматическое восстановление после сбоев процесса.

• Поддержка зависимостей между задачами (родительские и дочерние задачи).

SigNoz – опенсорсный инструмент для мониторинга и устранения неполадок в развернутых приложениях. Это отличная бесплатная альтернатива коммерческим решениям – DataDog и New Relic.

Основная функциональность:

• Единый интерфейс для метрик, трассировок и логов.

• Визуализация метрик производительности приложений (RPS, процентили задержек, частота ошибок).

• Распределенная трассировка для выявления проблем в сервисах.

• Управление логами с продвинутым построителем запросов.

• Мониторинг инфраструктуры.

• Отслеживание исключений в различных языках программирования.

• Настраиваемые оповещения.

• Поддержка OpenTelemetry для инструментирования приложений.

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

Infisical – опенсорсная платформа для удобного и безопасного управления секретами и конфигурационными данными. Основные возможности:

• Централизованное хранение секретов – позволяет безопасно хранить в одном месте все важные данные (API-ключи, пароли от баз данных и другие конфиденциальные настройки приложений).

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

• Предотвращение утечек – помогает предотвратить случайное раскрытие секретной информации, например, путем коммита в Git-репозиторий.

• Управление конфигурациями – позволяет управлять общими настройками приложений для разных сред (разработка, тестирование, продакшн).

• Безопасный доступ – предоставляет инструменты (SDK, CLI, API) для безопасного получения секретов в приложениях и инфраструктуре.

• Контроль доступа – позволяет настраивать права доступа к секретам для разных пользователей и систем.

• Аудит и версионирование – ведет лог всех действий с секретами и позволяет отслеживать их изменения во времени.

• Интеграция с инфраструктурой – легко интегрируется с популярными платформами и инструментами (GitHub, AWS, Kubernetes и т. п.).

• Управление внутренней PKI – позволяет создавать и управлять собственной инфраструктурой открытых ключей для выпуска цифровых сертификатов.

KubeAI – инструмент для развертывания и управления опенсорсными LLM-моделями в среде Kubernetes. Среди основных функций и особенностей:

• Совместимость с OpenAI. Предоставляет API, совместимый с OpenAI, что позволяет легко заменить сервисы OpenAI в любых ИИ-приложениях на локальные.

• Поддержка различных моделей. Может работать с различными моделями, включая языковые (LLMs), модели для преобразования речи в текст (например, Whisper) и другие.

• Мультиплатформенность. Может работать на разных аппаратных платформах, включая системы только с CPU, системы с GPU, а в будущем планируется поддержка TPU.

• Масштабирование. Обеспечивает автоматическое масштабирование в зависимости от нагрузки, включая возможность масштабирования до нуля (когда ресурсы не используются).

• Простота развертывания. Не требует никаких дополнительных зависимостей типа Istio или Knative.

• Встроенный пользовательский интерфейс. Предоставляет чат-интерфейс OpenWebUI для взаимодействия с моделями.

• Управление серверами vLLM, Ollama и FasterWhisper.

• Интеграция с системами обмена сообщениями. Поддерживает потоковую передачу и пакетную обработку через интеграции с Kafka и другими PubSub-системами обмена сообщениями.

Zed – опенсорсный многопользовательский редактор кода, предназначенный для совместной работы над проектом в реальном времени. Основные особенности и возможности:

• Написан на Rust и отличается высокой скоростью и минимальными требованиями к ресурсам.

• Предусматривает интеграцию с LLM для генерации, анализа и рефакторинга кода.

• Имеет встроенный терминал.

• Предоставляет несколько удобных функций для совместной работы – демонстрацию экрана, общие заметки и т. п.

• Разработан с учетом конфиденциальности пользователей и не собирает личные данные.

Warp – современный высокопроизводительный терминал с ИИ-функциональностью. Основные особенности и возможности:

• Производительность. Написан полностью на Rust и использует рендеринг на GPU через Metal API, что обеспечивает высокую скорость работы (60+ FPS даже на 4K- и 8K-мониторах).

• Поддержка совместной работы в реальном времени.

• Улучшенный ввод команд. Редактор ввода команд представляет собой полноценный текстовый редактор с поддержкой выделения текста, позиционирования курсора, привычных пользователям сочетаний клавиш и автодополнения.

• Встроенный чат-бот. Понимает указания на естественном языке, дает рекомендации и отвечает на вопросы.

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

• Совместимость с популярными оболочками. Работает с Bash, ZSH и Fish, сохраняя существующие привязки клавиш.

• Кроссплатформенность. Работает на macOS и Linux, вскоре будет поддерживать Windows и WASM.

• Продвинутый UI. В отличие от традиционных терминалов, может отображать различные элементы интерфейса (всплывающие уведомления, меню и т. д.).

Автор рассылки: Наталья Кайда

Исследователи Google Deep Mind провели анализ сообщений о случаях мошенничества с использованием ИИ и выяснили, для каких преступлений чаще всего используются возможности GenAI. Спойлеры:

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

• Один из самых впечатляющих случаев мошенничества произошел в феврале 2024 года в Гонконге, когда злоумышленникам удалось убедительно подделать видеоконференцию с участием нескольких лиц. Все участники, включая фальшивого финансового директора, выглядели настолько естественно, что ничего не подозревающий сотрудник послушно перевел $25,6 млн на подставной счет.

Еще один из отцов-основателей OpenAI, Джон Шульман, перешел в Anthropic.

Компания Groq, разработавшая уникальный супербыстрый LPU (языковой процессор), получила $640 млн инвестиций и оценку в $2,8 млрд, что свидетельствует о фундаментальном сдвиге в индустрии ИИ-инфраструктуры – Groq стал серьезным конкурентом для NVIDIA.

На опенсорсной платформе LMSYS Chatbot Arena, где ИИ-компании часто тестируют предстоящие релизы, появился некий anonymous-chatbot, который превосходит GPT-4o и остальные крупнейшие модели и, возможно, является секретным проектом Q*/Strawberry от OpenAI. На это намекнул Альтман.

Новая модель роботов-гуманоидов Figure 02 успешно прошла тестирование на заводе BMW. Робот поддерживает диалог благодаря генеративному ИИ от OpenAI, может поднимать до 25 кг, выполняет задачи автономно и работает 8 часов без подзарядки.

На платформе Mistral теперь можно создать собственных ИИ-агентов, имеющих такую же функциональность, как кастомные GPT.

Феноменальный успех ChatGPT сделал Сэма Альтмана одним из самых влиятельных людей в мире, и это должно внушать серьезное беспокойство всем нам. По наблюдениям Гэри Маркуса, которые он подробно изложил в разоблачительной статье, директору OpenAI и деятельности его компании нельзя доверять:

• Во время слушаний по вопросам регулирования ИИ в сенате США Альтман предоставил неполную и неискреннюю информацию и солгал, отвечая на вопрос о том, получает ли он прибыль от OpenAI. Альтман буквально сказал, что получает денег «достаточно для оплаты медстраховки». При этом один автомобиль из его обширного автопарка, Koenigsegg Regera, стоит не менее $4 млн.

• Несмотря на публичные заявления Альтмана о необходимости регулирования ИИ, на деле OpenAI активно лоббирует ослабление регулирования.

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

• Деятельность OpenAI подразумевает использование огромных объемов электроэнергии, воды и других ресурсов. Такое же безответственное отношение к ресурсам переняли все конкуренты OpenAI – от Anthropic до Microsoft. Никто не пытается «озеленить» ИИ-индустрию.

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

Илон Маск снова решил судиться с OpenAI и ее основателями – Сэмом Альтманом и Грэгом Брокманом. Юридическая команда Маска утверждает, что Альтман и Брокман «усердно манипулировали Маском», убеждая его стать соучредителем их якобы благотворительной организации, обещая безопасность и прозрачность OpenAI, что отличало ее от альтернатив, ориентированных на прибыль. Иск выходит за рамки простых договорных споров, поскольку содержит серьезные юридические обвинения, включая финансовое мошенничество, нарушение договора, сетевое мошенничество и даже нарушение RICO («Закона о коррумпированных и находящихся под влиянием рэкетиров организациях»).

Привет!

Мы запустили еженедельную email-рассылку, посвященную последним новостям и тенденциям в мире искусственного интеллекта. Наша цель – держать подписчиков в курсе самых интересных открытий, исследований и приложений ИИ.

В еженедельных письмах ты найдешь:

• Новости о прорывных исследованиях в области машинного обучения и нейросетей.

• Материалы о применении ИИ в разных сферах – медицине, бизнесе, науке, производстве и образовании.

• Статьи об этических аспектах развития технологий.

• Подборки лучших онлайн-курсов и видеолекций по машинному обучению.

• Обзоры инструментов и библиотек для разработки нейронных сетей.

• Ссылки на репозитории с открытым исходным кодом ИИ-проектов.

• Фильмы, сериалы и книги, которые заслуживают внимания AI-энтузиастов.

🛠️ Инструменты

MinusX – Chrome-расширение для анализа данных в Jupyter и Metabase.

Frontend AI – генерирует код UI-компонентов по текстовым описаниям и скриншотам, поддерживает редактирование.

Pictory – превращает любой контент в видеоклипы.

Semantic Scholar – бесплатный ИИ-поисковик по огромной базе (220,2 млн +) научных публикаций из всех отраслей науки. Имеет API для использования в собственных приложениях.

Napkin AI – визуализирует информацию в виде любой бизнес-графики – диаграмм, схем, графиков, презентаций и т. д.

AIswers – платформа, на которой можно задавать вопросы множеству ИИ-моделей одновременно.

Spreadsite – превращает данные из CSV-файлов в интерактивные дашборды и сайты.

GummySearch – находит Reddit-сообщества, попадающие под описание целевой аудитории продукта.

Rosebud – личный коуч и психолог.

✍️ Сделай сам

На Hugging Face выпустили опенсорсную модель CogVideoX-2B для генерации видео, по качеству сопaоставимую с Sora.

MiniCPM-V – опенсорсная минимодель, которая имеет всего 8 млрд параметров и работает на смартфоне, но при этом превосходит GPT-4V в понимании содержимого изображений и видео в реальном времени.

Flux – модель, разработанная командой, создавшей Stable Diffusion. По многочисленным отзывам, во многом превосходит Midjourney и DALL-E. И самое главное – ее можно установить на свой комп и даже на приличный игровой ноутбук. Протестировать можно на платформе NightCafe.

25 опенсорных инструментов для использования в ИИ-проектах

Vanna – Python-библиотека, которая позволяет автоматически писать SQL-запросы и задавать базе данных вопросы на естественном языке.

Khoj – AI-помощник для поиска информации. Понимает разные форматы файлов, включая Word, PDF, Markdown и другие, а также интегрируется с платформами вроде Notion.

Flowise – визуальный конструктор для построения пользовательских потоков управления языковыми моделями и AI-агентами.

LLAMA GPT – локальный и автономный чат-бот, похожий на ChatGPT.

LocalAI – API-сервер, совместимый с API OpenAI, который позволяет запускать языковые модели, генерировать изображения и аудио локально или на своей инфраструктуре без использования GPU.

Continue – один из лучших AI-ассистентов для написания кода. Он позволяет подключать разные модели и контексты, чтобы создавать пользовательские автодополнения и чат-интерфейсы внутри VS Code и JetBrains IDE.

Chat2DB – ИИ-платформа для управления данными, разработки и анализа. Может конвертировать естественный язык в SQL (и наоборот), а также автоматически генерировать отчеты.

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

Lobe Chat – фреймворк для создания чат-интерфейсов с языковыми моделями. Он поддерживает речевой синтез, мультимодальность и расширяемую систему плагинов.

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

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

reor – ИИ-приложение для ведения заметок. Автоматически связывает заметки, отвечает на вопросы и обеспечивает семантический поиск. Все данные хранятся локально, а редактирование заметок происходит в Markdown-редакторе, похожем на Obsidian.

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

Instrukt – терминальная среда с интегрированным ИИ. Позволяет создавать и инструктировать модульных AI-агентов, генерировать индексы документов для ответов на вопросы и назначать инструменты для любого агента.

Quivr – RAG-фреймворк для создания специализированных AI-ассистентов с разными возможностями.

Open Interpreter – интерфейс, который позволяет отдавать компьютеру команды на естественном языке в терминале и дает возможность LLM выполнять код (Python, JavaScript, Shell и т. д.).

CopilotKit – фреймворк для создания пользовательских AI-помощников в React-приложениях.

GPT Engineer – инструмент, который позволяет вам описать нужное приложение на естественном языке, а затем наблюдать, как AI пишет, выполняет и вносит улучшения в код.

Dalai – самый простой инструмент для запуска моделей Llama* и Alpaca локально на вашем компьютере.

OpenLLM – инструмент, позволяющий с помощью одной команды запускать любые опенсорсные LLM в виде API-эндпоинтов. Поддерживает множество моделей и оптимизирован для использования в высоконагруженных приложениях.

Unsloth – ускоряет процесс тонкой настройки больших языковых моделей (Llama-3*, Mistral, Phi-3 и Gemma). Позволяет проводить файнтюнинг в два раза быстрее, используя на 70% меньше памяти, без потери точности.

E2B – предоставляет безопасную среду (песочницу) для AI-агентов и приложений. Это особенно полезно при создании ИИ-приложений с возможностями выполнения кода.

Camel AI – фреймворк, предлагающий масштабируемый подход к созданию систем с несколькими AI-агентами, которые могут эффективно взаимодействовать друг с другом.

Aider – ИИ-напарник программиста, который работает в терминале. Он может начинать новые проекты, умеет редактировать файлы и работать с существующими Git-репозиториями. Aider совместим со всеми популярными моделями (GPT-4, Sonnet 3.5, DeepSeek Coder, Llama 70b и другими).

FastEmbed – быстрая и легкая Python-библиотека для генерации эмбеддингов (векторных представлений) документов. Она использует ONNX runtime вместо PyTorch, что и делает ее быстрее традиционных решений.

Автор рассылки: Наталья Кайда

• Динамическое создание контента – можно добавлять новые элементы на страницу без перезагрузки.

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

• Шаблонизацию – поскольку упрощает создание повторяющихся структур HTML.

• Управление интерфейсом – помогает создавать интерактивные элементы, которые реагируют на действия пользователя.

Почти все современные JavaScript-фреймворки и библиотеки предоставляют удобные инструменты для создания DOM-элементов из HTML-строк – это одна из основных задач, которую они решают. Если же нужно обойтись возможностями ванильного JavaScript, то это можно сделать несколькими разными способами.

innerHTML

Это самый известный метод: он позволяет вставить строку HTML внутрь атрибута innerHTML контейнера и затем получить доступ к созданному узлу DOM. Однако он может обрабатывать только допустимые узлы HTML – к примеру, попытка вставить элемент <tr> в <div> приведет к тому, что узел не будет создан. Кроме того, этот метод не выполняет скрипты в HTML-строках, что делает его безопасным при работе с непроверенным содержимым.

innerHTML + template

Использование тега <template> снимает ограничения на содержимое – он может содержать любую HTML-структуру, включая элементы, связанные с таблицами – <tr> и <td>.

insertAdjacentHTML

Как и innerHTML, этот метод обрабатывает только допустимые HTML-узлы и не выполняет скрипты.

DOMParser

Этот метод работает медленнее остальных, поскольку он разбирает строку, создавая полный HTML-документ, и только потом извлекает узел из документа. Он также может обрабатывать только допустимые узлы HTML и не выполняет скрипты.

Range.createContextualFragment

Самый простой, но не безопасный метод – выполняет скрипты. Поэтому при его использовании необходимо очищать данные для защиты от XSS – например, с помощью DOMPurify.

🦮 Интерактивные гайды

Гайд по SVG

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

К слову, возможности SVG простираются за пределы создания векторных картинок и лого: энтузиасты умудрились сделать «Тетрис» в виде одного SVG-файла.

Гайд по :has() в CSS

Псевдокласс :has() открывает новые возможности для творческих экспериментов в CSS, позволяя создавать сложные и интерактивные дизайны без использования JavaScript. Это первый родительский селектор, позволяющий стилизовать элемент в зависимости от его содержимого. Все невероятные возможности :has() продемонстрированы в интерактивном гайде CSS :has() Interactive Guide.

🪚 Инструменты

Plasmic – опенсорсный визуальный конструктор для создания сайтов и веб-приложений на React со множеством функций:

• Можно интегрировать с существующими React-проектами.

• Можно использовать как CMS.

• Позволяет подключать разные источники данных и бэкенд-сервисы.

• Совместим с Next.js и Gatsby.

• Поддерживает оптимизацию производительности, включая статическую генерацию сайтов и оптимизацию изображений.

article-extractor – эта библиотека Node.js извлекает текст статей, метаданные и ссылки на изображения по URL.

Turndown – Node.js-библиотека для конвертирования HTML в Markdown. Отлично работает в связке с предыдущим инструментом.

15 полезных расширений VS Code для фронтендера

• Auto Rename Tag – при переименовании HTML-тега автоматически обновляет парный тег.

• Code Spell Checker – находит опечатки в именах переменных и других идентификаторах.

• DotEnv – добавляет цветовое оформление и улучшает читаемость файлов с переменными окружения.

• Docker – добавляет вкладку для удобной работы с контейнерами, если вы используете Docker.

• ESLint – выявляет проблемы в коде (нарушения форматирования или потенциальные ошибки) на лету.

• Figma – позволяет встраивать и просматривать файлы дизайна Figma прямо в VS Code.

• GitHub Copilot – предлагает AI-генерируемые подсказки во время набора кода.

• Copilot Chat – предоставляет окно чата в стиле ChatGPT прямо в редакторе.

• GraphQL – набор расширений, упрощающих работу с GraphQL.

• Import Cost – показывает размер импортируемых пакетов, помогая выявить потенциальное раздувание кода.

• Live Server – запускает локальный сервер с автоматической перезагрузкой, что удобно для предварительного просмотра изменений.

• Live Share – позволяет программировать в команде с другими разработчиками, работая в одном редакторе в реальном времени.

• Markdown Preview Enhanced – предоставляет живой предпросмотр Markdown-файлов во время редактирования.

• Notes – удобный блокнот для хранения заметок по проекту, инструкций по настройке и т. д.

• Hinty – предоставляет динамические подсказки в реальном времени. Помогает избегать повторения распространенных ошибок и соблюдать стандарты написания кода в команде.

⚛️ Как выбрать оптимальную стратегию рендеринга

Рендеринг – это процесс превращения кода в контент. За годы развития интернета эта технология прошла долгий путь – от формирования простейших HTML-страниц на стороне сервера до динамического обновления интерактивных приложений без перезагрузки. Сейчас в ходу несколько методов рендеринга:

• Генерация статических сайтов (предварительно генерирует HTML-страницы во время сборки приложения).

• Генерация на стороне сервера (генерирует полный HTML для страницы при каждом запросе).

• Генерация на стороне клиента (использует JavaScript для рендеринга контента в браузере пользователя).

• Инкрементальная статическая регенерация (позволяет обновлять отдельные страницы после сборки сайта).

• Частичный пререндеринг (экспериментальный подход, который стремится автоматически оптимизировать стратегии рендеринга).

Эти методы по-разному подходят к оптимизации работы приложения, SEO и пользовательского опыта. Их можно комбинировать – это позволяет по максимуму использовать сильные стороны, нивелировать недостатки и обеспечить оптимальный баланс производительности, свежести данных и интерактивности. Разработчики Vercel (эта компания создала Next.js) написали подробную статью о преимуществах и недостатках каждого подхода и о том, как их лучше комбинировать.

Генератор статических сайтов (SSG)

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

Преимущества:

• Самая быстрая загрузка страниц.

• Отличные показатели SEO.

• Самая низкая нагрузка на сервер.

• Низкие затраты на инфраструктуру.

Недостатки:

• Увеличенное время сборки для сайтов с большим количеством страниц.

• Обновление контента требует новой сборки и развертывания.

Рендеринг на стороне сервера (SSR)

Идеально подходит для персонализированных дашбордов, лент соцсетей и визуализации данных в реальном времени.

Преимущества:

• Всегда отдает свежий, актуальный контент.

• Показатели SEO и времени загрузки данных лучше, чем при рендеринге на стороне клиента.

Недостатки:

• Загрузка происходит медленнее, чем при использовании SSG или ISR.

• Показатель времени до первого байта (TTFB) может быть неудовлетворительным.

• Потребляет больше серверных ресурсов.

Инкрементальная статическая регенерация (ISR)

Подходит для случаев, когда сборка с SSG занимает слишком много времени. Используется для страниц продуктов в e-commerce, новостных порталов и крупных контентных сайтов.

Преимущества:

• Сохраняет быструю загрузку страниц, как у SSG.

• Позволяет обновлять контент по требованию без полной пересборки.

• Эффективно масштабируется на большое количество страниц.

• Может быть экономичнее, чем SSR, в некоторых случаях.

Недостаток:

• Требует тщательного управления стратегиями инвалидации кэша.

Рендеринг на стороне клиента (CSR)

Подходит для интерактивных элементов страницы, требующих немедленной обратной связи, админ-панелей с данными в реальном времени и приложений типа Notion, которые непрерывно синхронизируют вводимые пользователем данные с сервером.

Преимущества:

• Самый интерактивный пользовательский опыт.

• Плавные переходы между состояниями приложения.

• Взаимодействие с внешними данными в реальном времени.

Недостатки:

• Начальная загрузка может быть медленнее из-за необходимости загрузки JavaScript-бандла.

• Оптимизация Core Web Vitals может быть сложной.

• Требует тщательного управления состоянием на клиенте.

Частичный пререндеринг (PPR)

PPR призван объединить преимущества других стратегий рендеринга и потенциально может стать стандартным подходом для веб-приложений в будущем.

Преимущества:

• Мгновенная загрузка страницы (как у SSG).

• Плавная потоковая передача динамического контента.

• Улучшенная производительность с меньшими затратами на разработку.

Недостатки:

• Все еще находится в стадии исследований и разработки.

• Может потребовать рефакторинга кода для включения в существующий проект.

Выбор стратегии рендеринга

При выборе стратегии рендеринга нужно учитывать следующие факторы.

Как часто обновляется контент?

• Статический контент лучше всего обрабатывать генератором статических сайтов.

• Для вывода периодически обновляемого контента отлично подходит инкрементальная статическая регенерация.

• Обновление контента в реальном времени требует серверного или клиентского рендеринга.

Для повышения производительности нужно стремиться к максимальному использованию SSG и ISR, прибегая к SSR только в случае необходимости получения абсолютно свежих данных.

Насколько важно продвижение страницы в поисковых системах?

• Хотя Google может рендерить JavaScript на стороне клиента, ключевые показатели Core Web Vitals все еще сильно влияют на ранжирование.

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

Насколько активно пользователь будет взаимодействовать со страницей?

• Если страница в основном статическая с минимальным взаимодействием, используйте SSG или ISR с небольшим количеством клиентского JavaScript.

• В противном случае может потребоваться SSR (с гидратацией на стороне клиента).

Каковы требования к скорости загрузки?

• Для максимально быстрой начальной загрузки используйте SSG или ISR с редкой инвалидацией.

• Чтобы сбалансировать свежесть данных и скорость, используйте ISR или SSR (для актуальных данных).

• CSR может обеспечить данные в реальном времени, но часто за счет начальной загрузки.

Нужно ли персонализировать контент?

• Если вам нужен персонализированный контент, скорее всего, потребуется SSR или CSR.

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

• SSG не позволяет персонализировать контент.

Автор рассылки: Наталья Кайда