Веб-разработка

Разбираемся, как связать чат-бота MAX с GigaChat API на Node.js: подготовка бота, переменные окружения, обработка сообщений, запрос к модели и отправка ответа пользователю.

Разбираемся, когда frontend-команде нужен mock API, чем отличаются моки в коде, json-server, MSW и свой тестовый сервер, и как проверять loading, error и empty states до готового backend.

Кейс Berhasm.com: сайт на Next.js и Payload CMS тормозил, падал и плохо индексировался. Рассказываем, что нашли в архитектуре, как убрали конфликт версий CMS и почему это стало базой для SEO.

Разбираемся, как за несколько минут написать простое тестовое API на Node.js и Express, чтобы быстрее проверять фронтенд, формы, ошибки и демо-проекты.

В этой статье я расскажу, как сохранять все сообщения console.log из JavaScript не только в консоль, но и в файл, что удобно для отладки, анализа ошибок и ведения логов на сервере.

Облачные хранилища позволяют хранить и быстро доставлять любые файлы — от изображений и видео до документов. Если вы используете Next.js, интеграция с S3-совместимыми сервисами (например, AWS S3 или локальными провайдерами, такими как PS Cloud) открывает массу возможностей: загрузка файлов от пользователей, хранение медиа для сайта или бэкапов.

В 2025 году виртуальные серверы (VPS) стали основой не только для хостинга сайтов, но и для работы приложений, микросервисов, контейнеров, машинного обучения и систем автоматизации. Но среди множества тарифов — от 291 ₽ до 3900 ₽ в месяц — как выбрать лучший именно для ваших задач?

В этой статье я показываю, как шаг за шагом написать простой, но полезный инструмент для отслеживания привычек с помощью inquirer, chalk, dayjs и Node.js. Приложение сохраняет прогресс в .json-файле, поддерживает добавление привычек, отметки за день и просмотр статистики за 7 дней.

В 2024 году языки программирования продолжают развиваться, и на горизонте появляются новые возможности для разработчиков. TypeScript, Python, JavaScript, Go и Rust остаются в центре внимания, предлагая уникальные преимущества и применение в различных проектах. Изучение этих языков не только повысит ваши навыки, но и откроет двери к успешной карьере в быстро меняющемся технологическом мире. Узнайте, почему стоит инвестировать время в изучение этих востребованных технологий!

Когда вы меняете структуру URL на сайте, важно сохранить ценность существующих бэклинков и избежать ошибок 404. Узнайте, как настроить SEO-дружественные редиректы в Next.js, включая сценарии для мультиязычных сайтов. Рассматриваются примеры использования next.config.js и getServerSideProps для гибкого перенаправления.

Telegram-бот для перевода голосовых сообщений в текст — это удобный инструмент для автоматизации общения, обработки заявок и работы с аудио. Ниже я покажу, как реализовать такого бота с использованием OpenAI Whisper и Node.js.

Помодоро-техника — это один из самых эффективных методов управления временем. Она помогает повысить продуктивность, сосредоточиться на работе и делать регулярные перерывы, что уменьшает вероятность выгорания. В этой статье мы создадим консольный помодоро-таймер с прогрессбаром на Node.js.

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

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

Если вы разрабатываете приложение на Next.js и сталкиваетесь с ошибкой "localStorage is not defined", не волнуйтесь. Эта ошибка возникает из-за специфики работы Next.js, который помимо браузерного, поддерживает еще и серверный рендеринг. Рассмотрим, почему возникает эта ошибка и как её исправить.

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

Довелось мне поработать над канадским интернет-магазином, в котором была задача подключить и интегрировать доставку товара через Canada Post, да подумал я, ну и задачка.

FetchAPI специально разработано для удобства получения данных и поддерживает множество различных форматов данных, включая JSON, XML и бинарные данные. Он предоставляет простой синтаксис на основе промисов для выполнения HTTP-запросов и может использоваться как в браузере, так и в среде Node.js.

В этой статье рассмотрим различные варианты параметра fallback в функции getStaticPaths фреймворка Next.js. Обсудим три варианта: fallback: false, fallback: true и fallback: 'blocking', а также их влияние на процесс генерации страниц сайта

Настройка локализации в Next.js может быть выполнена несколькими способами. Один из способов - использовать библиотеку next-i18next

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

Самый простой способ отправки уведомлений о происходящих изменениях на вашем сайте это отправка электронных писем для уведомлений, подтверждений или связи с пользователями. В этой статье мы рассмотрим, как реализовать отправку заявок на Email в приложении на основе Next.js, используя библиотеку Nodemailer.

В этой статье мы создадим за 2 минуты каркас приложения на Next.js и выведем в качестве страницы знакомую всем надпись Hello World

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

В мире веб-разработки существует множество терминов и аббревиатур, среди которых выделяется загадочное "REST API". Давайте вместе разберемся, что же на самом деле скрывается за этими таинственными словами.

Исследование от Netcraft показало, что всего 5% веб-сайтов, использующих SSL/TLS для шифрования данных, правильно настроены для использования HSTS (HTTP Strict Transport Security). Этот стандарт обеспечивает дополнительный уровень безопасности, но многие сайты не используют его правильно. https://www.nginx.com/blog/http-strict-transport-security-hsts-and-nginx/ https://serpstat.com/ru/blog/chto-takoe-hsts/#2.2

В большинстве случаев в разработке сайта нам приходится внедрять формы. Одновременно с внедрением формы на веб-сайте мы должны осознавать, что боты могут отправлять мошеннический контент. Капчи - один из лучших способов предотвратить это. Здесь, в этой статье, мы обсудим шаги по внедрению Google reCAPTCHA v2 в форме Next.js.

Нейронные сети плотно вошли в нашу жизнь. Давайте посмотрим, какие же нейросети уже существуют в 2023 году

Изучаем функцию var_dump() в PHP: Мощный инструмент отладки и анализа данных. Узнайте, как эффективно использовать var_dump() для раскрытия структуры переменных, массивов и объектов, анализа типов данных и значений. Повысьте эффективность разработки и обнаруживайте ошибки в коде с легкостью

Фильтры в WordPress: Изменение данных с гибкостью. Фильтры - это механизм, позволяющий разработчикам изменять данные или контент перед их выводом или использованием в системе. Они представляют собой функции обратного вызова, которые модифицируют значения переменных, текст или HTML-код. В этом превью мы узнаем, как работают фильтры в WordPress и как они позволяют вносить изменения без вмешательства в основной код системы.

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

Узнайте, как использование микроразметки Schema.org и особенно микроразметки Breadcrumb способствует повышению эффективности SEO-оптимизации вашего сайта. Разберем, как эта мощная инструментарий может улучшить пользовательский опыт, привлечь больше трафика и повысить видимость вашего сайта в результатах поиска

Strapi v4 – это последняя версия мощной системы управления контентом с открытым исходным кодом. Она внесла значительные изменения и улучшения по сравнению с предыдущей версией, Strapi v3.

Изучите, как использовать мета-теги на вашем веб-сайте, чтобы повысить его видимость в поисковых системах. Мета-теги, такие как title, description и keywords, играют важную роль в оптимизации поисковых систем и привлечении органического трафика. Узнайте, как правильно настраивать эти мета-теги, чтобы они отображали информацию о вашем контенте максимально точно и привлекательно. Познакомьтесь с советами и рекомендациями по созданию эффективных мета-тегов, которые помогут вашему веб-сайту достичь высокого ранжирования в поисковых системах и привлечь больше посетителей.

Узнайте, как использование revalidate в функции getStaticProps в Next.js помогает обновлять данные на статически сгенерированных страницах. Улучшите производительность и актуальность данных в своем приложении. Разберем роль и применение revalidate, а также поделимся практическими советами для оптимального использования. Улучшите пользовательский опыт и обновляемость данных с помощью Next.js и revalidate.

Хотите узнать, как Next.js может решить распространенные проблемы веб-разработки? В этой статье мы рассмотрим, как этот мощный фреймворк помогает улучшить скорость загрузки, обеспечить рендеринг на стороне сервера, улучшить навигацию и работу с данными, а также оптимизировать ваше веб-приложение для поисковых систем. Узнайте о преимуществах Next.js и почему он стал одним из самых популярных инструментов веб-разработки.

В этой статье мы рассмотрим основные факторы, которые следует учесть при выборе провайдера хостинга для Next.js и Strapi. Мы также рекомендуем некоторых из лучших провайдеров хостинга для этих технологий.

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

Узнайте что такое веб-разработка, ключевые технологии и языки программирования. Разберитесь в различных специализациях, таких как фронтенд, бэкенд и мобильная разработка

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

Узнайте, как использовать Vercel для быстрого и безболезненного развертывания ваших приложений на React. Эта платформа имеет множество преимуществ, включая высокую скорость развертывания, простоту использования и автоматическое масштабирование инфраструктуры. В этой статье мы рассмотрим шаги настройки проекта и развертывания приложения на Vercel.

GPT-3 (Generative Pre-trained Transformer 3) - это один из самых передовых и сложных в мире инструментов для генерации текста и обработки естественного языка, разработанный компанией OpenAI. В данной статье мы рассмотрим, как подключиться к GPT-3 с помощью веб-приложения на Next.js или Node.js, чтобы использовать его возможности в своих проектах. Мы рассмотрим все шаги необходимые для подключения и приведем примеры реализации, а также поделимся лучшими практиками и советами по работе с GPT-3.

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

useEffect это хук в React, который позволяет запускать функции после рендеринга компонента и при изменении зависимостей. Он может использоваться для различных целей, например, загрузки данных с сервера, изменения размера окна, отслеживания местоположения пользователя. Важно использовать его правильно, избегая множественных вызовов и проблем с производительностью и памятью. Рекомендуется указывать минимальное количество зависимостей, использовать функцию очистки и кэширование функций и значений.

getStaticProps и getServerSideProps - это две функции в Next.js, которые используются для получения данных для страниц. getStaticProps вызывается на этапе сборки, что позволяет сделать динамические страницы статическими и увеличить производительность и SEO. getServerSideProps же вызывается на стороне сервера при каждом запросе страницы, позволяя использовать данные, которые могут меняться в реальном времени, но может приводить к низкой производительности и низкому SEO. Выбор между этими функциями зависит от конкретных требований вашего проекта и способа использования данных.

В этой статье приведена пошаговая инструкция по добавлению кастомных полей в тип контента в Strapi v4. Она охватывает использование админ-панели Strapi, ручное редактирование файла модели типа контента и использование Strapi CLI для генерации новых полей. Также объясняется, как кастомные поля автоматически добавляются в соответствующую схему GraphQL и как их можно запрашивать через GraphQL API. Целью статьи является помочь разработчикам понять гибкость и простоту добавления кастомных полей в Strapi v4, чтобы лучше удовлетворять потребности их проекта.

В статье было рассмотрено как создать Telegram-бота с помощью библиотеки node-telegram-bot. Был представлен пример кода для реализации команды "/start" и отправки ответного сообщения пользователю. Основной принцип создания Telegram-бота - это использование Telegram Bot API для получения обновлений и отправки сообщений. Создание Telegram-бота может быть полезным для различных целей, как для бизнеса так и для личных нужд.

Strapi - это фреймворк для создания административных панелей и интерфейсов API для управления контентом (Content Management System, CMS). Он позволяет разработчикам легко создавать, настраивать и управлять API для их веб-приложений и сайтов.

Мы обнаружили, что многие из тестовых API являются платными, что может немного затруднить обучение работе с API. К счастью для этого есть бесплатные API

Лучший способ понять что такое CI/CD - это рассматривать его как метод или набор принципов работы и практик, которые позволяют командам разработчиков вносить изменения в код чаще и надежнее.

Мы создадим небольшое, но многофункциональное приложение, которое позволит просматривать ваши контакты. Туториал, в целом, займет от 30 до 60 м.

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

Если вы хотите иметь полный контроль над CMS, быть независимым от политики компании, ограничений и т. д., взгляните на Strapi. Это безголовая CMS Node.js с открытым исходным кодом, которую вы можете разместить на своем сервере, с возможностью добавления пользовательских плагинов, позволяющих вам еще больше настроить ее.

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

В Next.js, страница - это обычный React-компонент, экспортированный из .js, .jsx, .ts или .tsx файла в папке pages. Каждая находящаяся в этой папке страница, ассоциируется с роутом.

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

React Countup - это легковесная библиотека, основанная CountUp.js. Используется для быстрого создания анимации, отображающей числовые данные более интересным способом.

Хуки были добавлены в React, начиная с версии 16.8. При переходе от классов к функциональным компонентам хуки позволяют использовать состояние и другие функции в функциональных компонентах, то есть без написания компонента класса.

Карта сайта (или Sitemap) - важная часть SEO для любого популярного публичного веб-сайта. По сути, это список URL-адресов, которые вы хотите, чтобы робот Google, Yandex или другие поисковые системы сканировали для индексации.

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

Очень часто возникает задача форматирования чисел на клиентской стороне. Форматирование чисел на стороне клиента - важная задача, особенно если учесть, сколько сырых API используется в наши дни. Также важно заметить, что эти цифры значимы для пользователей, независимо от того, где они находятся, особенно если ваш сайт представляет собой бизнес-сайт.

Написание хорошего кода, легко читаемого человеком, - это навык следующего уровня. Не часто вводятся API, чья, казалось бы, единственная полезная функция - сделать код более читабельным, но позвольте мне познакомить вас с числовыми разделителями JavaScript. Это API, который позволяет разработчикам использовать символы подчеркивания, чтобы сделать числа более читаемыми!

VSCode (или Visual Studio Code от Microsoft) - является одним из самых популярных редакторов кода. Помимо того, что он имеет целый ряд собственных достоинств, он позволяет расширять свой функционал внешними плагинами и таким образом увеличивать продуктивность программиста. VSCode - это результат упорной работы Microsoft в сфере открытого исходного кода.

В прошлой статье мы вкратце упомянули, что в Next.js есть две формы пререндеринга: статическая генерация (SSG) и генерация на стороне сервера (SSR). В этой статье мы глубже окунемся в стратегии получения данных для каждого случая.

Strapi - это headless (буквально "безголовая") полностью кастомизируемая CMS с открытым исходным кодом. Написана на 100% Javascript. Что делает ее одной из самых удобных для фронтенд-разработчиков.

В наши дни любой бизнес нуждается в веб-сайте. Но не всем из них нужно собственное решение.

Next.js - это фреймворк, основанный на React, который позволяет создавать веб-приложения с улучшенной производительностью и улучшенным пользовательским опытом с помощью дополнительных функций предварительного рендеринга, таких как полноценный рендеринг на стороне сервера (SSR) и статическая генерация страниц (SSG).