Render late,

render once

function template_preprocess(&$variables, $hook) {
  $variables['classes_array'] = array(drupal_html_class($hook));
}
function HOOK_preprocess_node(&$variables) {
  $variables['classes_array'][] = 'foo';
}
function template_process(&$variables, $hook) {
  $variables['classes'] = implode(' ', $variables['classes_array']);
}

// In node.tpl.php
<div id="node-<?php print $node->nid; ?>" class="<?php print↩
   $classes; ?> clearfix"<?php print $attributes; ?>>

function template_preprocess(&$variables, $hook, $info) {
  ...
}
function HOOK_preprocess_node(&$variables) {
  $variables['attributes']['class'][] = 'foo';
}

{# In node.html.twig #}
{%
  set classes = [
    'node',
    node.isPromoted() ? 'node--promoted',
    node.isSticky() ? 'node--sticky',
    not node.isPublished() ? 'node--unpublished',
  ]
%}
<article{{ attributes.addClass(classes)↩
  .setAttribute('id', 'node-' ~ node.id) }}>

And that's a good thing

stylesheet-remove:
  - core/something/not/wanted/in/my/site.css

stylesheets-remove:
  - '@bartik/css/style.css'

# Uncomment these lines in settings.php
if (file_exists(__DIR__ . '/settings.local.php')) {
  include __DIR__ . '/settings.local.php';
}

# Change this is sites/default/services.yml
parameters:
  twig.config:
    # @default false
    debug: true

$ cp sites/example.settings.local.php ↵ 
 sites/default/settings.local.php

$ drush cache-rebuild  # alias: drush cr

# Uncomment the following line in settings.local.php
$settings['cache']['bins']['render'] = 'cache.backend.null';

{% Add this to your template file... %}
<pre>{{ dump(attributes) }}</pre>


<!-- ... get this in your HTML -->
<pre>object(Drupal\Core\Template\Attribute)#1440 (1) {
  ["storage":protected]=>
  array(6) {
    ["data-history-node-id"]=>
    object(Drupal\Core\Template\AttributeString)#1448 (2) {
      ["value":protected]=>
      string(2) "49"
      ["name":protected]=>
      string(20) "data-history-node-id"
    }
    ["data-quickedit-entity-id"]=>
...

<pre>{{ kint(attributes) }}</pre>

{{ Outputs variables }}

{% Control (conditionals, loops) %}

{# Comments #}

Otherwise, you're just writing HTML

$variables['danger'] = 
  '<script>alert("I am evil!");</script>';

<script>alert("I am evil!");
  </script>

{{ foo.bar }}

// If foo is an array
$foo['bar']

// If foo is an object
$foo->bar      // Checks for valid property
$foo->bar()    // Checks for valid method
$foo->getBar() // Checks for get method
$foo->isBar()  // Checks for is method
// Returns NULL

{# use "and" instead of &&, "or" instead of ||, 
  and "not" instead of ! #}

{% if node.isPromoted and node.status %}
  This is really important!
{% else %}
  Not as important or not published
{% endif %}

{# add "b-" to make it a bit-wise operator #}

{# RegEx lite operations #}
{% if 'foo' starts with 'f' %}
  ...
{% endif %}
{% if 'foo' ends with 'o' %}
  ...
{% endif %}

{# Real RegEx parsing via match #}
{% if 'foo' matches '/^f(o)*$/' %}
  ...
{% endif %}

<pre>
  {% if 'foo' matches '/^f(o)*$/' %}
    This is foo.
  {% endif %}
</pre>

Results in:

<pre>      This is foo.
  </pre>

<pre>
{% spaceless %}
  {% if 'foo' matches '/^f(o)*$/' %}
    This is foo.
  {% endif %}
{% endspaceless %}
</pre>

Results in:

<pre>This is foo.</pre>

<pre>
  {%- if 'foo' matches '/^f(o)*$/' -%}
    This is foo.
  {%- endif %}
</pre>

Also results in:

<pre>This is foo.</pre>

{{ page_title|title }}

{{ (numFoo - numBar)|abs }}

{{ node_title|striptags|title }}

{{ items|safe_join(', ') }}

{% filter escape %}
  <strong>This is an example</strong>
{% endfilter %}

Results in:

&lt;strong&gt;This is an example&lt;/strong&gt;

• t
• without
• clean_class/clean_id
• render
• format_date
• safe_join
• drupal_escape

From Twig

From Drupal

http://twig.sensiolabs.org/doc/filters/index.html

{{ content|without('field_example';) }}
{# Print other stuff... #}
{{ content.field_example }}

{% set class = 'node--type-' ~ node.bundle|clean_class %}
...
<article{{ attributes.addClass(class) }}>

<a href="{{ url('<front>') }}" title="{{ Home|t }}">

• render_var
• url
• path
• link
• file_url
• attach_library
• active_theme_path
• active_theme

From Twig

From Drupal

http://twig.sensiolabs.org/doc/functions/index.html

<pre>{{ dump(someVariable) }}</pre>
<pre>{{ dump() }} </pre>

{{ 'now'|date(constant('DATE_RSS')) }}
{# Can also pull constants from objects #}
{{ 'now'|date(constant(
  'Drupal\\SomeDateObject::MY_DATE_FORMAT') }}

{# Both maintain the default value for the format param #}
{{ 'now'|date(null, timezone='Europe/Paris') }}
{{ 'now'|date(timezone='Europe/Paris') }}

{% set test = ['foo', 'bar', 'baz'] %}
<pre>
{% for item in test %}
  {{ item }}
{% endfor %}
</pre>

Results in:
<pre>  foo
  bar
  baz
</pre>

{% set foo = [] %}
<pre>
{% if foo is defined and foo is not empty %}
  {% for item in foo %}
    {{- loop.index }} out of {{ loop.length }} - {{ item }}
  {% endfor %}
{% else %}
  Nothing to loop on.
{% endif %}
</pre>

The Drupal 7 way:

• Copy/Paste the template
• Cut yourself off from future changes

{# Super simplified block.html.twig #}
<div{{ attributes }}>
  {% block label %}
    <h2{{ title_attributes }}>{{ label }}</h2>
  {% endblock %}
  {% block content %}
    {{ content }}
  {% endblock %}
</div>

{# Child template: myblock.html.twig #}
{% extends block.html.twig %}
{% block content %}
  <p>{{ content }}</p>
{% endblock %}
{% block label %}
  {{ parent() }}
  <h3>Some sorta sub-title</h3>
{% endblock %}

{# New shiny block.html.twig #}
<block{{ attributes }}>
  {% block label %}
    <blabel {{ title_attributes }}>{{ label }}</blabel>
  {% endblock %}
  {% block content %}
    {{ content }}
  {% endblock %}
</div>