Я немного отстал от современных тенденций фронтенд-разработки. Помню, были статьи на тему раздутия веб-среды, в которых писали, что средний размер страницы начал достигать нескольких мегабайтов! И всё это время я жил с мыслью, что если средний размер страницы равен, скажем, 3 МБ, то JS-бандл должен составлять около 1 МБ. Естественно, основную часть объёма должно занимать содержимое, не так ли? Что ж, проверить это можно лишь экспериментальным путём, чем я и займусь! Эту статью я пишу в 20…
Привет, Хабр!Svelte, в его сущности, предлагает нам подход меньше значит больше. Вместо того чтобы полагаться на виртуальный DOM, как большинство фреймворков, Svelte переносит эту работу на этап сборки. Результат? Более чистый и эффективный код, который выполняется непосредственно в браузере. Каждый компонент в Svelte компилируется в самодостаточный JavaScript.УстановкаSvelte требует Node.js версии не ниже 10.Самый простой способ начать работу с Svelte — использовать оф.шаблон Svelte, который …
Столкнувшись с задачей реализовать простой графический редактор в мобильной версии сайта, я обнаружил, что функционал мультитач жестов еще не реализован на уровне браузера.В mdn я нашел Api gesture events, но оно не поддерживается примерно нигде.https://developer.mozilla.org/en-US/docs/Web/API/GestureEventНачнем мы с вращения и, если тема будет интересна, я распишу, как реализовать scale и drag.Для реализации этого функционала нам потребуется расчехлить тригонометрию.Сначала попробуем выяснит…
Здравствуйте, уважаемый читатель!В этой статье мы рассмотрим методы создания веб-ресурсов со стороны Frontend разработки, сосредоточившись на подходах которые могут помочь нам с помощью реактивности достичь результатов по разделению логики и отображения.Сразу хотелось бы отметить, что всегда приветствуется критика, а также предложения по дополнению данной статьи, и что это стартовый опыт автора, в создании материала такого рода, если вы обратили внимание на явный недостаток и у вас есть желани…
В этой статье осторожно прикоснёмся к sin() и cos(). Есть и другие функции, в том числе tan(), зачем же останавливаться только на синусе и косинусе? Они идеальны для размещения текста по краю круга. Об этом уже рассказывалось на CSS-Tricks, когда Крис поделился подходом к размещению текста по кругу с миксинами Sass. Это было шесть лет назад [оригинал опубликован 8 марта 2023 года], поэтому поработаем с размещением чисел по-новому. Вот о чём я говорю: Не совсем похоже на текст, образующий круг…
Хлебные крошки - важнейшая часть навигации приложения. В классическом исполнении они отражают текущее положение пользователя в иерархии. А отображение названия карточки товара, статьи или любой другой сущности - это уже, как правило, задача компонента отвечающего за отображение самой сущности. Однако, все может оказаться не так просто. По каким-либо причинам дизайнер, заказчик или другая неведомая сила будет категорично настаивать, чтобы название отображалось именно в хлебных крошках. Как бы т…
Всем привет! Меня зовут Леша Штанько, я системный администратор и интегратор (если остается время, еще и JS-разработчик :D) в AGIMA. Если представить Google большим айсбергом, то на его верхушке точно разместятся всеми любимые и популярные инструменты, вроде Google Sheets и Google Calendar, а Google Apps Script скроется где-то под толщей воды. Но я считаю, что больше людей должны попробовать этот классный инструмент. Поэтому в этой статье расскажу о его главных достоинствах и поделюсь практиче…
Привет, Хабр!Во время разработки веб-приложений мы порой делаем запросы на сервер внутри useEffect прямо в компоненте с визуальным составляющим. Однако не всегда очевидно, что смешивание логики с интерфейсом может привести к усложнению кодовой базы.В этой статье мы рассмотрим, как неправильное разделение ответственности может негативно сказаться на ваших компонентах, и какие подходы помогут избежать подобных проблем.Основные проблемы отправки запросов внутри useEffect прямо в компонентах:Сложн…
ВведениеВ этой статье рассматривается экспериментальный API для Discord ботов Midjourney, InsightFaceSwap и Pika.Вы узнаете как легко генерировать и увеличивать изображения с помощью Midjourney, применять face-swap с помощью InsightFaceSwap и наконец анимировать результат с помощью Pika.Сначала мы будем генерировать изображения с помощью команды /imagine от Midjourney и увеличивать их с помощью команды /button с использованием экспериментального API Midjourney.Затем мы будем использовать Disco…