Эта история началась в далеком 2012 году, когда широкими шагами по планете начала свой путь Windows 8. Находясь под впечатлением плиточного интерфейса стартовой страницы это операционной системы, я решил сделать такую же на HTML, CSS и JavaScript.
Тогда не было и мысли делать библиотеку компонентов, просто набор стилей и их применение и чтобы в браузере и чтобы красиво и чтобы работало. И понеслась. Сначала были просто плитки (тайлы), затем они обрели различные эффекты, а затем этого стало мало. На просторах интернета (шучу, на сайте Microsoft) был найден Microsoft Developer Guide for Windows 8 UI. Почитав немного сие творение инженеров Microsoft, было принято решение начать делать библиотеку компонентов, потихоньку, для личных нужд, без рекламы и ажиотажа.
Ну, как говорится, сказано — сделано. Проект был запущен по кодовым названием Metro UI CSS.
Первая версия, которая, к слову сказать, так и не получила номер 1, а осталась в истории с номером 0.95 имела базовые стили и десяток компонент.
К работе над проектом присоединились Сергей Волков из России и Валерио Баттаглия из Швейцарии. Сразу, хочу сказать им огромное спасибо за их работу в проекте.
Хотя проект нигде не рекламировался, но все таки был замечен сообществом. Количество посетителей страницы проекта быстро дошло до цифры в 2000 хостов ежедневно, начали потихоньку накапливаться звездочки на GitHub странице проекта.
Через какое то время проект был замечен менеджерами программы Microsoft Bizspark и вскоре получил соответствующий статус как участник программы BizSpark, а мы все, кто работал на проектом, получили плюшки от Microsoft в виде лицензий на программное обеспечение от софтверного гиганта.
Чуть позже проект также получил поддержку от компании JetBrains (компания активно поддерживает open source) в виде лицензий на их замечательную IDE PhpStorm.
В июне 2013 года было принято решение прекратить работу над версией 0.95 и начать разработку версии 2.0. К этому времени накопился некоторый опыт, пришло осознание, что было сделано не так, что нужно улучшить, а что убрать совсем. Общий TODO получился таким обширным, что не было смысла вносить исправления и дополнения в версию 0.95, а целесообразнее было начать разработку с чистого листа.
Так начала свою жизнь версия 2.0.
При разработке версии 2.0 были учтены ошибки и неверные решения в версии 0.95. Были оптимизированы базовые стили, а набор компонент был расширен в 3 раза до 30 штук, добавлена возможность инициализировать компоненты с использованием декларативного подхода через атрибут HTML элемента data-role.
Положительные отзывы сообщества показали, что это был правильный шаг — отказаться от продолжения работы над 0.95 в пользу полностью новой Metro UI CSS 2.0.
К сожалению, в начале работы над версией 2.0 была потеряна связь, по тем или иным причинам, с Сергеем и Валерио и далее проект писался одним человеком. Это была трудная, но очень интересная работа. Вообще я заметил, что если твоя работа приносит кому то пользу, это дарит автору такой себе профит, который не купишь за деньги и ощущения от этого имеют свою собственную, ни с чем не сравнимую психологическую окраску.
Версия 2.0 просуществовала 2 года. Так как все развивается, развивался и проект, как в мыслях так и в коде. В августе 2015 года пришло понимание, что в проекте нужно что то менять и менять коренным образом и так, что бы это пошло на пользу тем, кто использовал библиотеку для своих задач.
Одним из ключевых решений для выпуска версии 3.0 стало решение отойти еще дальше от функциональной инициализации компонент и сделать ее максимально декларативной и дать возможность верстать страницы сайтов людям, не имеющим опыта программирования на JavaScript (например СЕО специалисты) и чтобы эти страницы сохранили свою интерактивность.
Основным недостатком в декларативном подходе в версии 2.0 был тот факт, что он работа только для заранее сверстанных компонентов. Если компонент загружался на страницу через Ajax или создавался JavaScript кодом, то единственной возможностью его инициализации оставался вызов соответствующей функции.
В конце августа 2015 года я начал работу над 3-й версией Metro UI CSS.
Как я говорил выше, основная задача была сделать все в декларативном стиле. И если раньше, чтобы инициализировать компонент, который был загружен посредством Ajax или создан с использованием JavaScript и присоединен в DOM, нужно было написать соответствующий JavaScript код с вызовом нужной функции инициализации компонента, то в 3-й версии было решено исправить это, тем более, что браузеры уже начали поддерживать нужную для этого технологию (Observer).
В третьей версии был сильно оптимизирован код базовых стилей, написан механизм инициализации компонент и отслеживания их появления на странице с последующей автоматической инициализацией. Набор компонент и их функциональные возможности были расширены, код компонент был переписан для поддержки функций инициализации и отслеживания. Нововведения были к месту, о чем говорили большое количество положительных отзывов пользователей библиотеки.
В апреле 2018 года, в очередной раз пересматривая исходный код Metro UI CSS и сайтов, написанных на Metro 3, я пришел к мысли о том, что уж очень много HTML кода приходится писать программисту и нужно с этим что то делать.
Так было принято решение, что пусть весь лишний оберточный HTML код, а многие компоненты к тому времени имели над собой обертку из HTML элементов для обеспечения своей работоспособности, пишет не программист, а библиотека сама с этим справляется. Еще одной проблемой было то, что Metro 3 никак не отслеживало изменение значений ключевых атрибутов компонент, изменение которых влекло за собой изменение поведения компонента. Два этих фактора привели меня к необходимости написания Metro 4.
Подготовительные работы заняли три месяца, за это время был составлен план по реструктуризации Metro 3, определения, что нужно и как это делать. В августе я начал работу на 4-й версией, которая к тому времени даже в названии поменялась с Metro UI CSS в просто Metro 4. Изменение названия тоже было не просто так сделано. Библиотека, хоть и сохранила визуальную базу, заложенную в предыдущих трех версиях, но уже не была только стилизацией элементов Windows 8. Это стало нечто большее. Все было переписано с нуля. Количество компонент было увеличено в 2 раза до 70+ и продолжает увеличиваться.Теперь это стал самодостаточный продукт, отпала необходимость во многих сторонних компонентах и библиотеках (кроме jQuery Core, пока это основная и единственная зависимость).
Итак что же такого в Метро 4 особенного, чего нет в других библиотеках, например Bootstrap? На самом деле даже сравнивать не буду! Это личное мое виденье, это мой мир, который я строил несколько лет. Если Вас полностью устраивает Bootstrap или нека другая библиотека, то Вы можете продолжать их использовать, но если Вам захочется попробовать чего то нового и большего в этой жизни (к черту скромность!), милости просим в мир Metro 4.
Ключевые особенности проекта:
- Набор базовых стилей — Metro 4 включает в себя различные стили для изменения внешнего вида элементов html.
- 70+ компонент с декларативным стилем использования доступны для решения практически всех задач.
- Инструменты — различные встроенные функции и классы повысят вашу производительность.
- Иконочный шрифт с набором из более чем 500+ иконок.
- Builder (https://builder.metroui.org.ua) — при помощи сборщика, Вы сможете собрать собственный набор из компонентов Metro 4. Исходный код доступен на Github.
- Sandbox (https://sandbox.org.ua) — собственная песочница для тестирования возможностей Metro 4 и не только. К слову сказать песочница написана на Metro 4, автором Metro 4 и ее исходный код доступен на GitHub.
- Быстрая реакция на обнаруженные ошибки и их устранение. Новая версия выходит каждую неделю по воскресеньям, а в течении недели доступен Developer Branch на GitHub с текущими уже реализованными фиксами и расширениями.
- Подробное описание всех элементов библиотеки Metro 4 (https://metroui.org.ua).
- Форум — получите дополнительную помощь от сообщества на форуме Metro 4.
- Metro 4 — это инструментарий с открытым исходным кодом для разработки с помощью HTML, CSS и JS. Metro 4 позволяет быстро и без лишних затрат создавать прототипы страниц и полнофункциональные сайты и даже без знания JavaScript.
- Metro 4 в данный момент имеет лицензию MIT и всегда будет оставаться бесплатным для некоммерческих проектов с открытым исходным кодом.
Отдельное спасибо хочу сказать:
- Моему другу Александру Задорожному, за финансовую поддержку на первых этапах проекта
- Моему другу и шефу Александру Ольшанскому за поддержку и большое количество оригинальных идей для проекта
Русурсы
Комментарии (62)
KevlarBeaver
26.11.2018 20:09Наверное, оффтопик, и меня сейчас жутко заминусят, особенно в карму, но я всё же хочу это сказать. Уже не раз бросается в глаза, как авторы различных проектов, если это не крупные компании, нацеленные чисто на бабки, а вот простые (хоть и крутые, безусловно) разработчики обозначают своё происхождение, когда делают проект международного уровня. У российских разработчиков — это зачастую международный домен и всё на английском. У украинцев же — национальный домен и в about — гордо «сделано в Украине». Заставляет задуматься.
По сути проекта же. Молодцы, безусловно. Или… молодец, я так понял, что ведёт проект сейчас один человек. Поправьте, если ошибаюсь. Идея, казалось бы, плавает (плавала) на поверхности, — но реализовали её именно вы. Более того, обратили на себя внимание Microsoft и Jet Brains… Интересует вот такой момент — а что в плане лицензии? Изначально не боялись, не задумывались, что те же товарищи из Microsoft могут придраться и задавить проект?olton Автор
26.11.2018 20:31Спасибо. По поводу лицензии: я изначально озадачился этим вопросом и получил от Майкрософт (точнее от ее представителя, который активировал Bizspark) ответ, что проблем не будет.
sha4
26.11.2018 20:37Работчики обозначают своё происхождение, когда делают проект международного уровня… У украинцев же — национальный домен и в about — гордо «сделано в Украине»
Проект международного уровня может быть сделан в какой-то одной стране? Проект, который «сделан в такой-то стране» будет активно поддерживаться участниками из других стран?KevlarBeaver
26.11.2018 20:51Нет.
KevlarBeaver
27.11.2018 21:40Вот вы написали комментарий. Потом отредактировали его в «del». Я полез в почту и посмотрел, что вы там за комментарий написали, который потом отредактировали, и ответил на него кратко «нет». А теперь вы опять отредактировали комментарий, и теперь моё «нет» смотрится неуместно, но убрать или изменить вслед за вашими изменениями я уже не могу. Зачем так делать?
KevlarBeaver
27.11.2018 21:43Да, проект международного уровня может быть сделан в одной стране.
Проект, который сделан в одной стране, вполне может поддерживаться и развиваться в дальнейшем участниками из других стран.
Многие (но не все) толковые проекты сделаны в Штатах. Но поддерживаются и развиваются всем миром. Например, Википедия. И тысячи других.
Fenzales
27.11.2018 18:34+1Многие (но не все) толковые проекты сделаны в Штатах.
Ни разу не видел у них обозначения, что это Американский проект.
kAIST
27.11.2018 02:07Потому что когда ты делаешь проект, который нацелен на международную аудиторию, а не аудиторию одной страны, логично его делать на языке международного общения.
KevlarBeaver
27.11.2018 10:27-2Речь не о том, на каком языке делать. А о том, что украинцы гордятся своей страной, а россияне – нет.
Free_ze
27.11.2018 12:40+4Почему обязательно нужно заявлять о своем проекте от лица целой страны?
ДискуссияЧтобы так писать, нужно, чтобы гражданство разработчиков было одинаковым? Или географическое положение во время работы над проектом? Инструментальная база или даже спонсорство со стороны государства? А можно ли к проекту подключать библиотеки, сделанные в другой стране, чтобы не потерять национальный статус? Можно ли открывать исходники таких софтин под позволяющими модицикацию лицензиями? Если да, то в какой момент национальный статус теряется?
…
Или же это просто тренд в отдельно взятой стране и демонстрация чего-то кому-то?
Idril
27.11.2018 13:04+1Да и российских проектов достаточно, где используется национальный домен и русский язык (правда вот, гордого «Сделано в России/Испании/Франции» я нигде не встречал).
Ну и чтобы делать такие громкие заявления, нужна какая-то статистика, а не — «Уже не раз бросается в глаза».KevlarBeaver
27.11.2018 13:30Made in China встречается повсеместно, например. Правда, это скорее не в Сети, а в реале.
KevlarBeaver
27.11.2018 13:33нужна какая-то статистика
Я боюсь, меня в глубокий минус сольют, если я пособираю статистику и статью набросаю. Видишь, «патриоты» уже в карму нагадили. Да и формат Хабры всё же не о том.
Barbaresk
27.11.2018 13:24+1А зачем писать везде, что проект «Made in noname country»? Люди делали этот проект, а не страна. Делали проект на свои деньги, вкладывали свой труд. Ни вы, ни я, ни кто-то еще из России отношения к этому проекту не имел, кроме этих нескольких людей. Я, наверно, очень не «патриотичен», но не умею «гордиться страной». Потому что считаю, что прошлыми достижениями гордиться глупо (а-ля победа на Куликово поле), а из современных достижений — «крымнаш», «сочинаш», «сириянаш», «четвертьфиналнаш», «пенсияненаш» чем тут гордится — хз.
KevlarBeaver
27.11.2018 13:28Комментарием ниже написал, но повторюсь. Я не говорил, надо или не надо так делать. Я лишь констатировал такой факт, особенность. Как её трактовать — это отдельная тема.
camradee
27.11.2018 14:39+1Что плохого в военных победах страны («сириянаш»)? А вообще странно, возникает ощущение, что вас волки в лесу вырастили и обучили пользоваться хабром и видимо программировать, если так то вы правы.
SergeyMax
27.11.2018 17:29В этом ничего наверное плохого нет, если это делается не за счёт наших пенсий.
KevlarBeaver
27.11.2018 19:47Что плохого в военных победах страны («сириянаш»)?
Во-первых, я считаю, что войны — это впринципе плохо. И никакая власть, территория, ресурсы и прочая чушь — не стоят человеческих жизней.
Во-вторых, мне глубоко плевать, что там «ваш» или «не ваш». Вы эту пургу втирайте по первому каналу, а не мне в уши.
В-третьих, я считаю единственно адекватной идеологией — космополитизм, и упарываться по достижениям конкретной страны — не вижу никакого смысла.
А вообще странно, возникает ощущение, что вас волки в лесу вырастили и обучили пользоваться хабром и видимо программировать, если так то вы правы.
Я родился в предразвальном Советском Союзе. Вырос в Крыму при украинской власти. А теперь вот живу при российской. Нет, меня вырастили не волки в лесу, а родители, которые задницу рвали, чтобы выжить. Сейчас я задницу рву с той же целью.
А научили меня программированию совсем не учителя, и, тем более, не российские учителя. Научила меня программированию во-первых, документация, большей частью англоязычная, а во-вторых, айтишное Интернет-комьюнити, которое большей своей частью аполитично.
Поэтому, можете собрать свои достижения и победы и шагать стройными рядами. Для меня ваше светопредставление и бряцанье медалями — яйца выеденого не стоят.
KevlarBeaver
27.11.2018 13:27Стоит так делать или лет — это уже другой разговор. Я просто констатировал факт. Не понимаю, почему меня заминусовали и нагадили в карму за это.
valdemartorch
27.11.2018 11:30-1языке международного общения
Я так понимаю это китайский, ну или испанский?KevlarBeaver
28.11.2018 11:34+1Китайский по моему скромному мнению первым должен кануть в Лету, а не использоваться в качестве международного. Но этого, к сожалению, не будет, в виду огромного числа носителей языка. Но по сути, он очень устарел и сильно перегружен. Если ты не знаешь, о чём речь, я на пальцах объясню. Представь, что у нас ввели иероглифы в виде emoji-подобных иконок. И всё бы хорошо, можно разные слова одним символом изображать, хоть и рисовать его порой долго, но сейчас же всё больше на копуктерах… прорвёмся. Улыбка, собачка, зонтик, солнце – один символ. Но вот незадача, минобр вводит новые правила, теперь одна улыбка – это просто улыбка, две улыбки – означает "компания", три улыбки подряд – "собрание". И таких правил – целая книга. Дальше интереснее, важен контекст, улыбка рядом с собачкой означает "игра с домашним питомцем (любым)", а улыбка рядом с кошечкой означает "коварный враг". Хотя само по себе изображение кошечки – так и означает кошечку. А как же написать "игра с кошкой" тогда? Всё просто: улыбка собака кошка, только в таком порядке. Если кошку поменять местами с собакой, выражение будет означать "верный друг оказался врагом". Вот так примерно выглядит китайский язык.
b360124
27.11.2018 22:25Как бы на дворе 2018 год, пора уже потихоньку и от JQuery отходить. )
HaJIuBauKa
27.11.2018 06:33Кстати у меня был примерно тот же вопрос. А как быть тем кто пишет под Ангуляр или Реакт?
agentx001
27.11.2018 09:35Ну формально ни angular ни react не конфликтуют с jquery, хотя их совместное использование это треш, да.
KevlarBeaver
27.11.2018 10:32+1А куда отходить то, в какую сторону? Или поддерживать весь этот ворох не совместимых друг с другом фреймворков? А как быть со старыми (но не очень) браузерами? Я понимаю, сейчас модно всё ставить через npm, тащить за собой стопятьсот зависимостей и тормозить, будто не сайт отрисовыватся, а моделируется работа токамака в реальном времени.
b360124
27.11.2018 10:44В поддержке указано IE11+ и другие вечнозеленые, так что про какие старые браузеры вообще разговор. Многие вещи можно уже и на ванильном js делать, а так я бы порекомендовал бы Vue в тех местах где много зависимостей и нужна реактивность.
enabokov
27.11.2018 10:56IE 11 выпущен 5 лет назад. И у него нет "+".
b360124
27.11.2018 11:11+2Ну наверное автор имел ввиду Edge как наследие от IE.
KevlarBeaver
27.11.2018 13:39C ru.vuejs.org:
Vue не поддерживает IE8 и ниже, так как использует возможности ECMAScript 5, которые невозможно эмулировать в IE8. В остальном, поддерживаются все браузеры, совместимые с ECMAScript 5.
Так что я, в принципе, не против использования Vue. Но, опять же, встаёт вопрос, почему Vue? Может, я пишу на реакте? Или ангуляре? Или другом *someframework*…agentx001
27.11.2018 13:44Ванильный javascript?)
KevlarBeaver
28.11.2018 23:21Да, наверное. А те, кому нужна поддержка старых браузеров, воспользуется транспайлером. Только я не уверен, что транспайлер сможет заткнуть все бреши старых браузеров, особенно в области различных API.
b360124
27.11.2018 13:47Ну банально потому что Vue элементарно можно встроить в часть страницы + реактивность из коробки, ну и низким порогом входа в фреймоворк + поддержка и развитие экосистемы. С ангуляром и реактом дела не имел, поэтому на их счет ничего сказать не могу.
REPISOT
27.11.2018 06:19Находясь под впечатлением плиточного интерфейса
Я первым делом поставил Classic Shell. А потом Remove — AppxPackageWernisag
27.11.2018 08:41Забыли ещё Remove-AppxProvisionedPackage -online
REPISOT
27.11.2018 12:03Она не сработала, несмотря на права админа.
Wernisag
27.11.2018 12:12В таком виде и не должна, это только часть. Ниже полностью, пользуйтесь на здоровье
Get-AppXPackage -AllUsers | ? name -CNotLike *Store* | Remove-AppxPackage
Get-AppxProvisionedPackage -online | ? DisplayName -CNotLike *Store* | Remove-AppxProvisionedPackage -onlineREPISOT
29.11.2018 05:58Вы серьезно думаете, что я использовал эту команду исключительно после вашего комента и именно в таком виде?
Jabher
27.11.2018 17:22Основным недостатком в декларативном подходе в версии 2.0 был тот факт, что он работа только для заранее сверстанных компонентов. Если компонент загружался на страницу через Ajax или создавался JavaScript кодом, то единственной возможностью его инициализации оставался вызов соответствующей функции.
Как раз в те же годы, что делалась вторая версия, я делал cornerjs (https://habr.com/company/uprock/blog/192740/), который бы решал именно эту проблему. Чертовски обидно — я писал ребятам из бутстрапа, материала, кучи фреймворков поменьше, все либо думали, что это усложнит проект, либо пугались фразы "полифилл для ie9-10", хотя он работал на нативных свойствах. и тут бы он тоже идеально вписался. Но, к сожалению, прошли те времена, когда такое решение ("легкие" хуки на странице без написания реального JS) было бы ощутимо актуально, сейчас в тренде несколько иные вещи.
Mingun
27.11.2018 18:13Скажите, а в чём был смысл обязательной декларативной инициализации компонентов, подтянутых через AJAX (как я понял, неумение этого версией 2 и было её основным «фатальным недостатком»)? Если без JavaScript'а вам всё равно никакого AJAX'а не видать.
olton Автор
27.11.2018 18:45Например вы подтянули через аякс кусок html кода, который содержит, в том числе, компоненты, которые требуется инициализировать. Вот мне и хотелось, что бы этот кусок html был добавлен в DOM и на этом все. Все компоненты проиницализировались автоматички, не нужно помнить и даже знать, какие компоненты прилетели. Как то так.
Mingun
27.11.2018 19:25Это я понял, но зачем? Вам же всё равно писать код для вставки куска html в DOM, тут же все компоненты можно и проинициализировать. «Главное обоснование» выглядит как-то несерьёзно. Просто на моей памяти подобная магия рано или поздно обязательно вылезала боком и приходилось костылить жуткие вещи, что-бы отрубить её там, где она не нужна.
Pavlov_dog
27.11.2018 18:17+1Сергей, ваша трудоспособность — это просто что-то с чем-то! Нужно быть просто локомотивом, чтобы в одиночку такое осилить. Просто хочу выразить вам свое уважение :)
BTW если не секрет — всегда интересовал порядок величины донатов на таких проектах. Насколько я понял, вас напрямую не поддерживает какой-нибудь гигант индустрии, так что все в руках пользователей. Если нет желания называть прямых цифр, то можете просто поделиться своими ощущениями — есть ли возможность хотя бы перейти на парт тайм или приходится 8 часов днем работать + ночью над Metro? Вообще, думаю многим было бы очень интересно почитать статью на эту тему от человека, прошедшего путь от 0 до ~6000 звезд на гитхабе :)olton Автор
27.11.2018 18:40Спасибо. Нет никаких донатов (на странице Support ксть ссылки, и можете убедиться, что фиктически проект живет без финансовой поддержки). Работать приходится много, но это мой любимый проект, и иногда это позволяет переступить через себя и работать сверх и в любом состоянии (как то пришлось при темп 39 фиксить найденные баги и выпускать релиз). А что до звезд, я очень рад, что кому то мой проект нравится и это дает дополнительные силы для работы.
Pavlov_dog
27.11.2018 19:08А, значит меня смутила кнопка Donate на скриншоте из статьи и BTC адрес :)
HerrDirektor
27.11.2018 19:08А вы прикрутите добровольный донат. Я уже как-то пользовался вашей библиотекой для небольшого проекта, и 5-10 баксов закинуть в копилку проекта меня бы не задавило.
Ronnie_Gardocki
27.11.2018 18:17Слайдеры анимируют свойство left в 2018, спасибо, до свидания.
olton Автор
27.11.2018 18:54Спасибо. Обязательно пересмотрю слайдер. Библиотека больша и уследить за всем сложно. Всегда есть что сделать, что бы стало лучше.
Renaissance
27.11.2018 18:31Когда-то давно делал проект, и использовал ту самую первую версию (0.95). Получилось в итоге неплохо, примите мои благодарности.
P.S. К Metro так и не привык в итоге.
dempfi
Недавно наткнулся на ваш проект и в целом он понравился. Один только вопрос крутился у меня в голове пока смотрел на компоненты — зачем стилизация компонентов сделана через
data-styleа не через классы?olton Автор
Наверное Вы имете ввиду стилизацию через атрибут data-cls-*? Многие компоненты имеют сложную структуру, при этом задаются одним элементом. Что бы применить в дальнейшем изменение к отдельной части компонента и используются специальные атрибуты data-cls-*, через которые Вы можене применить собственные классы к компоненту.
dempfi
Я имел в виду через обычный CSS
class(например для чекбоксов), но идею я понял — спасибо.olton Автор
С чекбоксами отдельная история. Первый вариант не очень понравился шефу, поэтому был добавлен второй вариант через атрибут data-style. Он есть только у чекбоксов и радио кнопок.