numl org что это
Правила использования
Пользователи сайта NUML.ORG (в дальнейшем Сайт) размещают ссылки без какой-либо регистрации и авторизации;
Сайт не сохраняет какую-либо информацию о пользователях, использующих данный сервис, но оставляет за собой право сохранения IP-адреса, с которого была создана сокращенная (виртуальная) ссылка;
Пользователи, использующие данный сервис, несут полную ответственность за содержание ссылок, которые они публикуют;
Администрация Сайта имеет право удалять любые ссылки по своему усмотрению без объяснения причин;
Сайт (и/или владелец Сайта) не несет никакую ответственность за содержимое страниц, опубликованных на настоящем сайте;
Данный Сайт предоставляется к использованию в том виде «как есть»;
Сайт (и/или владелец Сайта) не несет ответственность за возможный причиненный моральный или материальный вред, или упущенную выгоду за некорректную работу настоящего Сайта;
Вы понимаете и принимаете, что за всю информацию, данные, текст, программы, музыку, звуки, фотографии, графику, видео, сообщения и другие материалы (в дальнейшем «контент»), размещенные для общего доступа или переданные в частном порядке, ответственно то лицо, которое этот контент произвело. Это означает, что Вы, а не Сайт и/или владелец Сайта, полностью отвечаете за весь контент, который Вы загружаете, посылаете, передаете или каким-либо другим способом делаете доступным с помощью настоящего Сайта. Сайт и/или владелец Сайта не контролирует контент, передаваемый через его службы, и, следовательно, не гарантирует точность, полноту или качество этого контента. Вы понимаете, что, используя службы нашего сайта, Вы можете увидеть контент, который является оскорбительным, недостойным или спорным. Ни при каких обстоятельствах Сайт и/или владелец настоящего Сайта не несет ответственности за ссылки созданные пользователями.
Сайт не выполняет никаких рассылок электронных писем (e-mail’ов), а также Сайт и/или владелец настоящего Сайта не несет никакой ответственности за ссылки, размещенные в теле электронных писем («контенте»).
Вы соглашаетесь не использовать службы настоящего Сайта для:
— загрузки, передачи или любого другого способа размещения контента, который является незаконным, вредоносным, угрожающим, клеветническим, оскорбляет нравственность, нарушает авторские права, пропагандирует ненависть и/или дискриминацию людей по расовому, этническому, половому, религиозному, социальному признакам, содержит оскорбления в адрес конкретных лиц или организаций;
— нарушения прав несовершеннолетних лиц и/или причинение им вреда в любой форме;
— ущемления прав всех видов меньшинств;
— представления себя за другого человека или представителя организации и/или сообщества без достаточных на то прав, за модераторов форумов, за владельца сайта, а также введения в заблуждение относительно свойств и характеристик каких-либо субъектов или объектов;
— загрузки, передачи или любого другого способа размещения контента, который затрагивает какой-либо патент, торговую марку, коммерческую тайну, копирайт или прочие права собственности и/или авторские и смежные с ним права третьей стороны;
— загрузки, передачи или любого другого способа размещения каких-либо материалов, содержащих вирусы или другие компьютерные коды, файлы или программы, предназначенные для нарушения, уничтожения либо ограничения функциональности любого компьютерного или телекоммуникационного (компьютерного сетевого) оборудования или программ, для осуществления несанкционированного доступа, а также серийные номера к коммерческим программным продуктам и программы для их генерации, логины, пароли и прочие средства для получения несанкционированного доступа к платным ресурсам в интернете, а также размещения ссылок на вышеуказанную информацию;
— умышленного нарушения местного, Украинского законодательства или норм международного права;
— сбора и хранения персональных данных других лиц;
— нарушения нормальной и/или стабильной работы настоящего Сайта;
— применения любых форм и способов незаконного представительства других лиц в интернете;
— размещения ссылок на ресурсы (сайты), содержание которых противоречит действующему законодательству Украины;
— содействия действиям, направленным на нарушение ограничений и запретов, налагаемых данным Соглашением.
— Вы признаете, что администрация и/или владелец настоящего Сайта не обязан просматривать контент любого вида перед размещением, а также то, что администрация и/или владелец имеет право (но не обязанность) по своему усмотрению отказать в размещении или удалить любой контент, который доступен через настоящий Сайт. Вы согласны с тем, что Вы должны самостоятельно оценивать все риски, связанные с использованием контента, включая оценку надежности, полноты или полезности этого контента.
Используя данный Сайт, Вы выражаете свое согласие с «Отказом от ответственности» и установленными Правилами и принимаете всю ответственность, которая может быть на Вас возложена.
Администрация Сайта в любое время вправе внести изменения в Правила, которые вступают в силу немедленно. Продолжение пользования Сайтом после внесения изменений означает Ваше автоматическое согласие на соблюдение новых правил.
Numl – Альтернативный язык разметки и стилизации для веб
Всем привет! Меня зовут Андрей, я профессионально разрабатываю веб-интерфейсы уже больше 11 лет и последний год развиваю проект Numl, который можно назвать языком разметки и стилизации для веб. В этой статье я расскажу, как в попытке перебороть ряд особенностей CSS и упростить вёрстку веб-проектов получился целый язык, который не только удовлетворил все наши потребности в стилизации, но также позволил уменьшить кол-во JS-кода и улучшить доступность.
Для начала, коротко про Numl и чем он может быть интересен разработчикам.
Numl это язык разметки, который объединяет в себе функции CSS-фреймворка, JS-фреймворка без композиции и Дизайн-системы, и предоставляет набор готовых элементов, каждый из которых имеет обширный набор свойств для кастомизации. Язык основывается на нативном браузерном API Custom Elements из спецификации Web Components, и совместим с популярными JS-фреймворками, такими как Vue, Svelte, Angular и React. Отличительной (и я бы даже сказал «уникальной») чертой Numl является то, что все стили для интерфейса он генерирует в runtime, что позволяет выжать максимум из CSS и добиться огромной гибкости в стилизации и кастомизации элементов. Эта статья — ответ на вопрос, как так получилось и почему такой подход заслуживает право на жизнь.
На прошлой неделе, 4-го июля, проекту исполнился ровно год и он уже давно прошёл стадию proof of concept. На нём написан крупный проект Sellerscale и браузерное расширение от Sellerscale. Также с помощью Numl создано еще несколько сайтов, включая собственный лэндинг и Storybook. Полный набор ссылок будет в конце.
Дашборд Sellerscale. Стэк: VueJS, Numl
Расширение Sellerscale. Стэк: Svelte, Numl
Numl сам по себе может быть интересен всем, кто знаком с основами HTML/CSS и хочет создавать качественные, доступные и красивые веб-интерфейсы, без глубокого погружения в тонкости CSS и ARIA. Однако данная статья выходит за рамки базовых знаний и больше подойдёт для людей, которые разбираются в различных CSS методологиях, много верстают, пишут свои инструменты для стилизации или же интересуются необычными инструментами из мира фронтенд-разработки. Используете Utility-First CSS? Тогда вам определённо стоит дочитать до конца.
Для тех, кому просто хочется узнать про Numl, я предлагаю посетить сайт numl.design, полистать Storybook с кучей примеров, почитать статью про базовый синтаксис в гайде и попробовать Numl прямо в браузере с помощью REPL.
В поисках идеальной методологии вёрстки
Программировать я начал примерно 22 года назад, и уже тогда, используя Turbo Pascal, создавал различные оконные интерфейсы с кнопочками, окнами, инпутами и прочим. Двумя годами позднее, изучив веб-платформу я принялся за разработку сайтов и с тех пор моё хобби стало плавно превращаться в профессию. Многие веб-разработчики овладев HTML/CSS, погружаются в JS-экосистему и постепенно перестают верстать. Но мне всегда хотелось создавать качественные интерфейсы, а это невозможно без вёрстки как активного навыка. Поэтому, если было время, я старался верстать проекты самостоятельно, применять новые методологии, новые CSS-свойства, новые хаки.
В основном я использовал методологию, очень похожую на БЭМ, только без Modifier Value (впрочем почти все его так и используют). Это не было идеальным, но позволяло верстать качественно и с относительно большой скоростью, так как стили имели чёткую структуру. Можно было располагать куски кода в нужном месте, не сильно задумываясь.
Спустя много лет, пришло понимание, что независимо от методологии, у CSS есть ряд особенностей, которые очень сложно упростить или скрыть за абстракцию. Далее я попробую их перечислить. Хочу сразу отметить, что я питаю огромное уважение к разработчикам веб-стандартов, ценю их огромный труд, и не пытаюсь его обесценить. Веб-стандарты в первую очередь дают нам больше возможностей для решения наших задач, но это не означает, что эти стандарты обязаны быть идеальными для каждого отдельно взятого разработчика, проекта, компании или отдельной задачи. Поэтому это не список «проблем CSS», а список его особенностей в контексте создания больших и сложных интерфейсов:
Причём создание обёрток посредством препроцессоров может даже усложнять ситуацию, добавляя в и без того сложную абстракцию дополнительное измерение. А бывает и так, что попытка что-то упростить начинает сильно нас ограничивать. Например, фиксированные breakpoints для адаптивности почти в каждом первом CSS-фреймворке.
Я считаю, что в хорошем инструменте простые задачи должны решаться просто, а сложные — пропорционально сложнее. И CSS прекрасно вписывается в эту концепцию, пока мы создаём относительно простые сайты с небольшим кол-вом требований, но по мере усложнения задач и объёмов проектов, поддержка CSS становится несоизмеримо более затратной.
Всё это привело меня к идее, что нужно искать новые подходы к стилизации.
Начнём с малого.
Разумеется, я не надеялся побороть все описанные выше особенности CSS, но мне хотелось разобраться хотя бы с некоторыми из них. Начиная один новый крупный проект, я решил поставить эксперимент и не использовать CSS вне компонентов. Это позволило бы минимизировать технический долг в будущем и мне было интересно посмотреть куда меня это приведёт, ведь подобный подход не сильно популярен, а значит в этом направлении возможно мало копали.
Всё это работало на обычных inline-стилях. На данном этапе проекта, адаптивность под мобильные не требовалась и я решил, что такой подход имеет место быть, учитывая, что он позволял нам очень быстро итерироваться по различным версиям дизайна, не жертвуя качеством и не создавая технический долг.
После трех месяцев оказалось, что данный подход не только улучшает качество кодовой базы и ускоряет разработку, но и улучшает DX (Developer Experience). Больше не требовалось переключение между контекстами разметка/стили для вёрстки страниц и составных компонентов.
Кол-во свойств БЭ росло, всё больше помогая быстро решать локальные задачи вёрстки. Но появились и первые проблемы.
Всю сложную кастомизацию элементов приходилось уносить в свойства и некоторые компоненты сильно от этого пухли. Качество кода самих компонентов существенно снижалось. Чем больше элементов имел внутри себя компонент, тем больше проблем вызывала его кастомизация. Чтобы это исправить, я решил по максимуму отказаться от компонентов в пользу обычных элементов. Вот типичный элемент изнутри:
Ура, первый кусочек кода!
Т.е. никакой композиции других элементов внутри нет. Композицией мы занимаемся на верхнем уровне. Пример для наглядности:
Справка: NUDE – это название JS-фреймворка, на котором основан Numl и который был специально для него написан.
Дальше генератор берёт результат и создаёт на его основе CSS:
Ожидаемого ускорения сайта это не принесло (всё и до этого работало мгновенно), но и медленнее не стало, а мы получили отличный механизм, который позволил пользоваться всеми благами CSS.
Может показаться, что это очень ресурсоёмко, но такой атомарный подход позволяет существенно сэкономить на кол-ве самого CSS (спросите адептов Atomic CSS), а некоторые адепты CSS-in-JS могут с удовольствием вам рассказать, что динамическая генерация CSS не такой уж сильный оверхед.
Добавляем новые возможности
Получив в свой арсенал полноценный CSS, я стал добавлять всё новые и новые свойства, по возможности упрощая их синтаксис.
Например, Numl обзавёлся дефолтными значениями для свойств. Это оказалось довольно удобно, ведь за простым может скрываться достаточно выразительная вещь вроде:
, где мы выставляем бордер с толщиной и цветом по умолчанию.
То же свойств можно использовать для позиционирования внутри grid/flex-раскладки, для float-позиционирования, fixed и sticky. В CSS эти свойства всё равно взаимоисключающие.
Иные свойства наоборот разделились. Например, transform стало возможно использовать оперируя разными свойствами:
Также, для удобства я добавил кастомные юниты в синтаксис, что позволило упростить написание стилей:
Где x — базовый gap.
Кстати о gap’ах. Мне очень нехватало его для Flexbox, и я решил его добавить:
Подробнее можно посмотреть в Storybook.
Идей было очень много. Возможность создавать сложные стили и прятать их за простой API манила и было уже очень сложно остановиться. В какой-то момент возможности стилей Numl стали настолько продвинутыми, что стилизация всех элементов была на них переписана. Однако, стилями возможности Numl не ограничились.
Где же классы?
То, что у меня получилось, вполне можно назвать атомарным подходом. Однако, у такого подхода есть один большой недостаток — отсутствие возможности стилизовать несколько элементов единой декларацией. В CSS мы делаем это с помощью классов и это кажется настолько естественным и привычным, что отказ от классов может показаться безумием. Однако, после 4 месяцев работы с подобным подходом, оказалось, что классы слегка переоценены, ведь за редким исключением, я не получил никакого дискомфорта от атомарного подхода. В композиционных фреймворках есть два отличных решения для такой задачи: циклы и выделение в компонент.
И всё же иногда цикл не применим, а создание отдельного компонента кажется излишним усложнением. Например, в лэндингах, где много уникальных элементов с общими характеристиками, вроде отступов и размеров. В этом случае атомарный подход показывает себя не лучшим образом.
Данный механизм получился в каком-то плане даже лучше, чем классы, ведь наложение классов может приводить к коллизии стилей, а здесь она исключена. Разница становится еще более очевидной, когда мы начинаем привязывать стили к состояниям (об этом чуть ниже).
Узнать больше про и посмотреть примеры можно вот тут.
Добавляем красок с помощью тем
Я достаточно давно мечтал реализовать механизм для раскрашивания сайтов. Идея была в том, чтобы на основании минимального кол-ва информации генерить полноценные темы, с тёмным вариантом, чтобы пользователям было комфортно пользоваться интерфейсом по вечерам и при слабом освещении. Идеально было бы передавать некий оттенок (число от 0 до 359 в HSL) и получать набор Custom Properties для раскрашивания всего сайта, в котором цвета уже имеют необходимую насыщенность и контрастность.
Также хотелось решить задачу сочетания цветов. Когда у нас несколько цветных элементов (например, цветные заголовки страниц или список тегов), то хочется, чтобы их яркость и насыщенность была выровнена для лучшей визуальной гармонии.
Модуль юнит-экономики. Sellerscale
Звучит интересно, но по факту это несёт в себе уйму технических и дизайнерских вызовов:
Эта фича заняла у меня три с лишним месяца, было сделано шесть крупных итераций. В конечном итоге получилась очень удобная система, в которую удалось добавить даже Режим высокой контрастности. Как это работает в простом виде можно посмотреть на моей домашней страничке: tenphi.me (кнопочки настройки темы наверху) или в меню настроек в Storybook. Также есть интерактивная демка с градиентами на CodePen написанная чисто на Numl.
Раздел с демонстрацией механизма тем на лэндинге numl.design
То же самое в тёмном варианте
Окно настроек темы в Storybook
Моя домашняя страничка. Демонстрация цветовых возможностей Numl. tenphi.me
Благодаря темизации Numl превратился в довольно продвинутую Дизайн-систему, которую легко кастомизировать под себя.
Я планирую написать отдельную большую статью про алгоритм темизации, и поделиться решением, которым можно было бы использовать отдельно от Numl. А сейчас возвращаемся к нашим элементам.
Адаптивность (или отзывчивость)
Следующим вызовом было добавление мобильной версии для нашего сайта. К счастью, к тому моменту у меня в голове уже была готовая спецификация для этого. Выглядело (и выглядит до сих пор) это примерно так: мы не используем глобальные breakpoint’ы, вместо этого мы их объявляем в контексте конкретного элемента, разделяя символом | (вертикальная черта), причем кол-во точек не ограничено. Это позволяет нам менять breakpoint’ы на любом уровне, а его дочерние элементы эти точки наследуют:
Две точки адаптивности создают три зоны значений для каждого свойства (также, как две точки на отрезке делят его на три части). Теперь нужно эти значения как-то различать в свойствах. К счастью, для этого есть всё тот же символ | :
Так мы определили значение для каждой зоны. Если значение при переходе точки не меняется, просто пропускаем его. Чуть подробнее можно почитать тут.
После создания данной системы, добавление адаптивности для нашего проекта заняло всего один день. Результат поистине впечатляющий, если учесть, что мобильная версия изначально не закладывалась в дизайн и над некоторыми элементами пришлось попотеть.
Скриншоты мобильной версии Sellerscale
Привязываем стили к состояниям
Разумеется, чтобы система была достаточно гибкой, в ней должна присутствовать возможность привязывать стили к различным состояниям объекта. Также, как мы знаем, состояния могут быть и кастомными (вспомните модификаторы из БЭМ), поэтому всё должно быть максимально гибко.
Я остановился на следующем синтаксисе:
Тут мы говорим, что у элемента нет тени в базовом состоянии, но она появляется, когда мы наводим курсор.
Можно привязать стиль и к родителю, например:
Есть и другие чуть более сложные варианты синтаксиса. Прелесть здесь в том, что внутренний алгоритм создаёт взаимоисключающие селекторы для каждого стиля:
Не так впечатляюще выглядит при двух значениях. А что если их три или четыре? Numl найдёт селектор для любой их комбинации и вставит значение. Если значение не описано, то он выставит для него базовое значение (в примере выше это text ). Этот алгоритм позволяет использовать различные значения CSS свойств для одного стиля, не боясь, что они перемешаются! Ну и браузер, уверен, будет благодарен, что ему не нужно разбираться с коллизией стилей.
Промежуточный итог
Добравшись до этой точки, я заметил, что все перечисленные вначале особенности CSS больше не являются проблемой для моего приложения:
Звучит невероятно, но я дважды проверял, всё действительно так. 🙂
Однако, если уж мы решили создать свой собственный полноценный язык разметки, то нам рано останавливаться. Тут никак не обойтись без еще двух очень важных составляющих: Поведения и инструменты доступности.
Поведения. Оживляем элементы
Мы абстрагировали сложные стили за простой абстракцией, но что если сделать то же самое для базовых поведений? Например, в HTML, когда мы вставляем обычную кнопку она уже из коробки умеет нажиматься и держать фокус.
Чтобы сделать аналогичный механизм в Numl, ничего придумывать не пришлось. Есть достаточно широко применяемые директивы во фреймворках. В Numl была реализована их альтернатива под названием Behaviors. Работает это просто. Берём нужное поведение и инжектируем его с помощью атрибута, добавляя префикс nx- к его названию.
Разумеется, для элемента nu-btn это поведение будет добавлено по умолчанию вместе базовыми стилями. Всего в Numl таких поведений больше 35-ти. Все они загружаются асинхронно по мере необходимости. Есть крохотные поведения, а есть очень комплексные, например поведение для валидации форм, подсветка синтаксиса и даже конвертор из Markdown в Numl!
Numl Storybook: пример конвертации Markdown->Numl
Инструменты доступности
Существует много статей и докладов про необходимость доступности в современном вебе. Однако, не так много инструментов, которые бы упрощали создание доступных интерфейсов, а не просто сыпали ворнингами. (хотя безусловно это тоже очень полезно и важно!)
И если создание доступных компонентов само по себе не является чем-то крайне сложным, то создание фронтенд-архитектуры заточенной под доступные интерфейсы с целью масштабирования может вызвать затруднения даже у самых опытных разработчиков.
Поэтому разработка Numl почти с самого начала велась с оглядкой на спецификацию ARIA, чтобы максимально ей соответствовать и упрощать разработчику её использование.
Numl имеет собственный механизм идентификаторов. Выставляя ID на элементе, вы задаёте ему базовое значение идентификатора. Если оно не уникально, то оно заменится на уникальное с добавлением индекса. Однако, если вам потребуется сослаться на элемент по ID, вы можете использовать базовый ID, просто Numl найдёт ближайший элемент с таким базовым ID. Скорее всего, это именно то, что вы ожидаете.
В отличие от обычного HTML, мы можем размножить данный кусок кода, не ломая доступность.
В Numl большинство aria-атрибутов не используются напрямую. Чтобы, например, добавить описание для элемента, надо использовать сокращённую форму такого атрибута (без aria- ), как в примере выше.
Сокращенные атрибуты удобны и в других ситуациях:
Опережу ваш вопрос. Нет, такой подход практически не вызывает коллизий.
Помимо этого, Numl по умолчанию старается соответствовать ARIA спецификации, там где это возможно сделать без явного действия со стороны разработчика.
Итоги
Numl имеет огромное кол-во возможностей. Очень много задач, которые требовали от нас использования хитрых CSS или JS хаков теперь решаются «закулисно», мы можем о них даже не задумываться. Однако, такой подход имеет и особенности, которые могут устроить не всех:
С другой стороны, Numl имеет очень сильные стороны, которые могут заинтересовать как начинающих разработчиков, так и опытных гуру:
Хороший инструмент должен уважать ваше время и Numl действительно в этом преуспевает, абстрагируя от вас сложные технические решения. Это даёт вам больше времени, чтобы сфокусироваться на продукте, а не воевать с тултипами.
Заключение
Проект находится в статусе PRE-BETA (v0.11). Это означает, что бОльшая часть синтаксиса стабилизирована, однако отдельные вещи всё еще находятся в статусе experimental и могут не попасть в релиз v1 (например, валидация форм). Релиз намечен на осень 2020.
Если вы заинтересовались проектом Numl, то мы будем очень рады любой поддержке, будь то звёздочка на гитхабе, пост в соцсетях или визит в наш уютный чатик в телеграме, где можно задать любой вопрос про проект. Только помощь сообщества (а может именно ваша!) может помочь вырасти этому проекту и составить конкуренцию другим популярным подходам.
Спасибо за внимание! Буду рад ответить на вопросы. Еще раз все ссылки в одном месте:
Небольшой интерактивчик для тех, кто дочитал до конца
В комментарии опишите небольшую задачу для вёрстки и я пришлю вам ссылку на REPL, где она будет решена с помощью Numl.
Вот несколько примеров, которые работают с помощью возможностей языка, доступных из коробки, без использования дополнительного JS или CSS: