Статьи

Автор:Игорь Тельменко

vue-cli

vue-cli — это консольная утилита для создания каркаса приложения vue.js на основе одного из имеющихся шаблонов.

Она автоматизирует для нас

  • процессы настройки системы сборки
  • подключение библиотек

У vue-cli имеется ряд готовых шаблонов, на основе которых можно создать приложение:

  • webpack — Полный набор на базе Webpackvue-loader, горячей перезагрузкой страницы, линтингом и тестами)
  • webpack-simple — Упрощенный набор на базе Webpack и vue-loader
  • browserify — Полный набор на базе Browserify
  • browserify-simple — Упрощенный на базе Browserify и vueify
  • pwa — Шаблон для PWA на базе шаблона webpack
  • simple — На базе обычного html-файла с подключенными в него собранными js-файлами (без системы сборки)

Также можно создать собсвенный шаблон со своими файлами и библиотеками.

Что нужно чтобы создать и запустить приложение с помощью vue-cli?

Порядок действий примерно такой:

После запуска npm run dev в консоли отобразится URL для открытия в  браузере. Так как шаблон webpack поддерживает горячую перезагрузку, то при изменении какого-либо файла страница в браузере будет перезагружаться чтобы отобразить изменения.

Полезные ссылки:

 

Автор:Игорь Тельменко

Tether

Tether это — JavaScript библиотека, которая служит для закрепления положения абсолютно позиционированного элемента (прикрепяемого элемента) относительно другого элемента на странице. Например, это может быть всплывающая подсказка (tooltip) или диалог, которые отображаются над, под, слева или справа от определенного элемента (элемент-цель).

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

Занимает примерно 5kb в минифицированном и сжатом виде и поддерживает IE9+ и все современные брайзеры.

Чем можно указать при привязке элементов двуг к другу?

Во-первых указываются точка привязки прикрепляемого элемента и точка привязки элемента-цели. Точки указываются с помощью ключевых слов: left, center, right, top, middle, bottom. Например, «top right» — это верхний правый угол элемента (блока).

Во-вторых можно указать отступ (расстояние между привязанными точками. Отступ указывается по двум осям.

И в-третьих Tether включает возможность ограничивать (удерживать) прикрепляемый элемент внутри некоторой области. Если пользователь прокручивает контент так, что прикрепляемый элемент (пытаясь следовать за элементом-целью) скрывается из нужной области, то прикрепляемый элемент может быть прижат к низу области, может быть перекинуть на другой край элемента-цели или вовсе скрыт.

Конечно, вся эта магия прикленных и плавающих блоков основана на css-свойствах position и z-index. Поэтому в некторых случаях, если в весртке уже используется указание position или z-index библиотека может давать сбои. Это необходиом учитывать.

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

Автор:Игорь Тельменко

Flexbox

Flexbox — это более современный способ располагать блоки на странице, чем плавающие блоки (float-ы), созданный именно для этих целей. Не смотря на то, что он не известен так широко, как float-ы, данный подход уже не новый, появился еще в 2011 году. По версии сайта caniuse его поддерживают все современные браузеры.

Прочитать больше

Автор:Игорь Тельменко

Docker с Apache и php 5.3

В продолжение темы развертывания окружения с php 5.3 соорудил вариант на docker. Прошу любить и жаловать — проект docker-grandpa-php.

Этот вариант более легковесен, чем вариант с vagrant.

Для работы требуются установленные docker и docker-compose.
Прочитать больше

Автор:Игорь Тельменко

Виртуальная машина с Apache и php 5.3

Разработчики всегда стараются идти в ногу со временем. Однако часть работающих и приносящих прибыль проектов, к сожалению, остаются на старом стеке технологий. Таких, например, как Apache и php 5.3.

Новые дистрибутивы Linux, к сожалению, уже не имеют в своих репозиториях такой старой версии php как 5.3. Готовые сборки docker для php разработчиков, такие как Laradock, тоже не поддерживают столь старые версии. Что же делать, если необходимо поднять окружение разработчика для таких проектов?
Прочитать больше

Автор:Игорь Тельменко

Модули Laravel

Чтобы упорядочить код приложения мы прибегаем к ряду мер. В том числе используем пространства имен и распределяем файлы по директориям. Про пространства имен вроде бы понятно. Вопрос что есть для Laravel для второго пункта.

В Laravel имеется такое решение как пакеты. Штатная штука и ее вроде бы можно использовать для модульности. Но для каждого пакета нужно будет очень много настроек прописывать вручную. Весь код лежать в packages/имя пакета/src … и выглядеть как нечто сторонее. Метод рабочий, но он, скорее, для подготовки пакетов, которые будут использоваться в других проектах.
Прочитать больше

Автор:Игорь Тельменко

Laradock

Laradock — это готовая сборка образов Docker для разаработки php-приложений на Laravel. В то время, как Homestead использует виртуальную машину, Laradock использует все плюсы Docker.

Эта статья — короткая инструкция по поднятию Laradock на host-машине с Linux Mint (Debian, Ubuntu).
Для начала вам необходимо установить Docker CE и Docker Compose. Затем можно приступать к шагам, описаным в статье.
Прочитать больше

Автор:Игорь Тельменко

Docker Compose

Docker Compose — это инструмент, который позволяет запустить несколько контейнеров Docker одной командой. Также он упрощает процессы управления Docker-контейнерами (настройка связей и объемов внутри контейнеров, запуски закрытие). Прочитать больше

Автор:Игорь Тельменко

Webpack

Webpack — это сборщик модулей современных JavaScript приложений (в принципе любых веб приложений, у которых есть JavaScript часть). Когда он обрабатывает ваше приложение, то рекурсивно собирает граф зависимостей, которые требуются каждому модулю вашего приложения. Затем упаковывает все эти модули в небольшое число склеек (bundles), которые и грузятся  в браузер.

Для сборки веб приложений webpack заменит собой grunt, gulp (системы организации задач) и bower (пакетный менеджер клиенской части). Однако, так как у grunt и gulp область применения иная и не ограничивается сборкой, то в ряде случаев webpack можно и нужно встроить в задачи, контролируемые этими системами. Прочитать больше

Автор:Игорь Тельменко

Gulp

Gulp — это тоже система организации задач, такая же как и grunt, но появилась позже него. Gulp так же устанавливается как npm пакет.

Базовые отличия в этих двух системах следующие: Прочитать больше

Автор:Игорь Тельменко

Grunt

Grunt — это система организации рутинных задач, которые делает веб разработчик. Примеры таких задач — минификация кода, компиляция, запуск юнит-тестов, линтинг.

Задачи, которые необходимо автоматизировать прописывается командами в специально файле Gruntfile.js. После чего с помощью команды grunt <имя задачи> можно выполнить любую задачу (последовательность команд). Часто используемую задачу (например сборку всех js и css файлов) можно сделать задачей по-умолчанию и запускать просто командой grunt. Прочитать больше

Автор:Игорь Тельменко

Promise

Promise (промисы) — удобный механизм организации асинхронного кода.

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

Чтобы нам понадобилось при этом. Несколько вложенных двуг в друга callback-функций (обработчиков). Такой код стал бы плохочитаемым. Так же, на бы хотелось иметь обработку ошибок. Для этого пришлось бы добавлять callback-функции и для ошибочных ситуаций. Для решения этой проблемы и существуют промисы. Прочитать больше