• Организация типовых модулей во Vuex

      Как мы организовали Vuex-сторы и победили копипасту


      Vuex — это официальная библиотека для управления состоянием приложений, разработанная специально для фреймворка Vue.js.


      Vuex реализует паттерн управления состоянием, который служит централизованным хранилищем данных для всех компонентов приложения.


      По мере роста приложения такое хранилище разрастается и данные приложения оказываются помещены в один большой объект.


      Для решения этой проблемы во Vuex разделяют хранилище на модули. Каждый такой модуль может содержать собственное состояние, мутации, действия, геттеры и встроенные подмодули.


      Работая над проектом CloudBlue Connect и создавая очередной модуль, мы поймали себя на мысли, что пишем один и тот же шаблонный код снова и снова, меняя лишь эндпоинт:


      1. Репозиторий, в которой содержится логика взаимодействия с бекендом;
      2. Модуль для Vuex, который работает с репозиторием;
      3. Юнит-тесты для репозиториев и модулей.

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


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


      Для этого мы создали фабрику типовых модулей Vuex, сократившую практически до нуля написание нового кода для взаимодействия с бекендом и хранилищем (стором).

      Читать дальше →
    • Что JavaScript-разработчику следует знать о Curl

      • Перевод
      Доброго времени суток, друзья!

      Представляю Вашему вниманию перевод статьи «What JavaScript Developers Should Know About Curl» автора Valery Karpov.

      Curl — это популярный инструмент командной строки, часто используемый для отправки HTTP-запросов. Curl поддерживает большое количество протоколов, однако как Node.js-разработчик вы, скорее всего, будете использовать его для отпраки http-запросов к RESTful API.

      Документация curl представляет собой перечень из 383 флагов командной строки, поэтому в ней очень трудно найти то, что ищешь. В этой статье я хочу поделиться с вами некоторыми часто используемыми мной шаблонами. Для примеров будет использоваться сервис httpbin.org.
      Читать дальше →
      • +5
      • 8,5k
      • 8
    • Команды для работы с JavaScript-консолью в браузерах и повышение производительности труда программиста

      • Перевод
      Если вы занимаетесь веб-программированием, это значит, что вам не надо рассказывать о том, насколько в вашей работе важна отладка. Нередко для записи данных в логи, для их форматирования или вывода на экран используют внешние библиотеки, не учитывая при этом того факта, что в распоряжении программистов имеются JavaScript-команды для работы с консолями, которые встроены в браузеры. И обладают эти консоли гораздо более серьёзными возможностями, чем может показаться на первый взгляд.

      image

      Пожалуй, первое, что многим приходит в голову при слове «консоль» — это команда console.log(). Однако, она — лишь одна из многих подобных команд. Материал, перевод которого мы сегодня публикуем, посвящён особенностям работы с консолью JavaScript.
      Читать дальше →
      • +24
      • 26,8k
      • 7
    • 10 советов и приемов, которые помогут вам стать лучшим разработчиком на VueJS

      • Перевод

      Перед вами вольный перевод статьи "10 Tips & Tricks to make you a better VueJS Developer" с сайта Dev.to. Автор расскажет нам об интересных и полезных вариантах применения привычных нам средств VueJS.


      Введение


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

      Читать дальше →
    • Подкасты для разработчиков

        Интересно наблюдать за историей. Netflix, YouTube, Twitch постепенно вытеснили телевизор из нашей жизни. Сейчас похожий процесс происходит с подкастами и радио. За последние 2 года количество подкастов в мире выросло с 525 000 до 900 000, а количество эпизодов увеличилось с 18 000 000 до 30 000 000. В России эта волна началась в прошлом году, но уже сейчас становится сложно в них ориентироваться. Мы сделали для вас подборку из 57 техноподкастов и около того.


        Читать дальше →
      • Редактор кода Visual Studio Code. Самый подробный гайд по настройке и установке плагинов для начинающих

        • Tutorial
        Бесплатный, мощный, очень популярный, с кучей дополнений, да что там говорить, сам Фейсбук выбрал его в качестве основного редактора!


        Сегодня речь пойдет о редакторе кода Visual Studio Code или просто VS Code. Мы с тобой его установим, настроим, а также применим плагины, которые существенно упростят нам работу.
        Читать дальше →
      • Создаем интернет-магазин на Nuxt.js 2 пошаговое руководство Часть 1


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


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


        В этой статье я хочу поделиться как создать примитивный интернет-магазин:


        • Который будет быстро загружаться у пользователя.
        • Который полюбит Google (или любой другой поисковик) с точки зрения SEO.
        Читать дальше →
        • +15
        • 27,8k
        • 9
      • Используем console.log() в Chrome на полную

        • Перевод


        Сложно представить себе разработку на JS без вывода информации в консоль. Говоря метафорически, console.log() — лекарство от большинства болезней кода.


        Отладка — почти как расследование преступления, где главный преступник тоже вы — Филипе Фортес


        Но помимо повсеместно используемой функции console.log(), есть ещё много инструментов, позволяющий сильно упростить процесс. Давайте разберём некоторые из них на простых примерах.

        Читать дальше →
      • ServerLess PHP

          Накануне запуска курса «Backend-разработчик на PHP» мы провели традиционный открытый урок. В этот раз познакомились с концепцией Serverless, поговорили о её реализации в AWS, разобрали принципы работы, сборки и запуска, а также построили простой TG-бот на PHP на базе AWS Lambda.


          Преподаватель — Александр Пряхин, технический директор компании Westwing Russia.




          Читать дальше →
          • +24
          • 7,7k
          • 8
        • Руководство по логированию в Node.js

          • Перевод

          Первая задача, с которой чаще всего сталкиваются разработчики, начинающие программировать на JavaScript, – как регистрировать события в журнале консоли с помощью метода console.log. В поисках информации по отладке кода на JavaScript вы найдёте сотни статей в блогах, а также инструкций на StackOverflow, советующих «просто» вывести данные в консоль через метод console.log. Это настолько распространённая практика, что пришлось ввести правила для контроля качества кода, подобные no-console, чтобы не оставлять случайные записи из журнала в коде для продакшена. Но что делать, если нужно специально зарегистрировать какое-нибудь событие, чтобы предоставить дополнительную информацию?

          В этой статье рассматриваются различные ситуации, в которых требуется вести логи; показывается разница между методами console.log и console.error в Node.js и демонстрируется, как передать функцию логирования библиотекам, не перегружая пользовательскую консоль.
          Читать дальше →
          • +38
          • 19,9k
          • 6
        • Асинхронный PHP и история одного велосипеда

          После выхода PHP7 появилась возможность сравнительно небольшой ценой писать долгоживущие приложения. Для программистов стали доступны такие проекты, как prooph, broadway, tactician, messenger, авторы которых берут на себя решение наиболее частых проблем. Но что если сделать небольшой шаг вперёд, углубившись в вопрос?


          Попробуем разобрать судьбу ещё одного велосипеда, который позволяет реализовать Publish/Subscribe приложение.

          Читать дальше →
        • Использование JavaScript-консоли в браузерах

          • Перевод
          • Tutorial
          Сегодня мы публикуем заметку, посвящённую особенностям использования JavaScript-консоли в браузерах, лежащим за пределами широко известной команды console.log(). Собственно говоря, эта команда представляет собой простейший инструмент для отладки программ, который позволяет выводить что-либо в консоль. Однако знание некоторых особенностей этого инструмента позволит тем, кто им пользуется, повысить эффективность работы.


          Читать дальше →
        • Пользователь в Docker

            Андрей Копылов, наш технический директор, любит, активно использует и пропагандирует Docker. В новой статье он рассказывает, как создать пользователей в Docker. Правильная работа с ними, почему пользователей нельзя оставлять с root правами и, как решить задачу несовпадения идентификаторов в Dockerfile.

            Читать дальше →
          • Принципы построения REST JSON API

            • Tutorial

            Эта памятка писалась для внутренних нужд (открыть глаза менее опытным в вебе коллегам). Но, т.к. я насмотрелся велосипедов от довольно уважаемых, казалось бы, контор, — выкладываю на хабр. Мне кажется, многим будет полезно.


            Зачем


            Надеюсь, читающий уже понимает, зачем ему вообще нужен именно REST api, а не какой-нибудь монстр типа SOAP. Вопрос в том, зачем соблюдать какие-то стандарты и практики, если браузеры вроде бы позволяют делать что хочешь.


            • Стандарт HTTP это стандарт. Его несоблюдение вредно для кармы и ведёт к постоянным проблемам с безопасностью, кэшированием и прочими "закидонами" браузеров, которые совсем не закидоны, а просто следование стандарту.
            • Велосипеды со всякими {error: "message","result":...} невозможно нормально тестировать и отлаживать
            • Поддержка большим количеством готовых клиентских библиотек на все случаи жизни. Те, кто будет вашим api пользоваться, скажут большое человеческое спасибо.
            • Поддержка автоматизированного интеграционного тестирования. Когда сервер на любые запросы отдаёт 200 ОК — ну, это такое себе развлечение.
            Читать дальше →
          • Изучаем Docker, часть 5: команды

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

            Часть 1: основы
            Часть 2: термины и концепции
            Часть 3: файлы Dockerfile
            Часть 4: уменьшение размеров образов и ускорение их сборки
            Часть 5: команды
            Часть 6: работа с данными

            Читать дальше →
            • +34
            • 55,2k
            • 6
          • Расширения VSCode, которые облегчат разработку на JavaScript и Vue

            На сегодняшний день существует достаточное количество средств для разработки с поддержкой языка JavaScript и основанных на нем фреймворков. Вопрос выбора конкретного инструмента стоит вне этой статьи, тут же я постараюсь описать свой пользовательский опыт работы с Visual Studio Code и средствах, которые призваны облегчить жизнь JS разработчикам, в частности тем, кто использует Vue.


            В магазине расширений VSCode существует огромное множество плагинов, ниже будут приведены наиболее удобные из них для веб разработки.

            Читать дальше →
          • Всегда ли Node.js будет медленнее, чем Golang?

            • Перевод
            Возникает такое ощущение, что буквально каждую неделю появляется новый «веб-фреймворк» для Node.js, который называют чем-то таким, что работает быстрее, чем всё, что было до него. Всем известно, что Express — это медленно, но способен ли очередной фреймворк по-настоящему улучшить производительность подсистемы ввода-вывода Node.js? Единственное, что он может — это устранить чрезмерную нагрузку на систему, создаваемую Express. Об улучшении чего-то фундаментального речи не идёт. Собственно говоря, для того, чтобы кардинальным образом улучшить ситуацию, нужно работать на более глубоком уровне, а не добавлять новые абстракции поверх Node.js.

            image

            Что нужно для того, чтобы на платформе Node.js можно было бы создавать серверные приложения, работающие гораздо быстрее чем всё то, что есть сегодня?
            Читать дальше →
          • Prometheus + Grafana + Node Exporter + Docker в Azure c уведомлениями в Telegram

            Для начала подготовим виртуальную машину, для этого напишем небольшой скрипт, который разворачивает и автоматизирует некоторые рутинные операции, скрипт использует Azure Cli:


            project.sh
            #!/bin/bash
            echo "AZURE VM Create"
            echo "Azure Account:"
            echo "Azure name:"
            read AZ_NAME
            read -sp "Azure password: " AZ_PASS && echo && az login -u $AZ_NAME -p $AZ_PASS
            echo "Name Group  VM"
            read GROUP_NAME
            az group create --name $GROUP_NAME --location eastus
            echo "VM name"
            read VM
            echo "Admin user name"
            read ADMIN
            az vm create --resource-group $GROUP_NAME --name $VM --image UbuntuLTS --admin-username $ADMIN --generate-ssh-keys --custom-data cloud-init.txt
            az vm open-port --resource-group $GROUP_NAME --name $VM --port 8080 --priority 1001
            az vm open-port --resource-group $GROUP_NAME --name $VM --port 8081 --priority 1002
            az vm open-port --resource-group $GROUP_NAME --name $VM --port 9090 --priority 1003
            az vm open-port --resource-group $GROUP_NAME --name $VM --port 9093 --priority 1004
            az vm open-port --resource-group $GROUP_NAME --name $VM --port 9100 --priority 1005
            az vm open-port --resource-group $GROUP_NAME --name $VM --port 3000 --priority 1006
            RESULT=$(az vm show --resource-group $GROUP_NAME --name $VM -d --query [publicIps] --o tsv)
            echo $RESULT
            echo "Whait 5 min"
            sleep 300
            ssh $ADMIN@$RESULT -y << EOF
            sudo usermod -aG docker $ADMIN
            EOF
            sleep 10
            echo "Connect to Azure..."

            В скрипте мы используем файл cloud-init.txt который автоматически установит Docker и Docker-Compose на виртуальную машину.


            cloud-init.txt
            #cloud-config
            package_upgrade: true
            write_files:
              - path: /etc/systemd/system/docker.service.d/docker.conf
                content: |
                  [Service]
                    ExecStart=
                    ExecStart=/usr/bin/dockerd
              - path: /etc/docker/daemon.json
                content: |
                  {
                    "hosts": ["fd://","tcp://127.0.0.1:2375"]
                  }
            runcmd:
            - apt-get update && apt-get install mc -y
            - curl -sSL https://get.docker.com/ | sh
            - curl -L "https://github.com/docker/compose/releases/download/1.23.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
            - chmod +x /usr/local/bin/docker-compose
            Читать дальше →
          • Деплоим изоморфное веб-приложение на примере Nuxt.js


            В средних и больших проектах сайт не ограничивается одним сервисом  —  к примеру только сайтом, как правило существует база данных, API, сервер который маршрутизирует запросы ко всем этим сервисам. Выкатывать и обновлять все это без какой-либо стандартизации непросто, а масштабировать на множество серверов еще сложнее.
            Читать дальше →
            • +18
            • 19,8k
            • 6
          • Предиктивное поведение веб-интерфейса

            image

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

            Читать дальше →