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
▸ Pro...
TASTY NEOS RECIPES FOR EVERY DAY - INTRODUCTION
THIS TALK HELPS
▸ Developers
▸ Who start a new project
▸ Who want to learn...
TASTY NEOS RECIPES FOR EVERY DAY - INTRODUCTION
AGENDA
▸ A look into the past
▸ Improvements
▸ New recipes
▸ ???
▸ Become ...
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 ...
TASTY NEOS RECIPES FOR EVERY DAY - A LOOK INTO THE PAST
GREAT RECIPES IN THE OLD SLIDES
▸ Automatically optimize images an...
TASTY NEOS RECIPES FOR EVERY DAY - A LOOK INTO THE PAST
NEOS & FLOW DOCUMENTATION
▸ Was not always helpful
▸ Has much impr...
IMPROVEMENTS
TASTY NEOS RECIPES FOR EVERY DAY - IMPROVEMENTS
PERSISTENT CACHES
▸ Easier to configure since Flow 3.0
▸ Are kept even when...
TASTY NEOS RECIPES FOR EVERY DAY - IMPROVEMENTS
PERSISTENT CACHE - EXAMPLES
▸ Keep session data
▸ Store dynamic configurati...
TASTY NEOS RECIPES FOR EVERY DAY - IMPROVEMENTS
SEO
▸ Use the Neos package typo3/neos-seo
▸ Provides additional configurati...
NEW RECIPES
TASTY NEOS RECIPES FOR EVERY DAY - NEW RECIPES
GOOGLE ANALYTICS
▸ Use the Neos package 

typo3/neos-googleanalytics
▸ View...
TASTY NEOS RECIPES FOR EVERY DAY - NEW RECIPES
HELP EDITORS WITH BACKEND HINTS
▸ Hints only shown in edit mode
<f:if condi...
TASTY NEOS RECIPES FOR EVERY DAY - NEW RECIPES
HELP EDITORS UNDERSTAND
▸ Adapt naming of content to your customers vocabul...
TASTY NEOS RECIPES FOR EVERY DAY - NEW RECIPES
HELP EDITORS TO NOT GET LOST
▸ Disable unused features
# NodeTypes.ContentI...
TASTY NEOS RECIPES FOR EVERY DAY - NEW RECIPES
HELP EDITORS TO NOT MAKE MISTAKES
▸ Constraints, constraints, constraints
▸...
TASTY NEOS RECIPES FOR EVERY DAY - NEW RECIPES
DISABLE SESSION TIMEOUT WHILE DEVELOPING
▸ Logging in 20 times a day is a w...
TASTY NEOS RECIPES FOR EVERY DAY - NEW RECIPES
COMPRESS HTML
▸ Use the Neos package flownative/neos-compressor
▸ Removes wh...
TASTY NEOS RECIPES FOR EVERY DAY - NEW RECIPES
ENABLE FLUID AUTOCOMPLETION PT. 1
▸ Modify template
▸ Also helps PHPStorm t...
TASTY NEOS RECIPES FOR EVERY DAY - NEW RECIPES
ENABLE FLUID AUTOCOMPLETION PT. 2
▸ Define „sectionName“ in TypoScript proto...
TASTY NEOS RECIPES FOR EVERY DAY - NEW RECIPES
ENABLE FLUID AUTOCOMPLETION PT. 3
▸ Generate schemas for your own view help...
TASTY NEOS RECIPES FOR EVERY DAY - NEW RECIPES
USE TYPOSCRIPT2 PROTOYPES
▸ Inheritable & extendable modules
# TypoScript/N...
TASTY NEOS RECIPES FOR EVERY DAY - NEW RECIPES
CACHE EVERYTHING
▸ mode = ‚uncached‘ is usually not necessary
# TypoScript/...
SUPER SECRET
BONUS RECIPE
TASTY NEOS RECIPES FOR EVERY DAY - SUPER SECRET BONUS RECIPE
MAKE SCREENCASTS
▸ Proof your features work
▸ Measure the len...
TASTY NEOS RECIPES FOR EVERY DAY - SUPER SECRET BONUS RECIPE
MAKE SCREENCASTS - EXAMPLE WORKFLOW
▸ Go to a quiet room
▸ Us...
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....
TASTY NEOS RECIPES FOR EVERY DAY - BECOME A NEOS CHEF
IT’S OPEN SOURCE
▸ Search
▸ Fork
▸ Learn
▸ Improve
▸ Give back
▸ Com...
TASTY NEOS RECIPES FOR EVERY DAY - BECOME A NEOS CHEF
NEOS IS MAKING THINGS EASY
▸ TypoScript 2 means configurability and r...
ANY QUESTIONS?
THANKS!
@SEBOBO
FEEL FREE TO CONTACT ME
Nächste SlideShare
Wird geladen in …5
×

Tasty Recipes for Every Day 2016 (Neos)

1.064 Aufrufe

Veröffentlicht am

Useful tipps & tricks to build better websites with Neos CMS.
Check out neos.io.

Veröffentlicht in: Technologie
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.064
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
25
Aktionen
Geteilt
0
Downloads
9
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Tasty Recipes for Every Day 2016 (Neos)

  1. 1. TASTY NEOS RECIPES FOR EVERY DAY CREATE BETTER WEBSITES WITH NEOS SEBASTIAN HELZLE - INSPIRING CON 2016
  2. 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. 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. 4. TASTY NEOS RECIPES FOR EVERY DAY - INTRODUCTION AGENDA ▸ A look into the past ▸ Improvements ▸ New recipes ▸ ??? ▸ Become a Neos chef
  5. 5. A LOOK INTO THE PAST
  6. 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. 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. 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. 9. IMPROVEMENTS
  10. 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. 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. 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. 13. NEW RECIPES
  14. 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. 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. 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. 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. 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. 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. 20. TASTY NEOS RECIPES FOR EVERY DAY - NEW RECIPES COMPRESS HTML ▸ Use the Neos package flownative/neos-compressor ▸ Removes whitespace, line endings, etc…
  21. 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. 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. 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. 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. 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. 26. SUPER SECRET BONUS RECIPE
  27. 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. 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. 29. BECOME A NEOS CHEF
  30. 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. 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. 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. 33. ANY QUESTIONS? THANKS!
  34. 34. @SEBOBO FEEL FREE TO CONTACT ME

×