Template generator что это

Какие CSS-генераторы можно использовать в 2021 году

CSS генераторы экономят время и сокращают количество ошибок в коде. Они позволяют автоматизировать многие задачи, которые опытным верстальщикам или фронтендерам уже кажутся скучными. В то же время, они могут облегчить работу над задачами, которые сложны для начинающих специалистов.

Схема работы таких генераторов проста: достаточно ввести через простой визуальный интерфейс нужные вам параметры и на выходе получить готовые CSS-стили. Далее полученный код нужно скопировать и добавить в свой проект.

Известный full-stack разработчик Марко Денич предлагает свою подборку лучших CSS-генераторов. Возможно, о каких-то из них вы не знали, и, познакомившись с ними сейчас, начнёте использовать в работе.

1. Neumorphism/Soft UI generator

Neumorphism позволяет создавать градиенты и тени. Кроме того, с ним легко подобрать и сгенерировать цвета для вашего сайта.

2. Smooth Shadow generator

Это генератор теней, позволяющий через удобный UI менять параметры свойства box-shadow. В CSS3 свойство box-shadow отвечает за эффекты тени, которые возможны для большинства элементов веб-страницы. Инструмент, в частности, позволяет настраивать такие параметры, как вертикальное смещение, размытие, растяжение и прозрачность.

3. Fancy Border Radius Generator

Генератор позволяет рисовать сложные фигуры с закруглёнными углами. На выходе мы получаем набор значений свойства border-radius.

4. Easing Gradients

Позволяет создавать нелинейные градиенты и использовать модифицированные цветовые пространства.

5. Data Viz Color Palette Generator

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

6. CSS Grid Generator

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

7. CSS Accordion Slider Generator

Бесплатный онлайн-сервис, позволяющий настроить через UI и сгенерировать горизонтальные и вертикальные аккордеон-слайдеры на HTML и CSS, без использования javaScript.

8. CSS clip-path maker

Простой онлайн-инструмент для обрезки картинок по заданному трафарету.

9. Get Waves

Генератор создает svg-вектор с заливкой волнообразной формы. Форму волны можно выбирать из трёх вариантов — синусоидальная, прямоугольная и пилообразная.

Также можно указывать размер волны и направление. В инструмент встроен рандомайзер, который выдаёт волны со случайными размерами, но с сохранением выбранной формы.

Согласны ли вы с выбором автора? Какие CSS-генераторы нравятся вам?

На правах рекламы

Эпичные серверы для размещения сайтов и не только! Быстрые VDS на базе новейших процессоров AMD EPYC и NVMe хранилища для размещения проектов любой сложности, от корпоративных сетей и игровых проектов до лендингов и VPN.

Источник

Выбираем генератор статических сайтов

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

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

Критерии сравнения

Генератором статических сайтов называется программный инструмент, превращающий текстовые записи (с разметкой или без) в статичные HTML-страницы. Все инструменты такого рода работают примерно одинаково: берется контент, склеивается с шаблоном, после чего отправляется на хостинг. Количество существующих генераторов статических сайтов исчисляется сотнями, если не тысячами.

Обзор генераторов

MiddleMan, Jekyll, Octopress

Все три из перечисленных генераторов написаны на Ruby и во многом схожи по набору функций. Именно поэтому мы решили объединить их в одну группу.

Процедура установки всех этих продуктов сопряжена с некоторыми трудностями: версии Ruby, включенной в официальные репозитории Linux-систем, скорее всего будет недостаточно — придется обновить ее до самой последней. Также потребуется установить менеджер пакетов RubyGems и менеджер версий Rbenv.

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

Поддерживается деплой с помощью FTP, SFTP, rsync, git (на официальном сайте выложены скрипты для автоматизации процедуры деплоя; еще одно расширение опубликовано на GitHub). Возможен также деплой на AWS и BitBalloon (имеются соответствующие плагины).

Jekyll (см. также статью на Хабре ) известен в первую очередь тем, что используется в качесте дефолтного движка для статических сайтов на основе GitHub Pages. Очень часто он используется для ведения блогов. Несомненным преимуществом Jekyll является поддержка разметки Liquid: это дает возможность создавать шаблоны, используя конструкции исключительно языка разметки, а не языка программирования.

Расширений и плагинов для Jekyll существует довольно много (см. информацию на официальном сайте, а также здесь и здесь). Официальные плагины «заточены» в основном на работу с GitHub Pages. Плагины, опубликованные на GitHub, в большинстве своем предназначены для расширения возможностей блоггинга (добавление облака тэгов, полнотекстовый поиск по блогу и даже специализированный плагин для научных и образовательных блогов).

Поддерживается деплой по FTP, а также с помощью rsync и git.

В отличие от двух предыдущих продуктов, Octopress является специализированным генератором: он по сути представляет собой надстройку над Jekyll c дополнительными плагинами и responsive-шаблоном, обеспечивающими более удобное ведение блогов.

В качестве формата разметки постов по умолчанию используется Markdown, но можно использовать и обычный HTML. Несомненным плюсом Octopress является поддержка переезда с других площадок: например, все записи из блога на WordPress можно перенести в новый статический блог при помощи специального скрипта (правда, велика вероятность того, что после переноса оформление некоторых текстов может «поломаться», и их потребуется править вручную). «Из коробки» поддерживается и работа с сервисом Disqus, что упрощает перенос комментариев. Блог на основе Octopress можно интегрировать с социальными сетями (Facebook, Twitter, Google Plus и другими).

Существуют плагины, реализующие, например, вставку календарей (похожих на те, что иногда встречаются в блогах на WordPress), списка похожих постов, облака тэгов и так далее.

По умолчанию поддерживается деплой с помощью git (на GitHub Pages или Heroku) или rsync (на любой хостинг, где можно настроить SFTP или можно запустить rsync). Можно настроить и деплой по FTP (о том, как это сделать, можно прочитать, например, здесь).

Этот генератор статических сайтов изначально замышлялся как полный аналог Jekyll, только написанный на Python — отсюда и название, отсылающее к знаменитой повести Р.Л. Стивенсона «Странная история доктора Джекилла и мистера Хайда».

Следует различать старую и новую версию Hyde. Старая версия основана на Django templates; в настоящее время ее разработка приостановлена (последние коммиты в репозитории на GitHub датируются 2009 — 2010 годом). Новый Hyde (см. также репозиторий на GitHub) в настоящее время находится в активной разработке.

По функциональности новый Hyde не отличается от MiddleMan и Jekyll. Мы немного потестировали его, и он произвел на нас вполне приятное впечатление. Из обнаруженных недостатков выделим только один: проект, как уже сказано выше, находится в стадии активной разработки. Именно поэтому документация к нему представлена пока что в очень сжатом и лаконичном виде, а плагинов и расширений существуют очень мало (вот их небольшой список на официальном сайте).
Поддерживается деплой на GitHub Pages и Amazon S3.

Будем надеяться, что в будущем этот инструмент получит дальнейшее развитие и станет более удобным в работе.

Pelican

Pelican также написан на Python. По сравнению со многими генераторами статических сайтов он обладает исключительно широким набором функций: работа с черновиками, интеграция с социальными сетями, добавление изображений, конвертация HTML-страниц в PDF, поддержка многоязычности и многое другое. Он очень хорошо подходит для ведения блогов (существует плагин для переноса блогов на WordPress).

Посты можно писать в Markdown, а также в форматах reStructuredText и Asciidoc.

Устанавливается Pelican через pip. При установке пользователю будут заданы несколько вопросов: где хранить файлы сайта, как будет называться сайт, куда и каким способом его нужно деплоить. Поддерживается множество способов деплоя: по FTP, по SSH, на Amazon S3, GitHub Pages, Dropbox и RackSpace Cloud Files.

Grow (см. также официальный репозиторий на GitHub) — очень интересный и перспективный инструмент, обнаруженный нами совсем недавно. Он написан на Python. Чтобы установить Grow, достаточно скачать скрипт с официального сайта — все необходимые пакеты будут установлены в автоматическом режиме.

В основе Grow лежит подход «конфигурация, а не код». Что это значит? Чтобы создать новый проект (в терминологии Grow проекты называются подами — pods), нужно клонировать на локальную машину тему, которая представляет собой репозиторий на GitHub. Тема включает набор конфигурационных файлов, с помощью которых описывается вся архитектура веб-сайта. Никакого программного кода при этом писать не нужно.

Все настройки проекта хранятся в конфигурационном файле podspec.yaml. В нем указываются следующие параметры:

Grow может автоматически переводить текстовые фрагменты — для этого используется библиотека Goslate library, работающая с Google Translate. Чтобы перевести сайт, достаточно просто выполнить команду translate.

В качестве площадки для деплоя можно указать любой веб-сервер. Поддерживается деплой на Dropbox, Google Cloud Storage, Amazon S3, Dropbox, Google AppEngine.

Конечно, в рамках беглого обзора рассказать обо всех особенностях работы с Grow вряд ли возможно. Рекомендуем попробовать — инструмент очень перспективный.

Nanoblogger

Этот генератор статических сайтов, ориентированный на создание блогов, примечателен тем, что написан на bash. В качестве основных инструментов для создания статичных HTML-страниц он использует утилиты командной строки cat, grep и sed.

При всей своей простоте Nanoblogger по возможностям не уступаем многим генераторам, написанным на Python или Ruby. Из его полезных функций можно выделить поддержку Atom/RSS, возможность создания на сайте календаря, сортировку постов по категориям, создание архива постов и другие.

Устанавливается Nanoblogger предельно просто: он включен в официальный репозитории большинства популярных дистрибутивов Linux и устанавливается при помощи стандартного менеджера пакетов.

С Nanoblogger удобно работать из командной строки. Все команды подробно описаны в документации, их синтаксис прост и понятен.

Исходный код также написан предельно просто, в случае необходимости его всегда можно модифицировать и «подогнать» под нужды конкретного проекта (см., например, публикацию, в которой автор делится собственным опытом конфигурирования блога на основе Nanoblogger).

Для nanoblogger существуют плагины и расширения. Официальный набор плагинов (nanoblogger extras) также включен в официальные репозитории и устаналивается стандартным способом.

К сожалению, в 2013 году работа по развитию и усовершенствованию Nanoblogger была приостановлена на неопределенный срок (см. информацию на официальном сайте).

DocPad

DocPad написан на CoffeeScript. Для работы с ним на клиентской машине должен быть установлен NodeJS.

Многими он используется для блогов, но реальные возможности его применения гораздо шире. Этот продукт не представляет собой генератор статических сайтов в чистом виде: его можно использовать и как генератор, и как движок, и как шаблонизатор. DocPad оснащен достаточно удобным API, который позволяет использовать только те функции, которые нужны в данный момент; остальные всегда можно реализовать самостоятельно.

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

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

На официальном сайте опубликованы скрипты, автоматизирующие деплой на различные площадки: Heroku, Appfog, Windows Azure, Docker, GitHub Pages и другие. Имеется и специализированный скрипт для деплоя в облачные хранилища — Amazon S3 и GoogleStorage.

Заключение

Результаты проделанного обзора можно резюмировать в виде следующей таблицы:

Все перечисленные генераторы интересны и уникальны, однако самым интересным проектом на сегодняшний день нам показался Grow SDK.

Для желающих углубиться в тему пара полезных ссылок:

Какой опыт использования генераторов статических сайтов есть у вас, Хабраюзеры?

Если вы не можете оставлять комментарии здесь — добро пожаловать в наш блог.

Источник

Text Template Transformation Toolkit (T4), часть 2: генераторы шаблонов

Параметризируемые шаблоны

Начальная стадия

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

template language= “ C#v3.5 ” #>
output extension= “ SQL ” #>
assembly name= “ Microsoft.SqlServer.ConnectionInfo ” #>
assembly name= “ Microsoft.SqlServer.Smo ” #>
import namespace= “ Microsoft.SqlServer.Management.Smo ” #> Server server = new Server();
Database database = new Database(server, “Northwind”);
Table table = new Table(database, “Products”);
table.Refresh();
#>
create procedure table.Name #> _Delete
PushIndent(”\t”);
foreach (Column column in table.Columns)
if (column.InPrimaryKey)
WriteLine(”@” + column.Name + ” ” + column.DataType.Name);
PopIndent();
#>
as
delete from table.Name #>
where
PushIndent(”\t \ t”);
foreach (Column column in table.Columns)
if (column.InPrimaryKey)
WriteLine(column.Name + ” = @” + column.Name);
PopIndent();
#>

Здесь, чтобы получить информацию о полях таблицы из БД локального SQL-сервера, используется SQL Server Management Objects (SMO). После сохранения файла на выходе получим искомый запрос. Например, он может выглядеть так:

create procedure Products_Delete
@ProductID int
as
delete from Products
where ProductID = @ProductID

Параметризация

Первый же вопрос, который должен возникнуть в голове у человека, взглянувшего на этот код: почему названия БД и таблицы жёстко забиты в код? Получается, для создания каждого нового запроса программисту придётся залезать в шаблон и менять его вручную в нескольких местах?
На самом деле не обязательно. Достаточно воспользоваться другим способом генерации. Добавляем в проект новый файл, воспользовавшись теперь вариантом Template вместо File из T4 Toolbox, назовём его, к примеру, DeleteProcedureTemplate.tt. Как видно, среда автоматически создала заготовку параметризированного шаблона, то есть файла, который мы потом будем включать в другие шаблоны с целью использовать его в обобщённом виде.

public class DeleteProcedureTemplate : Template
<
protected override void RenderCore()
<

Не пытайтесь найти в пространстве имён Microsoft.VisualStudio.TextTemplating класс Template: его там нет. Это абстрактный класс, определённый в T4Toolbox, а файл T4Toolbox.tt непосредственно в самих параметризированных шаблонах подключать нет смысла. Поэтому при каждом сохранении DeleteProcedureTemplate.tt Студия попытается обработать его, сгенерировать выходной файл, потерпит крах и уведомит вас об этом ошибкой. Это неприятное поведение можно легко убрать, заглянув в окно Properties для нашего редактируемого файла и установив там свойство Custom Tool в пустую строку. Теперь попытки неявной генерации не происходит.
Метод RenderCore() класса Template — основная точка работы параметризированного шаблона. Именно в нём происходит генерация той части текста, за которую и будет в конечном счёте отвечать наш шаблон в генераторе. Поэтому, не мудрствуя лукаво, просто перенесём в него уже готовый код.

assembly name= “ Microsoft.SqlServer.ConnectionInfo ” #>
assembly name= “ Microsoft.SqlServer.Smo ” #>
import namespace= “ Microsoft.SqlServer.Management.Smo ” #>
public class DeleteProcedureTemplate : Template
<
public string DatabaseName;
public string TableName;

protected override void RenderCore()
<
Server server = new Server();
Database database = new Database(server, DatabaseName);
Table table = new Table(database, TableName);
table.Refresh();
#>
create procedure table.Name #> _Delete
PushIndent(”\t”);
foreach (Column column in table.Columns)
<
if (column.InPrimaryKey)
WriteLine(”@” + column.Name + ” ” + column.DataType.Name);
>
PopIndent();
#>
as
delete from table.Name #>
where
PushIndent(”\t \ t”);
foreach (Column column in table.Columns)
<
if (column.InPrimaryKey)
WriteLine(column.Name + ” = @” + column.Name);
>
PopIndent();
>
>
#>

Главное изменение, которому подвергся шаблон — это добавление в него открытых полей DatabaseName и TableName, которые, собственно, и выполняют функцию параметризации. Теперь файлы данных и логики разделены. Единственное, что осталось — воспользоваться директивой include и запускать попеременно один и тот же шаблон на разных БД и таблицах, как здесь:

template language =” C#v3.5 ” hostspecific =” True ” #>
output extension =” sql ” #>
include file =” T4Toolbox.tt ” #>
include file =” DeleteProcedureTemplate.tt ” #>
new DeleteProcedureTemplate();
template.DatabaseName = “Northwind” ;
template.TableName = “Products” ;
template.Render();
#>

При желании подобным же методом можно создать универсальный шаблон, создающий в зависимости от параметров хранимую процедуру на основе SELECT, INSERT и UPDATE, а не только DELETE. Код шаблона каждый может теперь составить самостоятельно.

Небольшое отступление в сторону. На первый взгляд весь описанный материал кажется элементарным. Да собственно, он таким и является, как и весь T4 сам по себе. Вопрос в другом: эти возможности включены в стандартную поставку, и подобной простой статьёй-компиляцией я хочу уберечь читателей (а читатели у Хабра разной степени опытности) от опасности нагородить собственных велосипедов. Описанные ниже генераторы шаблонов — ещё один из подобных подводных камней.

Генераторы шаблонов

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

Добавим в проект третий полезный тип шаблона, разработанный в рамках T4Toolbox — Generator. Генератор будет использовать наш параметризированный шаблон для того чтобы подставлять в него разные значения параметров (имён БД и таблицы) и направлять результат обработки в разные файлы. С последней целью в классе Template предусмотрен замечательный метод RenderToFile.

Итак, пусть файл генератора называется CrudProcedureGenerator.tt и дефолтная заготовка для него, как вы воочию можете убедиться, выглядит следующим образом:

public class CrudProcedureGenerator : Generator
<
protected override void RunCore()
<

Генератор сам не проводит никакой обработки текста T4, он лишь запускает по очереди другие, уже написанные базовые шаблоны. Поэтому его соответствующие основные методы вместо Render и RenderCore называются Run и RunCore соответственно. Подстроим же их для себя:

assembly name =” Microsoft.SqlServer.ConnectionInfo ” #>
assembly name =” Microsoft.SqlServer.Smo ” #>
import namespace =” Microsoft.SqlServer.Management.Smo ” #>
include file =” DeleteProcedureTemplate.tt ” #>
public class CrudProcedureGenerator : Generator
<
public string DatabaseName;
public DeleteProcedureTemplate DeleteTemplate = new DeleteProcedureTemplate();

Здесь перебираются все таблицы в одной заданной БД и для каждой экземпляр класса DeleteProcedureTemplate создаёт отдельный уникальный выходной файл с запросом. Для полного счастья не хватает лишь задать БД и запустить полный цикл обработки:

Источник