[drupalday2017] - Drupal come frontend che consuma servizi: HTTP Client Manager
Drupal 8 - Corso frontend development
-
Upload
sparkfabrik -
Category
Software
-
view
354 -
download
0
Transcript of Drupal 8 - Corso frontend development
![Page 1: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/1.jpg)
![Page 2: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/2.jpg)
Drupal 8 frontend
development
for dummies
![Page 3: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/3.jpg)
Exausted?
Almost done…**only 2 more hours
![Page 4: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/4.jpg)
Andrea Panisson… Who?
I work in
as frontend developer.
I care UI, IA, Drupal Theming and I care aboutclients.
![Page 5: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/5.jpg)
What’s new in Drupal 8 for
themers
D7 PHPTemplate
Theme functions +
template files
Structured markup in core
and ‘hardcoded’ classes
HTML
D8 Twig
Template files
Minimal markup and
classes in core
HTML5 in core
![Page 6: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/6.jpg)
Twig?
Twig is a modern PHP-based compiled templating language.
![Page 7: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/7.jpg)
What's new in Drupal 8 for themers
&
the Twig template engine.
![Page 8: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/8.jpg)
PHPtemplate
theme functions
markup in core
Farewell to
![Page 9: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/9.jpg)
Welcome to
No more markup in core
All through template files
HTML5
Twig
![Page 10: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/10.jpg)
All through template files
![Page 11: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/11.jpg)
Twig: what & why
What?
A template engine for PHP
Why?
Twig was created by people behind Synfony2
Synfony2 was integrated in Drupal 8 core
![Page 12: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/12.jpg)
Twig was chosen because it was the best choice after comparing various templating languages.
"… We don't have Twig because we have Symfony. It's more that, we have Twig because it's AWESOME"
- Scott Reeves, @Cottser
“Twig…because it's AWESOME”
![Page 13: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/13.jpg)
But why abandoning
PHPtemplate?
1. Syntax
2. Inconsistency
3. Complexity
4. Redundancy
5. Security
![Page 14: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/14.jpg)
“Twig…because it's
AWESOME”
Mixed data types in template files
![Page 15: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/15.jpg)
#1. D8 syntax: TWIG
All variables are printed the same way
![Page 16: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/16.jpg)
#2. Inconsistency
D7 different ways to do the same thing:
Template files or Theme functions.
Theme functions or render arrays
D8 Only template files
Only render arrays
![Page 17: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/17.jpg)
#3. D7: complexity
Drupal 7 was funny!
![Page 18: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/18.jpg)
#3. D8: less complexity
D8 is boring!
![Page 19: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/19.jpg)
#4. D7: redundancy
There's a lot of duplicated code in themes, we often have multiple
files with the same lines of code.
![Page 20: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/20.jpg)
#4. D8: less redundancy
No need to repeat code between templates, we can extend
templates with Twig.
![Page 21: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/21.jpg)
#5. Security
D7
In a PHPTemplate file you can print all sort of unsanitized data,
even delete a table from your DB.
D8
In Twig this is not possible, Twig's autoescape feature is enabled by
default.
![Page 22: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/22.jpg)
TWIG: no more conflict
backend - frontend
They are now separated!
![Page 23: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/23.jpg)
TWIG: easy to learn!
![Page 24: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/24.jpg)
Twig: syntax
![Page 25: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/25.jpg)
Twig: no more var drilling
Drupal 7 and PHPtemplate
Drupal 8 and Twig
![Page 26: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/26.jpg)
Twig: functions (filters)
![Page 27: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/27.jpg)
Twig: |Functions (filters)
![Page 28: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/28.jpg)
Twig: translate
![Page 29: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/29.jpg)
Twig: controls
![Page 30: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/30.jpg)
Twig: loops
![Page 31: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/31.jpg)
Twig: setting vars
![Page 32: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/32.jpg)
Twig: blocks
page.html.twig
![Page 33: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/33.jpg)
Twig: blocks
page--front.html.twig
![Page 34: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/34.jpg)
Twig: includes
Template files are reusable, thanks to Twig includes
http://twig.sensiolabs.org/doc/tags/include.html
{% include “footer.html.twig" %}
Or using namespaces:
{% include “@my_theme/partials/footer.html.twig" %}
![Page 35: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/35.jpg)
Twig coding standard (T.c.s.)
Generic Twig coding standards:
http://twig.sensiolabs.org/doc/coding_standards.html
Twig in Drupal coding standards:
http://drupal.org/node/1823416
![Page 36: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/36.jpg)
T.c.s. - HTML attributes
In Drupal core, we will print only the class attribute specially, all the others will be printed as part of {{ attributes }}.
The reason for this is that it needs to be very easy for front end developers to be able to add a class, anywhere
![Page 37: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/37.jpg)
T.c.s. - Whitespaces
![Page 38: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/38.jpg)
T.c.s. - Comments
Singleline:
Multiline
![Page 39: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/39.jpg)
Twig docs
twig.sensiolabs.org
![Page 40: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/40.jpg)
And so, Twig advantages:
a clear separation between the logic and the view
no more PHP code inside your template files
it's not only used in Drupal core, so it's not a Drupaly-thing
![Page 41: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/41.jpg)
and Twig disadvantages:
thing to learn
![Page 42: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/42.jpg)
YAML
Yet Another Markup Language** YAML Ain't Markup Language
"YAML is a human friendly data serialization standard for all
programming languages."
-yaml.org
Pronounced “yamel” (rhymes with camel).
![Page 43: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/43.jpg)
YAML
sites/default/services.yml
![Page 44: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/44.jpg)
Why YAML?
YAML is both human editable and machine readable.
.yml files are not Drupal specific like .info files.
And why not XML?
XML would require a Drupal specific schema.
Or JSON?
JSON doesn't allow comments.
Non-ASCII characters require escaping in JSON.
![Page 45: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/45.jpg)
Theme folder structure
The directory structure of Drupal 8 has
changed!
https://www.drupal.org/node/2349803
![Page 46: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/46.jpg)
Location of themes
![Page 47: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/47.jpg)
/themes
For themes that should be available to all sites.
/sites/{site}/themes
For themes that should be available on a specific site (on a
multisite installation).
Location of themes
![Page 48: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/48.jpg)
Theme folder structure
![Page 49: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/49.jpg)
Most common theme files
*.info.yml
*.libraries.yml
*.breakpoints.yml
*.theme
Theme folder structure: https://www.drupal.org/node/2349803
![Page 50: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/50.jpg)
*.info.yml (ex *.info)
A theme must contain an .info.yml file to define the theme.
Among other things the .info.yml files defines meta data, style
sheets, and block regions.
This is the only required file in the theme.
![Page 51: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/51.jpg)
*.libraries.yml
The .libraries.yml file is used to define JavaScript and CSS
libraries that can be loaded by the theme.
A library as a collection of CSS and JS.
![Page 52: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/52.jpg)
*.libraries.yml
Libraries are called in the info file:
and defined in the *.libraries.yml file:
![Page 53: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/53.jpg)
*.breakpoints.yml
Breakpoints define where a responsive design needs to
change in order to respond to different devices.
Breakpoints are defined in a .breakpoints.yml file
![Page 54: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/54.jpg)
*.theme (ex template.php)
The .theme file is a PHP file that contains all the conditional
logic and data (pre)processing of the output.
![Page 55: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/55.jpg)
The theme layer
![Page 56: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/56.jpg)
The new theme layer
![Page 57: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/57.jpg)
Bye bye theming functions!
ALL GONE: All of the theme() functions have been converted to Twig templates.
![Page 58: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/58.jpg)
New theme hooks
Theme suggestions
hook_theme_suggestions()hook_theme_suggestions_HOOK()
Theme suggestions alter:
hook_theme_suggestions_alter(), hook_theme_suggestions_HOOK_alter()
Theme preprocess:
THEME_preprocess(&$variables, $hook), THEME_preprocess_HOOK(&$variables)
https://api.drupal.org/api/drupal/core!lib!Drupal!Core!Render!theme.api.php/group/themeable/8
![Page 59: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/59.jpg)
Removed process hooks
The process layer (hook_process and hook_process_HOOK) is gone!
![Page 60: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/60.jpg)
The preprocess layer
The preprocess layer still exists, but it's used for a different
purpose.
In Drupal 8, the preprocess layer should not be used to add css
classes.
This should be done in the template files.
https://www.drupal.org/node/2325067
![Page 61: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/61.jpg)
Drupal 8 core themes
![Page 62: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/62.jpg)
Drupal 8 core themes
bartik
seven
stark
classy
stable
Backwards compatibility
throughout the Drupal 8 cycle
Default admin theme
Default theme
Drupal core markup test theme
![Page 63: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/63.jpg)
Drupal 8 core themes: bartik
A flexible, recolorable theme with many regions and a responsive, mobile-first layout.
The default theme in Drupal 8.
![Page 64: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/64.jpg)
Drupal 8 core themes: seven
The default administration theme for Drupal 8.
Now fully responsive.
![Page 65: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/65.jpg)
Drupal 8 core themes: stark
An intentionally plain
theme with almost
no styling to
demonstrate default
Drupal’s HTML and
CSS.
Stark only outputs
html and css from
modules.
Add no CSS
Add no templates
![Page 66: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/66.jpg)
Drupal 8 core themes: stable
The Stable theme will function as a backwards compatibility layer for Drupal 8's core markup, CSS and JS.
A theme will always use Stable as the base theme unless you set
in your theme .info.yml file.
![Page 67: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/67.jpg)
Drupal 8 core themes: classy
The classes from core have been moved into the classy base theme.
Now all template files in core are “classless”.
Is the base theme that Seven and Bartik will extend from.
![Page 68: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/68.jpg)
https://www.lullabot.com/articles/a-tale-of-two-base-themes-in-drupal-8-core
@mortendk
![Page 69: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/69.jpg)
Drupal 8 core templates
core/modules/system/templates
![Page 70: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/70.jpg)
New CSS architecture
SMACSSScalable and Modular Architecture for CSS
• Base• Layout• Component• State• Theme
BEMBlock Element Modifier naming convention
.block__element--modifier
![Page 71: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/71.jpg)
Development tools!
![Page 72: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/72.jpg)
Development tools
Before start with theme development (Drupal development) let’s get some tools:
Drush: http://www.drush.org
Drupal Console: http://drupalconsole.com
Devel module (& Kint): http://drupal.org/project/devel
![Page 73: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/73.jpg)
Installing composer…
curl -sS https://getcomposer.org/installer | php
mv composer.phar /usr/local/bin/composer
https://getcomposer.org/doc/00-intro.md#globally
![Page 74: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/74.jpg)
Install Drupal console / drush
Edit (global) composer.json and then run composer update
![Page 75: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/75.jpg)
Install Drupal console / drush
composer global require drush/drush:dev-master
composer global require drupal/console:@stable
Remember to add the binaries composer directory to your path, i.e.
$ echo "PATH=$PATH:~/.composer/vendor/bin" >> ~/.bash_profile
![Page 76: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/76.jpg)
Most useful drush commands:
Clear cache
drush cr
Download / enable a module
drush en module_name
HELP ME!
drush help
![Page 77: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/77.jpg)
Most useful console
commands:
Generate a theme:
console generate:theme
More to come... *
* Please, RTFM!
![Page 78: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/78.jpg)
Enable debugging:
the manual way
Locate services.yml file (sites/default/services.yml)
If services.yml does not yet exist copy
default.services.yml and rename it to services.yml
Edit the services.yml file and enable one or more of the debugging options
Rebuild cache
![Page 79: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/79.jpg)
Enable debugging:
the manual way (continue)
parameters:
twig.config:
# Twig debugging:
debug: true
# Twig auto-reload:
auto_reload: true
# Twig cache:
cache: true
![Page 80: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/80.jpg)
Enable debugging:
Drupal Console
https://www.drupal.org/node/1903374
console site:mode dev
![Page 81: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/81.jpg)
Disable render cache
Drupal caches any rendering it performs for blocks and entities, to speed up subsequent page loads.
This means that changes to Twig templates for these will not take effect immediately.
![Page 82: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/82.jpg)
Disable render cache
add the following lines at the bottom of settings.php
if (file_exists(__DIR__ . '/settings.local.php')) {
include __DIR__ . '/settings.local.php';
}
copy sites/example.settings.local.php to sites/default/settings.local.php
clear the Drupal caches.
![Page 83: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/83.jpg)
Disable render cache
In settings.local.php:
disable the render cache (this includes the page cache).
$settings['cache']['bins']['render'] = 'cache.backend.null';
disable Dynamic Page Cache.
$settings['cache']['bins']['dynamic_page_cache'] = 'cache.backend.null';
![Page 84: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/84.jpg)
Devel and Kint
drush dl devel
Kint, the new Krumo
http://raveren.github.io/kint/
![Page 85: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/85.jpg)
Twig: compiled in PHP template
Twig template engine takes the template file and converts it into a 'compiled' PHP template in
sites/default/files/php/twig/*
(drush cr clean this folder too)
![Page 86: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/86.jpg)
Resources
Twig official: http://twig.sensiolabs.org/
Theming Drupal 8: https://drupal.org/theme-guide/8
The Drupal 8 Theming guide: http://d8.sqndr.com/
More articles
Drupal 8 Theming Fundamentals, Part 1
Drupal 8 Theming Fundamentals, Part 2
A Tale of Two Base Themes in Drupal 8 core
![Page 87: Drupal 8 - Corso frontend development](https://reader034.fdocuments.net/reader034/viewer/2022051404/589e0b661a28ab67278b5d01/html5/thumbnails/87.jpg)