Tasty Recipes for Every Day 2016 (Neos)

TASTY NEOS RECIPES FOR EVERY DAY

CREATE BETTER WEBSITES WITH NEOS SEBASTIAN HELZLE - INSPIRING CON 2016

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

http://punkt.de


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


AGENDA

▸ A look into the past

▸ Improvements

▸ New recipes

▸ ???

▸ Become a Neos chef

A LOOK INTO THE PAST

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!

https://speakerdeck.com/aertmann/tasty-recipes-for-every-day-neos


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!


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“

IMPROVEMENTS

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'


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;


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

NEW RECIPES

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


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>


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'


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


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


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


COMPRESS HTML

▸ Use the Neos package flownative/neos-compressor

▸ Removes whitespace, line endings, etc…


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>



▸ 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' }}



▸ 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 "Foo\Bar\ViewHelpers"

http://neos.readthedocs.org/en/2.1/ExtendingNeos/CustomViewHelpers.html

http://neos.readthedocs.org/en/2.1/ExtendingNeos/CustomViewHelpers.html


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' }}


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

http://neos.readthedocs.org/en/2.1/CreatingASite/ContentCache.html

SUPER SECRET BONUS RECIPE

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

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

BECOME A NEOS CHEF

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

http://slack.neos.io


IT’S OPEN SOURCE

▸ Search

▸ Fork

▸ Learn

▸ Improve

▸ Give back

▸ Come up with new recipes


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

ANY QUESTIONS?THANKS!

@SEBOBOFEEL FREE TO CONTACT ME

Tasty Recipes for Every Day 2016 (Neos)

Technology