This document discusses recipes for creating better websites with Neos, an open-source content management framework. It begins with an introduction and overview of topics to be covered, including improvements to Neos, new recipes, and how to become a Neos expert. Some highlighted recipes include using persistent caches, improving SEO with packages, helping editors with backend hints and constraints, and making screencasts to document features. The document encourages learning from others, contributing to the open source project, and taking advantage of Neos' powerful prototyping features to build reusable components.

1. TASTY NEOS RECIPES
FOR EVERY DAY
CREATE BETTER WEBSITES WITH NEOS
SEBASTIAN HELZLE - INSPIRING CON 2016

2. TASTY NEOS RECIPES FOR EVERY DAY - INTRODUCTION
ABOUT ME
▸ Years of TYPO3, Flow & Neos experience
▸ Neos team member
▸ Product Owner @ punkt.de
▸ Living in Karlsruhe
▸ Sometimes living in Cambodia
▸ Hiker & baker
▸ @sebobo

3. TASTY NEOS RECIPES FOR EVERY DAY - INTRODUCTION
THIS TALK HELPS
▸ Developers
▸ Who start a new project
▸ Who want to learn more
▸ Who want to stay up-to-date
▸ Editors
▸ Who want to know if things could be easier
▸ Project leaders
▸ Who want to know what’s possible

4. TASTY NEOS RECIPES FOR EVERY DAY - INTRODUCTION
AGENDA
▸ A look into the past
▸ Improvements
▸ New recipes
▸ ???
▸ Become a Neos chef

5. A LOOK INTO
THE PAST

6. TASTY NEOS RECIPES FOR EVERY DAY - A LOOK INTO THE PAST
▸ Talk first held at Inspiring Con 2015 by Aske Ertmann
▸ Check it out here
▸ https://speakerdeck.com/aertmann/tasty-recipes-for-
every-day-neos
▸ or here goo.gl/A2WCiU
▸ Some recipes have are outdated — most are still great!

7. TASTY NEOS RECIPES FOR EVERY DAY - A LOOK INTO THE PAST
GREAT RECIPES IN THE OLD SLIDES
▸ Automatically optimize images and process them faster
▸ Automatic deployment
▸ Customizable 404 pages
▸ Multi-Site techniques
▸ E-Mail Spam protection
▸ Adjust css and js for editors
▸ And many more!

8. TASTY NEOS RECIPES FOR EVERY DAY - A LOOK INTO THE PAST
NEOS & FLOW DOCUMENTATION
▸ Was not always helpful
▸ Has much improved!
▸ Good examples
▸ Often used sentence:
„With Neos you can do a lot with a few lines of code“
—
„finding them is the hard part“

9. IMPROVEMENTS

10. TASTY NEOS RECIPES FOR EVERY DAY - IMPROVEMENTS
PERSISTENT CACHES
▸ Easier to configure since Flow 3.0
▸ Are kept even when flushing all caches
# Caches.yaml
# Flow 3.0+
Flow_Session_Storage:
persistent: TRUE
Flow_Session_MetaData:
persistent: TRUE
# Flow 2.0-2.3 (only works with Surf deployment – not flow:cache:flush command)
Flow_Session_Storage:
backendOptions:
cacheDirectory: '%FLOW_PATH_DATA%Session/Flow_Session_Storage'
Flow_Session_MetaData:
backendOptions:
cacheDirectory: '%FLOW_PATH_DATA%Session/Flow_Session_MetaData'

11. TASTY NEOS RECIPES FOR EVERY DAY - IMPROVEMENTS
PERSISTENT CACHE - EXAMPLES
▸ Keep session data
▸ Store dynamic configurations
▸ Fallback cache for flaky API endpoints
$result = $this->queryApi($endpointUrl);
$fallbackCacheKey = $this->getCacheKey($endpointUrl);
if ($result !== false) {
$this->fallbackApiCache->set($fallbackCacheKey, $result);
} else {
$this->systemLogger->log(
'API connection failed - will use fallback cache',
LOG_WARNING,
1458644107
);
$result = $this->fallbackApiCache->get($fallbackCacheKey);
}
return $result;

12. TASTY NEOS RECIPES FOR EVERY DAY - IMPROVEMENTS
SEO
▸ Use the Neos package typo3/neos-seo
▸ Provides additional configuration for every page
▸ Alternative page title
▸ Meta tags (description, keywords, robots)
▸ Twitter card
▸ OpenGraph
▸ Canonical Link
▸ XML Sitemap

13. NEW RECIPES

14. TASTY NEOS RECIPES FOR EVERY DAY - NEW RECIPES
GOOGLE ANALYTICS
▸ Use the Neos package
typo3/neos-googleanalytics
▸ View page statistics in the backend
▸ Tracking script helper

15. TASTY NEOS RECIPES FOR EVERY DAY - NEW RECIPES
HELP EDITORS WITH BACKEND HINTS
▸ Hints only shown in edit mode
<f:if condition="{neos:rendering.inEditMode()}">
<f:then>
<p class="backend-editor-hint">
Please select the start point of your blog in the inspector.
</p>
</f:then>
<f:else>
<p>No blog entries found.</p>
</f:else>
</f:if>

16. TASTY NEOS RECIPES FOR EVERY DAY - NEW RECIPES
HELP EDITORS UNDERSTAND
▸ Adapt naming of content to your customers vocabulary
# NodeTypes.Headline.yaml
‘Neos.NodeTypes:Headline‘:
ui:
label: 'Leadtext'
# NodeTypes.NewsArticle.yaml
‘Foo.Bar:NewsArticle‘:
ui:
label: 'Blogpost'

17. TASTY NEOS RECIPES FOR EVERY DAY - NEW RECIPES
HELP EDITORS TO NOT GET LOST
▸ Disable unused features
# NodeTypes.ContentImageMixin.yaml
'TYPO3.Neos.NodeTypes:ContentImageMixin':
superTypes:
'TYPO3.Neos.NodeTypes:ImageAlignmentMixin': false
# NodeTypes.Document.yaml
'TYPO3.Neos:Document':
superTypes:
'TYPO3.Neos.Seo:TwitterCardMixin': true
'TYPO3.Neos.Seo:OpenGraphMixin': false

18. TASTY NEOS RECIPES FOR EVERY DAY - NEW RECIPES
HELP EDITORS TO NOT MAKE MISTAKES
▸ Constraints, constraints, constraints
▸ Limiting possibilities reduces mistakes
▸ Part of your content architecture
# NodeTypes.Document.yaml
'TYPO3.Neos:Document':
constraints:
nodeTypes:
'Foo.Bar:RootPage': false
# NodeTypes.Column.yaml
'TYPO3.Neos.NodeTypes:Column':
childNodes:
column0:
constraints: &columnConstraints
nodeTypes:
'*': true
'TYPO3.Neos.NodeTypes:Column': false
column1:
constraints: *columnConstraints
column2:
constraints: *columnConstraints
column3:
constraints: *columnConstraints

19. TASTY NEOS RECIPES FOR EVERY DAY - NEW RECIPES
DISABLE SESSION TIMEOUT WHILE DEVELOPING
▸ Logging in 20 times a day is a waste of time
# Development/Settings.yaml
TYPO3:
Flow:
security:
session:
inactivityTimeout: 0

20. TASTY NEOS RECIPES FOR EVERY DAY - NEW RECIPES
COMPRESS HTML
▸ Use the Neos package flownative/neos-compressor
▸ Removes whitespace, line endings, etc…

21. TASTY NEOS RECIPES FOR EVERY DAY - NEW RECIPES
ENABLE FLUID AUTOCOMPLETION PT. 1
▸ Modify template
▸ Also helps PHPStorm to validate your html
# Templates/NodeTypes/Text.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"
xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers"
xmlns:neos=„http://typo3.org/ns/TYPO3/Neos/ViewHelpers">
<f:section name="Main">
<div{attributes -> f:format.raw()}>
<neos:contentElement.editable property="text"/>
<f:if condition="{referenceNodes}">
<ol class="reference-links">
{referenceNodes -> f:format.raw()}
</ol>
</f:if>
</div>
</f:section>
</html>

22. TASTY NEOS RECIPES FOR EVERY DAY - NEW RECIPES
ENABLE FLUID AUTOCOMPLETION PT. 2
▸ Define „sectionName“ in TypoScript prototype
# TypoScript/NodeTypes/Text.ts2
prototype(TYPO3.Neos.NodeTypes:Text) {
templatePath = 'resource://Foo.Bar/Private/Templates/NodeTypes/Text.html'
sectionName = 'Main'
@context.referenceNodesArray = ${q(node).property('references')}
referenceNodes = TYPO3.TypoScript:Collection {
collection = ${referenceNodesArray}
itemRenderer = Foo.Bar:DocumentReference
itemName = 'node'
}
}

23. TASTY NEOS RECIPES FOR EVERY DAY - NEW RECIPES
ENABLE FLUID AUTOCOMPLETION PT. 3
▸ Generate schemas for your own view helpers
▸ Include them in PHPStorm
▸ Press alt+enter while schema url in template is selected
# bash
./flow documentation:generatexsd --phpNamespace "FooBarViewHelpers"
http://neos.readthedocs.org/en/2.1/ExtendingNeos/CustomViewHelpers.html

24. TASTY NEOS RECIPES FOR EVERY DAY - NEW RECIPES
USE TYPOSCRIPT2 PROTOYPES
▸ Inheritable & extendable modules
# TypoScript/NodeTypes/Example.ts2
prototype(Foo.Bar:Example) < prototype(Neos.NodeTypes:Text) {
attributes.class = 'color-love'
}
prototype(Foo.Bar:Example) {
attributes.class = 'color-rainbow'
}
prototype(Foo.Bar:Column) {
prototype(Foo.Bar:Example) {
attributes.class = 'color-peace'
}
}

25. TASTY NEOS RECIPES FOR EVERY DAY - NEW RECIPES
CACHE EVERYTHING
▸ mode = ‚uncached‘ is usually not necessary
# TypoScript/NodeTypes/MyPlugin.ts2
prototype(Foo.Bar:MyPlugin) < prototype(TYPO3.Neos:Plugin) {
@cache {
mode = 'cached'
entryIdentifier {
node = ${node}
}
entryTags {
1 = ${'Node_' + node.identifier}
}
}
}
prototype(TYPO3.TypoScript:GlobalCacheIdentifiers) {
currentPage = ${request.arguments.page}
}
http://neos.readthedocs.org/en/2.1/CreatingASite/ContentCache.html

26. SUPER SECRET
BONUS RECIPE

27. TASTY NEOS RECIPES FOR EVERY DAY - SUPER SECRET BONUS RECIPE
MAKE SCREENCASTS
▸ Proof your features work
▸ Measure the length of the workflow
▸ Optimize
▸ Find bugs / inconsistencies
▸ Reduces support
▸ More fun than writing documentation

28. TASTY NEOS RECIPES FOR EVERY DAY - SUPER SECRET BONUS RECIPE
MAKE SCREENCASTS - EXAMPLE WORKFLOW
▸ Go to a quiet room
▸ Use a headset
▸ Don’t think too much about it
▸ Use simple screen casting app like Voila (or similar)
▸ Make first video
▸ Improve
▸ Make second video
▸ Export to dropbox
▸ Autoupload to Vimeo
▸ Share in private space with client / team

29. BECOME A
NEOS CHEF

30. TASTY NEOS RECIPES FOR EVERY DAY - BECOME A NEOS CHEF
LEARN FROM OTHERS
▸ Join us slack.neos.io
▸ Discuss on discuss.neos.io
▸ Don’t be afraid to ask questions
▸ Stay up-to-date on what’s going on
▸ Read the changelogs

31. TASTY NEOS RECIPES FOR EVERY DAY - BECOME A NEOS CHEF
IT’S OPEN SOURCE
▸ Search
▸ Fork
▸ Learn
▸ Improve
▸ Give back
▸ Come up with new recipes

32. TASTY NEOS RECIPES FOR EVERY DAY - BECOME A NEOS CHEF
NEOS IS MAKING THINGS EASY
▸ TypoScript 2 means configurability and reusability
▸ Prototypes are powerful
▸ Many things can be easily toggled
▸ Don’t build complicated templates
▸ Build small reusable partials and prototypes
▸ Make it easy for others to use your recipes

33. ANY QUESTIONS?
THANKS!

34. @SEBOBO
FEEL FREE TO CONTACT ME