Сегодняшний день, 4 августа 2018, посвятили вместе с друзьями обновлённой московской локации - парку "Тюфелева Роща", расположенному на юге столицы (в смысле - ЮАО). Название, надо отметить, присвоено парку историческое. Правда, для меня оно содержится (и очень давно) в категории "должно умереть", но как водится, всё временное - постоянно, и всё, что должно умереть, - бессмертно.

Дело в том, что топоним "Тюфелева Роща" - трансформант (как "Химка" или "Ростокино") и получился в результате ошибочно услышанного или произнесённого слова "тухоль". То есть роща та, на месте которой базировался автомобильный завод имени Лихачёва (ЗиЛ), на самом деле, "Тухлая (Тухолева) Роща". В густом лесном массиве на берегу реки Москвы постоянно ощущался скверный запах застоялой воды, исходящий от многочисленных водоёмов, согласно рассказам городских старожилов.

Но, конечно, те из нас, кто в этимологию по религиозным (или каким-либо ещё) соображениям вдаваться не хотят, вероятно, ассоциируют сие название с какими-нибудь трюфелями и считают, что оно благозвучное и даже отличное. Что же, пусть лучше будет так, ибо место получилось очень даже современное. Оно, на мой взгляд, способно переманить часть потока посетителей из парка "Зарядье" к южным рубежам Москвы прошлого столетия.

Нет, серьёзно, мне искренне хочется, чтобы в "Зарядье" людей поубавилось, чтобы все они перераспределились по другим, новым и современным московским паркам. "Тюфелева Роща" - одно из таких мест, способных обусловить "Зарядью" достойную конкуренцию (если что, это частное, субъективное мнение).

В деталях и фотографиях я раскрою все эти и многие другие тезисы позже. А пока это скромный анонс.

Серия сообщений "Тюфелева Роща":
Часть 1 - ТЮФЕЛЕВА РОЩА. АНОНС ПУБЛИКАЦИИ

Если что-то из нижеследующего вам, ну, совершенно не понятно откуда взялось, то стоит прочитать предыдущую публикацию по данной тематике здесь: https://www.liveinternet.ru/users/flash_a/post437914082/. Заодно скачать обучающие примеры оттуда же будет не лишним.

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

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

- массивами;
- записями;
- форматом текстовой базы данных "json";
- тегами, отвечающими за списочные структуры.

Начнём с самого простого и интуитивно понятного из этого перечня. Если вспомните тот же Microsoft Office Word, то списки в нём бывают как нумерованными, таки и маркированными.

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

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

Для примера составим маркированный список. Сначала вручную, чтобы освежить в памяти HTML (или же продолжить его изучение). Зная, как прописываются списки вручную, позже в красках можно будет понять и всю прелесть использования возможностей фреймворка "Vue.js".

За основу всё равно берём составленную ранее страничку "index.html" (из предыдущей публикации). Да, она будет изменена до неузнаваемости, но не придётся повторно прописывать базовые конструкции, обуславливающие гипертекстовую разметку в текстовом файле. Вместе с тем у нас уже будет подключен модуль "Vue.js".

Итак, создадим сначала маркированный список, содержащий первое сообщение (message1). Заменим теги абзаца/параграфа (р) на теги маркированного списка (ul), а также заключим первое сообщение в теги элемента списка (li).

Пример кода для составления списка, состоящего из одного элемента

"ДАЛЕЕ ПРОДОЛЖЕНИЕ ПУБЛИКАЦИИ..."

Вложение: 5952389_vue_lists.rar

Серия сообщений "Vue.js":
Часть 1 - ПЛАГИН -xBASEVIEW- ДЛЯ -TOTAL COMMANDER-. ВВЕДЕНИЕ
Часть 2 - JSON TEST
Часть 3 - ФРЕЙМВОРК VUE.JS. С ЧЕГО НАЧАТЬ. РАБОЧИЙ ПРИМЕР
Часть 4 - АВТОМАТИЗИРУЕМ СОСТАВЛЕНИЕ СПИСКОВ С VUE.JS. ПРИМЕРЫ
Часть 5 - ДЕЛАЕМ ПРОГРАММИРОВАНИЕ СО VUE.JS УДОБНЕЕ И ПРИЯТНЕЕ
Часть 6 - УЧЕБНО-МЕТОДИЧЕСКОЕ

Сразу ввожу одно очень важное определение, процитировав первую же ссылку в Яндексе: "Фреймворк - программная платформа, определяющая структуру программной системы; программное обеспечение, облегчающее разработку и объединение разных компонентов большого программного проекта."

По долгу службы я начал разбираться с JavaScript'ом и фреймворком "Vue.js". Таковой мне порекомендовали. Хочется сразу отметить, что самое толковое, что есть в отношении этого фреймворка - это основная документация, официальное руководство от производителя. У меня был (да и остаётся не заданным) ряд вопросов к авторам различных статей на «Хабре» (https://habr.com/) из серии "как?", "что?" "откуда?", "почему так?" Метался из стороны в сторону, от статьи к статье, и спустя время всё равно приходил на страницы основной документации и находил там правильные ответы на свои вопросы.

Да, признаюсь, первое прочтение не дало, ровным счётом, ничего, но как только появлялись конкретные задачи - находились и решения к ним.

Поэтому первое, что мне хочется выделить и сохранить здесь - это ссылку на официальное руководство "Vue.js".

https://ru.vuejs.org/v2/guide/

Без него просто никуда.

Таким образом, имеется вполне конкретная цель: разобраться с "Vue.js". А на вопрос "зачем?" отвечают поставленные мною самим и моими коллегами задачи:

- предоставить результат конвертации данных из локальной базы в серверную в удобной форме для анализа приёмочной комиссией;
- следовательно: разработать графический пользовательский интерфейс для демонстрации с использованием передовых Интернет-технологий;
- следовательно: выбрать перспективный фреймворк на замену "Flex";
- следовательно: изучить объектную модель выбранного перспективного фреймворка;
- следовательно: перейти от строк таблиц базы данных к экземплярам классов, хранимым в оперативной памяти;
- следовательно: подобрать нужные структуры (деревья / таблицы / поля) и настроить фильтры для приемлемой демонстрации сведений, необходимых для анализа приёмочной комиссией.

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

Специфика разработчика: я являюсь специалистом, которого в вузе пять лет учили создавать только толстые клиентские приложения. Очень лениво мне сейчас в красках рассказывать, что такое толстый клиент, но раз это обучающая статья, то это необходимо сделать. Буду краток. Толстый клиент - это программное обеспечение, размещаемое на рабочем компьютере конечного пользователя, которое решает не только задачи отображения информации в удобной форме, но и само проводит какие-то расчёты, причём не обязательно сопрягается с базой данных для хранения результатов и исходных данных. Входная и выходная информация толстых клиентов может храниться всего навсего в текстовых файлах и этого достаточно. Тот проект, над которым я работал во время написания кандидатской диссертации, тоже являлся толстым клиентским приложением. И это такой качественный, надёжный и самодостаточный толстый клиент.

Когда же я устроился на работу ведущим программистом, совмещая эту деятельность с преподавательской, вот тут-то понеслось всё самое интересное. Мир оказался куда многограннее. Современность требовала создания тонких клиентов (программного обеспечения для отображения информации, отправки запросов и приёма результатов запросов), а также мудрых серверных приложений. Шаг сродни принятию научным сообществом, что Земля не плоская, а круглая (до перехода к эллиптической форме предстоял ещё один шаг). Все сразу захотели, чтобы я чётко разделял задачи клиента, задачи сервера и задачи, связанные напрямую с базой данных (многоуровневые, вложенные SQL-запросы).

Всё, что долгое время для меня было единым целым, неделимым, распалось на фрагменты мозаики. Потребовалось более тщательное планирование и увязка фрагментов между собой. Это особая вещь, которая заставляет совершенно под другим углом смотреть на программирование. Вот и перешли от круга к эллипсу.

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

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

Да, энтузиасты решили какие-то свои, частные задачи, но они являются, преимущественно, задачами построения типовых сайтов, а не задачами организации специфической информационно-управляющей системы. Поэтому копался я, копался, а всё равно вернулся к официальному руководству, к разделу с примерами:

https://ru.vuejs.org/v2/examples/

И это, опять же, дало мне куда больший рывок, чем все те статьи на "Хабре", которые были прочитаны. И если раньше я считал "Хабр" за классную IT-площадку, то теперь меня "Хабр", откровенно, бесит, потому что в моём нынешнем представлении действительности - это сборище хвастунов, которые не нацелены научить своих читателей. Они просто показывают там, какие они молодцы, что они что-то сделали, они разобрались. Вернее, не так. Все они, априори, считают, что все их читатели, без исключения, знакомы с азами передовой разработки веб-приложений на языке JavaScript.

То есть, давайте мельком взглянем, с чего же начинается большинство статей по веб-разработке на "Хабре"? Например, просто типовая статья без оглядки на конкретное приложение / примочку:

"Выполните следующие шаги, чтобы установить [примочку] и начать работу с ней.

• Создайте директорию для вашего проекта. С точки зрения сервера эта директория будет корневой.
• Откройте эту директорию через терминал.
• Теперь скачайте и установите [примочку]. Аргумент -g указывает npm на то, что пакет следует скачивать в основную папку для хранения пакетов, а не в текущую директорию.

• $ npm install -g grunt-cli"

npm install, npm install, npm install…

Весь "Хабр" пестрит этим. Но реально нет там такой статьи, где тебе расскажут специфику от нулевой отметки о том, что, да откуда берётся? То есть по каким-то другим, постановочным статьям на "Хабре" ещё можно понять, что под терминалом понимается, на самом деле, консоль, а под консолью, в свою очередь, понимается "Командная строка" операционной системы, которая вызывается либо через "Пуск > Все программы > Стандартные > Командная строка", либо просто нажимается "Пуск" и в строке поиска прописываются три заветные буквы "cmd", которые подтверждаются нажатием на клавишу "Enter".

Но даже если ты нашёл определение терминала и попытался ввести упомянутую конструкцию "npm install", то всё равно ничего не получится, потому что автор не потрудился сказать, что когда-то давно он установил на свой компьютер программное обеспечение "Node.js", который позволяет ему устанавливать все примочки для проектов без особого труда.

Да, я нашёл ответы на эти вопросы и скачал себе "Node.js". Да, у меня заработали команды "npm install". Но вы думаете это помогло мне постичь данный дзен? Естественно нет. Это была дорога, которая лишь вывела меня на свет, на вершину горы, но к обрыву. А дальше-то что? Идти некуда. И вернулся я к истокам.

Но если считаете, что понимаете авторов и всю нитку повествования с этими всякими "npm", то следует скачать первым делом "Node.js" (https://nodejs.org/en/), ибо без него машина не просто не тронется с места, она даже не заведётся.

Далее я бился над проблемой поиска IDE (среда разработки приложений). Без IDE как без рук. И я спорил, спорил, спорил с коллегами о том, что все эти фреймворки, которые они рекомендуют, конечно, дело хорошее, но вот с наличием среды разработки для их использования какая-то информационная пропасть. Но то было мышление программиста, работавшего долгое время с толстыми клиентскими приложениями... А в споре, как известно, рождается истина. И мне дали понять, что я бьюсь головой об стену в поисках IDE одним простым вопросом:

- А зачем тебе IDE?
- Как же? А кто всё это безобразие компилировать будет? – Возразил я.
- Это же JavaScript, он, по сути, компилируется браузером. Можно писать код хоть в блокноте.

Один простой вопрос - одно простое решение. Можно писать в блокноте... Да и нужно, собственно, писать в блокноте, чтобы изучать и чувствовать всю специфику языка и технологии.

И, конечно, как только я сел и тупо скопировал простейший пример "Vue.js" в блокнот, то он у меня, не поверите, заработал.

Не сразу, естественно, ибо есть специфика на сайте - там всё поделено на рубрики:

- результат (Result);
- гипертекстовая разметка (HTML);
- скрипт, программный сценарий (Script);
- настройка стилевого оформления (CSS).

Если понимаешь, как взаимно увязать фрагменты этой мозаики - всё будет работать."ДАЛЕЕ ПРОДОЛЖЕНИЕ ПУБЛИКАЦИИ..."

Вложение: 5952342_vue_hello_offline.rar

Серия сообщений "Vue.js":
Часть 1 - ПЛАГИН -xBASEVIEW- ДЛЯ -TOTAL COMMANDER-. ВВЕДЕНИЕ
Часть 2 - JSON TEST
Часть 3 - ФРЕЙМВОРК VUE.JS. С ЧЕГО НАЧАТЬ. РАБОЧИЙ ПРИМЕР
Часть 4 - АВТОМАТИЗИРУЕМ СОСТАВЛЕНИЕ СПИСКОВ С VUE.JS. ПРИМЕРЫ
Часть 5 - ДЕЛАЕМ ПРОГРАММИРОВАНИЕ СО VUE.JS УДОБНЕЕ И ПРИЯТНЕЕ
Часть 6 - УЧЕБНО-МЕТОДИЧЕСКОЕ

Пусть тут немного полежит файлик для тестирования, так как хранить его больше, увы, негде.

Вложение: 5952143_users.txt

Серия сообщений "Vue.js":
Часть 1 - ПЛАГИН -xBASEVIEW- ДЛЯ -TOTAL COMMANDER-. ВВЕДЕНИЕ
Часть 2 - JSON TEST
Часть 3 - ФРЕЙМВОРК VUE.JS. С ЧЕГО НАЧАТЬ. РАБОЧИЙ ПРИМЕР
Часть 4 - АВТОМАТИЗИРУЕМ СОСТАВЛЕНИЕ СПИСКОВ С VUE.JS. ПРИМЕРЫ
Часть 5 - ДЕЛАЕМ ПРОГРАММИРОВАНИЕ СО VUE.JS УДОБНЕЕ И ПРИЯТНЕЕ
Часть 6 - УЧЕБНО-МЕТОДИЧЕСКОЕ

Стрит-арт Московский уже стабильно стал тематической рубрикой отчётов по любому походу в рамках проекта "День Без Транспорта". Не встреченные на пути арт-объекты, скорее, исключение из правил последнего времени.

Что я могу сказать по итогам: хайп поймали, случайный креатив встретили, футбольная тематика нашла отражение в полном объёме. Не случайно футбольный мяч напросился под руку, когда я клепал логотип 47-го похода. Прямо сказать, приятное совпадение. Первично, мяч я задумывал на логотипе как символ стадиона "Спартак", он же "Открытие Арена". Но в этом плане моя ставка не сыграла, поскольку к стадиону близко нас не подпустили из-за того, что для просмотра матча "Россия - Хорватия" там организовали дополнительную фан-зону. Ничто не предвещало беды при планировании похода. Звёзды распорядились иначе. Зато в полном объёме городской стрит-арт продемонстрировал нам, что мяч на логотип попал далеко не случайно.

И, конечно, я не имею права не упомянуть Сергея, небезызвестного граффити-хантера serge-elephant, который нашёл время и возможность присоединиться к нашему походу ближе к вечеру и поведал попутно о нюансах всего того, что мы увидели на юго-востоке, а также того, что было оставлено нами без внимания в тех же краях.

Серёж, спасибо, правда, ты сделал путь от Беговой до Октябрьского Поля очень полезным и информативным. Огромное тебе за всё спасибо! В том числе и за поддержку проекта "День Без Транспорта", ведь даже недолгий визит на мероприятие, которое заявлено как праздничное, как день рождения, - это лучший знак внимания и дань уважения.

Все? Ничего и никого не забыл? Тогда садимся поудобнее и смотрим картинки. Там есть фотосравнение (2016 vs. 2018) и это приятный бонус.

Футбольные фанаты в кокошниках. Хайп периода Чемпионата Мира по футболу 2018.
Позаимствовал эту фотографию у Чжо Мин Аунга,
так как сам без участников сфотографировать эту работу забыл
(вы обязательно её увидите в моём исполнении, но в другой публикации)

"ДАЛЕЕ ЕЩЁ СТРИТ-АРТ МАРШРУТА ТАГАНСКО-КРАСНОПРЕСНЕНСКОЙ ЛИНИИ"

Серия сообщений "День Без Транспорта 47":
Часть 1 - ДЕНЬ БЕЗ ТРАНСПОРТА 47. МЕТРОПОЛИТЕН В КАДРЕ
Часть 2 - ДЕНЬ БЕЗ ТРАНСПОРТА 47. СТРИТ-АРТ В КАДРЕ

Такими темпами как я фотографии обрабатываю Солнцевская линия просто возьмёт и дотянется уже до Рассказовки вместе с пассажирами. Но, на самом деле, нет. Я активно сейчас слежу за Инстаграмом Солнцевской линии (пусть даже и не официальным), и там видно, например, что над станцией "Говорово" с её окрестностями ещё предстоит месяцок поработать точно. Ко дню города, а заодно и выборам Сергея Семёновича, должны строители управиться.

Но не про "Говорово" речь пойдёт сейчас, а про "Мичуринский Проспект", где мне посчастливилось побывать 3-го июля 2018-го. Во время блог-тура станция предстала во всей красе: участочек панорамного окна, участочек подсвеченной стены, участочек неподсвеченной стены, эскалатор один, другой, третий... Прогуляться по путям удалось, пожалуйста, по тоннелям тоже позволили, но недалеко и с осторожностью.

В конечном итоге той же "светомузыки" на станции, естественно, не останется: вся стена с рыжим изображением процесса гибридизации косточковых культур, тематически подобранным во славу великого русского селекционера Ивана Владимировича Мичурина, будет подсвечиваться полностью и давать столь же рыжеватый фон самой станции. Она должна быть позитивной - нести пассажиром радость солнечных фруктов. Пока же, преимущественно, царит полумрак, разбавляемый естественным освещением с улицы. А над этим всем нависает полноценно готовая "оболочка". Да, громадный наземный павильон и его инфраструктура уже обеспечили бессветофорный, надземный пешеходный переход через трассу Мичуринского проспекта. Очень удобно стало. Путевая заметка горожанина: памятник "Улица Пельше" сохранили, а присутствовала вероятность того, что по завершении стройки от него не останется и следа.

Над станцией "Мичуринский Проспект" ребятам в рыжих касках ещё предстоит поколдовать малость, чтобы абсолютно всё в намеченный день запуска пассажирского движения на Солнцевской линии (8а) работало как часы.

P.S. За блог-тур спасибо сотрудникам Пресс-службы Департамента строительства города Москвы.

- 01 -

"ДАЛЕЕ ЕЩЁ СТАНЦИЯ МИЧУРИНСКИЙ ПРОСПЕКТ В ШИРОКОМ ДИНАМИЧЕСКОМ ДИАПАЗОНЕ"

Серия сообщений "Солнцевская":
Часть 1 - СТРОЯЩАЯСЯ СТАНЦИЯ МЕТРО РАССКАЗОВКА (HDR)
Часть 2 - БЛОГ-ТУР -СОЛНЦЕВСКИЙ РАДИУС-
Часть 3 - ПОДЗЕМНЫЙ -МИЧУРИНСКИЙ- В ШИРОКОМ ДИНАМИЧЕСКОМ
Часть 4 - СТАНЦИЯ -РАССКАЗОВКА- НА ЭТАПЕ СТРОИТЕЛЬСТВА (HDR)
Часть 5 - СТАНЦИЯ -НОВОПЕРЕДЕЛКИНО- НА ЭТАПЕ СТРОИТЕЛЬСТВА (HDR)
...
Часть 9 - -РАССКАЗОВКА- В ПАНОРАМАХ (ЛЕТО)
Часть 10 - 7 НОВЫХ СТАНЦИЙ МЕТРОПОЛИТЕНА ОТКРЫЛИСЬ ДЛЯ ПАССАЖИРОВ
Часть 11 - КАРТЫ -ТРОЙКА- К ПРОДЛЕНИЮ СОЛНЦЕВСКОЙ ЛИНИИ

Давно задумал я попутно все наземные павильоны станций фотографировать, но классических походов всё не намечалось, и не намечалось. 7-го июля 2018-го, наконец, свершилось.

В полном объёме, честно признаюсь, не реализовал. Да вы и сами это увидите. На Котельниках отвлёкся - забыл, где-то ещё тоже забыл, где-то было слишком много народа - получалось некрасиво, где-то эфир был заполнен пьяными, футбольными фанатами и пьяными футбольными фанатами, к "Спартаку" просто невозможно оказалось подступиться - пришлось издали съёмку вести, а заключительные две станции мы просто доходили/доползали из серии лишь бы добраться до поставленной цели. Да, она была достигнута: до "Планерной" дошли, тайминг плановый опередили, Макс и Саша футбол посмотрели.

По ощущениям фиолетовая ветка сейчас стала сопоставима с веткой серой. Вернее, случилось это ещё когда "Котельники" открыли, но с тех пор мы и ветке в рамках проекта ДБТ внимания не уделяли. Крайний раз в рамках проекта на ТКЛ не существовало ни "Спартака", ни "Лермонтовского Проспекта", ни "Жулебина", ни "Котельников". Собственно, и раньше проходить ветку было не просто, но не физически, скорее, а эмоционально. Там, когда город не знаешь толком, сбиться с маршрута и заплутать вообще дело не хитрое. Так и случилось в далёком 2007-м - мы накрутили лишние километры из-за своих не очень хороших познаний города. Сейчас маршрут был тщательно спланировал и, я соглашусь, где-то были спланированы субъективные излишки, связанные с моим личным желанием посмотреть метрополитеновские достопримечательности: тюбинговое кольцо, стройплощадку "Юго-Восточной", стройплощадку "Окской Улицы"; железнодорожную станцию "Старопролетарскую", граффити с футбольными фанатами в кокошниках на Окской... Всё это того стоило, безусловно, но и плановый маршрут несколько продлило. Не даром поход в первую очередь был назван "Ультра", и только потом "Фиолетовым".

P.S. Что приятно, со своей этой задумкой фотографировать павильоны поймал хайп. Уже к вечеру в сети мелькнула новость о том, что все старые логотипы "М" в скором времени заменят на новые с ножкой, на которой предусмотрены лампочки-индикаторы в цвет линии, к которой относится станция. Сообразил, что надо постить, надо как можно быстрее постить новый собранный материал, пока он актуален и да, - это сработало. Два инстаграмм-сообщества мои фотографии к себе утащили (в хорошем смысле слова, указав авторство - всё как положено). И по комментариям в этих сообществах обнаружил странную вещь: несмотря на то, что я давно уже продвигаю эту тему (про индикаторы) в массы, на лекциях активно рассказываю, что есть такая очень удачная дизайнерская затея - нововведение, маркировать лампочками логотипы под цвет линий метрополитена, многие до сих пор о ней не знали. Более того, странно было читать, что это новшество кому-то не нравится... Дикие люди - деньги метрополитена опять считают. Свои бы лучше считали.

Павильон северного вестибюля станции "Жулебино"

"ДАЛЕЕ ЕЩЁ ФОТОГРАФИИ ОБЪЕКТОВ ТКЛ И НЕ ТОЛЬКО"

Серия сообщений "День Без Транспорта 47":
Часть 1 - ДЕНЬ БЕЗ ТРАНСПОРТА 47. МЕТРОПОЛИТЕН В КАДРЕ
Часть 2 - ДЕНЬ БЕЗ ТРАНСПОРТА 47. СТРИТ-АРТ В КАДРЕ