Как стать автором
Обновить
357.31

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

Делаем веб лучше

Сначала показывать
Порог рейтинга
Уровень сложности

Как создать YouTube GIF Maker с использованием Next.js, Node и RabbitMQ

Время на прочтение 28 мин
Количество просмотров 860

В этом руководстве мы рассмотрим разработку веб-приложения по созданию GIF-файлов из видеороликов.

Функциональные возможности приложения:
- Создание GIF из видео на YouTube с определённым временным диапазоном.
- Предварительный просмотр результата перед выполнением фактической конвертации.

Компоненты системы:
- Клиентская часть на React (Next.js)
- Бэкенд-сервер на Node
- Node как Service Worker
- В качестве брокера сообщений — RabbitMQ
- Для хранения данных — MongoDB
- Для хранения медиафайлов — Google Cloud Storage

Полный код проекта можно найти на github, а по этой ссылке посмотреть демо-версию приложения.

Читать далее
Всего голосов 12: ↑11 и ↓1 +10
Комментарии 0

Новости

Начало работы с Axum — самым популярным веб-фреймворком Rust

Уровень сложности Средний
Время на прочтение 11 мин
Количество просмотров 2.7K


Когда дело доходит до выбора серверного веб-фреймворка в экосистеме Rust, можно запутаться из-за большого количества вариантов. В прошлом, лидером по популярности был Rocket, но сейчас за первенство сражаются Axum и actix-web, и Axum все больше набирает обороты. В этой статье мы немного погрузимся в Axum — веб-фреймворк для создания REST API на Rust, разрабатываемый командой Tokio. Он прост в использовании и хорошо совместим с Tower — надежной библиотекой для создания модульных компонентов сетевых приложений.


В этой статье мы подробно рассмотрим, как использовать Axum для создания веб-сервиса. Кроме того, мы рассмотрим изменения, которые произошли в версии 0.7.

Читать дальше →
Всего голосов 22: ↑22 и ↓0 +22
Комментарии 0

Больше библиотек богу библиотек или как я переосмыслил i18n [next.js v14]

Время на прочтение 6 мин
Количество просмотров 1.5K

Для интернационализации сделаны десятки по-своему потрясающих библиотек, такие как i18n, react-intl, next-intl. Все они отлично справляются со своей задачей - добавляют переводы в приложение или на сайт. Большинство из них проверены, отлажены и стабильно поддерживаются.

Но все они устарели.

Ведь всё это время развивалось и экосистема реакта. Так, последняя версия next.js включила крупные обновления из react.js - cache, taint, новые хуки и, конечно же, серверные компоненты. Команда самого React.js, вероятно, представит эти изменения уже в мае.

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

Читать далее
Всего голосов 2: ↑2 и ↓0 +2
Комментарии 4

Домашний кластер разработчика

Уровень сложности Средний
Время на прочтение 10 мин
Количество просмотров 11K

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

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

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

Читать далее
Всего голосов 47: ↑46 и ↓1 +45
Комментарии 6

Истории

Release Timeline — визуализация GitHub релизов в вашей документации

Время на прочтение 1 мин
Количество просмотров 1.1K

Данное приложение было создано для красивого и удобного показа изменений во Vue 3 проекте в его документации на VitePress. После оно было сделано универсальным, и может быть подключено в любой HTML странице как Web component или микрофронтенд.

Попробовать - https://vuesence.github.io/release-timeline/. Слева вверху можно указать любой публичный репозиторий.

Читать далее
Всего голосов 5: ↑5 и ↓0 +5
Комментарии 6

Анализируем виды тестов для Frontend

Уровень сложности Простой
Время на прочтение 14 мин
Количество просмотров 3.7K

С развитием веба сайты превратились в сложные приложения, которыми ежедневно пользуются десятки и сотни миллионов людей: почта, облачные хранилища, соцсети, маркетплейсы, стриминговые платформы и т. д. И каждое из них должно работать корректно. Как это сделать? Конечно писать хороший код, а потом и тестировать его. Хотя кто‑то обходится без тестов, тем не менее тестирование — важная часть инженерных практик наравне с мониторингом. Оно помогает нам заблаговременно находить и исправлять баги (или незапланированные фичи) в приложениях. Основная цель тестирования — получить гарантию корректной работы любого ПО .

При этом тестировать современный фронтенд сложно: неуправляемая асинхронность (событийная модель браузера), различие браузеров, тяжелое окружение — это лишь малая часть сложностей. Можно ли все возложить на ручных тестировщиков или исправлять баги после жалоб пользователей? Однозначно нет. В большинстве случаев такой подход в скором времени приведет к оттоку пользователей: не все пишут о багах, просто уходят к конкурентам. Безусловно, ручное тестирование остается важным элементом разработки, но тестировщики не могут держать сотни или тысячи сценариев, которые нужно пройти перед релизом или запуском новой фичи. Так где нам получить гарантии, что ключевые сценарии приложения работают корректно? Автоматическое тестирование.

Всем привет! Меня зовут Миша, работаю фронтэнд‑разработчиком в VK в команде Облака Mail.ru, и я хочу разобрать различные виды тестов, дать их сравнительный анализ и применимость. Сразу скажу, тут не будет практики написания тестов. Потому что это нереально сделать внутри одной статьи, необходимо разобрать: теорию тестирования, классов эквивалентности, различие подходов/методов к тестированию, комбинаторику состояний, правильное использование моков и стабов, понимание чистых функций, знание архитектуры приложения. Поэтому предлагаю сконцентрироваться на видах тестирования и начать с «идеального теста».

Читать далее
Всего голосов 26: ↑26 и ↓0 +26
Комментарии 2

Как студенты участвовали в огромной IT выставке со своим стендом

Уровень сложности Простой
Время на прочтение 5 мин
Количество просмотров 1K

Всем привет, на связи Максим Рожков, frontend разработчик команды "ПИН-КОД".
Наша студенческая команда смогла поучаствовать в выставке с демонстрационным вариантом нашего сервиса "Изучение русского жестового языка".

В этой статье вы узнаете, как обычные студенты поучаствовали в масштабной IT выставке в Екатеринбурге.

Читать далее
Всего голосов 6: ↑6 и ↓0 +6
Комментарии 1

Большой API для экспериментов и front проектов или памятка о том, как я создавал проект

Уровень сложности Простой
Время на прочтение 15 мин
Количество просмотров 1.6K

Это моя первая статься, а потому, как мне кажется, будет хорошим шагом начать с того, кто я такой. Меня зовут Юрий, я учусь на программиста и попутно сам стараюсь изучать всё возможное про мою специальность, а моя специальность - это .Net. Влюбился в него и вцепился с первого взгляда, прям как к php слова "скоро умрёт".Несколько месяцев назад, а именно в сентябре, я решил, что необходимо начать делать какой-нибудь большой учебный проект для закрепления моих знаний да и для изучения новых. Я вообще отношу себя к практикам, обожаю сначала что-то делать, а только потом читать. А вдруг я и сразу всё хорошо сделаю, и потом даже читать дополнительные источники не придется :). Но это почти никогда не бывает, так что не пишите в комментариях, что я упускаю важный момент в изучении. Если возвращаясь к проекту, то сделать его я хотел, но я считал себя истинным бэкендером: притрагиваться к фронденту я вообще не слишком хотел. А потому я решил обратиться к своим друзьям программистам, чтоб хоть кто-то занялся фрондент частью. К счастью такой человек у меня был: React разработчик. И также ещё один бэкендер на C#. Идея командой разработки им понравилось, я взял проект из своего списка проектов (да, у меня такой есть) и начали разработку.

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

Теперь о самом проекте, мы дали ему названия Author Verse. Его фишка в том, что пользователи могли бы создавать свои книги, вставляю в него любой контент, то есть, что из него обычной книги можно было бы сделать легко обычную книгу из текста, комикс из картинок, мангу, аудиокнигу, манга-аудиокнига-комикс сразу??? или придумать вовсе свой жанр. И главная фишка: писатели могли бы делать разветвление сюжета на любую часть главы, на любую другую часть из других глав своей книги и, наверное самое прикольно, но которое пришло мне в голову уже на последних этапах разработки, это ответвлению в другие книги. Конечно, раз мы говорим о том, что могут быть ссылки на другие книги, то все книги на сайте должны быть бесплатны.

Стать умнее
Всего голосов 10: ↑8 и ↓2 +6
Комментарии 5

PHP и Laravel дайджест новостей за январь 2024 года

Время на прочтение 6 мин
Количество просмотров 3.6K

Всем привет! Краткий обзор новостей из мира PHP и Laravel за январь 2024 года от Сергея Пантелеева и Данила Щуцкого (CutCode).

Читать далее
Всего голосов 8: ↑8 и ↓0 +8
Комментарии 4

Как выдавать бесплатные SSL сертификаты с помощью certbot, Nginx и Docker

Уровень сложности Средний
Время на прочтение 5 мин
Количество просмотров 10K

Всем привет! Одна из моих рутинных задач - это подъем новых проектов и микросервисов в облаках. Для этого практически всегда нужны домены и поддомены с наличием SSL сертификата. У меня выработался подход, с помощью которого я автоматизировал процесс выдачи сертификатов с помощью certbot. О чём и хочу рассказать.

Читать далее
Всего голосов 14: ↑11 и ↓3 +8
Комментарии 25

Создание сайтов через нейросети

Время на прочтение 13 мин
Количество просмотров 14K

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

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

Читать далее
Всего голосов 14: ↑11 и ↓3 +8
Комментарии 13

Web Application and API Protection (WAAP): эволюция WAF (Web Application Firewall)

Уровень сложности Средний
Время на прочтение 5 мин
Количество просмотров 3.6K

WAAP (Web Application and API Protection) является брандмауэром веб-приложений следующего поколения WAF (Web Application Firewall). Термин впервые начал использовать Gartner для описания защиты современных, постоянно меняющихся web-сервисов. Так как в мире CI/CD, динамики и API first компаний, функций традиционного WAF (Web Application Firewall) уже недостаточно.

WAAP - это совокупность методов и технологий, которые используются для защиты веб-приложений и сервисов от атак и уязвимостей. WAAP включает в себя технологии, такие как WAF-NG, сканер уязвимостей, автоматическое обнаружение и блокирование атак 0-дня (в том числе с помощью виртуального патчинга), выявление аномалий с помощью технологий Machine Learning и смарт-капчи.

Читать далее
Всего голосов 29: ↑24 и ↓5 +19
Комментарии 4

Страдания по VueUse

Время на прочтение 4 мин
Количество просмотров 3.2K

VueUse - популярная библиотека, состоящая из небольших утилит и в среде Vue разработчиков, идущая как "must have" наряду с Pinia. Нисколько не умаляя вклад Anthony Fu в экосистему Vue, опишу, почему я не использую её и не рекомендую для серьезных проектов и опытных разработчиков.

Читать далее
Всего голосов 8: ↑6 и ↓2 +4
Комментарии 6

Ближайшие события

One Day Offer от УЦСБ
Дата 17 февраля
Время 10:00
Место
Онлайн

Next.js. Технология современной веб-разработки

Уровень сложности Средний
Время на прочтение 16 мин
Количество просмотров 9.3K

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

Читать далее
Всего голосов 9: ↑6 и ↓3 +3
Комментарии 5

App Router и Pages Router: что изменилось в Next.js

Уровень сложности Простой
Время на прочтение 8 мин
Количество просмотров 1.8K

Привет, Хабр!

Как могут заметить разработчики, фреймворк Next очень активно развивается. Так, некоторое время назад в 13 версии появилась новая парадигма (модель) для создания приложений — app router, которая должна прийти на смену старой pages router.

В этой статье мы постараемся наглядно продемонстрировать и рассказать, что же поменялось в работе приложения с появлением app router, какие изменения произошли в сравнении с pages router, что нового успели добавить разработчики, а от чего они отказались.

Читать далее
Всего голосов 5: ↑4 и ↓1 +3
Комментарии 0

VR-тур на A-Frame + React

Уровень сложности Простой
Время на прочтение 7 мин
Количество просмотров 1.6K

Всем привет! Меня зовут Егор Молчанов, я разработчик в команде CRM для менеджеров ипотечного кредитования в компании Домклик. Хочу поделиться своим опытом создания VR‑тура с помощью фреймворка A‑Frame и библиотеки React. Для этого написал свой небольшой pet‑проект, который мы сейчас разберём.

Читать далее
Всего голосов 22: ↑21 и ↓1 +20
Комментарии 2

Strict Mode в ECMAScript. Полный справочник

Время на прочтение 7 мин
Количество просмотров 2.5K

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

Читать далее
Всего голосов 5: ↑4 и ↓1 +3
Комментарии 2

Концепция включений в markvan-разметке текстов

Уровень сложности Простой
Время на прочтение 5 мин
Количество просмотров 1.5K

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

Многие знакомы с markdown-разметкой, которая позволяет подготавливать небольшие простые тексты для последующей конвертации в html. Теперь появился аналогичный инструмент разметки — markvan, предназначенный для написания полноразмерных литературных и технических текстов.

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

Что-ж, посмотрим
Всего голосов 8: ↑8 и ↓0 +8
Комментарии 92

Наш опыт мультиаутентификации в приложениях ASP.NET Core

Уровень сложности Средний
Время на прочтение 6 мин
Количество просмотров 4.4K

Привет, Хабр! На связи разработчик АО АльфаСтрахование. В этой статье я хочу рассказать о мультиаутентификации в ASP.NET Core приложениях.

Нам довольно часто нужно писать .NET Core приложения. Нередко они используются для интеграции крупных систем. А в этих системах частенько свой собственный набор учетных записей (далее УЗ) и инструментов по управлению доступа к ним.

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

Читать далее
Всего голосов 5: ↑4 и ↓1 +3
Комментарии 1

Задача «Получить значение у N url из списка» с собеседования на Go

Уровень сложности Простой
Время на прочтение 7 мин
Количество просмотров 4.9K

На данный момент нахожусь в активном поиске нового проекта, поэтому активно хожу на собеседования.

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

Задача

Написать функцию, которая принимает несколько url адресов, а отдает сумму адресов и ошибку, если что-то пошло не так.

Интересно обсудить варианты решения?

Интересно Читать Далее
Всего голосов 17: ↑13 и ↓4 +9
Комментарии 36

Вклад авторов