IT + Javascript

Мой опыт

Недавно я отказался от использования React в пользу ванильного JS и WebComponents для небольшого проекта. Результат? Сайт стал быстрее, код - чище, а разработка - приятнее.

Вывод

Не поймите меня неправильно - фреймворки сыграли важную роль в развитии веба. Но, возможно, пришло время двигаться дальше?

А что думаете вы? Согласны ли вы, что эра больших фреймворков подходит к концу? Или я совершенно не прав? Давайте обсудим в комментариях!

P.S. Готов к горячим спорам. Фронтендеры, не сдерживайте эмоции! 😉

Заключение

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

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

Сбой 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. В отличие от традиционных терминалов, может отображать различные элементы интерфейса (всплывающие уведомления, меню и т. д.).

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

Деструктуризация – это способ извлечь значения из массивов или свойства из объектов и присвоить их отдельным переменным. Алиасинг (переименование) позволяет дать новые имена этим переменным в процессе деструктуризации:

Зачем это нужно:

• Улучшает читаемость кода.

• Помогает избежать конфликтов имен – если у вас уже есть переменная city, можно использовать hometown.

• Пригодится при работе с API, если он возвращает данные с неподходящими для вашего кода именами.

Каррирование

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

Та же функция, но с использованием каррирования:

Зачем это нужно:

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

• Повышает читаемость и модульность кода.

• Позволяет создавать новые функции на лету, используя уже существующие, например:

debounce() и throttle()

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

debounce() работает так:

• Функция вызывается только после того, как прошло определенное время с момента последнего вызова.

• Если функция вызывается снова до истечения этого времени, таймер сбрасывается.

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

throttle() работает так:

• Функция вызывается не чаще, чем раз в заданный интервал времени.

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

В этом примере функция handleScroll будет вызываться не чаще, чем раз в 300 миллисекунд, независимо от того, сколько раз пользователь прокрутил страницу за это время:

Мемоизация

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

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

• Если да, мы возвращаем сохраненный результат.

• Если нет, мы выполняем вычисление, сохраняем результат и возвращаем его.

Пример мемоизации при вычислении ряда Фибоначчи:

• Без мемоизации вычисление fibonacci(40) заняло бы очень много времени, потому что функция вызывала бы себя рекурсивно миллионы раз, повторяя одни и те же вычисления.

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

Когда использовать мемоизацию:

• Для функций с очень сложными вычислениями.

• Когда функция часто вызывается с одними и теми же аргументами.

• Когда функция  возвращает один и тот же результат для одних и тех же входных данных.

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

Proxy

Proxy позволяет нам обернуть объект и контролировать взаимодействие с ним. Мы можем перехватывать и изменять основные операции – чтение свойств, их запись, вызов функций и т. д. Proxy особенно полезен, когда нужно добавить дополнительное поведение к объектам, не изменяя их напрямую: это может быть полезно для отладки, для реализации реактивных систем (как в Vue.js), для создания умных объектов и многого другого:

Для чего еще можно использовать Proxy:

• Валидация – проверка данных перед их установкой в объект.

• Логирование – отслеживание использования и изменений свойств объекта.

• Создание вычисляемых на лету свойств.

• Безопасность – можно контролировать доступ к свойствам объекта.

Генераторы

Генераторы – особый тип функций в JavaScript:

• Могут приостанавливать свое выполнение и возобновлять его позже.

• Сохраняют свое состояние между вызовами.

• Используют ключевое слово yield для возврата значений.

Пример итерации по свойствам объекта:

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

• Ленивые вычисления – вычисляют значения, когда они действительно нужны.

• Создание бесконечных последовательностей, не занимающих бесконечный объем памяти.

• Упрощение асинхронного кода – можно сделать асинхронный код более похожим на синхронный.

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

Эффективное использование консоли

Помимо console.log(), консоль предоставляет несколько более наглядных методов вывода информации.

• Ошибки и предупреждения:

• Вывод табличных данных:

• Группировка логов:

• Измерение времени выполнения:

• Условное логирование:

• Трассировка стека:

Структурированное клонирование

Структурированное клонирование – метод создания полной (глубокой) копии объекта, включающей все вложенные объекты и структуры данных. Функция structuredClone позволяет выполнять такое клонирование просто и эффективно – в  отличие от JSON.parse(JSON.stringify()), structuredClone корректно обрабатывает Date, Map, Set и другие специальные типы JavaScript:

Структурированное клонирование стоит использовать, если:

• Нужно создать полную, независимую копию сложного объекта.

• Данные не должны изменяться (иммутабельность).

• Необходимо избежать побочных эффектов при изменении данных.

Самовызывающиеся функции

Самовызывающиеся функции (IIFE) выполняются автоматически сразу после их создания. Они создают временную область видимости, в которой можно безопасно определять переменные и функции, не беспокоясь о том, что они будут конфликтовать с другими частями кода и загрязнять глобальную область видимости. Эта техника особенно полезна в старых средах JavaScript, где блочная область видимости (let и const) недоступна, или в сценариях, где требуется немедленное выполнение для инициализации:

Теговые шаблоны

Теговые шаблоны позволяют разбирать шаблонные литералы с помощью функции. Первый аргумент такой функции содержит массив строковых значений, а остальные содержат выражения из подстановок. Здесь, например, функция sanitize заменяет опасные символы на их безопасные HTML-сущности, предотвращая выполнение нежелательного кода:

Как можно использовать теговые шаблоны:

• Автоматически обрабатывать пользовательский ввод, предотвращая XSS-атаки.

• Форматировать числа, даты и т. д.

• Безопасно формировать SQL-запросы, экранируя ввод.

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

📐 Единицы измерения высоты и ширины экрана в современном CSS

На протяжении многих лет разработчики использовали vh и vw, чтобы задавать размеры элементов в процентах от высоты и ширины экрана. Например, чтобы заполнить весь экран элементом, его размеры можно задать как 100vh на 100vw. Однако эти единицы могут работать ненадежно в некоторых случаях, например, при изменении видимой области экрана на мобильных устройствах из-за скрытия адресной строки браузера при прокрутке. Сейчас CSS предлагает новые единицы измерения, которые учитывают динамические изменения интерфейса браузера.

Large Viewport Units (lvh, lvw)

Эти единицы задаются относительно максимального размера видимой области, когда интерфейс браузера минимизирован (например, скрыты панели). По сути, они ведут себя аналогично классическим vh и vw, но с учетом возможных изменений интерфейса. Этот элемент будет занимать весь экран независимо от состояния интерфейса браузера:

.full-page-element {
height: 100lvh;
width: 100lvw;
z-index: -1
background: #f51;
}

Small Viewport Units (svh, svw)

Эти единицы рассчитываются относительно минимального размера видимой области, когда интерфейс браузера максимально расширен (например, когда панели видимы). Пример – статичный заголовок, занимающий 10% от минимальной видимой области:

.header {
height: 10svh;
background-color: #642;
}

Dynamic Viewport Units (dvh, dvw)

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

.adjustable-element {
height: calc(100dvh - 10svh);
}

Привет!

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

• Современные JavaScript-фреймворки и библиотеки

• HTML5 и CSS3: новые возможности и трюки

• Оптимизация производительности веб-приложений

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

• Лучшие практики UX/UI

• Новые веб-стандарты и браузерные технологии

• Тренды в веб-дизайне и интерфейсах

• Прогрессивные веб-приложения (PWA)

✍️ 50 лучших ресурсов с бесплатными HTML/CSS/JS-шаблонами

• HTMLrev – крупнейшая бесплатная библиотека шаблонов, созданных с использованием всех существующих технологий, включая HTML/CSS/JS, Bootstrap, Tailwind, Bulma, Angular, React, Vue, Next.js, Nuxt, Svelte, Astro, Laravel, Django, Gatsby, Hugo, Jekyll и BCMS.

• HTML5 UP – бесплатная коллекция HTML-шаблонов с уникальным дизайном и высоким качеством кода.

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

• One Page Lovе включает шаблоны на Bootstrap, Next.js, Tailwind, Carrd и Framer.

• Cruip предлагает шаблоны на Tailwind, React, Vue, Next.js и Laravel.

• Templatemo – огромная коллекция бесплатных Bootstrap-шаблонов.

• ThemeSelection – библиотека бесплатных и платных шаблонов на Vue, Next.js, Nuxt и Laravel. Специализируется на административных панелях и UI-китах.

• Creative Tim – шаблоны на Bootstrap, Tailwind, Angular, React, Vue, Next.js, Nuxt, Svelte, Laravel, Django и Astro.

• Themesberg предлагает широкий выбор шаблонов для административных панелей, лендингов, дизайн-систем и UI-китов.

• TemplateDeck – небольшая библиотека креативных Bootstrap-шаблонов высокого качества.

• Flout UI – коллекция компонентов Tailwind и готовых шаблонов Next.js.

• Michael Andreuzza – бесплатная подборка шаблонов Astro, созданная опытным и креативным разработчиком.

• Just Good UI – собрание бесплатных и платных шаблонов Astro.

• Startup Landing – подборка бесплатных шаблонов Next.js и Gatsby.

• Web3Templates – красивые шаблоны Tailwind, Astro и Next.js, оптимизированные для конверсий.

• Landify – красивые и современные шаблоны Gatsby.

• Nextjs Templates – широкий выбор шаблонов для разных целей, включая SaaS, стартапы, бизнес, программное обеспечение и блоги.

• LayoutFlow – отличные шаблоны для агентств, портфолио и сайтов услуг.

• Template Foundation – шаблоны, ориентированные на портфолио и личные сайты.

• Templated – продуманные шаблоны на HTML/CSS и Bootstrap.

• Freebiesbug – высококачественные шаблоны, оптимизированные для маркетинга.

• Start Bootstrap – широкий выбор профессиональных шаблонов для стартапов, агентств, портфолио, личных сайтов и блогов.

• MonsterOne – современные шаблоны с несколькими страницами.

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

• 3rd Wave Media – коллекция высококачественных шаблонов, ориентированных на ИТ-сферу.

• Tooplate – большая коллекция стильных и современных Bootstrap-шаблонов.

• Pixel Rocket – качественные Bootstrap- и Tailwind-шаблоны.

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

• W3Layouts отличается широким выбором шаблонов для бизнеса.

• Bootstrapious – шаблоны с хорошим дизайном и продвинутыми компонентами.

• Untree – стильные шаблоны со сложными элементами.

• Tailwind Toolbox – красивые шаблоны с продуманной структурой.

• Pixelcave – современные шаблоны для сайтов и административных интерфейсов.

• Themefisher – коллекция шаблонов для бизнеса, SaaS, блогов и других целей.

• Tailspark – Tailwind-шаблоны для SaaS-сайтов и лендингов.

• Red Pixel Themes – шаблоны с  хорошим дизайном и многими полезными компонентами.

• Ari Budin – уникальные шаблоны для портфолио, агентств, журналов и дизайн-систем.

• Treact – бесплатная библиотека React-шаблонов.

• DesignToCodes – шаблоны для стартапов, агентств, портфолио и административных панелей.

• UI Lib – библиотека Bootstrap-, Tailwind-, Angular-, React- и Vue-шаблонов.

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

• WrapPixel – специализируется на административных панелях и UI-китах, предлагает широкий выбор шаблонов с разным дизайном и структурой.

• Tabler – бесплатная библиотека Bootstrap-шаблонов, специализируется на административных панелях.

• KeenThemes – современные шаблоны для админ-панелей со множеством компонентов.

• EaseTemplate – подборка современных Bootstrap-шаблонов.

• BootstrapDash – шаблоны с несколькими страницами и продвинутыми компонентами.

• CodedThemes – профессиональные Bootstrap-, Angular-, React- и Vue-шаблоны с красивым дизайном.

• Salvia Kit предлагает коллекцию Angular-, React-, Vue-, Nuxt- и Svelte-шаблонов. Отличается широким выбором шаблонов для административных панелей.

• JustBoil – Tailwind-, React-, Vue-, Next.js-, Nuxt- и Laravel-шаблоны для сайтов и админ-панелей.

• Iqonic Design – библиотека React- и Vue-шаблонов, предлагает несколько бесплатных пакетов для создания современных интерфейсов.

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

Исследователи 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 не позволяет персонализировать контент.

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