Shower Presentation Engine

Yours Truly, Famous Inc.

Олег Наянов

HTML.Next

Главная особенность HTML.Next?

Кастомные теги

			<profile>
				<profile-photo>
					<img src="/ava.jpg">
				</profile-photo>
				<profile-contacts>
					<profile-phone>+7 917 638 96 35</profile-phone>
					<profile-mail>oleg.nayanov@gmail.com</profile-mail>
				</profile-contacts>
			</profile>

Кастомные теги v2

			<html:html>
				<html:head>
					<html:title>A Look Into HTML6</html:title>
					<html:meta type="title" value="Page Title">
					<html:meta type="description" value="HTML example with namespaces">
					<html:link src="css/mainfile.css" title="Styles" type="text/css">
					<html:link src="js/mainfile.js" title="Script" type="text/javascript">
				</html:head>
			</html:html>

Решаемые проблемы

PostHTML

PostHTML это инструмент для преобразования HTML/XML

posthtml-custom-elements

			<profile>
				<profile-photo>
					<img src="/ava.jpg">
				</profile-photo>
				<profile-contacts>
					<profile-phone>+7 917 638 96 35</profile-phone>
					<profile-mail>oleg.nayanov@gmail.com</profile-mail>
				</profile-contacts>
			</profile>

posthtml-custom-elements

			<div class="profile">
				<div class="profile-photo">
					<img src="/ava.jpg">
				</div>
				<div class="profile-contacts">
					<div class="profile-phone">+7 917 638 96 35</div>
					<div class="profile-mail">oleg.nayanov@gmail.com</div>
				</div>
			</div>

posthtml-bem

			<div block="MadTeaParty">
				<div elem="march-hare" mods="type:mad">March Hare</div>
				<div elem="march-hare" mods="mad">March Hare</div>
			</div>

posthtml-bem

			<div class="MadTeaParty">
				<div class="MadTeaParty__march-hare MadTeaParty__march-hare_type_mad">
					March Hare
				</div>
				<div class="MadTeaParty__march-hare MadTeaParty__march-hare_mad">
					March Hare
				</div>
			</div>

posthtml-include

			<html>
				<head>
					<title>index.html</title>
				</head>
				<body>
					<include src="component/button/button.html">
				</body>
			</html>

Свой плагин. Удаление элемента с тегом

			module.exports = function(options) {
					return function(tree) {
					tree.match({ attrs: { 'class': /awsome-class/g } }, function (node) {
					return '';
				});
				return tree;
				};
			};
		
			tree.match({ attrs: { class: /awsome-class/g } }, node => '' );

Свой плагин. Работа с объектом

			tree.match({ attrs: { class: 'awsome-class' } }, node => {
				node.tag = 'span'; // поменяли тег
				node.attrs.class = [].concat(node.attrs.class, 'fallout4-is-cool'). join(' ');
				// добавили новый класс
				node.attrs.style = 'color: red;' // записали новый стиль
				return node // вернули измененную ноду
			} );

В планах

Спасибо за внимание