Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Tasty Recipes for Every Day 2016 (Neos)

1,309 views

Published on

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

Published in: Technology
  • Be the first to comment

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

×