Введение в функциональный CSS (FCSS)
Гений автоматизации, если не вся дисциплина компьютерного программирования, - это итерация. По сути, это математический жаргон, обозначающий буквально обучение на ошибках. Кроме того, оказывается, что это один из встроенных в природе планов преемственности в форме адаптации.
Цикл - это еще один атрибут вычислений, который произвел революцию в культуре обучения как у людей, так и в последнее время в машинах. Итерации и циклы, таким образом, составляют самые основы любой учебной деятельности, а компьютерное программирование находится в их центре. Эти две процедуры лучше всего реализовать в виде инструкций или функций, выполняемых систематически. Поэтому само собой разумеется, что для успешного выполнения определенной функции система должна сначала получить четко переданные инструкции.
Постановка проблемы
Если бы вы когда-то писали код CSS, вы бы заметили, что этот процесс очень механический. Это означает, что это громоздко, раздражающе скучно и менее сложно, особенно если фронтенд-разработка не является вашей основной областью специализации. Когда вам приходится делать что-то снова и снова, вы начинаете замечать повторяющиеся закономерности и пытаетесь найти способы ускорить этот процесс. Исходящее описание также подтверждает высокую склонность к тому, что большинство рабочих мест было успешно автоматизировано за последние несколько десятилетий. Если собрать воедино два последних абзаца, в любой работе, которая не была полностью автоматизирована, не должно быть четких способов дать инструкции автоматизирующим агентам.
В то время как разработка программного обеспечения, казалось бы, выдержала испытание временем в том, что касается автоматизации, мы все чаще наблюдаем всплеск инструментов, библиотек и фреймворков, которые предназначены для ускорения медленных и рутинных процессов в разработке программного обеспечения. Они нацелены на то, чтобы дать разработчикам больше времени, чтобы сосредоточиться на реальной работе над инженерным программным обеспечением. Особый интерес представляют фреймворки CSS, такие как BULMA, Bootstrap, Materialise, Semantic и десятки других, включая те, что находятся в стадии разработки. Затем идут системы управления контентом (CMS) второго поколения, такие как WordPress, Google Sites, Wix, Expression Engine и более двух десятков других, предназначенных в основном для создания новых и обновления веб-сайтов. Фундаментальный вопрос: что питает весь этот рост таких систем? Кажется, мы знаем ответ (ы) - или нет? Конечно, люди отчаянно хотят упростить написание кода. Но почему такой наплыв инструментов, которые, кажется, решают одну и ту же проблему? Как разработчик такого продукта, спросите вы себя. Разве этот рынок уже не насыщен? - Ну, видимо, НЕТ.
Помните, что в любой работе, которая не была полностью автоматизирована, не должно быть четких способов дать инструкции автоматизирующим агентам.
Здесь есть более глубокое философское понимание. Общим знаменателем всех этих CSS-фреймворков и CMS является то, что люди всегда имеют в виду четкую картину того, чего они хотят достичь. Но можем ли мы сказать то же самое о компьютерах? Напротив, знают ли они, что им следует производить? Чтобы поместить это в контекст, перетаскивание виджета в CMS кажется хорошей идеей, пока вы не захотите немного подправить его - так создаются все эти инструменты. Бьюсь об заклад, их сторонники, после использования или прослушивания историй о неудачах их конкурентов, думают, да! Я понял это. Поэтому они начинают с написания помощников, плагинов и других плагинов. Наконец, они понимают, что у них есть «почти полная» структура или программное обеспечение CMS. Но как только они запускают свои продукты, их ошеломляют. В большинстве случаев они оставляют значительную часть незавершенной работы. Итак, что мы можем сделать, чтобы помочь в этой ситуации? Сначала нам нужно понять проблему (ы) следующим образом - относительно автоматизации:
- Успешное завершение задачи - настолько хорошо, насколько хороши данные инструкции
- Компьютеры принимают инструкции в виде функций. Каждое действие, которое вы выполняете на компьютере, каким бы простым оно ни казалось, от копирования и вставки до перетаскивания, управляется основными математическими функциями - l ingua franca взаимодействия человека с компьютером.
Итак, с CMS то, что вы видите, то и получаете. Но все мы знаем, что было бы лучше, если бы мы получили то, что хотели. С другой стороны, с фреймворками CSS это правда - мы получаем то, что желаем, но только если мы точно знаем, как описать то, что мы желаем. Очевидно, что это проблема как для непрограммистов, так и для опытных программистов. Для последней группы фреймворки CSS не являются объектно-ориентированными, и поэтому они не являются итеративными, поскольку вы не можете циклически перебирать атрибуты CSS элементов HTML. Для этого вам нужно преобразовать каждую структуру HTML-элемента, представленную в CSS framework, в функцию. К счастью, комбинация функционального CSS (FCSS) и языка гипертекстовых переменных сделает это за вас.
С CMS вы получаете то, что видите. С другой стороны, с помощью CSS-фреймворков мы получаем то, что хотим, но только если мы точно знаем, как описать то, что мы желаем.
Реализация вашего первого проекта FCSS и HTVL
В HTML обычно возникает ситуация, когда вам нужно запомнить структуру элемента вместе с его атрибутами. Некоторые из них действительно длинные, но давайте начнем с самого распространенного - элемента button (btn). Обычный способ создания выглядит следующим образом:
<button class="btn btn-primary " type="submit" id="" value="" style="">Delete</button>
Перевод указанного выше элемента в FCSS выполняется путем написания двух сценариев оболочки на данный момент. Создайте файл с именем «local.sh» и поместите в него следующий код.
#!/bin/bash
html="<html>"
lmth="</html>"
btn () {
echo "<button class=\"btn btn-$1\" type=\"$2\" id=\"\" style=\"\">$3</button>"
}
Что мы там сделали, так это объявили функцию «btn», которая принимает три атрибута HTML в качестве переменных: кнопку начальной загрузки, тип и метку. Импортируйте «local.sh» в качестве источника во второй файл с именем «index.sh», вставив следующий код.
#!/bin/bash source ./local.sh touch ./index.html indexFilePath="./index.html" html="<html>" $(btn danger submit Delete) lmth="</html>"
Приведенный выше код выполняет две функции: он приводит код в порядок и компилируется. Убедитесь, что у обоих файлов есть разрешения на выполнение, набрав следующее:
sudo chmod +x index.sh local.sh
При компиляции index.sh в том же каталоге создается файл index.html со следующим кодом:
<html> <button class="btn btn-danger " type="submit" id="" style="">Delete</button> </html>
Как тебе это? то же самое можно сделать практически для всех элементов HTML. Хотя на данный момент это может показаться несущественным, это действительно может быть полезно, особенно когда вы постоянно имеете дело с длинными HTML-кодами, которые должны иметь больше, чем просто несколько заполненных атрибутов. Взгляните, например, на элемент iframe.
Длина кода может быть устрашающе трудоемкой. С FCSS после создания хорошо продуманной библиотеки CDN - больше похоже на то, что было сделано для начальной загрузки, все, что вам нужно сделать, это включить ссылку на CDN где-нибудь в качестве внешнего источника в «index.sh». Затем вы будете использовать функцию обратного вызова следующим образом:
$(iframe someUrl giphy)
Вышеупомянутый код - это то, что я называю гипертекстовым переменным языком (HTVL), о котором я писал некоторое время назад. Интуитивно понятный способ автоматизации фронтенд-разработки. Компиляция приведенного выше кода HTVL - если хотите, приводит к следующей элегантной форме:
<iframe src="someUrl" width="480" height="222" frameBorder="0" class="giphy" allowFullScreen></iframe>
Превосходно! хотя я знаю, что в какой-то момент вы могли съежиться - это практично? и черт возьми, да. Последний видеоролик, который вы видите выше, - это приложение, которое я создал, используя FCSS, обсуждаемый здесь, для создания HTVL. Этот проект занял у меня около 10 минут - теперь размещен здесь, если вы хотите увидеть его в действии.
NB: Вам не нужно начинать разработку библиотеки самостоятельно, я проделал довольно много работы по сборке виджетов для большинства компонентов, доступных для начальной загрузки, и я поделился библиотеками в нашей компании репозиторий GitHub в виде устанавливаемого файла deb .
Вот и все, сила в вас - все самое лучшее в кодировании FCSS и HTVL для автоматизации интерфейсной разработки.
