Обновить
256K+

JavaScript *

Прототипно-ориентированный язык программирования

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

Храним файлы Strapi в облаке Selectel

Уровень сложностиСредний
Время на прочтение3 мин
Охват и читатели2.6K

Привет, я некоторое время работаю над своим пет проектом, где в основном занимаюсь фронтом, а для данных использую headless CMS под названием strapi.io. В какой-то момент у меня появилась потребность вынести медиа хранилище из локальной папки в облако. А так-как основной проект уже находился долгое время на серверах Selectel, я решил воспользоваться их объектным хранилищем и подключится к нему с помощью плагина “@strapi/provider-upload-aws-s3“. И в этой статье я вам опишу краткий гайд как это сделать.

Читать далее

Total.js и интеграция с ИИ

Время на прочтение10 мин
Охват и читатели7.2K

Динамика приложений с искусственным интеллектом продолжает сеять вопросы по выбору “удачного” фреймворка, который мы могли бы использовать при создании. Поскольку именно от нашего выбора в принципе и зависит продолжительность жизни нашего детища.

В этой статье я бы хотела обратиться к одному старенькому фрейморку, рассмотреть его особенности и фичи, которые способные выделить его на фоне другого софта. Так ли он хорош? А если хорош, то почему?

Не буду затягивать с буквами во вступлении и предлагаю перейти сразу к делу!

Приятного прочтения(:

Читать далее

AI не только подбирает партнеров в Тиндере — он еще и планирует свидания на 14 февраля

Уровень сложностиПростой
Время на прочтение4 мин
Охват и читатели1.7K

Мы попросили чат-ботов с искусственным интеллектом спланировать свидание на День святого Валентина. Они оказались на удивление полезными. Оказалось, что AI знает толк в любви — или, по крайней мере, в том, как спланировать романтический вечер.

Читать далее

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

Время на прочтение28 мин
Охват и читатели4.2K

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

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

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

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

Читать далее

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

Время на прочтение6 мин
Охват и читатели6.2K

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

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

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

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

Читать далее

Об одном способе веб-скрапинга сайтов, защищенных Cloudflare

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

Сразу оговорюсь, что описанное ниже носит исключительно информационно-образовательный характер, и не имеет целью нанесение какого-либо ущерба компаниям, использующим защиту из заголовка статьи. По этим же причинам фокусировка статьи именно на том, как получить заветный html «как из браузера» в автоматизированном режиме, и здесь не будет идти речь о каких-то массовых распараллеливаниях через proxy и VPN, подкладываниях отпечатков (finger prints) браузеров и т. д.

Узнать о способе обхода защиты Cloudflare

Оптимизация js/WebGL/Web Assembly

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

Не так давно я писал про свой 2d движок jsge. При написании рендера, делал оптимизацию кода, а также экспериментировал с web assembly. Как и обещал, написал отдельную статью про результаты.

Читать далее

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

Время на прочтение4 мин
Охват и читатели6.6K

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

Читать далее

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

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

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

Читать далее

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

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

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

Читать далее

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

Время на прочтение7 мин
Охват и читатели5.7K

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

Читать далее

Расширение браузера для управления маршрутами на Микротике

Уровень сложностиСредний
Время на прочтение26 мин
Охват и читатели14K

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

Посочувствовать

Интеграция Поиска в Strapi: Meilisearch vs. Elasticsearch

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

Всем привет! На связи Геворг, фронтенд техлид Work Solutions. Сегодня расскажу про интеграцию поисковых сервисов Meilisearch и Elasticsearch в Strapi.

Strapi — это популярный open-source фреймворк для разработки серверов, а также создания гибких API. Однако, встроенные средства поиска могут быть ограничены. Разработчики могут искать способы интеграции с внешними поисковыми системами. Две такие системы — Meilisearch и Elasticsearch. Они предоставляют возможность реализации полноценного поиска в проектах.

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

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

Читать далее

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

11 полезных фичей Chrome DevTools

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

Всем привет!

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

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

Погнали!

Погнали!

Обновление #Net chromium

Уровень сложностиПростой
Время на прочтение2 мин
Охват и читатели2.9K

Добрый день. Меня зовут Тимур и я программист.

В прошлой своей статье я рассказал (довольно сумбурно) про свою сборку хромиума которая претендует на то что бы быть важным кирпичиком в web3.0. Продолжаю серию сумбурных статей, я обновил ветку до 122.0.6248.1 билда и выложил уже собранный бинарник (пока только под macOS, винда на подходе)

Скачать бинарь можно по адресу http://172.86.96.172/downloads/hash-net.dmg

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

Читать далее

Более правильный подход к подключению Yandex AppMetrica в React Native приложении

Уровень сложностиПростой
Время на прочтение6 мин
Охват и читатели7.9K

Самостоятельно ставим Yandex AppMetrica в React Native приложение без каких-либо сторонних npm'ных библиотек.

Посмотрим как поставить нативно аппметрику, также напишем два нативных модуля для получения доступа к методам аппметрики.

Гайд ориентирован на React Native разработчиков, которые не могут найти нормальное решение для подключения аппметрики.

Читать далее

Стриминговый сервис, чат-бот и стартап — за какие проекты можно получить стипендию Selectel

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


Личные проекты бывают разными: кто-то пишет собственную JS-библиотеку, кто-то создает IT-компанию, а кто-то помогает команде выигрывать гонки (и такое бывает). В этом тексте мы расскажем про пять интересных проектов от студентов, которые выиграли стипендию в Selectel Career Wave.
Читать дальше →

Ладья на XSS: как я хакнул chess.com детским эксплойтом

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

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

В этой статье я расскажу о том, как использовал свои знания по кибербезопасности для обнаружения XSS-уязвимости (Cross-Site Scripting, межсайтовый скриптинг) на крупнейшем шахматном сайте интернета со 100 миллионами участников – Chess.com. Но для начала небольшое вступление (в котором будет затронута немного менее серьёзная, но достаточно занятная, уязвимость OSRF (On-site Request Forgery, подделка запросов на сайте).
Читать дальше →

Утечки памяти, которые не утечки

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

Что случилось? Авария, ужас-ужас

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

В один прекрасный день боевое сопровождение приходит с ужасной проблемой — память в контейнерах Node.js течёт, сервисы падают с OOM каждый день, все пропало!

Да, картинка действительно удручающая. Всё время, когда есть нагрузка, память в контейнере прирастает и почти не очищается при снятии нагрузки. Все остальные метрики, которые мы собирали были в норме: event loop lag, использование CPU, active request, open handles. Прирастала только используемая память и незначительно увеличивалось время отклика сервиса.

Что-ж, выглядит как классическая утечка, надо искать источник.

Читать далее

Как подключить Google Analytics к Telegram боту?

Уровень сложностиПростой
Время на прочтение3 мин
Охват и читатели7.3K

Существует множество способов отслеживать активность пользователей Telegram бота. Многие разработчики предпочитают создавать собственные решения. В данной статье я попытаюсь по пунктам объяснить, как можно использовать всем известный сервис Google Analytics для отслеживания действий пользователей вашего Telegram бота.

Для примера я буду использовать свой бот для автоматической проверки и исправления текста на английском языке. Бот представляет собой ни что иное, кроме как обертку для одного из GPT сервисов. Поскольку база данных при этом не используется, использование Google Analytics для учета пользователей выглядит оптимальным вариантом. Поехали: 

Читать далее