<commit_before><!doctype html>
<html lang="en">

	<head>
		<meta charset="utf-8">

		<title>Drupal 8 Theme System - HOOK_theme() to Twig template</title>

		<meta name="description" content="A framework for easily creating beautiful presentations using HTML">
		<meta name="author" content="<NAME>">

		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<link rel="stylesheet" href="css/reveal.min.css">
		<link rel="stylesheet" href="css/theme/solarized.css" id="theme">
		<link rel="stylesheet" href="css/theme/theme-system.css" id="theme-system">

		<!-- For syntax highlighting -->
		<link rel="stylesheet" href="lib/css/ir_black.css">

		<!-- If the query includes 'print-pdf', include the PDF print sheet -->
		<script>
			if( window.location.search.match( /print-pdf/gi ) ) {
				var link = document.createElement( 'link' );
				link.rel = 'stylesheet';
				link.type = 'text/css';
				link.href = 'css/print/pdf.css';
				document.getElementsByTagName( 'head' )[0].appendChild( link );
			}
		</script>

		<!--[if lt IE 9]>
		<script src="lib/js/html5shiv.js"></script>
		<![endif]-->
	</head>

	<body>

		<div class="reveal">

			<!-- Any section element inside of this container is displayed as a slide -->
			<div class="slides">

				<section id="presenters" class="camp-slide" data-state="first-slide">
					<section id="main-slide">
						<div class="camp--branding">
							<img src="images/logo.png" alt="NYC Camp 2014" class="image--plain" />
							<h1 class="camp--title">Drupal 8 <br> Theme System</h1>
						</div>
						<div class="camp--presentation">
							<h2 class="presentation--title">HOOK_theme() to Twig template</h2>
							<h4 class="speaker--name"><NAME> &amp; <NAME></h4>
						</div>
					</section>

					<section>
						<h1 class="slide--title"><NAME></h1>
						<div class="presenter l-fifty">
							<div class="presenter--info">
								<!-- <h3 class="presenter--info__name"></h3> -->
								<figure>
									<img src="images/presenters/Cottser.jpg" alt="<NAME>" />
									<figcaption>Cottser</figcaption>
								</figure>
							</div>
						</div>
						<div class="l-fifty">
							<ul class="presenter--info__facts">
								<li class="fact fragment roll-in">Developer at Digital Echidna</li>
								<li class="fact fragment roll-in">Drupal 8 theme system<br /> co-maintainer</li>
								<li class="fact fragment roll-in">Drupal core mentor</li>
								<li class="fact fragment roll-in">Likes beans</li>
							</ul>
							<img src="images/presenters/echidna.png" alt="Digital Echidna" class="image--plain echidna-logo" />
						</div>
					</section>

					<section>
						<div class="presenter l-fifty">
							<div class="presenter--info">
								<!-- <h3 class="presenter--info__name"></h3> -->
								<figure>
									<img src="images/presenters/joel.jpg" alt="<NAME>" />
									<figcaption>joelpittet
										<i class="pittet-logo"></i>
									</figcaption>
								</figure>
							</div>
						</div>
						<div class="l-fifty">
							<h1 class="slide--title"><NAME></h1>
							<ul class="presenter--info__facts">
								<li class="fact fragment roll-in">Building Websites since 2001ish</li>
								<li class="fact fragment roll-in">Front and Back End Developer</li>
								<li class="fact fragment roll-in">Drupal 8 Core Theme System Maintainer</li>
								<li class="fact fragment roll-in">And obviously love perogies</li>
							</ul>
						</div>
						<aside class="notes">
							Now we can hit 'B' and gauge the personas in the audience. Ask people to raise their hand if they are:

							<ul>
								<li>Site builders</li>
								<li>Themers</li>
								<li>Developers</li>
								<li>DevOps</li>
							</ul>
						</aside>
					</section>

				</section>

				<section id="theme-layer-changes" class="title-slide">
					<section>
						<h1>Drupal 8 <br />theme layer changes</h1>
					</section>
					<section>
						<h2 class="minus">Template process layer</h2>
						<p class="fragment">…is gone!</p>
						<aside class="notes">
							<ul>
								<li>The main reason for the process layer was to flatten strings into HTML.</li>
								<li>In Drupal 8 we prefer "lazy" rendering things as late as possible, which usually gets called from a Twig template.</li>
							</ul>
						</aside>
					</section>
					<section>
						<h2 class="minus">Theme functions</h2>
						<p class="fragment">…are being converted to Twig templates.</p>
						<aside class="notes">
							<li>Theme functions are so Drupal 7 (effectively deprecated, people will yell at you)</li>
							<li>Markup belongs in templates, not in PHP strings. Your IDE/Text Editor will reward you by syntax highlighting markup and much less string concatenation and quote escaping is needed.</li>
						</aside>
					</section>
					<section>
						<h2 class="plus">Theme suggestion hooks</h2>
						<p>Drupal 7:</p>
						<pre><code data-trim class="php">
&lt;?php
/**
 * Implements hook_preprocess_HOOK() for node templates.
 */
function MYTHEME_preprocess_node(&$variables) {
  $variables['theme_hook_suggestions'][] = 'node__' . 'my_first_suggestion';
  $variables['theme_hook_suggestions'][] = 'node__' . 'my_second_more_specific_suggestion';
}
						</code></pre>

						<p>Drupal 8:</p>
						<pre><code data-trim class="php">
&lt;?php
/**
 * Implements hook_theme_suggestions_HOOK_alter() for node templates.
 */
function MYTHEME_theme_suggestions_node_alter(array &$suggestions, array $variables) {
  $suggestions[] = 'node__' . 'my_first_suggestion';
  $suggestions[] = 'node__' . 'my_second_suggestion';
}
						</code></pre>
						<aside class="notes">
							<li>In Drupal 7 you could manipulate theme suggestions during preprocess, but by this point it might already be too late, or you've already done unnecessary preprocessing.</li>
							<li>Drupal 8 splits out the manipulation of theme hook (template) suggestions into separate hooks.</li>
							<li>You can see template suggestions in action when we talk about Twig debug in a few minutes.</li>
						</aside>
					</section>
					<section>
						<h2 class="plus">Oh yeah, and Twig!</h2>
						<aside class="notes">
						</aside>
					</ul>
				</section>

			</div>

		</div>

		<script src="lib/js/head.min.js"></script>
		<script src="js/reveal.min.js"></script>

		<script>

			// Full list of configuration options available here:
			// https://github.com/hakimel/reveal.js#configuration
			Reveal.initialize({<commit_msg>Add notes to twig slide<commit_after><!doctype html>
<html lang="en">

	<head>
		<meta charset="utf-8">

		<title>Drupal 8 Theme System - HOOK_theme() to Twig template</title>

		<meta name="description" content="A framework for easily creating beautiful presentations using HTML">
		<meta name="author" content="<NAME>">

		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<link rel="stylesheet" href="css/reveal.min.css">
		<link rel="stylesheet" href="css/theme/solarized.css" id="theme">
		<link rel="stylesheet" href="css/theme/theme-system.css" id="theme-system">

		<!-- For syntax highlighting -->
		<link rel="stylesheet" href="lib/css/ir_black.css">

		<!-- If the query includes 'print-pdf', include the PDF print sheet -->
		<script>
			if( window.location.search.match( /print-pdf/gi ) ) {
				var link = document.createElement( 'link' );
				link.rel = 'stylesheet';
				link.type = 'text/css';
				link.href = 'css/print/pdf.css';
				document.getElementsByTagName( 'head' )[0].appendChild( link );
			}
		</script>

		<!--[if lt IE 9]>
		<script src="lib/js/html5shiv.js"></script>
		<![endif]-->
	</head>

	<body>

		<div class="reveal">

			<!-- Any section element inside of this container is displayed as a slide -->
			<div class="slides">

				<section id="presenters" class="camp-slide" data-state="first-slide">
					<section id="main-slide">
						<div class="camp--branding">
							<img src="images/logo.png" alt="NYC Camp 2014" class="image--plain" />
							<h1 class="camp--title">Drupal 8 <br> Theme System</h1>
						</div>
						<div class="camp--presentation">
							<h2 class="presentation--title">HOOK_theme() to Twig template</h2>
							<h4 class="speaker--name"><NAME> &amp; <NAME></h4>
						</div>
					</section>

					<section>
						<h1 class="slide--title"><NAME></h1>
						<div class="presenter l-fifty">
							<div class="presenter--info">
								<!-- <h3 class="presenter--info__name"></h3> -->
								<figure>
									<img src="images/presenters/Cottser.jpg" alt="<NAME>" />
									<figcaption>Cottser</figcaption>
								</figure>
							</div>
						</div>
						<div class="l-fifty">
							<ul class="presenter--info__facts">
								<li class="fact fragment roll-in">Developer at Digital Echidna</li>
								<li class="fact fragment roll-in">Drupal 8 theme system<br /> co-maintainer</li>
								<li class="fact fragment roll-in">Drupal core mentor</li>
								<li class="fact fragment roll-in">Likes beans</li>
							</ul>
							<img src="images/presenters/echidna.png" alt="Digital Echidna" class="image--plain echidna-logo" />
						</div>
					</section>

					<section>
						<div class="presenter l-fifty">
							<div class="presenter--info">
								<!-- <h3 class="presenter--info__name"></h3> -->
								<figure>
									<img src="images/presenters/joel.jpg" alt="<NAME>ittet" />
									<figcaption>joelpittet
										<i class="pittet-logo"></i>
									</figcaption>
								</figure>
							</div>
						</div>
						<div class="l-fifty">
							<h1 class="slide--title"><NAME></h1>
							<ul class="presenter--info__facts">
								<li class="fact fragment roll-in">Building Websites since 2001ish</li>
								<li class="fact fragment roll-in">Front and Back End Developer</li>
								<li class="fact fragment roll-in">Drupal 8 Core Theme System Maintainer</li>
								<li class="fact fragment roll-in">And obviously love perogies</li>
							</ul>
						</div>
						<aside class="notes">
							Now we can hit 'B' and gauge the personas in the audience. Ask people to raise their hand if they are:

							<ul>
								<li>Site builders</li>
								<li>Themers</li>
								<li>Developers</li>
								<li>DevOps</li>
							</ul>
						</aside>
					</section>

				</section>

				<section id="theme-layer-changes" class="title-slide">
					<section>
						<h1>Drupal 8 <br />theme layer changes</h1>
					</section>
					<section>
						<h2 class="minus">Template process layer</h2>
						<p class="fragment">…is gone!</p>
						<aside class="notes">
							<ul>
								<li>The main reason for the process layer was to flatten strings into HTML.</li>
								<li>In Drupal 8 we prefer "lazy" rendering things as late as possible, which usually gets called from a Twig template.</li>
							</ul>
						</aside>
					</section>
					<section>
						<h2 class="minus">Theme functions</h2>
						<p class="fragment">…are being converted to Twig templates.</p>
						<aside class="notes">
							<li>Theme functions are so Drupal 7 (effectively deprecated, people will yell at you)</li>
							<li>Markup belongs in templates, not in PHP strings. Your IDE/Text Editor will reward you by syntax highlighting markup and much less string concatenation and quote escaping is needed.</li>
						</aside>
					</section>
					<section>
						<h2 class="plus">Theme suggestion hooks</h2>
						<p>Drupal 7:</p>
						<pre><code data-trim class="php">
&lt;?php
/**
 * Implements hook_preprocess_HOOK() for node templates.
 */
function MYTHEME_preprocess_node(&$variables) {
  $variables['theme_hook_suggestions'][] = 'node__' . 'my_first_suggestion';
  $variables['theme_hook_suggestions'][] = 'node__' . 'my_second_more_specific_suggestion';
}
						</code></pre>

						<p>Drupal 8:</p>
						<pre><code data-trim class="php">
&lt;?php
/**
 * Implements hook_theme_suggestions_HOOK_alter() for node templates.
 */
function MYTHEME_theme_suggestions_node_alter(array &$suggestions, array $variables) {
  $suggestions[] = 'node__' . 'my_first_suggestion';
  $suggestions[] = 'node__' . 'my_second_suggestion';
}
						</code></pre>
						<aside class="notes">
							<li>In Drupal 7 you could manipulate theme suggestions during preprocess, but by this point it might already be too late, or you've already done unnecessary preprocessing.</li>
							<li>Drupal 8 splits out the manipulation of theme hook (template) suggestions into separate hooks.</li>
							<li>You can see template suggestions in action when we talk about Twig debug in a few minutes.</li>
						</aside>
					</section>
					<section>
						<h2 class="plus">Oh yeah, and Twig!</h2>
						<aside class="notes">
							<li>Twig is a flexible, fast, and secure template engine for PHP.</li>
							<li>The Twig engine and initial integration code was committed during BADCamp in November 2012.</li>
							<li>The conversions of .tpl.php to .html.twig files were committed during DrupalCon Portland in May 2013 and Twig is now the default template engine for Drupal 8.</li>
						</aside>
					</ul>
				</section>

			</div>

		</div>

		<script src="lib/js/head.min.js"></script>
		<script src="js/reveal.min.js"></script>

		<script>

			// Full list of configuration options available here:
			// https://github.com/hakimel/reveal.js#configuration
			Reveal.initialize({
{'fraction_non_alphanumeric': 0.15734929207414977, 'fraction_numerical': 0.008101007152240549, 'mean_word_length': 2.9707331208345407, 'pattern_counts': {'":': 0, '<': 395, '<?xml version=': 0, '>': 395, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 6, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5035411', 'n_tokens_mistral': 5815, 'n_tokens_neox': 4303, 'n_words': 1142}