Первая попытка gitlab-ci на фронте

Эта статья о сценарии развертывания фронта, через инструменты Gitlab-CI.

Я использую GitLab-CI, а носителем исполнения скриптов GitLab Runner (об этом позже) пусть будет простой дроплет от DO Читать дальше →
https://habr.com/ru/post/707112/?utm_campaign=707112&utm_source=habrahabr&utm_medium=rss

Реактивность в Vue

Уверен, вы когда-нибудь задавались вопросом «Что за зверь эта реактивность и как она работает?». Думаю, что настало время закрыть этот вопрос и рассмотреть работу реактивности на примере Vue.Дизайн превью: Марина Четвертакова Читать далее
https://habr.com/ru/post/706536/?utm_campaign=706536&utm_source=habrahabr&utm_medium=rss

Конструктор базы для браузерной стратегии в духе Dune 2/2000 на Three.js, Vue3 + TS

Самой успешной моей статьей для сообщества был подробный отчет о разработке браузерного FPS. Судя по статистике в базе данных — неожиданно огромное количество людей зашло и попробовало сыграть, я получал заинтересованные вопросы в личку и так далее. В дальнейшем я сделал еще одну попытку крафтового браузерного геймдева на javascript и попробовал создать конструктор для стратегии в духе культовой Dune из детства. В какой-то момент я уперся в низкую производительность получившейся разработки и заскучал, уже почти год как забросил это дело. Но меня получилось построить работающий полноценный контрол, сейчас можно возводить и демонтировать постройки. Поэтому я хочу, прежде всего, поставить точку для себя, немного рассказав и о данной затее — возможно для кого-то окажутся полезными мои усилия. Статья не будет такой объемной, дотошной и разнообразной как первая о создании полноценного шутера, зато сам код репозитория, кажется, немного интереснее, так использует более актуальный стек из Vue3 и TypeScript. Во много, эта разработка продолжает идеи и методы первой, с тем отличием, что мы пилим стратегию, а не шутер от первого лица. Я не буду повторять то что было уже пройдено и рассмотрено в первом примере, бегло покажу только «новые фичи». Читать далее
https://habr.com/ru/post/707518/?utm_campaign=707518&utm_source=habrahabr&utm_medium=rss

Big State Managers Benchmark

Здравствуйте, меня зовут Дмитрий Карловский и я.. большой любитель физики высоких энергий. Сталкиваешь такой совершенно разные вещи между собой, и смотришь на бабахи, уплетая поп-корн.Так как в Реакте всё очень плохо с архитектурой, а страдают от него многие, то к настоящему времени появилось уже очень много так называемых менеджеров состояний. И каждый наперебой уверяет, что он самый быстрый, самый надёжный, самый компактный, самый выразительный и вообще самый правильный.Что ж, давайте возьмём их всех и столкнём лбами друг с другом и с суровой реальностью, чтобы узнать кто же на самом деле тут батя! Мне больше 18 и я готов к последствиям
https://habr.com/ru/post/707600/?utm_campaign=707600&utm_source=habrahabr&utm_medium=rss

Открываем и закрываем модалки на Vue Composition API

Предыстория этой статьи простая. На одном из моих проектов я заметил, что мы с двумя коллегами частенько пишем очень похожие функции open/close/toggle для модалок, табов и других подобных элементов. В относительно среднем по количеству страниц/компонентов/коду проекте я нашел примерно 25 реализаций этих функций. Конечно, в некоторых случаях мы не просто что-то открываем, но и выполняем какие-либо сайд эффекты, например, отправляем события. Само по себе это боли не доставляет, а к особым поборникам DRY мы явно не относимся. Однако мне стало интересно, что может предложить Composition API, чтобы не писать каждый раз даже лишние пару-тройку строк кода. Читать далее
https://habr.com/ru/post/708562/?utm_campaign=708562&utm_source=habrahabr&utm_medium=rss

Взлет и падение Vuetify. Некролог

Vuetify - один из самых популярных Material Design фреймворков для Vue, которому недавно исполнилось 6 лет. И 6 января 2023 года его основатель заявил, что проект Vuetify перестал окупаться и он ищет работу. Отсюда - некролог в названии статьи.Статья состоит из шести небольших частей, в которых мы пробежимся от первой версии до третьей, посередине разобрав, как фреймворк обновлялся до Vue 3, будем вместе смотреть за поведением основателя движка, а также тем, как можно справиться с переходом на Vue 3, пожалуй, хуже, чем кто-либо еще, включая команду Nuxt.В этом, надеюсь, преждевременном некрологе я расскажу, где Vuetify был 6 лет назад, почему он был так популярен, где он сейчас и как вошел в кризисное состояние. Погнали!
https://habr.com/ru/post/709492/?utm_campaign=709492&utm_source=habrahabr&utm_medium=rss

[recovery mode] Чистый Vue, или Как правильно настроить линтинг

Линтинг — это автоматизированный процесс анализа кода и поиска потенциальных ошибок. Более того, помимо поиска ошибок, линтер во многих случаях может исправить те самые ошибки автоматически.Данный инструмент является отличным помощником как для отдельно взятого разработчика, так и для команды и целого проекта. Даже самые искусные мастера в мире разработки допускают ошибки, так как человеческий фактор никто не отменял. В подобных ситуациях линтер выручает, сообщая о потенциальной ошибке.Даже если в проектах используется одинаковый стек технологий, каждый из них обладает своими «проектными знаниями». И в этом случае снова на помощь приходит линтер и подсказывает участнику проекта в вопросах стилизации кода, предпочтительного синтаксиса и т. д.В данной статье мы рассмотрим настройку ESLint и Prettier для JavaScript, TypeScript и в частности для Vue.js, покажем какими правилами мы руководствуемся в проекте Shtab и почему. Читать далее
https://habr.com/ru/post/711574/?utm_campaign=711574&utm_source=habrahabr&utm_medium=rss

Пет-проект, который пока не умер

Представьте, что вы решили завести маленький пет-проект. Вернее даже не вы решили, а вас попросила матушка помочь с одной рутинной задачей, которая возникает в ее браузерной игре. Вам увиделось множество вещей, которые можно автоматизировать и оптимизировать в процессе, который может занимать до 6 часов непрерывного и утомительного труда в день, и так родился проект.Дальнейшая судьба проекта, конечно, зависит от многих факторов и скорее всего вы его забросите (как и остальные ваши 150 пет-проектов, которые никто не увидит), но даже в самом рождении этого проекта необходимо решить множество архитектурных и религиозных вопросов, а своим опытом их решения я решил поделиться с вами, чтобы вы не допускали подобных ошибок или указали мне на те ошибки, которые возможно я еще не заметил. Читать далее
https://habr.com/ru/post/711972/?utm_campaign=711972&utm_source=habrahabr&utm_medium=rss

Управление подписками: много слов о потоках, отписках и утечке памяти

Управление подписками – с первого взгляда несложная тема, которая, однако, вызывает у многих проблемы на фронте. Под катом я собрал собственные наблюдения о том, как грамотно выстроить работу с подписками без утечек памяти, увеличения времени загрузки элементов и колоссальных трат бюджета. За основу я взял библиотеку RxJs, работающую с фреймворком Angular. Однако любителям остальных фреймворков, возможно, это тоже пригодится. Читать далее
https://habr.com/ru/post/716770/?utm_campaign=716770&utm_source=habrahabr&utm_medium=rss

VueEnt — сложные формы на Vue и не только

Примерно полтора года назад вышла моя статья про библиотеку валидации v9s. Благодаря конструктивной критике в комментариях, удалось серьезно переработать библиотеку, уже год как вышла вторая более дружелюбная версия. В тексте публикации было сказано о том, что появилась необходимость осуществлять динамическую валидацию больших и сложных форм на Vue, а еще хотелось добавить индикацию к отдельным частям страницы во время загрузки и сохранения данных. После серии экспериментов сложился общий концепт новой библиотеки и нескромное название VueEnt, намекающее на сферу ее применения. Итак, если у вас возникают те же проблемы при разработке на Vue, что изложены в моей предыдущей публикации по ссылке выше, то заварите чайку и приготовьте бутерброды, ведь, несмотря на обзорный характер публикации, в двух словах все не описать. Читать далее
https://habr.com/ru/post/717680/?utm_campaign=717680&utm_source=habrahabr&utm_medium=rss

Работа с i18n — автоматизация Google Translate и другие полезные советы

Пакет i18n используется на фронтэнде очень часто для создания мультиязычных вебсайтов. Перевод текста в нем содержится обычно в json или в js файле, и требует дальнейшей обработки, чтобы с ним могли работать контент-редакторы. В статье описывается как максимально упростить и сделать удобным хранение и внесение изменений в перевод. Читать далее
https://habr.com/ru/post/718990/?utm_campaign=718990&utm_source=habrahabr&utm_medium=rss

Улучшение производительности Vue.js приложений

В современном мире web-разработки все сводится к скорости работы и загрузки приложений, пользователи не хотят ждать по 5-10 секунд пока грузится сайт, даже если дело не в самом сайте а в скорости подключения к интернету.Исследования показывают что время в течении которого пользователь готов ждать загрузки сайта составляет примерно от 0.3 до 3 секунд. Если сайт требует значительного количества времени для загрузки то велик шанс что человек просто покинет такой сайт.Существует ряд причин по которым время загрузки сайта может быть долгим. Вообще это может быть что угодно, начиная от плохо оптимизированного сайта заканчивая большой нагрузкой на сервер.Но мы здесь не для того чтобы обсуждать причины долгой загрузки а для того чтобы оптимизировать компоненты Vue.js приложений и даже немного ускорить загрузку приложения. Читать далее
https://habr.com/ru/post/719378/?utm_campaign=719378&utm_source=habrahabr&utm_medium=rss

Подготовка шаблона приложения на Typescript с Nest, Nuxt 3 и Docker

Решил описать свой подход построения окружения на Typescript с Nest на бекенде, Nuxt (SPA) на фронтенде. Все заворачивается в один docker-образ и запускается как standalone приложение c nginx, healthcheck’ами, тестами и ш…широкой сферой применения. Читать далее
https://habr.com/ru/post/720000/?utm_campaign=720000&utm_source=habrahabr&utm_medium=rss

Декомпозиция и интерфейс vue-компонентов

В большом vue-приложении всегда есть необходимость в декомпозиции компонентов и их логики. В статье приводятся размышления и некоторые выводы относительно подходов к декомпозиции vue-компонентов и их интерфейсу. Читать далее
https://habr.com/ru/post/719980/?utm_campaign=719980&utm_source=habrahabr&utm_medium=rss

6 простых принципов написания приложения на Vue, которое легко поддерживать (часть 1)

Привет! Меня зовут Наташа Калачева. Я Frontend-разработчик в компании AGIMA. Vue — один из самых популярных фреймворков JS, его используют для разработки SPA и PWA. А его главные плюсы — это понятная, четкая документация, готовая структура и низкий порог входа.Тем не менее, Frontend сегодня — это сложные приложения, которые содержат не только красивые элементы интерфейса, но и большую часть логики и функциональности всего продукта. Это требует от нас тщательного планирования и организации проекта, чтобы сделать его масштабируемым и простым.В этой статье поделюсь правилами, которых придерживаюсь в работе и которые помогают упростить поддержку и расширение приложения. Мы рассмотрим, как организовать хранение компонентов, стилей и плагинов, когда использовать стор и полезные функции Vue.

Следуя этим рекомендациям, вы сможете создавать более эффективные проекты. Читать далее
https://habr.com/ru/post/722332/?utm_campaign=722332&utm_source=habrahabr&utm_medium=rss

6 простых принципов написания приложения на Vue, которое легко поддерживать (часть 2)

Привет! Я Наталья Калачева, Frontend-разработчик в AGIMA. Эта статья посвящена правилам, которые помогают упростить поддержку и расширение приложений на Vue. Тут я рассказываю, как организовать хранение компонентов, стилей и плагинов, когда использовать стор и полезные функции Vue. Первые 3 принципа я опубликовала вчера. Здесь еще 3. Читать далее
https://habr.com/ru/post/722568/?utm_campaign=722568&utm_source=habrahabr&utm_medium=rss

Создание простого SPA на VueJs с использованием CMS Strapi

Данное руководство составлено на основе некоторого опыта, который был получен из книг и официальной документации. Вашему вниманию будет представлено 2 варианта написания простых в поддержке сайтов на Vue.js (с использованием backend систем и без). В первой части будет изложена инструкция по экспресс созданию сайта - галереи с использованием статичных JSON файлов для хранения данных сайта. Во второй части мы рассмотрим более сложный вариант, с использованием опен сорс CMS решения для управления данными сайта. Весь код в данном руководстве представлен в синтаксисе javascript/hml/css и bash. Читать далее
https://habr.com/ru/post/723676/?utm_campaign=723676&utm_source=habrahabr&utm_medium=rss

[Перевод] Ionic Capacitor Vite, Vue (в 4-х частях)

Capacitor — это нативный рантайм с открытым исходным кодом для создания приложений Web Native. Создавайте кроссплатформенные iOS, Android и Progressive Web Apps (PWA) с помощью JavaScript, HTML и CSS.Vite — это инструмент сборки, цель которого — обеспечить более быструю и экономную разработку современных веб-проектов. Он состоит из двух основных частей: сервер dev и команда build. За 8 минут я объясняю, как создать проект vue js с помощью vite, преобразовать его в мобильное приложение и развернуть его на симуляторе с live-reload для эффективного процесса разработки. Читать далее
https://habr.com/ru/post/725382/?utm_campaign=725382&utm_source=habrahabr&utm_medium=rss

[Перевод] Как использовать пропсы для передачи данных дочерним компонентам в Vue 3

По традиции делимся полезными переводными материалами во frontend-разработке. В этот раз frontend-специалист SimbirSoft Никита сделал выбор в пользу материалов Nwose Lotanna, опубликованных на сайте blog.logrocket.com. С разрешения автора мы перевели статью, в которой он рассказывать о способах использования пропсов для передачи данных дочерним компонентам в Vue 3.Примечание автора: Данная статья последний раз была обновлена 15 декабря 2022, чтобы отразить обновления, добавленные в Vue 3.Пропсы — это важная фича в Vue для управления родительскими и дочерними компонентами, однако взаимодействие с ними может быть довольно мудреным. В этой статье мы изучим, как передавать данные из родительского компонента в дочерний с использованием пропсов в Vue 3. Весь код из этой статьи вы можете найти на GitHub. Что ж, начнем! Читать далее
https://habr.com/ru/post/725506/?utm_campaign=725506&utm_source=habrahabr&utm_medium=rss

Как мы увеличили скорость работы сайта в 10 раз

Полностью обновили код и разработали дизайн сайта alta-profil.ru. Сделали его удобнее, быстрее и информативнее для пользователей. В этом кейсе расскажем об обновлении сайта: что делали, с какими проблемами столкнулись и как их решали. Читать далее
https://habr.com/ru/post/725880/?utm_campaign=725880&utm_source=habrahabr&utm_medium=rss

Адаптивный и многоязычный компонент футера для Vue 3: создание и использование

Вы занимаетесь блогингом или созданием контента на нескольких языках? Или у вас есть множество социальных медиа-аккаунтов, которыми вы хотите поделиться? Тогда вам понравится этот адаптивный и многоязычный компонент футера для Vue 3!Данный компонент футера разработан с учетом удобства использования, а также адаптивности и настраиваемости. Он автоматически отображает социальные ссылки и иконки на нужном языке и подходящем типе устройства. Минималистический дизайн футера позволяет пользователю сосредоточиться на главном содержимом страницы. Компонент прост в использовании, а его адаптивность гарантирует хороший внешний вид на любом устройстве и размере экрана. Читать далее
https://habr.com/ru/post/726242/?utm_campaign=726242&utm_source=habrahabr&utm_medium=rss