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

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

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

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

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

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

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

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

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

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

[Перевод] Улучшение реактивности с помощью VueUse

VueUse — это библиотека из более чем 200 служебных функций, которые можно использовать для взаимодействия с целым рядом API, включая интерфейсы для браузера, состояния, сети, анимации и времени. Эти функции позволяют разработчикам легко добавлять реактивные возможности в свои проекты Vue.js, помогая им с легкостью создавать мощные и отзывчивые пользовательские интерфейсы.Одна из самых интересных фич VueUse — поддержка прямого манипулирования реактивными данными. Это означает, что разработчики могут запросто обновлять данные в режиме реального времени, не используя сложный и подверженный ошибкам код. Благодаря этому легко создавать приложения, которые могут реагировать на изменения в данных и соответствующим образом обновлять пользовательский интерфейс без необходимости ручного вмешательства.Цель этой статьи — изучить некоторые утилиты VueUse, которые помогут нам улучшить реактивность в нашем приложении Vue 3. Читать далее
https://habr.com/ru/companies/otus/articles/728068/?utm_campaign=728068&utm_source=habrahabr&utm_medium=rss

[Перевод] Расширенный мониторинг производительности Vue.js

Даже самые лучшие разработчики сталкиваются с проблемами производительности своих приложений и сайтов. Бывает, мы настолько сосредоточены на создании новой фичи, что теряем из виду, какова производительность этих новых фрагментов кода. Обычное дело.Как мы можем отслеживать производительность в динамике? Каковы должны быть наши цели? Несем ли мы, разработчики Vue.js, ответственность за все проблемы с производительностью?Эта статья является продолжением нашего руководства Vue.js Performance Guide, в котором рассматриваются основы оптимизации производительности. Она поможет вам разобраться с мониторингом производительности и ее наиболее важными метриками. Читать далее
https://habr.com/ru/companies/otus/articles/730762/?utm_campaign=730762&utm_source=habrahabr&utm_medium=rss

Как я сделал SPA в два раза быстрее

Существует огромное множество статей про оптимизацию загрузки веб-сайтов, но часто они обходятся лишь общими советами или абстрактными примерами. В этой статье я хочу поделиться своим опытом комплексной оптимизации реального проекта с конкретными примерами, в данном случае SPA, написанном на Vue 3 с использованием Vuetify для части UI компонентов и Firebase для авторизации.Немного контекста: я работаю frontend-разработчиком в компании, которая в основном занимается разработкой MVP (Minimum Viable Product), но так же и разработкой и поддержкой долгоживущих продуктов. Как раз у MVP бывает много проблем, потому что минимум времени уделяется под рефакторинг и оптимизацию, а проблемы между проектами повторяются, потому что часто используется один стартовый шаблон.Возможность долго и планомерно заниматься оптимизацией у меня появилась на волонтерском проекте компании - combat-sport.club, которому можно было уделять сколько угодно свободного времени. Так что в данной статье идет речь именно о нем, но решения с него мы переносили и на другие проекты компании, т.к. стэк технологий и проблемы были одинаковые. Читать далее
https://habr.com/ru/articles/732406/?utm_campaign=732406&utm_source=habrahabr&utm_medium=rss

Я хотел улучшить React

Я давно пишу код, а React использую более пяти лет.За это время у меня возникло несколько идей о том, как можно было бы улучшить React.К реализации этих идей я приступил около трех лет назад. Сначала проверил концепцию, потом решил оформить всё в виде библиотеки.А о том, что из этого вышло, я бы хотел рассказать в этой статье. Читать далее
https://habr.com/ru/articles/733094/?utm_campaign=733094&utm_source=habrahabr&utm_medium=rss

Рендеринг модальных окон с помощью функций на Vue

Недавно на работе столкнулся с интересной задачей: нужно было создать уведомления, которые бы рендерились с помощью вызовов функций. После ресерча различных библиотек и статей собрал все ведомые мне способы в одной статье. Под катом подробнее. Вперед под кат
https://habr.com/ru/articles/733852/?utm_campaign=733852&utm_source=habrahabr&utm_medium=rss

[Перевод] Представляем вам Vue 3.3

Сегодня мы рады объявить о релизе Vue 3.3 "Rurouni Kenshin"!Этот выпуск сосредоточен на улучшении опыта разработки - в частности, на использовании SFC <script setup> с TypeScript. Вместе с релизом 1.6 Vue Language Tools (ранее известного как Volar) мы решили многие давние проблемы при использовании Vue с TypeScript.В этом посте представлен обзор основных возможностей версии 3.3. Для получения полного списка изменений, пожалуйста, ознакомьтесь с полным журналом изменений на GitHub. Читать далее
https://habr.com/ru/articles/735086/?utm_campaign=735086&utm_source=habrahabr&utm_medium=rss

Как заставить бэкендера писать фронтенд

Всем привет! Меня зовут Иван Ситкин, я бэкенд-разработчик в Едадиле. Сегодня я хочу поделиться с вами историей написания очередной панели администрирования и как из этого мы собрали подходящие подходы и практики.Для начала давайте вспомним, что же это за панели. Панель администрирования (или админка) — это приложение, которое используется для управления и настройки приложения. То есть это такой продукт для продукта. Панели администрирования нужны для различных целей, например, для создания и редактирования контента, настройки параметров продукта или управления пользователями.Но иногда в проектах важна скорость и ресурсов на создание админки с привлечением команды фронтенда откровенно не хватает. И тогда бэкендеру приходится брать процесс в свои руки.А теперь вы готовы погрузиться в эту кроличью нору. Читать далее
https://habr.com/ru/companies/yandex/articles/736006/?utm_campaign=736006&utm_source=habrahabr&utm_medium=rss

Детокс для i18n

NPM библиотека для интернационализации и локализации i18n очень популярна, однако за последние годы она сильно разрослась. В ней много возможностей для локализации дат, чисел, плурализации, двунаправленных алфавитов, загрузки локалей с сервера и кучи еще чего. На сайте i18next она называется уже даже "интернационализационным фреймворком".В то же время часто для локализации сайта нужны очень простые вещи, занимающие всего пару процентов от всего функционала тяжеловеса i18n. Ниже будет описана несложная процедура избавления от i18next-ной зависимости Читать далее
https://habr.com/ru/articles/736530/?utm_campaign=736530&utm_source=habrahabr&utm_medium=rss

Миграция на Vue 2.7

Здравствуйте! В данной статье я бы хотел поделиться своим опытом обновления проекта, написанного на Vue 2.6. Помимо обновления самого vue и компонентов, я на примерах покажу как мне удалось обновить другие зависимости проекта и адаптировать их для работы с Composition API. Читать далее
https://habr.com/ru/articles/738032/?utm_campaign=738032&utm_source=habrahabr&utm_medium=rss

[Разбор резюме] Фронтенд-разработчик: как не утопить рекрутера в технологиях и не потерять фокус

Это вторая статья из нашей рубрики «Разбор резюме». В первой мы разбирали резюме бэкендера, а здесь нам прислал свое CV фронтендер. Давайте посмотрим и разберем, что в нем можно улучшить: почему это резюме вообще лучше бы превратить в несколько, стоит ли включать в список навыков «опытный пользователь ПК» и как определяется уровень владения той или иной технологией.Резюме достаточно длинное, так что разбирать мы его будем поэтапно. Читать далее
https://habr.com/ru/companies/getmatch/articles/739218/?utm_campaign=739218&utm_source=habrahabr&utm_medium=rss

Свой NPM репозитарий Verdaccio + GitLab + Docker

Требовалось кешировать используемые в разных проектах NPM пакеты (+ хранить свои пакеты) на отдельном сервере. Было решено делать это с помощью репозитария Verdaccio (по нему есть достаточно хорошая офф. дока), крутится это все должно в Docker, а разворачиваться на отдельном сервере через GitLab CI/CD.Т.к. реализация данной схемы заняла у меня некоторое время (Хотелось бы и по меньше), решил написать короткий туториал по этой теме, с описание нюансов, которые для меня казались не очевидными. Читать далее
https://habr.com/ru/articles/739298/?utm_campaign=739298&utm_source=habrahabr&utm_medium=rss

Делюсь опытом участия в хакатоне от совкомбанка

Сегодня, я хочу поделиться опытом и рассказать про участие в хакатоне от совкомбанка. Подробнее про хакатон можно почитать тут. Для лл я вкратце опишу задачу - командой до 5 человек сделать внутренний сервис для подбора персонала и ведения HR деятельности. Читать далее
https://habr.com/ru/articles/739350/?utm_campaign=739350&utm_source=habrahabr&utm_medium=rss

Парсинг, хранение и отображение логов 3-х разных агентов доставки электронной почты. MTA Log Parser

Эта моя первая коротенькая статейка на Хабре в попытке сделать проект, который делал для себя в целях самообразования и применения на работе, полезным кому-то еще. Можно было бы написать больше букв, но ввиду особенностей профессиональной деятельности, времени на это мягко говоря не очень много. Кто заинтересуется, всегда может подробности почерпнуть самостоятельно на гитхабе. Читать далее
https://habr.com/ru/articles/740288/?utm_campaign=740288&utm_source=habrahabr&utm_medium=rss

BALLSORT на $mol

Сегодня мы перепишем на $mol эту демку почти пиксель в пиксель и напишем несколько тестов.Демка представляет собой игру, в которой перемещаются разноцветные шарики между трубками, цель игры - отсортировать шарики по цветам за наименьшее количество шагов.Изначально она была реализована на эффекторе + react, недавно несколько человек реализовали ее на реатоме + react исходники, на vue исходники и две независимых версии на моле: первая и моя о ней пойдет речь. Читать далее
https://habr.com/ru/articles/741040/?utm_campaign=741040&utm_source=habrahabr&utm_medium=rss

Как сделать кастомный Semi Donut Chart с помощью SVG

Я сделал конфигурируемый Semi Donut Chart на svg, и решил поделиться с вами.В этой статье вы узнаете как сделать Semi Donut Chart, гибким и конфигурируем меньше чем за 100 строк кода на Vue 3(применимо к любому другому Фреймворку). Читать далее
https://habr.com/ru/articles/741214/?utm_campaign=741214&utm_source=habrahabr&utm_medium=rss